/* ... tu CSS ... */
:root{
    --azul-marino:#0b2545;
    --azul-marino-oscuro:#081b34;
    --azul-marino-claro:#153a68;
    --fondo:#ffffff;
    --superficie:#ffffff;
    --superficie-alt:#eef3f6;
    --superficie-modal:#dfeaf1;
    --panel-alt:#eaeff6;
    --cian-radar:#0e7c86;
    --cian-radar-dim: rgba(14,124,134,0.15);
    --ambar-baliza:#c97a00;
    --rojo-babor:#c8433d;
    --verde-estribor:#2f9960;
    --texto-alto:#132339;
    --texto-medio:#57697b;
    --texto-bajo:#98a7b3;
    --borde:rgba(18,37,59,0.12);
    --radio:6px;
    --mono:'JetBrains Mono','SFMono-Regular',Consolas,monospace;
    --sans:'Inter','Segoe UI',system-ui,sans-serif;
  }

  /* ============================================================
     MODO OSCURO (día/noche)
     Se activa agregando la clase "tema-oscuro" al <body> (ver el botón
     en el encabezado). Como casi todo el CSS de la app ya está
     construido sobre estas variables (fondo, superficies, texto,
     bordes), redefinirlas aquí adapta la enorme mayoría de la interfaz
     automáticamente, sin tener que tocar cada regla una por una.
     Los colores de acento (azul marino, cian, ámbar, rojo, verde) se
     mantienen: ya son lo bastante saturados para verse bien también
     sobre fondos oscuros, y son parte de la identidad visual de la app.
     ============================================================ */
  body.tema-oscuro{
    --fondo:#0b1622;
    --superficie:#152436;
    --superficie-alt:#1b2e44;
    --superficie-modal:#152436;
    --panel-alt:#182a3d;
    --texto-alto:#eef3f8;
    --texto-medio:#a9bacb;
    --texto-bajo:#7c8fa3;
    --borde:rgba(255,255,255,0.12);
  }

  *{box-sizing:border-box;}

  /* ---------- Scrollbar moderno, en TODA la app ---------- */
  /* Antes este modelo (fino, con "pastilla" redondeada) solo vivía en
     un par de contenedores puntuales (la tabla principal, los modales
     de lista) y cada uno nuevo se quedaba con el scroll gris de
     fábrica del navegador hasta que alguien se acordaba de agregarlo
     a mano. Puesto acá, sobre el selector universal, lo hereda
     CUALQUIER contenedor con scroll -el Dashboard de Actividad, lo
     que se agregue después- sin tener que acordarse caso por
     caso. Los contenedores que ya tenían su propio estilo más
     específico (sidebar sobre fondo oscuro)
     siguen ganando por especificidad de CSS: esto es solo el valor
     por defecto para todo lo demás. */
  *::-webkit-scrollbar{ width:10px; height:10px; }
  *::-webkit-scrollbar-track{ background:transparent; }
  *::-webkit-scrollbar-thumb{
    background:rgba(18,37,59,0.18);
    border-radius:20px;
    border:2px solid var(--superficie);
  }
  *::-webkit-scrollbar-thumb:hover{ background:rgba(14,124,134,0.4); }
  *{ scrollbar-width:thin; scrollbar-color:rgba(18,37,59,0.2) transparent; }

  /* El navy translúcido de arriba casi no se ve sobre un fondo oscuro:
     en modo noche el "relleno" pasa a blanco translúcido, como ya
     hacía el sidebar (que motivó este mismo criterio). El borde ya es
     theme-aware solo (var(--superficie)), así que no hace falta
     redefinirlo acá. */
  body.tema-oscuro *::-webkit-scrollbar-thumb{ background:rgba(255,255,255,0.16); }
  body.tema-oscuro *::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.28); }
  body.tema-oscuro *{ scrollbar-color:rgba(255,255,255,0.18) transparent; }

  html,body{margin:0;padding:0;height:100%;overflow:hidden;}
  body{
    background:var(--fondo);
    color:var(--texto-alto);
    font-family:var(--sans);
    min-height:100vh;
  }

  .app{
    position:relative;
    z-index:1;
    max-width:100%;
    width:100%;
    margin:0 auto;
    padding:32px 32px 24px;
    height:100vh;
    display:flex;
    flex-direction:column;
  }

  /* ---------- Header ---------- */
  header{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:18px;
    background:#0D3C6E;
    color:#ffffff;
    padding:22px 26px;
    margin-bottom:28px;
    border-radius:10px;
    box-shadow:0 6px 18px rgba(11,37,69,0.12);
    flex-shrink:0;
  }
  .brand{
    display:flex;
    align-items:center;
    gap:14px;
  }
  
  /* ---------- Animación de anillos y colores de la marca ---------- */
  @keyframes rotarAnillo {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }

  @keyframes cambiarColorAnillos {
    0% { border-color: var(--cian-radar); box-shadow: 0 0 5px rgba(14,124,134,0.3); }
    33% { border-color: #6fe4d6; box-shadow: 0 0 10px rgba(111,228,214,0.5); }
    66% { border-color: var(--verde-estribor); box-shadow: 0 0 8px rgba(47,153,96,0.4); }
    100% { border-color: var(--cian-radar); box-shadow: 0 0 5px rgba(14,124,134,0.3); }
  }

  @keyframes cambiarColorInterno {
    0% { border-color: rgba(111,228,214,0.5); }
    50% { border-color: rgba(47,153,96,0.7); }
    100% { border-color: rgba(111,228,214,0.5); }
  }

  .brand-mark{
    width:46px;height:46px;
    border:1.5px solid var(--cian-radar);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    position:relative;
    flex-shrink:0;
    animation: rotarAnillo 10s linear infinite, cambiarColorAnillos 6s ease infinite;
  }
  
  .brand-mark::before{
    content:"";
    position:absolute; inset:8px;
    border:1px solid rgba(111,228,214,0.5);
    border-radius:50%;
    animation: rotarAnillo 6s linear infinite reverse, cambiarColorInterno 4s ease infinite;
  }
  
  .brand-mark span{
    font-family:var(--mono);
    font-size:11px;
    color:#6fe4d6;
    font-weight:600;
  }

  .brand h1{
    margin:0;
    font-size:19px;
    letter-spacing:0.4px;
    font-weight:700;
    color:#ffffff;
  }
  .brand .sub{
    margin:2px 0 0;
    font-family:var(--mono);
    font-size:11.5px;
    color:rgba(255,255,255,0.68);
    letter-spacing:1.5px;
    text-transform:uppercase;
  }
  .status{
    display:flex; align-items:center; gap:8px;
    font-family:var(--mono);
    font-size:12px;
    color:rgba(255,255,255,0.75);
    padding:7px 12px;
    border:1px solid rgba(255,255,255,0.25);
    border-radius:20px;
  }
  .header-right{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
  }
  .fila-tema-status{
    display:flex;
    align-items:center;
    gap:14px;
  }
  .btn-tema{
    display:flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    flex:0 0 auto;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.3);
    background:transparent;
    color:rgba(255,255,255,0.85);
    cursor:pointer;
    transition:background .15s, border-color .15s, color .15s, transform .3s ease;
  }
  .btn-tema:hover{
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.55);
    color:#ffffff;
    transform:scale(1.08) rotate(20deg);
  }
  .user-box{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:rgba(255,255,255,0.85);
  }
  .user-box #nombreUsuarioHeader{
    font-weight:600;
    max-width:160px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .user-box button{
    display:flex;
    align-items:center;
    gap:6px;
    padding:6px 12px;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.3);
    background:transparent;
    color:rgba(255,255,255,0.9);
    font-size:12.5px;
    font-family:var(--sans);
    cursor:pointer;
    transition:background .15s, border-color .15s, color .15s, transform .2s ease;
  }
  .user-box button:hover{
    background:rgba(200,67,61,0.25);
    border-color:var(--rojo-babor);
    color:#ffffff;
    transform:scale(1.05);
  }
  .user-box button:hover svg {
    transform:rotate(-10deg);
  }
  .dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--texto-bajo);
    flex-shrink:0;
  }
  .dot.ok{background:var(--verde-estribor); box-shadow:0 0 8px var(--verde-estribor);}
  .dot.bad{background:var(--rojo-babor); box-shadow:0 0 8px var(--rojo-babor);}
  .dot.wait{background:var(--ambar-baliza); box-shadow:0 0 8px var(--ambar-baliza); animation:pulse 1.4s infinite;}
  @keyframes pulse{0%,100%{opacity:1;}50%{opacity:0.35;}}

  /* ---------- Toolbar ---------- */
  .toolbar{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
    flex-shrink:0;
  }
  .search-wrap{
    position:relative;
    flex:1;
    min-width:240px;
    max-width:420px;
  }
  .toolbar-top{
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    min-width:240px;
  }
  .search-wrap > svg{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    color:var(--texto-bajo);
  }
  #buscar{
    width:100%;
    padding:10px 38px 10px 36px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:var(--radio);
    color:var(--texto-alto);
    font-family:var(--sans);
    font-size:13.5px;
    outline:none;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  #buscar:focus{
    border-color:var(--cian-radar);
    box-shadow:0 0 0 3px var(--cian-radar-dim);
  }
  .limpiar-buscar{
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:26px; height:26px;
    display:none;
    align-items:center; justify-content:center;
    border:none;
    background:transparent;
    color:var(--texto-bajo);
    border-radius:50%;
    cursor:pointer;
    transition:background .15s, color .15s, transform .1s;
  }
  .limpiar-buscar.visible{display:flex;}
  .limpiar-buscar:hover{background:rgba(200,67,61,0.14); color:var(--rojo-babor); transform:translateY(-50%) scale(1.08);}
  #buscar::placeholder{color:var(--texto-bajo);}

  /* ---------- Filtro por carena (select al costado del buscador) ---------- */
  .sr-only{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .filtro-carena-wrap{
    flex-shrink:0;
  }
  /* Este selector va PEGADO al buscador, así que en vez de usar el pill
     grande y redondeado que usan el resto de los filtros (Avance por
     Técnico, Guías, Manuales, Registro), toma la misma forma que el
     campo de búsqueda de al lado: mismo borde fino, mismo radio chico,
     mismo alto -- para que se vean como un mismo conjunto en vez de
     dos estilos distintos uno junto al otro. Conserva los íconos de
     etiqueta + flecha del pill (eso sí se mantiene "moderno"), solo
     cambia el contorno. */
  #filtroCarena{
    height:auto;
    padding:10px 38px 10px 42px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    box-shadow:none;
    font-weight:500;
  }
  #filtroCarena:hover{
    border-color:var(--cian-radar);
    background-color:transparent;
  }
  #filtroCarena:focus{
    border-color:var(--cian-radar);
    box-shadow:0 0 0 3px var(--cian-radar-dim);
  }

  /* ---------- Layout: Botonera Lateral (Sidebar) ---------- */
  .app-body{
    display:flex;
    flex:1;
    min-height:0;
    gap:24px;
    align-items:stretch;
    position:relative; /* contexto para que el sidebar flote encima sin empujar el contenido */
  }
  .main-content{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
    /* El sidebar ahora es "position:absolute" (flota encima, no empuja
       el layout): este margen reserva visualmente el mismo espacio que
       antes ocupaba en flujo normal cuando está contraído (72px de
       ancho + 24px del "gap" que tenía app-body), para que el
       contenido no quede tapado detrás de él. */
    margin-left:96px;
  }
  .contador-container{
    margin-left:auto;
    display:flex;
    align-items:center;
  }
  .toolbar-acciones{
    display:flex;
    align-items:center;
    gap:10px;
    flex-shrink:0;
    margin-left:auto;
  }

  .toolbar-right{
    position:absolute;
    top:0; left:0;
    height:100%;
    z-index:20; /* por encima del contenido principal, ya que ahora flota */
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:10px;
    width:220px;
    flex-shrink:0;
    overflow-y:auto;
    overflow-x:hidden;
    background-color:#0D3C6E; /* Mismo color del encabezado */
    padding:18px; /* Espaciado interno para que respire */
    border-radius:10px; /* Bordes redondeados como el encabezado */
    box-shadow:0 6px 18px rgba(11,37,69,0.12);
    transition:width .8s ease, padding .8s ease;
  }
  /* Scroll delgado y discreto (mismo criterio que .tabla-scroll) en vez del scroll gris grueso por defecto del navegador. Acá
     el thumb es blanco translúcido en vez de oscuro, porque el fondo
     del sidebar es azul marino oscuro -- un thumb oscuro sería
     invisible sobre ese fondo. */
  .toolbar-right::-webkit-scrollbar{ width:6px; }
  .toolbar-right::-webkit-scrollbar-track{ background:transparent; }
  .toolbar-right::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,0.18);
    border-radius:10px;
  }
  .toolbar-right::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,0.32); }
  .toolbar-right{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,0.18) transparent; }
  .toolbar-right .btn{
    justify-content:flex-start;
    padding:12px 16px;
    background:transparent;
    border:none;
    box-shadow:none;
    color:rgba(255, 255, 255, 0.85);
    transition:background .15s, color .15s, justify-content .8s ease, padding .8s ease;
  }
  .toolbar-right .btn:hover{
    background:rgba(255, 255, 255, 0.1);
    color:#ffffff;
  }
  .toolbar-right .btn-primary{
    justify-content:flex-start;
    margin-bottom:12px;
    color:#6fe4d6; /* Resalta un poco el botón principal en cian */
  }
  .toolbar-right .btn .etiqueta{
    white-space:nowrap;
    overflow:hidden;
    display:inline-block;
    opacity:1;
    max-width:200px;
    /* display:none (como estaba antes) no se puede animar: el texto
       aparecía/desaparecía de golpe, fuera de sincro con el ancho del
       sidebar que sí se movía suave -- por eso se sentía "rápido"
       aunque la duración ya fuera larga. Con opacity + max-width el
       texto se desvanece/desliza en el mismo tiempo que el resto. */
    transition:opacity .8s ease, max-width .8s ease;
  }
  .toolbar-right .btn svg{
    flex-shrink:0;
    transition:width .8s ease, height .8s ease;
  }

  /* ---------- Estado contraído: solo íconos, un poco más grandes ---------- */
  .toolbar-right.contraido{
    width:72px;
    padding:18px 10px;
  }
  .toolbar-right.contraido .btn{
    justify-content:center;
    padding:12px 0;
  }
  .toolbar-right.contraido .btn .etiqueta{
    opacity:0;
    max-width:0;
  }
  .toolbar-right.contraido .btn svg{
    width:20px;
    height:20px;
  }

  /* ---------- Botón hamburguesa (solo pantallas chicas) ---------- */
  .btn-hamburguesa{
    display:none;
    align-items:center; justify-content:center;
    width:38px; height:38px;
    flex-shrink:0;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:var(--superficie);
    color:var(--texto-alto);
    cursor:pointer;
    transition:background .15s, border-color .15s, transform .2s ease;
  }
  .btn-hamburguesa:hover{background:rgba(169,195,214,0.30); border-color:var(--cian-radar); transform:scale(1.06);}
  .btn-hamburguesa:hover svg { transform:rotate(-10deg); }
  
  .contador{
    font-family:var(--mono);
    font-size:12px;
    color:var(--texto-medio);
    white-space:nowrap;
  }
  .contador b{color:var(--cian-radar);}

  /* ---------- Hover en Botones ---------- */
  button{font-family:var(--sans); cursor:pointer;}
  .btn{
    display:inline-flex; align-items:center; gap:7px;
    padding:10px 16px;
    border-radius:var(--radio);
    font-size:13.5px;
    font-weight:600;
    border:1px solid transparent;
    transition:transform .2s ease, filter .15s, background .15s, box-shadow .2s ease;
    white-space:nowrap;
  }
  
  .btn:hover {
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(11, 37, 69, 0.15);
  }

  .btn:hover svg, .icon-btn:hover svg {
    transform: rotate(-12deg) scale(1.1);
    transition: transform 0.2s ease;
  }

  .btn svg, .icon-btn svg, .user-box button svg, .btn-hamburguesa svg {
    transition: transform 0.2s ease;
  }

  .btn:active{transform:scale(0.97);}
  
  .btn-primary{
    background:var(--cian-radar);
    color:#ffffff;
  }
  .btn-primary:hover{filter:brightness(1.08);}
  
  .btn-danger{
    background:var(--rojo-babor);
    color:#ffffff;
  }
  .btn-danger:hover{filter:brightness(1.08);}
  
  .btn-ghost{
    background:transparent;
    border-color:var(--borde);
    color:var(--texto-alto);
  }
  .btn-ghost:hover{border-color:var(--cian-radar); color:var(--cian-radar); background:var(--cian-radar-dim);}

  .btn-amarillo{
    background:#fdf1c4;
    border-color:#f3dd8a;
    color:#7a5c00;
  }
  .btn-amarillo:hover{
    background:#f9de6b;
    border-color:#e8c542;
    color:#5c4400;
    filter:brightness(1.03);
  }

  /* ---------- Tabla ---------- */
  .panel{
    background:var(--superficie);
    border:1px solid rgba(11,37,69,0.14);
    border-radius:8px;
    overflow:hidden;
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    box-shadow:0 1px 3px rgba(11,37,69,0.08);
  }
  .tabla-scroll{
    overflow:auto;
    flex:1;
    min-height:0;
    -webkit-overflow-scrolling:touch;
  }
  .tabla-scroll::-webkit-scrollbar{width:10px; height:10px;}
  .tabla-scroll::-webkit-scrollbar-track{background:transparent;}
  .tabla-scroll::-webkit-scrollbar-thumb{
    background:rgba(18,37,59,0.18);
    border-radius:20px;
    border:2px solid #ffffff;
  }
  .tabla-scroll::-webkit-scrollbar-thumb:hover{background:rgba(14,124,134,0.4);}
  .tabla-scroll{scrollbar-width:thin; scrollbar-color:rgba(18,37,59,0.2) transparent;}

  table{
    width:100%;
    border-collapse:collapse;
    font-size:12px;
    table-layout:auto;
  }
  /* Columnas de la tabla principal (14 en total, en este orden):
       1 Carena · 2 OT · 3 Pesquera · 4 Fecha inicio · 5 Fecha fin · 6 E/P ·
       7 Equipo · 8 Marca · 9 Modelo · 10 Serie · 11 Placa · 12 Avance % ·
       13 Observaciones · 14 Acciones
     (Estas reglas estaban corridas una posición desde que se quitó la
     columna "Item": Observaciones heredaba el ancho de Avance y era
     Acciones la que recibía el ancho de 200px.) */
  .panel table th:nth-child(1), .panel table td:nth-child(1){ min-width:70px; max-width:90px; }
  .panel table th:nth-child(2), .panel table td:nth-child(2){ min-width:80px; max-width:115px; }
  .panel table th:nth-child(3), .panel table td:nth-child(3){ min-width:130px; max-width:190px; }
  .panel table th:nth-child(4), .panel table td:nth-child(4){ min-width:95px; max-width:110px; }
  .panel table th:nth-child(5), .panel table td:nth-child(5){ min-width:95px; max-width:110px; }
  .panel table th:nth-child(6), .panel table td:nth-child(6){ min-width:90px; max-width:120px; }
  .panel table th:nth-child(7), .panel table td:nth-child(7){ min-width:170px; max-width:230px; }
  .panel table th:nth-child(8), .panel table td:nth-child(8){ min-width:95px; max-width:140px; }
  .panel table th:nth-child(9), .panel table td:nth-child(9){ min-width:100px; max-width:150px; }
  .panel table th:nth-child(10), .panel table td:nth-child(10){ min-width:85px; max-width:115px; }
  .panel table th:nth-child(11), .panel table td:nth-child(11){ min-width:85px; max-width:115px; }
  .panel table th:nth-child(12), .panel table td:nth-child(12){ min-width:90px; max-width:100px; text-align:center; }
  .panel table th:nth-child(13), .panel table td:nth-child(13){ min-width:200px; max-width:360px; }
  .panel table th:nth-child(14), .panel table td:nth-child(14){ max-width:90px; }
  .panel table td:nth-child(1), .panel table td:nth-child(2), .panel table td:nth-child(3), .panel table td:nth-child(4), .panel table td:nth-child(5), .panel table td:nth-child(6), .panel table td:nth-child(7), .panel table td:nth-child(8), .panel table td:nth-child(9), .panel table td:nth-child(10), .panel table td:nth-child(11){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
  /* Observaciones: SIEMPRE en una sola línea. Si el texto es más largo
     que la columna se recorta con "…" (el texto completo se ve al pasar
     el mouse, ver atributo title de la celda) en vez de desbordarse o
     hacer crecer la altura de la fila. Los saltos de línea que tenga
     el texto guardado se muestran como espacios. */
  .panel table td.obs-cell{
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    text-align:left;
    text-decoration:none;
  }

  /* ---------- Tabla principal en resoluciones de laptop ----------
     Entre el layout de escritorio (arriba) y el de tarjetas de móvil
     (max-width:768px) hay un rango muy común -laptops de 13"/14", ej.
     1280x800, 1366x768, 1440x900, 1536x864- donde las 14 columnas con
     sus anchos mínimos de escritorio no alcanzan a entrar y la tabla
     quedaba con scroll horizontal interno permanente.
     Aquí se cambia a table-layout:fixed con anchos en PORCENTAJE: a
     diferencia de table-layout:auto (que puede desbordar el contenedor
     si el contenido -sobre todo el texto de los encabezados- no cabe),
     fixed + porcentajes garantiza que la suma de columnas nunca exceda
     el ancho disponible, recortando el texto que no entre con "…" en
     vez de forzar scroll. */
  @media (max-width:1600px) and (min-width:769px){
    .panel table{ font-size:11px; table-layout:fixed; }
    .panel thead th{
      padding:9px 6px;
      font-size:10px;
      overflow:hidden;
      text-overflow:ellipsis;
    }
    .panel tbody td{ padding:7px 8px; }

    .panel table th:nth-child(1),  .panel table td:nth-child(1) { width:5%; min-width:0; max-width:none; } /* Carena */
    .panel table th:nth-child(2),  .panel table td:nth-child(2) { width:6%; min-width:0; max-width:none; } /* OT */
    .panel table th:nth-child(3),  .panel table td:nth-child(3) { width:7%; min-width:0; max-width:none; } /* Pesquera */
    .panel table th:nth-child(4),  .panel table td:nth-child(4) { width:7%; min-width:0; max-width:none; } /* Fecha inicio */
    .panel table th:nth-child(5),  .panel table td:nth-child(5) { width:7%; min-width:0; max-width:none; } /* Fecha fin */
    .panel table th:nth-child(6),  .panel table td:nth-child(6) { width:6%; min-width:0; max-width:none; } /* E/P */
    .panel table th:nth-child(7),  .panel table td:nth-child(7) { width:11%; min-width:0; max-width:none; } /* Equipo */
    .panel table th:nth-child(8),  .panel table td:nth-child(8) { width:6%; min-width:0; max-width:none; } /* Marca */
    .panel table th:nth-child(9),  .panel table td:nth-child(9) { width:7%; min-width:0; max-width:none; } /* Modelo */
    .panel table th:nth-child(10), .panel table td:nth-child(10){ width:6%; min-width:0; max-width:none; } /* Serie */
    .panel table th:nth-child(11), .panel table td:nth-child(11){ width:6%; min-width:0; max-width:none; } /* Placa */
    .panel table th:nth-child(12), .panel table td:nth-child(12){ width:7%; min-width:0; max-width:none; } /* Avance % */
    .panel table th:nth-child(13), .panel table td:nth-child(13){ width:11%; min-width:0; max-width:none; } /* Observaciones */
    .panel table th:nth-child(14), .panel table td:nth-child(14){ width:8%; min-width:0; max-width:none; } /* Acciones */
    /* Anchos por columna (suman 100%). Observaciones es la segunda más
       ancha después de Equipo y va siempre en una sola línea con "…"
       (regla .obs-cell de arriba). Los anchos anteriores estaban
       corridos una columna desde que se quitó "Item" y dejaban a
       Observaciones con solo el 7%, con el texto desbordándose hacia
       las celdas vecinas. */
    .panel table td.obs-cell{
      display:table-cell;
      -webkit-line-clamp:unset;
    }
  }
  thead{
    position:sticky;
    top:0;
    z-index:2;
    background:#0D3C6E;
  }
  thead th{
    text-align:center;
    padding:11px 12px;
    background:transparent;
    color:#ffffff;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    font-weight:600;
    border-bottom:1px solid rgba(11,37,69,0.18);
    white-space:nowrap;
  }
  tbody td{
    padding:9px 16px 9px 12px;
    border-bottom:1px solid rgba(11,37,69,0.07);
    color:var(--texto-alto);
    vertical-align:middle;
    text-decoration:none;
  }
  tbody tr{transition:background .12s;}
  tbody tr:nth-child(even){background:rgba(169,195,214,0.30);}
  tbody tr:hover{background:rgba(169,195,214,0.50);}
  tbody tr:last-child td{border-bottom:none;}

  /* El mismo color/opacidad que se ve como una franja celeste sutil
     sobre fondo blanco (modo día) resalta mucho más sobre un fondo
     oscuro (modo noche) -- ahí se reduce la opacidad para que la
     franja alternada se note lo suficiente para diferenciar filas,
     sin verse como un color tan cargado/exagerado. */
  body.tema-oscuro tbody tr:nth-child(even){background:rgba(169,195,214,0.10);}
  body.tema-oscuro tbody tr:hover{background:rgba(169,195,214,0.18);}

  td.num{font-family:var(--mono); color:var(--texto-medio); width:1%;}
  td.equipo-nombre{font-weight:600; text-decoration:none;}
  .tabla-componentes-wrap td.componente-nombre{font-weight:600;}

  /* Columna "Avance %" del módulo Componentes: se ajusta al tamaño de
     su contenido (el badge tipo "65%") en vez de estirarse de más.
     Solo aplica en la vista de tabla (escritorio/tablet); en el modo
     tarjetas de móvil cada campo debe ocupar el 100% de la fila. */
  @media (min-width:769px){
    .tabla-componentes-wrap th.col-avance-componente,
    .tabla-componentes-wrap td.col-avance-componente{
      width:1% !important;
      white-space:nowrap !important;
      text-align:center;
    }
  }
  .badge-ep{
    display:inline-block;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.5px;
    padding:3px 8px;
    border-radius:4px;
    background:var(--cian-radar-dim);
    color:var(--cian-radar);
    border:1px solid rgba(14,124,134,0.3);
  }
  .placa-tag{
    font-family:var(--mono);
    font-size:11px;
    color:var(--ambar-baliza);
  }
  .serie-tag{font-family:var(--mono); font-size:11px; color:var(--texto-medio);}
  .fecha-tag{font-family:var(--mono); font-size:11.5px; color:var(--texto-alto);}
  .sin-fecha{color:var(--texto-bajo);}
  .avance-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:46px;
    padding:3px 9px;
    border-radius:20px;
    font-family:var(--mono);
    font-size:11px;
    font-weight:600;
    background:var(--panel-alt);
    color:var(--texto-medio);
    border:1px solid var(--borde);
    transition:background .15s, color .15s, border-color .15s, transform .15s;
    cursor:default;
  }
  .avance-badge.avance-completo{
    background:rgba(47,153,96,0.12);
    color:var(--verde-estribor);
    border-color:rgba(47,153,96,0.4);
  }
  .avance-badge:hover{
    background:rgba(201,122,0,0.14);
    color:var(--ambar-baliza);
    border-color:rgba(201,122,0,0.5);
    transform:scale(1.06);
  }

  /* ---------- Módulo Guías ---------- */
  .hora-guia{
    display:inline-block;
    margin-left:4px;
    font-family:var(--mono);
    font-size:11px;
    color:var(--texto-medio);
  }
  .enlace-archivo-guia{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    border-radius:20px;
    background:var(--cian-radar-dim);
    color:var(--cian-radar);
    font-size:12px;
    font-weight:600;
    text-decoration:none;
    border:1px solid transparent;
    transition:border-color .15s ease, background .15s ease;
    white-space:nowrap;
  }
  .enlace-archivo-guia:hover{
    border-color:var(--cian-radar);
    background:rgba(14,124,134,0.22);
  }

  .badge-rol{
    display:inline-block;
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.5px;
    padding:3px 8px;
    border-radius:20px;
    background:var(--panel-alt);
    color:var(--texto-medio);
    border:1px solid var(--borde);
  }
  .badge-rol-admin{
    background:rgba(201,122,0,0.14);
    color:var(--ambar-baliza);
    border-color:rgba(201,122,0,0.5);
  }

  .acciones{display:flex; gap:6px; justify-content:flex-end;}
  .icon-btn{
    width:30px;height:30px;
    border-radius:5px;
    border:1px solid var(--borde);
    background:transparent;
    display:flex; align-items:center; justify-content:center;
    color:var(--texto-medio);
    transition:all .2s ease;
  }
  .icon-btn:hover{
    border-color:var(--cian-radar); 
    color:var(--cian-radar); 
    background:var(--cian-radar-dim);
    transform:scale(1.12);
  }
  .icon-btn.del:hover{
    border-color:var(--rojo-babor); 
    color:var(--rojo-babor); 
    background:rgba(224,85,79,0.1);
  }

  .empty-row td{
    text-align:center;
    padding:48px 20px;
    color:var(--texto-bajo);
    font-family:var(--mono);
    font-size:13px;
  }

  /* ---------- Modal ---------- */
  .overlay {
    position: fixed; inset: 0;
    background: rgba(11,37,69,0.55);
    backdrop-filter: blur(3px);
    display: flex;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    align-items: center; justify-content: center;
    /* Los modales deben quedar SIEMPRE por encima de cualquier elemento
       de navegación (sidebar, botón hamburguesa, su fondo oscuro), que
       en móvil llegan hasta z-index:95 — ver el bloque "FIX RESPONSIVE
       SIDEBAR / DRAWER" más abajo. Por eso el z-index de los modales
       arranca en 150, muy por encima de ese máximo. */
    z-index: 150;
    padding: 20px;
    transition: opacity 0.5s ease, visibility 0.5s ease;
  }
  
  .overlay.abierto {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Jerarquía de apilado entre modales anidados: por defecto, dos
     overlays con el mismo z-index se ordenan según su posición en el
     HTML (el que aparece más abajo en el documento queda encima). Eso
     rompía el caso de abrir "Componentes" desde dentro de
     "Observaciones" (Componentes está antes en el HTML), dejándolo
     tapado. Se sube su z-index explícitamente para que siempre quede
     por encima de cualquier otro módulo del que pueda abrirse anidado,
     y el formulario de Nuevo/Editar componente por encima de ambos.
     (Los valores conservan la misma separación que antes, solo
     desplazados +100 junto con el resto de los modales.) */
  #overlayComponentes.abierto{ z-index:155; }
  #overlayComponenteForm.abierto{ z-index:160; }
  #overlayAvancePorEquipo.abierto{ z-index:155; }
  #overlayGuias.abierto{ z-index:155; }
  #overlayGuiaForm.abierto{ z-index:160; }

  /* Los diálogos de confirmación (eliminar, cerrar sesión) deben quedar
     siempre por encima de cualquier módulo desde el que se abran,
     incluido "Componentes" ya elevado arriba. */
  #overlayEliminar.abierto{ z-index:190; }
  #overlayLogout.abierto{ z-index:190; }

  .modal {
    background: var(--superficie-modal);
    border: 1px solid var(--borde);
    border-radius: 10px;
    width: 100%; max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(11,37,69,0.25);
    opacity: 0;
    transform: scale(0.95) translateY(10px);
    transition: transform 0.5s ease-out, opacity 0.5s ease-out;
  }
  
  .overlay.abierto .modal {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  
  .modal-confirm { max-width: 400px; }
  .confirm-texto {
    margin: 0;
    color: var(--texto-alto);
    font-size: 14px;
    line-height: 1.55;
  }

  .modal-head{
    display:flex; justify-content:space-between; align-items:center;
    padding:18px 22px;
    background:#0D3C6E;
    color:#ffffff;
    border-radius:10px 10px 0 0;
  }
  .modal-head h2{margin:0; font-size:16px; font-weight:700; color:#ffffff;}
  .modal-head .sub{font-family:var(--mono); font-size:11px; color:rgba(255,255,255,0.68); margin-top:2px; text-transform:uppercase; letter-spacing:1px;}
  
  .cerrar-x{
    width:30px;height:30px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,0.3);
    background:transparent;
    color:rgba(255,255,255,0.85);
    display:flex;align-items:center;justify-content:center;
    transition: all 0.2s ease;
  }
  .cerrar-x:hover{
    color:#ffffff; 
    border-color:var(--rojo-babor); 
    background:var(--rojo-babor);
    transform: scale(1.1) rotate(90deg);
  }
  
  .modal-body{padding:20px 22px;}
  .campo{margin-bottom:13px;}
  .campo label{
    display:block;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:var(--texto-medio);
    margin-bottom:6px;
  }

  /* ---------- CAMPOS DE TEXTO RESALTADOS AL SELECCIONAR ---------- */
  .campo input, .campo textarea, .campo select {
    width:100%;
    padding:10px 12px;
    background:var(--superficie);
    border:1.5px solid var(--borde);
    border-radius:5px;
    color:var(--texto-alto);
    font-size:14px;
    outline:none;
    transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }

  .campo input:focus, .campo textarea:focus, .campo select:focus {
    border-color: var(--cian-radar);
    box-shadow: 0 0 0 3px var(--cian-radar-dim);
    background-color: var(--superficie);
  }
  /* ------------------------------------------------------------- */

  /* Campos bloqueados (de solo lectura): fondo gris y cursor
     "no permitido" para que sea evidente que no se pueden editar. */
  .campo input:disabled, .campo textarea:disabled, .campo select:disabled {
    background:var(--panel-alt);
    color:var(--texto-medio);
    cursor:not-allowed;
    border-color:var(--borde);
  }

  .campo textarea{resize:vertical;font-family:inherit;}

  /* Campo de fecha y hora automática (readonly, no disabled: se sigue
     leyendo con JS con normalidad, solo no se puede escribir en él). */
  .campo input.campo-solo-lectura{
    background:var(--panel-alt);
    color:var(--texto-medio);
    cursor:default;
    font-family:var(--mono);
    font-size:13px;
  }
  .campo-ayuda{
    margin:6px 2px 0;
    font-size:11.5px;
    color:var(--texto-medio);
    line-height:1.4;
  }

  .campo select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:38px;
    background-color:var(--superficie);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:14px;
    font-weight:500;
    cursor:pointer;
  }
  .campo select option{padding:10px;}

  /* El navegador SÍ hereda el "color" del texto desde el <select> hacia
     sus <option>, pero el "background-color" NO se hereda (no es una
     propiedad heredable en CSS). Eso hacía que, en modo oscuro, el
     <select> quedara con texto claro (heredado de --texto-alto) pero el
     menú desplegable de <option> conservara el fondo blanco por defecto
     del navegador — texto claro sobre blanco, invisible. Se fijan ambos
     valores explícitamente aquí (en vez de depender de la herencia) para
     que el desplegable sea siempre legible Y además siga el tema activo:
     estas mismas variables ya están redefinidas para modo oscuro más
     arriba, así que el fondo del menú es claro en modo día y oscuro en
     modo noche, igual que el resto de la interfaz. */
  .campo select option,
  .componentes-toolbar .filtro-select option,
  .filtro-select-icono option,
  #filtroCarena option,
  .registro-toolbar select option{
    background-color:var(--superficie);
    color:var(--texto-alto);
  }
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
  .grid3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
  
  .modal-foot{
    display:flex; justify-content:flex-end; gap:10px;
    padding:16px 22px;
    border-top:1px solid var(--borde);
  }

  .modal-foot .btn-cerrar-modal {
    display: none !important;
  }

  #btnCerrarComponenteFormFoot {
    display: inline-flex !important;
  }

  /* El formulario de Guías (nueva/editar) también necesita su botón
     "Cancelar" visible en el pie, igual que el de Componente arriba —
     mismo motivo: es un formulario donde conviene un botón explícito
     para salir sin guardar, no solo la "✕" del encabezado. */
  #btnCancelarGuiaForm {
    display: inline-flex !important;
  }

  .error-msg{
    color:var(--rojo-babor);
    font-size:12.5px;
    font-family:var(--mono);
    margin-top:-8px;
    margin-bottom:14px;
    display:none;
  }

  /* ---------- Toast ---------- */
  .toast{
    position:fixed; bottom:24px; right:24px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-left:3px solid var(--verde-estribor);
    padding:13px 18px;
    border-radius:6px;
    font-size:13.5px;
    color:var(--texto-alto);
    box-shadow:0 10px 30px rgba(11,37,69,0.18);
    /* Por encima de todos los modales (máximo 190) para que la
       notificación siga visible aunque se dispare con un modal abierto. */
    z-index:200;
    transform:translateY(20px);
    opacity:0;
    pointer-events:none;
    transition:transform .25s, opacity .25s;
  }
  .toast.mostrar{transform:translateY(0); opacity:1;}
  .toast.error{border-left-color:var(--rojo-babor);}

  /* La alerta de "nueva observación" SÍ es clickeable (onclick, role=
     "button"): a diferencia del toast genérico de éxito/error (que
     solo se ve, nunca se toca), esta necesita pointer-events:auto al
     mostrarse. Sin esto, el clic atraviesa el toast hacia lo que haya
     debajo (la tabla, un botón, etc.) y nunca llega a activarse —
     el toast se ve perfectamente bien, pero es 100% inclickeable. */
  .toast-observacion.mostrar{ pointer-events:auto; }

  /* Alerta de "nueva observación de otro usuario": misma base visual
     que el toast normal, pero más ancha, con ícono, y ubicada arriba de
     éste (bottom:96px en vez de 24px) para que ambas puedan convivir en
     pantalla sin superponerse si llegan a coincidir. Borde cian (no
     verde) para distinguirla de un mensaje de "guardado con éxito". */
  .toast-observacion{
    bottom:96px;
    left:auto;
    max-width:360px;
    display:flex;
    align-items:flex-start;
    gap:11px;
    border-left-color:var(--cian-radar);
    cursor:pointer;
  }
  .toast-observacion svg{
    flex-shrink:0;
    color:var(--cian-radar);
    margin-top:1px;
  }
  .toast-observacion-texto{
    display:flex;
    flex-direction:column;
    gap:2px;
    min-width:0;
  }
  .toast-observacion-texto strong{
    font-size:13px;
    color:var(--texto-alto);
  }
  .toast-observacion-texto span{
    font-size:12.5px;
    color:var(--texto-medio);
    line-height:1.4;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
  }
  .toast-observacion:hover{
    border-left-color:var(--cian-radar);
    box-shadow:0 12px 34px rgba(11,37,69,0.24);
    transform:translateY(-2px);
  }

  @media (max-width:640px){
    .toast-observacion{
      left:12px; right:12px; max-width:none;
      bottom:80px;
    }
  }

  @media (max-width:640px){
    .overlay{padding:10px;}
    .modal-body{padding:14px;}
    .grid2, .grid3{grid-template-columns:1fr;}
    header{align-items:flex-start;}

    /* Solo en responsive: el botón "Salir" queda fijo arriba a la
       derecha, a la misma altura que "BD conectado", y el nombre
       del usuario se ubica debajo del estado de conexión. */
    .header-right{
      position:relative;
      width:100%;
      flex-direction:column;
      align-items:stretch;
      gap:8px;
    }
    .status{
      width:fit-content;
    }
    .user-box{
      flex-direction:column;
      align-items:flex-start;
      gap:4px;
      width:100%;
    }
    .user-box #nombreUsuarioHeader{
      max-width:calc(100% - 90px);
    }
    .user-box button{
      position:absolute;
      top:0;
      right:0;
    }

    .toolbar{flex-direction:column; align-items:stretch; gap:10px;}
    /* El apilado de .toolbar-top / .search-wrap / .filtro-carena-wrap /
       #filtroCarena ya se resuelve arriba, en el breakpoint de 768px
       compartido con el resto de la app. */

    /* Icono hamburguesa y total de registros en la misma fila */
    .toolbar-acciones{
      width:100%;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .contador-container{margin-left:0;}

    .btn-hamburguesa{display:flex;}

    /* Fondo oscuro detrás del panel para indicar que es un menú
       superpuesto. Se mantiene siempre presente pero invisible
       (opacity 0) para poder animar su aparición junto al panel. */
    body::after{
      content:'';
      position:fixed;
      inset:0;
      background:rgba(8,27,52,0.45);
      z-index:30;
      opacity:0;
      pointer-events:none;
      transition:opacity .35s ease;
    }
    body.menu-movil-abierto::after{
      opacity:1;
      pointer-events:auto;
    }

    /* En móvil el sidebar es un cajón oculto por defecto (fuera de
       pantalla): a diferencia de escritorio, acá NO debe reservarse
       ningún espacio fijo para él en el contenido. */
    .main-content{
      margin-left:0;
    }

    /* El menú se abre como un panel tipo "cajón" desde la izquierda,
       ocupando el 50% de la pantalla, con una animación de deslizamiento
       suave. Se ve igual que el sidebar de escritorio: mismo fondo azul
       marino y botones, así siempre queda visible sin importar cuánto
       ocupe la tabla de abajo. */
    .toolbar-right{
      position:fixed;
      top:0;
      left:0;
      bottom:0;
      width:50%;
      max-width:50%;
      margin-top:0;
      border-radius:0;
      z-index:40;
      overflow-y:auto;
      transform:translateX(-100%);
      transition:transform .35s ease;
      box-shadow:10px 0 30px rgba(11,37,69,0.35);
      pointer-events:none;
    }
    .toolbar-right.abierto{
      transform:translateX(0);
      pointer-events:auto;
    }
    .toolbar-right .btn{width:100%; justify-content:flex-start;}

    /* En móvil el sidebar se abre/cierra con el botón hamburguesa y
       siempre presenta todos los botones (ícono + texto), tal como
       se ve en el sidebar de escritorio expandido. El estado
       "contraido" no aplica aquí (no hay modo ícono-solo en móvil). */
    .toolbar-right.contraido{width:50%; max-width:50%;}
    .toolbar-right.contraido .btn{justify-content:flex-start; padding:12px 16px;}
    .toolbar-right.contraido .btn .etiqueta{display:inline; opacity:1; max-width:200px;}
    .toolbar-right.contraido .btn svg{width:16px; height:16px;}
  }

  /* ---------- Modal de Componentes del equipo ---------- */
  .fila-clic{cursor:pointer;}
  .modal-ancho{max-width:1040px;}

  /* Observaciones tiene una columna extra (Equipo), necesita más ancho
     para que la tabla se vea completa sin necesitar scroll horizontal. */
  .modal-observaciones{max-width:1320px;}

  /* "Avance por Técnico" es distinto: solo muestra UN técnico a la vez,
     con una tabla de ancho FIJO (700px, ver .grupo-tecnico más abajo),
     así que el modal tampoco debe estirarse siempre a 1320px como
     Observaciones (que sí necesita todo ese ancho para su tabla
     completa). Se anula el "width:100%" heredado y se usa un ancho
     fijo propio, un poco mayor que la tarjeta interna para dejarle
     margen (padding del modal): así el modal no cambia de tamaño al
     pasar de un técnico a otro. */
  @media (min-width:769px){
    .modal-ajustable{
      width:750px;
    }
    /* Guías: a diferencia de Observaciones (que sí necesita el ancho
       completo para su tabla de muchas columnas con texto largo), la
       de Guías queda mucho más prolija ajustándose a su contenido real
       en vez de estirarse siempre a 1320px. Se aplica solo dentro de
       #guiasWrap (por id, no por la clase compartida) para no afectar
       ninguna otra tabla que use el mismo wrapper. */
    .modal-guias-ajustable{
      width:fit-content;
      min-width:560px;
      max-width:96vw;
    }
    #guiasWrap table{
      width:auto;
      max-width:100%;
      table-layout:auto;
    }
    #guiasWrap th, #guiasWrap td{ white-space:nowrap !important; }

    /* Mismo criterio que Guías, para la tabla de Manuales. */
    .modal-manuales-ajustable{
      width:fit-content;
      min-width:560px;
      max-width:96vw;
    }
    #manualesWrap table{
      width:auto;
      max-width:100%;
      table-layout:auto;
    }
    #manualesWrap th, #manualesWrap td{ white-space:nowrap !important; }
    /* Empresa y Observaciones sí pueden tener texto largo: se dejan
       partir en varias líneas en vez de estirar toda la tabla para
       que quepan en una sola. */
    #guiasWrap td:nth-child(2), #guiasWrap td:nth-child(6){ white-space:normal !important; }

    /* La columna "Acciones" solo contiene dos botones de ícono, sin
       texto: con table-layout:auto el navegador a veces la colapsa a
       0px (no tiene contenido de texto del que tomar una referencia de
       ancho), dejando los botones ahí adentro con tamaño cero e
       imposibles de tocar/clickear aunque se vean bien en el HTML. Se
       le fuerza un ancho mínimo explícito para que nunca colapse. */
    #guiasWrap th:last-child, #guiasWrap td:last-child{
      min-width:78px !important;
      width:78px !important;
    }
    #guiasWrap .acciones{ min-width:66px; }
  }

  @media (max-width:900px){
    .modal-ancho{max-width:96vw;}
    .modal-body{padding:16px;}

    /* El encabezado de cada módulo (título + botón cerrar) queda fijo
       arriba mientras se hace scroll dentro del modal, ya que .modal
       es el contenedor que scrollea. */
    .modal-head{
      position:sticky;
      top:0;
      z-index:20;
    }
  }

  /* ---------- Modal Datos (catálogos Técnico a cargo / Estado) ---------- */
  .modal-datos-menu{max-width:480px;}
  .modal-catalogo{max-width:480px;}
  /* El formulario de embarcación quedó con solo 5 campos cortos
     (Pesquera, E/P, Equipo, Marca, Modelo) desde que se quitaron Serie
     y Placa -- con el ancho base de .modal (520px) los campos se veían
     desproporcionadamente anchos para textos cortos como nombres de
     pesquera o códigos de embarcación. */
  .modal-embarcacion-form{max-width:420px;}

  /* Menú principal: tarjetas de acceso a cada catálogo */
  .datos-accesos{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .datos-acceso{
    display:flex;
    align-items:center;
    gap:14px;
    width:100%;
    padding:14px 16px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:10px;
    text-align:left;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .datos-acceso:hover{
    border-color:var(--cian-radar);
    background:var(--cian-radar-dim);
    transform:translateY(-1px);
  }
  .datos-acceso-icono{
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    width:44px;
    height:44px;
    border-radius:50%;
    background:var(--cian-radar-dim);
    color:var(--cian-radar);
  }
  .datos-acceso-contenido{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    min-width:0;
  }
  .datos-acceso-contenido strong{
    font-size:14px;
    color:var(--texto-alto);
  }
  .datos-acceso-contenido small{
    font-size:12px;
    color:var(--texto-medio);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .datos-acceso-flecha{
    flex-shrink:0;
    font-size:20px;
    line-height:1;
    color:var(--texto-bajo);
    transition:transform .15s ease, color .15s ease;
  }
  .datos-acceso:hover .datos-acceso-flecha{
    color:var(--cian-radar);
    transform:translateX(3px);
  }

  /* Pantalla de catálogo (Técnicos / Estados): resumen, formulario de
     alta y lista con encabezado tipo tabla, en el mismo lenguaje visual
     que el resto de módulos de la app. */
  .catalogo-resumen{
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
    padding:12px 14px;
    margin-bottom:16px;
    background:var(--panel-alt);
    border:1px solid var(--borde);
    border-radius:8px;
  }
  .catalogo-resumen strong{
    margin-left:8px;
    font-size:14px;
    color:var(--texto-alto);
  }
  .catalogo-etiqueta{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:var(--cian-radar);
  }
  .catalogo-ayuda{
    font-size:12px;
    color:var(--texto-medio);
  }
  .catalogo-form{
    display:flex;
    align-items:flex-end;
    gap:10px;
    margin-bottom:8px;
  }
  .catalogo-form-campo{
    flex:1;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .catalogo-form-campo label{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.8px;
    text-transform:uppercase;
    color:var(--texto-medio);
  }
  .catalogo-form-campo input{
    padding:10px 12px;
    background:var(--superficie);
    border:1.5px solid var(--borde);
    border-radius:5px;
    color:var(--texto-alto);
    font-size:14px;
    font-family:var(--sans);
    outline:none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .catalogo-form-campo input:focus{
    border-color: var(--cian-radar);
    box-shadow: 0 0 0 3px var(--cian-radar-dim);
  }
  .catalogo-form .btn{
    padding:10px 16px;
    white-space:nowrap;
  }
  .catalogo-lista-wrap{margin-top:18px;}
  .catalogo-lista-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:9px 14px;
    background:#0D3C6E;
    color:#ffffff;
    border-radius:8px 8px 0 0;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:0.6px;
    text-transform:uppercase;
  }
  .catalogo-lista-wrap .datos-lista{
    margin-top:0;
    border:1px solid var(--borde);
    border-top:none;
    border-radius:0 0 8px 8px;
    padding:8px;
  }

  @media (max-width:480px){
    .catalogo-form{
      flex-direction:column;
      align-items:stretch;
    }
    .catalogo-form .btn{width:100%;}
  }

  .datos-grid{align-items:start;}
  .datos-columna{
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:var(--radio);
    padding:16px;
  }
  .datos-titulo{
    font-size:14px;
    margin:0 0 12px;
    color:var(--texto-alto);
  }
  .datos-form-inline{
    display:flex;
    gap:8px;
    margin-bottom:6px;
  }
  .datos-form-inline input{
    flex:1;
    padding:9px 12px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    font-size:13.5px;
    font-family:var(--sans);
  }
  .datos-form-inline .btn{
    padding:9px 14px;
    white-space:nowrap;
  }
  .datos-lista{
    list-style:none;
    margin:14px 0 0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:6px;
    max-height:320px;
    overflow-y:auto;
  }
  .datos-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:8px 10px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    background:var(--fondo);
  }
  .datos-item-nombre{
    font-size:13.5px;
    color:var(--texto-alto);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .datos-item-acciones{
    display:flex;
    gap:4px;
    flex-shrink:0;
  }
  .datos-item-input{
    flex:1;
    padding:6px 8px;
    border:1px solid var(--cian-radar);
    border-radius:6px;
    font-size:13.5px;
    font-family:var(--sans);
  }
  .datos-vacio{
    text-align:center;
    color:var(--texto-bajo);
    font-family:var(--mono);
    font-size:12.5px;
    padding:20px 10px;
  }

  @media (max-width:640px){
    .datos-grid{grid-template-columns:1fr;}
  }

  .componentes-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:14px;
  }
  /* Agrupa "N registros" + el botón "Nuevo..." como un solo bloque a la
     derecha del toolbar (Guías y Manuales): así el selector "por
     documento" queda solo a la izquierda y el resto se mantiene junto
     a la derecha, en vez de que space-between reparta los 3 elementos
     de a uno por todo el ancho. */
  .toolbar-grupo-derecha{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
  }
  .componentes-toolbar .filtro-select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding:8px 34px 8px 12px;
    background-color:var(--superficie);
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 10px center;
    background-size:13px;
    border:1.5px solid var(--borde);
    border-radius:8px;
    color:var(--texto-alto);
    font-family:var(--sans);
    font-size:13px;
    font-weight:500;
    outline:none;
    cursor:pointer;
    max-width:220px;
    transition:border-color .2s ease;
  }
  .componentes-toolbar .filtro-select:hover,
  .componentes-toolbar .filtro-select:focus{ border-color:var(--cian-radar); }

  /* Selector "Avance por Técnico": versión con ícono de persona a la
     izquierda (además de la flecha a la derecha), más alto y con más
     aire, para que se sienta como un control real en vez de un
     <select> del navegador sin estilizar. */
  .select-icono-wrap{
    position:relative;
    display:inline-flex;
    flex-shrink:0;
  }
  /* Pill moderno reutilizable para CUALQUIER selector de filtro de la
     app (no solo dentro de .componentes-toolbar): ícono a la
     izquierda + flecha a la derecha, borde grueso y esquinas bien
     redondeadas, en vez del <select> plano del navegador. El ícono
     por defecto es de "persona" (Avance por Técnico); cada filtro que
     necesite otro ícono agrega una clase modificadora abajo
     (--documento, --carena, --tipo-evento) que solo pisa
     background-image. */
  .filtro-select-icono{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    flex-shrink:0;
    height:44px;
    min-width:240px;
    max-width:270px;
    padding:0 38px 0 42px;
    background-color:var(--superficie);
    background-repeat:no-repeat, no-repeat;
    background-position:left 14px center, right 14px center;
    background-size:17px, 13px;
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%230b2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21v-1a6 6 0 0 1 6-6h4a6 6 0 0 1 6 6v1'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    border:2px solid var(--azul-marino);
    border-radius:22px;
    box-shadow:0 2px 5px rgba(11,37,69,0.12);
    color:var(--texto-alto);
    font-family:var(--sans);
    font-size:14px;
    font-weight:700;
    outline:none;
    cursor:pointer;
    transition:border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
  }
  .filtro-select-icono:hover{
    border-color:var(--cian-radar);
    background-color:var(--cian-radar-dim);
  }
  .filtro-select-icono:focus{
    border-color:var(--cian-radar);
    box-shadow:0 0 0 4px var(--cian-radar-dim);
  }

  /* Selector "por documento" (Guías y Manuales): ícono de documento/archivo
     (el mismo trazo que ya usa el botón de navegación "Guías"). */
  .filtro-select-icono.filtro-select-icono--documento{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpolyline points='14 2 14 8 20 8'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }
  /* Selector por Carena (toolbar principal, al costado del buscador):
     ícono de etiqueta, para "filtrar por esta categoría/ciclo". */
  .filtro-select-icono.filtro-select-icono--carena{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 13.42 20.58a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }
  /* El filtro de Carena vive PEGADO al campo de búsqueda, así que en
     vez del pill grueso de arriba toma la misma forma que #buscar:
     mismo radio de esquina, mismo borde fino de 1px, sin sombra, sin
     negrita -- para que los dos controles de la misma fila se vean
     como parte de un mismo conjunto, en vez de dos estilos distintos
     compitiendo entre sí. */
  #filtroCarena{
    height:auto;
    min-width:0;
    max-width:210px;
    padding:10px 34px 10px 38px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    box-shadow:none;
    font-size:13.5px;
    font-weight:500;
  }
  #filtroCarena:hover{
    border-color:var(--cian-radar);
    background-color:var(--superficie);
  }
  #filtroCarena:focus{
    border-color:var(--cian-radar);
    box-shadow:0 0 0 3px var(--cian-radar-dim);
  }
  /* Selector de tipo de evento (módulo Registro/Logs): ícono de
     campana, para "eventos/alertas". */
  .filtro-select-icono.filtro-select-icono--tipo-evento{
    background-image:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230b2545' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9'/%3E%3Cpath d='M13.73 21a2 2 0 0 1-3.46 0'/%3E%3C/svg%3E"),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  }
  .componentes-contador{
    font-family:var(--mono);
    font-size:12px;
    color:var(--texto-medio);
  }

  /* Vista de gráfico del modal "Avance por equipo": un grupo por
     embarcación, con una barra horizontal por cada uno de sus componentes. */
  .avance-grupo-embarcacion{
    margin-bottom:20px;
    padding:0 16px 14px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:8px;
  }
  /* La cabecera de cada embarcación queda fija arriba mientras se
     desplazan sus equipos (con "Todas las embarcaciones" se sabe
     siempre en cuál se está). El margen negativo lateral hace que su
     fondo cubra todo el ancho de la tarjeta. */
  .avance-grupo-cabecera{
    position:sticky;
    top:0;
    z-index:3;
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin:0 -16px 12px;
    padding:13px 16px 10px;
    background:var(--superficie);
    border-bottom:1px solid var(--borde);
    border-radius:8px 8px 0 0;
    flex-wrap:wrap;
  }
  .avance-grupo-nombre{font-size:14px; font-weight:700; color:var(--texto-alto);}
  .avance-grupo-promedio{
    font-family:var(--mono);
    font-size:11.5px;
    padding:3px 10px;
    border-radius:20px;
    background:rgba(11,37,69,0.06);
    color:var(--texto-medio);
  }
  .avance-grupo-filas{display:flex; flex-direction:column; gap:10px;}

  /* ---------- Modal "Avance por equipo" ----------
     Encabezado, selector de embarcación y contador quedan FIJOS arriba;
     solo la lista de embarcaciones/equipos se desplaza. Altura estable
     para que el modal no cambie de tamaño al cambiar de embarcación.
     El pie del modal se oculta: su botón "Cerrar" ya está oculto en
     toda la app (queda la ✕ del encabezado), así que solo sobraba una
     barra vacía. */
  .modal-avance-equipo{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    height:86vh;
    height:86dvh;
  }
  .modal-avance-equipo .modal-head{ flex-shrink:0; position:static; }
  .modal-avance-equipo .modal-body{
    flex:1;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    padding-bottom:0;
  }
  .modal-avance-equipo .componentes-toolbar{ flex-shrink:0; }
  .modal-avance-equipo #avancePorEquipoGrafico{
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0 2px 18px;
  }
  .modal-avance-equipo .modal-foot{ display:none; }

  /* Vista "Todas las embarcaciones": resumen numérico, sin gráficos. */
  .avance-resumen-total{
    display:flex;
    align-items:baseline;
    flex-wrap:wrap;
    gap:8px 12px;
    margin-bottom:14px;
    padding:14px 18px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:8px;
  }
  .avance-resumen-total > span:first-child{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.6px;
    text-transform:uppercase;
    color:var(--texto-medio);
  }
  .avance-resumen-total strong{
    font-family:var(--mono);
    font-size:28px;
    font-weight:800;
    line-height:1;
  }
  .avance-resumen-detalle{
    margin-left:auto;
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--texto-medio);
  }
  .avance-resumen-tabla{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:8px;
  }
  .avance-resumen-tabla thead th:first-child{ text-align:left; border-top-left-radius:7px; }
  .avance-resumen-tabla thead th:last-child{ border-top-right-radius:7px; }
  .avance-resumen-fila{ cursor:pointer; }
  .avance-resumen-fila:hover, .avance-resumen-fila:focus{
    background:var(--cian-radar-dim) !important;
    outline:none;
  }
  .avance-resumen-nombre{ font-weight:700; color:var(--texto-alto); }
  .avance-resumen-num{ text-align:center; font-family:var(--mono); font-size:12.5px; }
  .avance-resumen-promedio{ font-weight:800; font-size:14px; }
  .avance-num-verde{ color:var(--verde-estribor); }
  .avance-num-ambar{ color:var(--ambar-baliza); }
  .avance-num-rojo{ color:var(--rojo-babor); }
  .avance-resumen-ayuda{
    margin:12px 2px 0;
    font-size:12px;
    color:var(--texto-medio);
  }
  @media (max-width:520px){
    .avance-resumen-detalle{ margin-left:0; width:100%; }
    .avance-resumen-tabla thead th, .avance-resumen-tabla tbody td{ padding-left:8px; padding-right:8px; }
  }

  /* Un equipo: su fila con el promedio general y, debajo, solo si
     tiene componentes sin completar, esos componentes. */
  .avance-equipo{ display:flex; flex-direction:column; }
  .avance-fila-equipo .avance-fila-componente-label{
    font-size:13px;
    font-weight:600;
    color:var(--texto-alto);
  }
  .avance-equipo-completo .avance-fila-componente-label::before{
    content:'✓ ';
    color:var(--verde-estribor);
    font-weight:800;
  }
  .avance-pendientes{
    display:flex;
    flex-direction:column;
    gap:7px;
    margin:8px 0 4px 14px;
    padding:9px 12px 10px;
    border-left:3px solid var(--ambar-baliza);
    border-radius:0 6px 6px 0;
    background:var(--panel-alt);
  }
  .avance-pendientes-titulo{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:.4px;
    text-transform:uppercase;
    color:var(--texto-medio);
  }
  .avance-pendientes-titulo span{ text-transform:none; opacity:.85; }
  .avance-pendientes .avance-fila-componente{
    grid-template-columns:minmax(110px, 30%) 1fr 44px;
  }
  .avance-pendientes .barra-track{ height:10px; }
  @media (max-width:520px){
    .avance-pendientes .avance-fila-componente{ grid-template-columns:1fr; row-gap:4px; }
    .avance-pendientes{ margin-left:6px; }
  }

  /* Módulo "Avance por Técnico": un grupo por técnico, con una tabla
     compacta debajo listando los componentes (equipos) que atendió,
     como subgrupo. Reutiliza el mismo look de cabecera que "Avance por
     equipo", pero el contenido es una tabla en vez de barras simples,
     porque aquí se necesita mostrar más columnas por fila (OT,
     embarcación, equipo, componente, estado, avance). */
  .grupos-tecnicos-wrap{ padding:4px; }
  .grupo-tecnico{
    margin-bottom:16px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:10px;
    box-shadow:0 1px 3px rgba(11,37,69,0.08);
  }
  .grupo-tecnico:last-child{ margin-bottom:4px; }

  /* La tarjeta (encabezado + tabla) usa un ancho FIJO en vez de
     ajustarse dinámicamente a cada técnico seleccionado: así el modal
     no "salta" de tamaño cada vez que se cambia de técnico. El valor
     surge de promediar el espacio que necesita cada columna con un
     contenido típico (ver los porcentajes de la tabla más abajo), ni
     tan angosto que un nombre de equipo largo se vea forzado a partirse
     en muchas líneas, ni tan ancho que un dato corto quede con aire de
     sobra. Ya no se recorta con overflow:hidden (necesario para que el
     encabezado de la tabla pueda quedar fijo al hacer scroll); el
     redondeado de esquinas se logra directamente en la cabecera y en
     la última fila. */
  @media (min-width:769px){
    .grupo-tecnico{
      width:700px;
      max-width:100%;
    }
  }
  .grupo-tecnico-cabecera{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 18px;
    background:linear-gradient(135deg, var(--azul-marino) 0%, var(--cian-radar) 160%);
    border-radius:9px 9px 0 0;
    flex-wrap:wrap;
  }
  .grupo-tecnico-nombre{
    font-size:17px;
    font-weight:800;
    letter-spacing:.2px;
    color:#ffffff;
    display:flex;
    align-items:center;
    gap:9px;
  }
  .grupo-tecnico-nombre svg{
    color:#ffffff;
    flex-shrink:0;
    background:rgba(255,255,255,0.18);
    border-radius:50%;
    padding:5px;
    width:28px; height:28px; box-sizing:border-box;
  }
  .grupo-tecnico-resumen{
    font-family:var(--mono);
    font-size:11.5px;
    font-weight:600;
    padding:5px 12px;
    border-radius:20px;
    background:rgba(255,255,255,0.18);
    color:#ffffff;
    white-space:nowrap;
  }
  .grupo-tecnico table{
    width:100%;
    /* "separate" en vez de "collapse": con collapse, el encabezado
       sticky tiene un bug de renderizado conocido en Chromium donde
       una fila ya desplazada se alcanza a "filtrar" como una rendija
       justo encima del encabezado fijo al hacer scroll. Con
       border-spacing:0 se ve visualmente idéntico a collapse, pero sin
       ese artefacto. */
    border-collapse:separate;
    border-spacing:0;
  }
  .celda-centrada{ text-align:center !important; }

  /* En móvil la tabla se convierte en tarjetas (td pasa a display:block,
     ver el breakpoint más abajo), así que el ancho ahí siempre debe ser
     100% (una tarjeta por fila, de punta a punta). Desde tablet/
     escritorio hacia arriba, en cambio, cada columna usa un porcentaje
     FIJO del ancho de la tarjeta (700px), calculado según el largo
     típico de cada dato: OT y Embarcación son códigos cortos, Equipo
     necesita más espacio (nombre + modelo en dos líneas), y
     Componentes/Avance son valores muy cortos (un número, un
     porcentaje). Al ser fijo, la tabla no cambia de tamaño al pasar de
     un técnico a otro. */
  @media (min-width:769px){
    .grupos-tecnicos-wrap .grupo-tecnico table{
      width:100% !important;
      table-layout:fixed !important;
    }
    .grupos-tecnicos-wrap .grupo-tecnico th:nth-child(1),
    .grupos-tecnicos-wrap .grupo-tecnico td:nth-child(1){ width:15% !important; } /* OT */
    .grupos-tecnicos-wrap .grupo-tecnico th:nth-child(2),
    .grupos-tecnicos-wrap .grupo-tecnico td:nth-child(2){ width:16% !important; } /* Embarcación */
    .grupos-tecnicos-wrap .grupo-tecnico th:nth-child(3),
    .grupos-tecnicos-wrap .grupo-tecnico td:nth-child(3){ width:40% !important; } /* Equipo */
    .grupos-tecnicos-wrap .grupo-tecnico th:nth-child(4),
    .grupos-tecnicos-wrap .grupo-tecnico td:nth-child(4){ width:13% !important; } /* Componentes */
    .grupos-tecnicos-wrap .grupo-tecnico th:nth-child(5),
    .grupos-tecnicos-wrap .grupo-tecnico td:nth-child(5){ width:16% !important; } /* Avance */

    .grupos-tecnicos-wrap .grupo-tecnico th,
    .grupos-tecnicos-wrap .grupo-tecnico td{ white-space:nowrap !important; }
    /* Equipo es la única columna con texto potencialmente largo (nombre
       + modelo): se ajusta en dos líneas en vez de desbordar su ancho
       fijo. */
    .grupos-tecnicos-wrap .grupo-tecnico td:nth-child(3){ white-space:normal !important; }
  }

  .grupo-tecnico th{
    background:var(--superficie-alt);
    color:var(--texto-medio);
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:8px 12px;
    text-align:center;
    white-space:nowrap;
    border-bottom:1px solid var(--borde);
  }
  /* El encabezado (thead) ya es sticky por la regla global "thead{...}"
     de más arriba en este archivo (usada por todas las tablas de la
     app). NO se repite position:sticky aquí en el th individual: tener
     el thead Y cada th por separado en modo sticky al mismo tiempo
     generaba un artefacto visual real (una fila ya desplazada se
     "filtraba" como una rendija justo encima del encabezado al hacer
     scroll). Alcanza con un solo nivel sticky; aquí solo se ajusta el
     color de fondo del thead para esta tabla en particular, ya que la
     regla global usa azul oscuro y esta tabla es de tema claro. */
  /* El encabezado (thead) ya es sticky por la regla global "thead{...}"
     de más arriba en este archivo (usada por todas las tablas de la
     app). Aun así, dentro de este modal aparecía un artefacto visual
     real al hacer scroll (una rendija con contenido de la página de
     atrás, visible a través del blur del fondo del modal). Es un bug
     conocido de Chromium: position:sticky dentro de un contenedor cuyo
     ancestro usa backdrop-filter (el fondo oscuro del modal lo usa)
     puede fallar al componer capas. El arreglo estándar es forzar que
     el encabezado use su propia capa de GPU. */
  .grupo-tecnico thead{
    background:var(--superficie-alt);
    transform:translateZ(0);
    will-change:transform;
  }
  .grupo-tecnico td{
    padding:8px 12px;
    font-size:12.5px;
    border-bottom:1px solid var(--borde);
    color:var(--texto-alto);
  }
  .grupo-tecnico tbody tr:last-child td{ border-bottom:none; }
  .grupo-tecnico tbody tr:last-child td:first-child{ border-radius:0 0 0 9px; }
  .grupo-tecnico tbody tr:last-child td:last-child{ border-radius:0 0 9px 0; }
  .grupo-tecnico tbody tr:nth-child(even){ background:rgba(169,195,214,0.20); }
  .grupo-tecnico tbody tr:hover{ background:rgba(169,195,214,0.40); }

  .avance-fila-componente{
    display:grid;
    grid-template-columns:minmax(130px, 32%) 1fr 44px;
    align-items:center;
    gap:10px;
  }
  .avance-fila-componente-label{
    font-size:12px;
    color:var(--texto-medio);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .avance-fila-componente-valor{
    font-family:var(--mono);
    font-size:11.5px;
    font-weight:700;
    color:var(--texto-alto);
    text-align:right;
  }

  @media (max-width:520px){
    .avance-fila-componente{grid-template-columns:1fr; row-gap:4px;}
    .avance-fila-componente-valor{text-align:left;}
  }

  /* Aviso cuando el equipo llega a 100% de avance sin tener Fecha fin
     registrada, para que no quede un registro "completo" sin cerrar. */
  .alerta-fecha-fin{
    display:flex;
    align-items:flex-start;
    gap:10px;
    padding:11px 14px;
    margin-bottom:14px;
    background:rgba(201,122,0,0.12);
    border:1px solid rgba(201,122,0,0.4);
    border-radius:8px;
    color:var(--ambar-baliza);
    font-size:13px;
    line-height:1.45;
  }
  .alerta-fecha-fin svg{flex-shrink:0; margin-top:1px;}

  /* Fechas del equipo, vinculadas y editables desde el módulo
     Componentes (fuera de la tabla). Al cambiar una fecha se guarda
     automáticamente en el equipo, sin necesidad de abrir "Editar". */
  .componentes-fechas{
    display:flex;
    align-items:flex-end;
    flex-wrap:wrap;
    gap:14px;
    margin-bottom:14px;
    padding:12px 14px;
    background:var(--panel-alt);
    border:1px solid var(--borde);
    border-radius:8px;
  }
  .campo-fecha-inline{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .campo-fecha-inline label{
    font-family:var(--mono);
    font-size:10.5px;
    letter-spacing:0.6px;
    text-transform:uppercase;
    color:var(--texto-medio);
  }
  .campo-fecha-inline input[type="date"]{
    padding:7px 10px;
    background:var(--superficie);
    border:1.5px solid var(--borde);
    border-radius:5px;
    color:var(--texto-alto);
    font-size:13px;
    font-family:var(--sans);
    outline:none;
    transition: border-color .2s ease, box-shadow .2s ease;
  }
  .campo-fecha-inline input[type="date"]:focus{
    border-color: var(--cian-radar);
    box-shadow: 0 0 0 3px var(--cian-radar-dim);
  }
  .campo-fecha-inline input[type="date"]:disabled{
    background:var(--panel-alt);
    color:var(--texto-medio);
    cursor:not-allowed;
  }
  .fechas-guardado{
    font-family:var(--mono);
    font-size:11.5px;
    color:var(--verde-estribor);
    opacity:0;
    transition:opacity .25s ease;
    align-self:center;
  }
  .fechas-guardado.visible{opacity:1;}
  .fechas-guardado.error{color:var(--rojo-babor);}

  @media (max-width:640px){
    .componentes-fechas{flex-direction:column; align-items:stretch;}
    .campo-fecha-inline input[type="date"]{width:100%;}
  }

  .tabla-componentes-wrap{
    max-height: 320px;
    overflow:auto;
    border:1px solid var(--borde);
    border-radius:8px;
  }
  /* Mismo modelo de scrollbar que la tabla principal (.tabla-scroll):
     delgado, con "pastilla" redondeada y borde blanco, en vez del
     scroll gris por defecto del navegador. */
  .tabla-componentes-wrap::-webkit-scrollbar{width:10px; height:10px;}
  .tabla-componentes-wrap::-webkit-scrollbar-track{background:transparent;}
  .tabla-componentes-wrap::-webkit-scrollbar-thumb{
    background:rgba(18,37,59,0.18);
    border-radius:20px;
    border:2px solid #ffffff;
  }
  .tabla-componentes-wrap::-webkit-scrollbar-thumb:hover{background:rgba(14,124,134,0.4);}
  .tabla-componentes-wrap{scrollbar-width:thin; scrollbar-color:rgba(18,37,59,0.2) transparent;}
  .tabla-componentes-wrap table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto;
  }
  .tabla-componentes-wrap td, .tabla-componentes-wrap th{
    max-width:none !important;
    white-space:normal !important;
    overflow:visible !important;
    text-overflow:clip !important;
  }
  .tabla-componentes-wrap th{
    position:sticky; top:0;
    background:#0D3C6E;
    color:#ffffff;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.5px;
    padding:10px 12px;
    text-align:center;
    white-space:nowrap !important;
  }
  .tabla-componentes-wrap td{
    padding:9px 12px;
    font-size:13px;
    border-bottom:1px solid var(--borde);
    color:var(--texto-alto);
  }
  .tabla-componentes-wrap tbody tr:nth-child(even){background:rgba(169,195,214,0.30);}
  .tabla-componentes-wrap tbody tr:hover{background:rgba(169,195,214,0.50);}

  /* Observaciones: se limita a 6 filas visibles y de ahí en adelante
     aparece scroll vertical (la altura exacta se calcula por JS según
     el contenido real de las filas, ya que el texto puede ocupar más
     de una línea). Este valor es solo un respaldo inicial. */
  .tabla-observaciones-wrap{max-height:340px;}

  /* Equipo/Componente: el nombre va como línea principal y el modelo
     (si existe) debajo, como línea secundaria más pequeña. */
  .tabla-observaciones-wrap .dato-principal{
    font-weight:600;
    color:var(--texto-alto);
  }
  .tabla-observaciones-wrap .dato-modelo{
    font-family:var(--mono);
    font-size:11px;
    color:var(--texto-medio);
    margin-top:2px;
  }

  /* Componente siempre ocupa el ancho completo de su texto: nunca se
     parte en varias líneas, aunque el resto de la tabla tenga que
     desplazarse horizontalmente. */
  .tabla-observaciones-wrap td:nth-child(4) .dato-principal,
  .tabla-observaciones-wrap td:nth-child(4) .dato-modelo{
    white-space:nowrap;
  }

  /* La columna OT se ajusta al tamaño de su contenido en vez de
     estirarse u ocupar un ancho fijo. Solo aplica en la vista de tabla
     (escritorio/tablet); en el modo tarjetas de móvil cada campo debe
     ocupar el 100% de la fila y poder ajustar su texto en varias líneas. */
  @media (min-width:769px){
    .tabla-observaciones-wrap th:nth-child(1),
    .tabla-observaciones-wrap td:nth-child(1){
      width:1%;
      white-space:nowrap !important;
      padding-left:10px !important;
      padding-right:8px !important;
    }
  }

  /* ---------- Todas las tablas de modales: responsivo ---------- */
  /* (Componentes, Observaciones, Registro, Embarcaciones, Usuarios,
     ya que todas comparten la clase .tabla-componentes-wrap) */

  /* Pantallas medianas (tablet): en vez de comprimir muchas columnas
     hasta hacerlas ilegibles, se habilita scroll horizontal con un
     ancho mínimo cómodo para leer. */
  @media (max-width:900px) and (min-width:769px){
    .tabla-componentes-wrap{overflow-x:auto;}
    .tabla-componentes-wrap table{width:max-content; min-width:100%;}
    .tabla-componentes-wrap td, .tabla-componentes-wrap th{white-space:nowrap !important;}
    .tabla-componentes-wrap td:last-child, .tabla-componentes-wrap th:last-child{
      white-space:normal !important; min-width:160px;
    }
  }

  /* Celulares y tablets pequeñas: la tabla se convierte en una lista de
     tarjetas (una por fila), mucho más legible que una tabla de muchas
     columnas comprimida. */
  @media (max-width:768px){

    /* Buscador + filtro de Carena: se mantienen en la misma fila (no
       apilados). El selector se angosta bastante en vez del buscador
       -sigue siendo usable con solo 3-4 letras visibles y su flecha-,
       y en esta versión compacta se le quita el ícono IZQUIERDO (el de
       la etiqueta): con un ancho tan chico no entraban cómodos los dos
       íconos más el texto, y el ícono derecho (la flecha) ya alcanza
       para que se reconozca como un selector. En escritorio conserva
       los dos íconos sin cambios. */
    .toolbar-top{
      flex-wrap:nowrap;
      min-width:0;
    }
    .search-wrap{
      flex:1;
      min-width:0;
      max-width:none;
    }
    .filtro-carena-wrap{
      width:auto;
      flex-shrink:0;
    }
    #filtroCarena{
      min-width:0;
      max-width:130px;
      height:38px;
      padding:0 26px 0 10px;
      font-size:12.5px;
      border-radius:var(--radio);
      border:1px solid var(--borde);
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230e7c86' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-position:right 8px center;
      background-size:11px;
    }

    /* Selector "Avance por Técnico": en móvil se apila arriba del
       contador (en vez de ir lado a lado, muy apretados) y ocupa todo
       el ancho disponible, más fácil de tocar. */
    .componentes-toolbar{
      flex-wrap:wrap;
      align-items:flex-start;
      gap:8px;
    }
    .componentes-toolbar .select-icono-wrap{ width:100%; }
    .componentes-toolbar .filtro-select-icono,
    .registro-toolbar .filtro-select-icono{
      width:100%;
      max-width:none;
      min-width:0;
    }
    .toolbar-grupo-derecha{
      width:100%;
      justify-content:space-between;
    }

    /* La cabecera, el buscador y la barra de herramientas quedan fijos
       (no se desplazan); solo la lista de tarjetas se desplaza dentro de
       su propio contenedor con scroll (.tabla-scroll ya trae overflow:auto
       y flex:1 desde su regla base, por eso no hace falta redefinirlo
       aquí). El bug real de "campos incompletos" no era este scroll
       interno en sí, sino que el texto de cada campo no se ajustaba en
       varias líneas (ver la corrección de display:block más abajo) — con
       eso ya resuelto, el scroll interno funciona correctamente y cada
       tarjeta se ve completa dentro de él. */

    /* Los modales marcados como "modal-lista" (Componentes, Observaciones,
       Registro, Usuarios, Embarcaciones, Avance por equipo) usan un
       contenedor de scroll propio para su tabla/lista de tarjetas: el
       encabezado, cualquier aviso o selector de fecha, y la barra de
       herramientas quedan siempre fijos arriba (y el botón "Cerrar" fijo
       abajo); solo las tarjetas se desplazan dentro de su propio
       contenedor, igual que ya hace la tabla principal. */
    .modal.modal-lista{
      display:flex;
      flex-direction:column;
      overflow:hidden; /* El modal en sí ya no hace scroll */
    }
    .modal.modal-lista .modal-head{
      flex-shrink:0;
      position:static; /* Ya no hace falta el truco de "sticky" */
    }
    .modal.modal-lista .modal-body{
      flex:1;
      min-height:0;
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .modal.modal-lista .modal-foot{
      flex-shrink:0;
    }
    .modal-lista .tabla-componentes-wrap,
    .modal-lista #avancePorEquipoGrafico{
      flex:1;
      min-height:0;
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding-bottom:16px;
    }

    /* Módulo Estadística: las pestañas (Por embarcación / Por estado /
       Atrasados / Técnicos) quedan fijas arriba, y el contenido de la
       pestaña activa (incluida la lista de técnicos) se desplaza dentro
       de su propio contenedor, sin mover el resto. */
    .modal-lista .estadistica-tabs{
      flex-shrink:0;
    }
    .modal-lista .estadistica-panel{
      flex:1;
      min-height:0;
      -webkit-overflow-scrolling:touch;
      overflow-y:auto;
      padding-bottom:16px;
    }

    .tabla-componentes-wrap{border:none;}
    .tabla-componentes-wrap table,
    .tabla-componentes-wrap thead,
    .tabla-componentes-wrap tbody,
    .tabla-componentes-wrap tr,
    .tabla-componentes-wrap td{
      display:block;
      width:100%;
    }
    .tabla-componentes-wrap thead{
      position:static;
      display:none; /* Las etiquetas de columna pasan a mostrarse por fila */
    }
    .tabla-componentes-wrap tbody tr{
      margin-bottom:12px;
      border:1px solid var(--borde);
      border-radius:8px;
      overflow:hidden;
      background:var(--superficie);
    }
    .tabla-componentes-wrap tbody tr:nth-child(even){background:var(--superficie);}
    .tabla-componentes-wrap tbody tr.empty-row{
      border:none; background:transparent; padding:0;
    }
    .tabla-componentes-wrap td{
      display:block;
      position:relative;
      padding:9px 14px 9px 126px;
      min-height:20px;
      border-bottom:1px solid var(--borde);
      font-size:13px;
      text-align:left !important;
    }
    .tabla-componentes-wrap tr.empty-row td{
      display:block;
      border-bottom:none;
      text-align:center;
      color:var(--texto-medio);
      padding-left:14px;
    }
    .tabla-componentes-wrap td:last-child{border-bottom:none;}
    .tabla-componentes-wrap td::before{
      content:attr(data-label);
      position:absolute;
      left:14px;
      top:9px;
      width:104px;
      font-family:var(--mono);
      font-size:10.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.5px;
      color:var(--cian-radar);
      line-height:1.3;
    }
    .tabla-componentes-wrap tr.empty-row td::before{content:none;}

    /* Módulo "Avance por Técnico": la tabla dentro de cada grupo también
       pasa a tarjetas en móvil, con el mismo criterio que el resto.
       A diferencia de las demás tablas (Componentes, Observaciones...),
       aquí las tarjetas viven DENTRO de otra caja blanca (.grupo-tecnico,
       la que tiene el banner del técnico) en vez de apoyarse directo
       sobre el fondo azulado del modal — por eso "tarjeta blanca sobre
       caja blanca" se perdía casi por completo, con solo un borde de
       1px casi invisible como única separación. Se le da al área de
       tarjetas un fondo gris-azulado propio (--panel-alt) para que cada
       tarjeta blanca sí tenga contraste real detrás, y se refuerza el
       borde + una sombra sutil para que se noten como tarjetas "flotando",
       sin depender únicamente de ese contraste de fondo. */
    .grupo-tecnico-cabecera{ padding:10px 12px; }
    .grupo-tecnico thead{ display:none; }
    .grupo-tecnico tbody{
      display:block;
      background:var(--panel-alt);
      padding:2px;
    }
    .grupo-tecnico tbody tr{
      display:block;
      margin:10px;
      border:1px solid var(--borde);
      border-radius:8px;
      overflow:hidden;
      background:var(--superficie);
      box-shadow:0 1px 4px rgba(11,37,69,0.10);
    }
    .grupo-tecnico tbody tr:nth-child(even){ background:var(--superficie); }
    .grupo-tecnico td{
      display:block;
      position:relative;
      padding:8px 12px 8px 108px;
      min-height:18px;
      border-bottom:1px solid var(--borde);
      font-size:12.5px;
      text-align:left !important;
    }
    .grupo-tecnico tbody tr td:last-child{ border-bottom:none; }
    .grupo-tecnico td::before{
      content:attr(data-label);
      position:absolute;
      left:12px;
      top:8px;
      width:88px;
      font-family:var(--mono);
      font-size:9.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.5px;
      color:var(--cian-radar);
      line-height:1.3;
    }

    /* Celda de Acciones: los botones se alinean a la derecha, respetando
       el espacio que ocupa la etiqueta a la izquierda. */
    .tabla-componentes-wrap td[data-label="Acciones"]{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      min-height:36px;
    }

    /* En el layout de tarjetas, Componente vuelve a envolver texto
       normalmente (aquí no hay columnas que ensanchar, y forzar una
       sola línea desbordaría la tarjeta en pantallas angostas). */
    .tabla-observaciones-wrap td:nth-child(4) .dato-principal,
    .tabla-observaciones-wrap td:nth-child(4) .dato-modelo{
      white-space:normal;
    }

    /* ---------- Tabla principal: también en vista de tarjetas ---------- */
    .tabla-scroll table,
    .tabla-scroll thead,
    .tabla-scroll tbody,
    .tabla-scroll tr,
    .tabla-scroll td{
      display:block;
      width:100%;
    }
    .tabla-scroll thead{
      position:static;
      display:none; /* Las etiquetas de columna pasan a mostrarse por fila */
    }
    .tabla-scroll tbody tr{
      margin:0 0 12px;
      border:1px solid var(--borde);
      border-radius:8px;
      overflow:hidden;
      background:var(--panel-alt);
    }
    .tabla-scroll tbody tr:nth-child(even){background:var(--panel-alt);}
    .tabla-scroll tbody tr:hover{background:var(--panel-alt);}
    .tabla-scroll tbody tr.empty-row{
      border:none; background:transparent; padding:0;
    }
    /* La última tarjeta conserva su propio margen inferior (igual que
       las demás) para no quedar pegada al borde del contenedor con
       scroll — si no, se ve "cortada" aunque su contenido esté completo. */
    .tabla-scroll{ padding-bottom:28px; }
    .tabla-scroll tbody td{
      display:block !important;
      position:relative;
      padding:9px 14px 9px 126px;
      min-height:20px;
      border-bottom:1px solid var(--borde);
      font-size:13px;
      text-align:left !important;
      vertical-align:top;
      /* Se anulan los límites de ancho y el recorte de texto de la
         vista de escritorio, ya que aquí cada celda ocupa su propia
         fila completa. */
      max-width:none !important;
      min-width:0 !important;
      white-space:normal !important;
      overflow:visible !important;
      text-overflow:clip !important;
      -webkit-line-clamp:unset !important;
    }
    .tabla-scroll tbody tr.empty-row td{
      display:block !important;
      border-bottom:none;
      text-align:center;
      color:var(--texto-medio);
      padding-left:14px;
    }
    .tabla-scroll tbody td:last-child{border-bottom:none;}
    .tabla-scroll tbody td::before{
      content:attr(data-label);
      position:absolute;
      left:14px;
      top:9px;
      width:104px;
      font-family:var(--mono);
      font-size:10.5px;
      font-weight:700;
      text-transform:uppercase;
      letter-spacing:.5px;
      color:var(--cian-radar);
      line-height:1.3;
    }
    .tabla-scroll tbody tr.empty-row td::before{content:none;}

    /* Celda de Acciones: los botones se alinean a la derecha, en fila,
       respetando el espacio que ocupa la etiqueta a la izquierda. */
    .tabla-scroll tbody td[data-label="Acciones"]{
      display:flex !important;
      align-items:center;
      justify-content:flex-end;
      min-height:36px;
    }
  }

  .estado-tag{
    display:inline-block;
    padding:2px 10px;
    border-radius:20px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
  }
  .estado-operativo{background:rgba(34,169,90,0.15); color:#1c8a4c;}
  .estado-mantenimiento{background:rgba(230,170,30,0.18); color:#a5720c;}
  .estado-malogrado{background:rgba(224,85,79,0.15); color:var(--rojo-babor);}

  @media (max-width:720px){
    .form-componente{grid-template-columns:1fr 1fr;}
  }

  /* ---------- Estadística: selector desglosable de embarcaciones ---------- */
  .empty-hint{
    color:var(--texto-bajo);
    font-size:13px;
    padding:14px 4px;
    text-align:center;
  }


  /* ---------- Estadística: pestañas ---------- */
  .estadistica-tabs{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:18px;
    border-bottom:1px solid var(--borde);
    padding-bottom:10px;
  }
  .estadistica-tab{
    padding:8px 14px;
    background:transparent;
    border:1px solid var(--borde);
    border-radius:999px;
    color:var(--texto-medio);
    font-size:12.5px;
    font-family:var(--sans);
    font-weight:600;
    cursor:pointer;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
    white-space:nowrap;
  }
  .estadistica-tab:hover{border-color:var(--cian-radar); color:var(--cian-radar);}
  .estadistica-tab.activo{
    background:var(--azul-marino);
    border-color:var(--azul-marino);
    color:#ffffff;
  }

  /* ---------- Estadística: distribución por Estado (donut) ---------- */
  .panel-estado-wrap{
    display:flex;
    align-items:center;
    gap:32px;
    flex-wrap:wrap;
    padding:18px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:8px;
  }
  .donut-estado{flex-shrink:0;}
  .donut-estado-centro{
    font-family:var(--mono);
  }
  .donut-estado-total{font-size:22px; font-weight:700; fill:var(--texto-alto);}
  .donut-estado-label{font-size:9px; fill:var(--texto-medio); text-transform:uppercase; letter-spacing:.5px;}
  .donut-leyenda{
    display:flex;
    flex-direction:column;
    gap:10px;
    flex:1;
    min-width:200px;
  }
  .donut-leyenda-item{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    color:var(--texto-alto);
  }
  .donut-leyenda-punto{
    width:11px; height:11px;
    border-radius:3px;
    flex-shrink:0;
  }
  .donut-leyenda-nombre{flex:1;}
  .donut-leyenda-valor{
    font-family:var(--mono);
    font-size:12.5px;
    color:var(--texto-medio);
  }

  /* ---------- Estadística: equipos atrasados ---------- */
  .atrasados-resumen{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:16px;
  }
  .atrasados-chip{
    padding:8px 14px;
    background:var(--panel-alt);
    border:1px solid var(--borde);
    border-radius:8px;
    font-size:12.5px;
    color:var(--texto-medio);
  }
  .atrasados-chip strong{color:var(--texto-alto); font-size:15px; margin-right:5px;}
  .atrasados-lista{display:flex; flex-direction:column; gap:8px;}
  .atrasado-fila{
    display:flex;
    align-items:center;
    gap:12px;
    padding:11px 14px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-left:4px solid var(--borde);
    border-radius:8px;
    flex-wrap:wrap;
  }
  .atrasado-fila.nivel-alto{border-left-color:var(--rojo-babor);}
  .atrasado-fila.nivel-medio{border-left-color:var(--ambar-baliza);}
  .atrasado-info{flex:1; min-width:180px;}
  .atrasado-nombre{font-weight:600; color:var(--texto-alto); font-size:13.5px;}
  .atrasado-sub{font-family:var(--mono); font-size:11px; color:var(--texto-medio); margin-top:2px;}
  .atrasado-dias{
    font-family:var(--mono);
    font-size:12px;
    padding:4px 10px;
    border-radius:999px;
    background:var(--panel-alt);
    color:var(--texto-medio);
    white-space:nowrap;
  }
  .atrasado-fila.nivel-alto .atrasado-dias{background:rgba(200,67,61,0.12); color:var(--rojo-babor); font-weight:700;}
  .atrasado-fila.nivel-medio .atrasado-dias{background:rgba(201,122,0,0.12); color:var(--ambar-baliza); font-weight:700;}
  .atrasado-avance{width:110px; flex-shrink:0;}

  /* ---------- Estadística: técnicos (barras horizontales) ---------- */
  .tecnicos-lista{display:flex; flex-direction:column; gap:14px;}
  .tecnico-fila{
    padding:12px 14px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:8px;
  }
  .tecnico-cabecera{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    margin-bottom:8px;
    gap:8px;
    flex-wrap:wrap;
  }
  .tecnico-nombre{font-weight:600; color:var(--texto-alto); font-size:13.5px;}
  .tecnico-detalle{font-family:var(--mono); font-size:11px; color:var(--texto-medio);}

  /* ---------- Estadística: resumen general en columnas verticales (estilo Excel) ---------- */
  .estadistica-panel-header{
    display:flex;
    justify-content:flex-end;
  }
  .grafico-general{
    margin-bottom:22px;
    padding:20px 22px 18px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:8px;
  }
  .grafico-general h3{
    margin:0 0 16px;
    font-size:15px;
    color:var(--texto-alto);
  }
  .chart-excel-scroll{
    overflow-x:auto;
    overflow-y:visible;
    padding-bottom:2px;
  }
  .chart-excel{
    display:flex;
    align-items:stretch;
    gap:10px;
  }
  .chart-excel-ejey{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    width:38px;
    height:280px !important;
    flex:0 0 auto;
    font-family:var(--mono);
    font-size:11px;
    color:var(--texto-medio);
    text-align:right;
    box-sizing:border-box;
    padding:2px 0;
  }
  .chart-excel-plot{
    position:relative;
    flex:1 1 auto;
    height:280px !important;
    min-height:280px !important;
    border-left:1.5px solid var(--texto-medio);
    border-bottom:1.5px solid var(--texto-medio);
    box-sizing:border-box;
  }
  .chart-excel-gridlines{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    pointer-events:none;
  }
  .chart-excel-gridlines span{
    display:block;
    height:0;
    border-top:1px dashed rgba(18,37,59,0.16);
  }
  .chart-excel-gridlines span:last-child{
    border-top:none;
  }
  .columnas-wrap{
    position:absolute;
    inset:0;
    z-index:1;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start; /* Alinea todas las barras hacia la izquierda */
    gap:22px; /* Barras más separadas ahora que el gráfico es más grande */
    padding:0 20px;
  }
  .columna{
    display:flex;
    flex-direction:column;
    align-items:center;
    height:100%;
    min-width:56px;
    flex:0 0 auto;
  }
  .columna-track{
    position:relative;
    width:36px;
    height:100%;
    display:flex;
    align-items:flex-end;
    justify-content:center;
  }
  .columna-valor{
    position:absolute;
    top: 4px;
    left:50%;
    transform:translateX(-50%);
    font-family:var(--mono);
    font-size:11px;
    font-weight:700;
    color:#ffffff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65);
    white-space:nowrap;
    z-index: 2;
    pointer-events: none;
  }
  .columna-fill{
    width:100%;
    min-height:4px;
    border-radius:4px 4px 0 0;
    transition:height .4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .columna-fill.barra-roja {
    background: linear-gradient(180deg, #e87b72 0%, var(--rojo-babor) 100%);
    border: 1px solid rgba(200, 67, 61, 0.7);
    box-shadow: 0 -2px 6px rgba(200, 67, 61, 0.25);
  }
  .columna-fill.barra-ambar {
    background: linear-gradient(180deg, #f0b854 0%, var(--ambar-baliza) 100%);
    border: 1px solid rgba(201, 122, 0, 0.7);
    box-shadow: 0 -2px 6px rgba(201, 122, 0, 0.25);
  }
  .columna-fill.barra-verde {
    background: linear-gradient(180deg, #5dd092 0%, var(--verde-estribor) 100%);
    border: 1px solid rgba(47, 153, 96, 0.7);
    box-shadow: 0 -2px 6px rgba(47, 153, 96, 0.25);
  }

  .columna-label{
    margin-top:8px;
    height:18px;
    line-height:18px;
    font-size:11.5px;
    color:var(--texto-medio);
    text-align:center;
    max-width:80px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    flex:0 0 auto;
  }

  @media (max-width:640px){
    .chart-excel-ejey, .chart-excel-plot{height:150px !important; min-height:150px !important;}
    .columna-track{width:18px;}
    .columnas-wrap{gap:8px;}
    .columna{min-width:32px;}
    .columna-label {
      max-width: 45px; 
    }
  }
  
  @media (max-width:480px){
    .grafico-general{padding:12px 10px 10px;} 
    .grafico-general h3{font-size:13px;}
    .chart-excel{gap:5px;}
    .chart-excel-ejey, .chart-excel-plot{height:120px !important; min-height:120px !important;}
    .chart-excel-ejey{width:28px; font-size:9px;}
    .columnas-wrap{gap:4px; padding:0 8px;} 
    .columna-track{width:14px;}
    .columna{min-width:24px;}
    .columna-label{
      font-size:9.5px;
      max-width: 32px;
    }
    .columna-valor{
      font-size:10px;
    }
  }

  /* ---------- Estadística: gráficos de barras por embarcación ---------- */
  .grafico-embarcacion{
    margin-bottom:22px;
    padding:14px 16px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:12px;
    box-shadow: 0 4px 20px rgba(11,37,69,0.05);
  }
  .grafico-embarcacion h3{
    margin:0 0 12px 0;
    font-size:14px;
    color:var(--texto-alto);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:6px;
  }
  .promedio-tag{
    font-family:var(--mono);
    font-size:11px;
    font-weight:600;
    padding:3px 10px;
    border-radius:20px;
    background:rgba(11,37,69,0.06);
    color:var(--texto-medio);
  }
  
  .barras-wrap{
    display:flex;
    flex-direction:column;
    gap:10px;
    padding-right:4px;
  }
  .fila-barra{
    display:grid;
    grid-template-columns:minmax(130px, 30%) 1fr 42px; 
    align-items:center;
    gap:10px;
  }
  .barra-label{
    font-size:11.5px;
    color:var(--texto-medio);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  
  /* Pista limpia sin fondo ni bordes */
  .barra-track{
    position:relative;
    background:transparent;
    border-radius:6px;
    height:14px; 
    overflow:hidden;
  }

  /* Relleno con bordes y resalte dinámico aplicado únicamente sobre el avance */
  .barra-fill{
    height:100%;
    border-radius:4px;
    transition:width .4s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .barra-fill.barra-roja {
    background: linear-gradient(90deg, #e87b72 0%, var(--rojo-babor) 100%);
    border: 1px solid rgba(200, 67, 61, 0.7);
    box-shadow: 0 0 6px rgba(200, 67, 61, 0.25);
  }
  .barra-fill.barra-ambar {
    background: linear-gradient(90deg, #f0b854 0%, var(--ambar-baliza) 100%);
    border: 1px solid rgba(201, 122, 0, 0.7);
    box-shadow: 0 0 6px rgba(201, 122, 0, 0.25);
  }
  .barra-fill.barra-verde {
    background: linear-gradient(90deg, #5dd092 0%, var(--verde-estribor) 100%);
    border: 1px solid rgba(47, 153, 96, 0.7);
    box-shadow: 0 0 6px rgba(47, 153, 96, 0.25);
  }
  
  .barra-valor{
    font-family:var(--mono);
    font-size:11px;
    font-weight:600;
    color:var(--texto-alto);
    text-align:right;
  }

  .eje-x-horizontal{
    display:grid;
    grid-template-columns:minmax(130px, 30%) 1fr 42px;
    align-items:center;
    gap:10px;
    margin-top:8px;
    padding-top:8px;
    border-top:1.5px solid var(--borde);
  }
  .eje-x-marcas{
    display:flex;
    justify-content:space-between;
    font-family:var(--mono);
    font-size:10px;
    color:var(--texto-bajo);
  }

  @media (max-width:640px){
    .fila-barra{grid-template-columns:110px 1fr 36px;}
    .barra-label{font-size:11px;}
    .eje-x-horizontal{grid-template-columns:110px 1fr 36px;}
  }
  @media (max-width:480px){
    .fila-barra{grid-template-columns:85px 1fr 32px; gap:6px;}
    .eje-x-horizontal{grid-template-columns:85px 1fr 32px; gap:6px;}
    .barra-label{font-size:10px;}
    .barra-valor{font-size:10px;}
    .eje-x-marcas{font-size:9px;}
    .grafico-embarcacion{padding:10px 10px;}
    .grafico-embarcacion h3{font-size:13px;}
  }

  .registro-toolbar{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:14px;
    flex-wrap:wrap;
  }
  /* El estilo visual del selector de tipo de evento vive ahora en la
     regla compartida .filtro-select-icono (variante --tipo-evento),
     más abajo en este archivo. */
  .registro-contador{
    font-family:var(--mono);
    font-size:12px;
    color:var(--texto-medio);
    flex:1;
  }
  
  .tabla-registro-wrap{
    max-height: 420px;
    overflow:auto;
    border:1px solid var(--borde);
    border-radius:8px;
  }
  
  .tabla-registro-wrap td{white-space:normal;}

  /* ---------- Dashboard de actividad (Registro) ---------- */
  .modal-dashboard-actividad{
    width:min(1100px, 96vw);
  }
  /* Selector de período: 7/30/90 días o 1 año, como un grupo de
     pastillas -- mismo lenguaje visual que las pestañas de Estadística. */
  .dash-act-periodo{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-bottom:18px;
  }
  .dash-act-periodo-btn{
    padding:7px 16px;
    background:transparent;
    border:1px solid var(--borde);
    border-radius:999px;
    color:var(--texto-medio);
    font-size:12.5px;
    font-family:var(--sans);
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .dash-act-periodo-btn:hover{border-color:var(--cian-radar); color:var(--texto-alto);}
  .dash-act-periodo-btn.activo{
    background:var(--cian-radar);
    border-color:var(--cian-radar);
    color:#fff;
  }

  /* Fila de KPIs: 4 tarjetas con el número grande arriba, como la
     "portada" del dashboard. */
  .dash-act-kpis{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:12px;
    margin-bottom:20px;
  }
  .dash-act-kpi{
    display:flex;
    flex-direction:column;
    gap:4px;
    padding:16px 18px;
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:12px;
  }
  .dash-act-kpi-valor{
    font-family:var(--mono);
    font-size:26px;
    font-weight:700;
    color:var(--texto-alto);
    line-height:1.1;
  }
  .dash-act-kpi-error .dash-act-kpi-valor{color:var(--rojo-babor);}
  .dash-act-kpi-label{
    font-size:11.5px;
    color:var(--texto-medio);
    font-weight:600;
  }

  /* Grilla de paneles: el de actividad diaria ocupa las 2 columnas,
     acciones/usuarios van uno al lado del otro, y errores vuelve a
     ocupar el ancho completo abajo. */
  .dash-act-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
  }
  .dash-act-panel-ancho{grid-column:1 / -1;}
  .dash-act-panel{
    background:var(--superficie);
    border:1px solid var(--borde);
    border-radius:12px;
    padding:16px 18px;
  }
  .dash-act-panel h3{
    margin:0 0 14px;
    font-size:13.5px;
    font-weight:700;
    color:var(--texto-alto);
    display:flex;
    align-items:center;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:8px;
  }
  .dash-act-leyenda{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:11px;
    font-weight:500;
    color:var(--texto-medio);
  }
  .dash-act-punto{
    display:inline-block;
    width:8px; height:8px;
    border-radius:50%;
    margin:0 4px 0 8px;
  }
  .dash-act-punto:first-child{margin-left:0;}
  .dash-act-punto-info{background:var(--cian-radar);}
  .dash-act-punto-error{background:var(--rojo-babor);}

  /* Gráfico de actividad diaria: una columna por día, apilando el
     segmento de errores arriba del de eventos normales (mismo criterio
     que los gráficos de barras de Estadística, pero en base a un
     máximo relativo del período en vez de un 0-100% fijo). */
  #dashActSerieScroll{overflow-x:auto; padding-bottom:4px;}
  .dash-act-serie{
    display:flex;
    align-items:flex-end;
    gap:4px;
    height:180px;
  }
  .dash-act-columna{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    flex:1;
    min-width:10px;
    height:100%;
  }
  .dash-act-columna-track{
    width:100%;
    max-width:22px;
    flex:1;
    display:flex;
    flex-direction:column-reverse;
    background:rgba(18,37,59,0.06);
    border-radius:4px;
    overflow:hidden;
  }
  .dash-act-barra{width:100%;}
  .dash-act-barra-info{background:var(--cian-radar);}
  .dash-act-barra-error{background:var(--rojo-babor);}
  .dash-act-columna-label{
    font-size:9.5px;
    color:var(--texto-bajo);
    font-family:var(--mono);
    white-space:nowrap;
  }

  /* Barras horizontales de "top acciones" / "top usuarios": etiqueta a
     la izquierda, barra proporcional al máximo del grupo, valor a la
     derecha -- mismo patrón que .barra-track/.barra-fill que ya usa
     Estadística para "avance", con su propio color (cian, no el
     semáforo verde/amarillo/rojo de avance, porque acá no representa
     una finalización sino una cantidad). */
  .dash-act-fila-barra{
    display:grid;
    grid-template-columns:110px 1fr 40px;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
  }
  .dash-act-fila-barra:last-child{margin-bottom:0;}
  /* "Usuarios más activos" no tiene tope de cantidad (se listan
     TODOS), así que si hay muchos usuarios el panel se queda con una
     altura razonable y scroll interno, en vez de crecer sin control y
     desbalancear la grilla frente al panel de "Acciones" (que sí está
     acotado a 8). */
  #dashActTopUsuarios{
    max-height:280px;
    overflow-y:auto;
    padding-right:2px;
  }
  .dash-act-fila-label{
    font-size:12px;
    color:var(--texto-alto);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .dash-act-fila-track{
    height:10px;
    background:rgba(18,37,59,0.06);
    border-radius:6px;
    overflow:hidden;
  }
  .dash-act-fila-fill{
    height:100%;
    background:var(--cian-radar);
    border-radius:6px;
    transition:width .4s ease;
  }
  .dash-act-fila-valor{
    font-family:var(--mono);
    font-size:12px;
    color:var(--texto-medio);
    text-align:right;
  }

  /* Lista de errores recientes: fecha + usuario + detalle en una fila,
     con el detalle truncándose si es muy largo (el título completo
     queda en el atributo title, igual que el resto de la app). */
  .dash-act-errores-lista{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:220px;
    overflow-y:auto;
  }
  .dash-act-error-item{
    display:grid;
    grid-template-columns:130px 90px 1fr;
    gap:10px;
    align-items:start;
    padding:8px 10px;
    background:rgba(200,67,61,0.06);
    border-left:3px solid var(--rojo-babor);
    border-radius:6px;
    font-size:12px;
  }
  .dash-act-error-fecha{
    font-family:var(--mono);
    color:var(--texto-medio);
    white-space:nowrap;
  }
  .dash-act-error-usuario{
    font-weight:600;
    color:var(--texto-alto);
  }
  .dash-act-error-detalle{
    color:var(--texto-alto);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  @media (max-width:768px){
    .dash-act-kpis{grid-template-columns:repeat(2, 1fr);}
    .dash-act-grid{grid-template-columns:1fr;}
    .dash-act-fila-barra{grid-template-columns:80px 1fr 34px;}
    .dash-act-error-item{grid-template-columns:1fr; gap:2px;}
  }
  @media (max-width:480px){
    .dash-act-kpis{grid-template-columns:1fr 1fr;}
    .dash-act-kpi-valor{font-size:21px;}
  }

  .hint-texto{
    color:var(--texto-medio);
    font-size:12px;
    margin-top:-8px;
    margin-bottom:14px;
  }

/* ============================================================
   FIX RESPONSIVE SIDEBAR / DRAWER
   ============================================================ */
@media (max-width:640px){

  /* .app tiene "position:relative; z-index:1" (ver arriba), y eso crea
     su PROPIO contexto de apilamiento. Como .toolbar-right vive dentro
     de .app, su z-index:90 solo se compara contra sus hermanos DENTRO
     de .app — nunca contra body::after (el fondo oscuro), que vive
     fuera, directamente en <body>. El resultado: todo .app (sidebar
     incluido) queda pintado como un único bloque a nivel "1", por
     debajo del backdrop a nivel 80/30, sin importar qué z-index interno
     tenga el sidebar. Se anula aquí ese z-index (solo en este
     breakpoint) para que .toolbar-right compare directamente contra el
     backdrop en el nivel raíz, donde su z-index:90 sí gana. */
  .app{
    z-index:auto;
  }

  /* El drawer tiene prioridad sobre el fondo oscuro */
  .toolbar-right{
    z-index:90 !important;
    pointer-events:none;
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0);
    will-change:transform;
  }

  .toolbar-right.abierto{
    z-index:90 !important;
    pointer-events:auto !important;
    -webkit-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
  }

  .toolbar-right .btn{
    position:relative;
    z-index:91;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  /* El backdrop queda por debajo del sidebar y por encima del contenido */
  body::after{
    z-index:80 !important;
  }

  /* Al abrir el menú no permitir scroll del contenido de fondo */
  body.menu-movil-abierto{
    overflow:hidden;
  }

  /* El botón hamburguesa siempre queda por encima del contenido */
  .btn-hamburguesa{
    position:relative;
    z-index:95;
    touch-action:manipulation;
    transition: opacity .3s ease, visibility .3s ease, background .15s, border-color .15s, transform .2s ease;
  }

  .btn-hamburguesa.activo {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }

  /* Mantener texto + icono visibles en el drawer móvil.
     La regla base (.toolbar-right.contraido .btn .etiqueta, sin media
     query, más arriba en este archivo) esconde el texto con
     opacity:0 + max-width:0 -- no con display:none -- para poder
     animarlo suave en escritorio. display:inline por sí solo no
     revierte eso, por eso acá se pisan las tres propiedades. */
  .toolbar-right.contraido .btn .etiqueta{
    display:inline !important;
    opacity:1 !important;
    max-width:200px !important;
  }

  .toolbar-right .btn{
    min-height:44px;
  }
}

/* ---------- Permisos por rol: columna "Acciones" en todos los módulos ---------- */
/* Para usuarios sin rol administrador, se oculta por completo la
   columna "Acciones" (editar/eliminar) en TODAS las tablas de la app
   -tabla principal, Componentes, Usuarios, Embarcaciones-, tanto en la
   vista de tabla (escritorio) como en la de tarjetas (responsive).
   Se usa una clase explícita en el <th> (en vez de :last-child) para
   no afectar por error a tablas como Observaciones o Registro, cuya
   última columna no es "Acciones". El botón "Nuevo equipo" se oculta
   aparte, por JS.
   GUÍAS ES UN CASO INTERMEDIO: cualquier usuario con sesión iniciada
   puede DESCARGAR guías, pero crear/editar/eliminar está reservado a
   administradores (ver ruta_guias() en el backend). Por eso su columna
   "Acciones" se excluye de la regla de abajo con ":not(#guiasWrap td)"
   -así el ícono de descarga sigue visible para todos-, y en su lugar
   se oculta puntualmente solo .guia-solo-admin (Editar/Eliminar) más
   abajo. El botón "Nueva guía" se oculta aparte, por JS. */
body.oculta-acciones th.col-acciones,
body.oculta-acciones td[data-label="Acciones"]:not(#guiasWrap td):not(#manualesWrap td){
  display:none !important;
}
body.oculta-acciones #guiasWrap .guia-solo-admin{
  display:none !important;
}
body.oculta-acciones #manualesWrap .manual-solo-admin{
  display:none !important;
}