/* ... tu CSS ... */
:root{
    --azul-marino:#0b2545;
    --azul-marino-oscuro:#081b34;
    --azul-marino-claro:#153a68;
    --fondo:#ffffff;
    --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;
  }

  *{box-sizing:border-box;}
  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;
  }
  .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:#ffffff;
    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;
  }
  #filtroCarena{
    height:100%;
    padding:10px 34px 10px 14px;
    background:#ffffff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%2357697b" stroke-width="2"><polyline points="6 9 12 15 18 9"/></svg>') no-repeat right 10px center;
    background-size:15px;
    border:1px solid var(--borde);
    border-radius:var(--radio);
    color:var(--texto-alto);
    font-family:var(--sans);
    font-size:13.5px;
    outline:none;
    cursor:pointer;
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    max-width:190px;
    transition:border-color .2s ease, box-shadow .2s ease;
  }
  #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;
  }
  .main-content{
    display:flex;
    flex-direction:column;
    flex:1;
    min-width:0;
  }
  .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{
    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 .25s ease, padding .25s ease;
  }
  .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 .2s ease, padding .2s 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;
  }
  .toolbar-right .btn svg{
    flex-shrink:0;
    transition:width .2s ease, height .2s ease;
  }

  /* ---------- Botón contraer / expandir sidebar (solo escritorio) ---------- */
  .btn-contraer-sidebar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:100%;
    padding:6px 4px;
    margin-bottom:6px;
    background:transparent;
    border:none;
    color:rgba(255, 255, 255, 0.65);
    border-radius:var(--radio);
    transition:background .15s, color .15s, transform .2s ease;
  }
  .btn-contraer-sidebar:hover{
    background:rgba(255, 255, 255, 0.1);
    color:#ffffff;
  }
  .btn-contraer-sidebar svg{
    transition:transform .25s 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{
    display:none;
  }
  .toolbar-right.contraido .btn svg{
    width:20px;
    height:20px;
  }
  .toolbar-right.contraido .btn-contraer-sidebar{
    justify-content:center;
  }
  .toolbar-right.contraido .btn-contraer-sidebar svg{
    transform:rotate(180deg);
  }

  /* ---------- 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:#ffffff;
    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:#ffffff;
    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;
  }
  .panel table th:nth-child(1), .panel table td:nth-child(1){ max-width:64px; }
  .panel table th:nth-child(2), .panel table td:nth-child(2){ min-width:70px; max-width:90px; }
  .panel table th:nth-child(3), .panel table td:nth-child(3){ min-width:80px; max-width:115px; }
  .panel table th:nth-child(4), .panel table td:nth-child(4){ min-width:130px; max-width:190px; }
  .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:95px; max-width:110px; }
  .panel table th:nth-child(7), .panel table td:nth-child(7){ min-width:90px; max-width:120px; }
  .panel table th:nth-child(8), .panel table td:nth-child(8){ min-width:170px; max-width:230px; }
  .panel table th:nth-child(9), .panel table td:nth-child(9){ min-width:95px; max-width:140px; }
  .panel table th:nth-child(10), .panel table td:nth-child(10){ min-width:100px; max-width:150px; }
  .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:85px; max-width:115px; }
  .panel table th:nth-child(13), .panel table td:nth-child(13){ min-width:90px; max-width:100px; text-align:center; }
  .panel table th:nth-child(14), .panel table td:nth-child(14){ min-width:200px; }
  .panel table th:nth-child(15), .panel table td:nth-child(15){ max-width:90px; }
  .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), .panel table td:nth-child(12){ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-decoration:none; }
  .panel table td:nth-child(14){
    white-space:normal;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    line-height:1.35;
    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 15 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:3%;  min-width:0; max-width:none; }
    .panel table th:nth-child(2),  .panel table td:nth-child(2) { width:5%;  min-width:0; max-width:none; }
    .panel table th:nth-child(3),  .panel table td:nth-child(3) { width:6%;  min-width:0; max-width:none; }
    .panel table th:nth-child(4),  .panel table td:nth-child(4) { width:10%; min-width:0; max-width:none; }
    .panel table th:nth-child(5),  .panel table td:nth-child(5) { width:6%;  min-width:0; max-width:none; }
    .panel table th:nth-child(6),  .panel table td:nth-child(6) { width:6%;  min-width:0; max-width:none; }
    .panel table th:nth-child(7),  .panel table td:nth-child(7) { width:6%;  min-width:0; max-width:none; }
    .panel table th:nth-child(8),  .panel table td:nth-child(8) { width:11%; min-width:0; max-width:none; }
    .panel table th:nth-child(9),  .panel table td:nth-child(9) { width:6%;  min-width:0; max-width:none; }
    .panel table th:nth-child(10), .panel table td:nth-child(10){ width:7%;  min-width:0; max-width:none; }
    .panel table th:nth-child(11), .panel table td:nth-child(11){ width:6%;  min-width:0; max-width:none; }
    .panel table th:nth-child(12), .panel table td:nth-child(12){ width:6%;  min-width:0; max-width:none; }
    .panel table th:nth-child(13), .panel table td:nth-child(13){ width:7%;  min-width:0; max-width:none; }
    .panel table th:nth-child(14), .panel table td:nth-child(14){ width:9%;  min-width:0; max-width:none; }
    .panel table th:nth-child(15), .panel table td:nth-child(15){ width:6%;  min-width:0; max-width:none; }

    /* La columna Observaciones normalmente recorta a 2 líneas con
       display:-webkit-box (ver regla de arriba), pero esa técnica no
       es compatible con columnas muy angostas dentro de una tabla
       table-layout:fixed: el navegador puede colapsar la celda a un
       ancho casi nulo y el texto se ve cortado letra por letra. En
       este breakpoint se usa en cambio una sola línea con "…", igual
       que el resto de columnas. */
    .panel table td:nth-child(14){
      display:table-cell;
      -webkit-line-clamp:unset;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
    }
  }
  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;}

  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);
  }

  .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; }

  /* 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: #dfeaf1;
    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:#ffffff;
    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: #ffffff;
  }
  /* ------------------------------------------------------------- */

  /* 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 select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding-right:38px;
    background-color:#ffffff;
    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;}
  .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;
  }

  .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:#ffffff;
    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);}

  @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;}
    .toolbar-top{max-width:none; flex-wrap:nowrap;}
    .search-wrap{max-width:none; min-width:0;}
    .filtro-carena-wrap{width:45%; flex-shrink:0;}
    #filtroCarena{width:100%; max-width:none;}

    /* 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;
    }

    /* 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 botón de
       contraer y el estado "contraido" no aplican aquí. */
    .btn-contraer-sidebar{display:none;}
    .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;}
    .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;}

  @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;}

  /* 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:#ffffff;
    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:#ffffff;
    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:#ffffff;
    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;
  }
  .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:14px 16px;
    background:#ffffff;
    border:1px solid var(--borde);
    border-radius:8px;
  }
  .avance-grupo-cabecera{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:10px;
    margin-bottom:12px;
    padding-bottom:10px;
    border-bottom:1px solid var(--borde);
    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:9px;}
  .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:#ffffff;
    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;
  }
  .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){

    /* 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:#ffffff;
    }
    .tabla-componentes-wrap tbody tr:nth-child(even){background:#ffffff;}
    .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;}

    /* 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:#ffffff;
    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:#ffffff;
    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:#ffffff;
    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:#ffffff;
    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:#ffffff;
    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;
  }
  .registro-toolbar select{
    appearance:none;
    -webkit-appearance:none;
    -moz-appearance:none;
    padding:8px 34px 8px 12px;
    background-color:#ffffff;
    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-size:13px;
    font-weight:500;
    outline:none;
    cursor:pointer;
  }
  .registro-toolbar select:hover, .registro-toolbar select:focus{border-color:var(--cian-radar);}
  .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;}

  .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,
  .toolbar-right .btn-contraer-sidebar{
    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 */
  .toolbar-right.contraido .btn .etiqueta{
    display:inline !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. */
body.oculta-acciones th.col-acciones,
body.oculta-acciones td[data-label="Acciones"]{
  display:none !important;
}