/* estilos.css — extraído de index.html (proyecto real) sin cambios de contenido.
 * Comentado por sección donde el CSS original ya lo estaba.
 * Rediseño visual (sección 8 del contexto) en curso — punto 1 (tipografía)
 * ya aplicado: --heading (Space Grotesk) para títulos, --sans (Inter) para
 * texto de cuerpo, --mono (JetBrains Mono) sin cambios para datos/labels. */

  :root{
    /* Base */
    --bg:#080b11;
    --panel:#0f1520;
    --panel-2:#141b28;
    --panel-3:#1a2231;
    --line:#212b3d;
    --line-soft:#1a2231;
    --text:#eef2f8;
    --text-2:#c3ccdb;
    --muted:#7d8AA0;

    /* Paleta base. --violet ya no se usa para estados (ver sistema de tokens
       más abajo) — sigue viva solo para .btn-violet (el botón "Marcar
       instalada"), que es una acción, no un estado. */
    --accent:#3B84FF;      --accent-dim:#0e2748;
    --warn:#F5A623;        --warn-dim:#3d2c0d;
    --violet:#9A7BFF;      --violet-dim:#231a45;
    --danger:#FF5F55;      --danger-dim:#431815;
    --grey:#7d8AA0;        --grey-dim:#1c2331;
    --ok:#2FD08A;          --ok-dim:#0f2b20;

    /* Sistema de 5 tokens de estado (rediseño 8.4): mismo significado en
       onus, instalaciones y soportes, para que un mismo tono no signifique
       cosas distintas según la colección (antes "Anulado" de soporte y
       "Devuelta" de ONUs compartían tono sin tener nada que ver). El mapeo
       estado → token está en los comentarios de .chip.* y tr.st-* (abajo). */
    --st-exito:var(--ok);          --st-exito-dim:var(--ok-dim);       /* verde: terminado con éxito */
    --st-info:var(--accent);       --st-info-dim:var(--accent-dim);    /* azul: en curso / activo */
    --st-alerta:var(--warn);       --st-alerta-dim:var(--warn-dim);    /* ámbar: esperando acción */
    --st-peligro:var(--danger);    --st-peligro-dim:var(--danger-dim); /* rojo: problema real */
    --st-neutral:var(--grey);      --st-neutral-dim:var(--grey-dim);   /* gris: inactivo / anulado */

    --radius:8px;
    --radius-lg:14px;
    --mono:'JetBrains Mono', ui-monospace, monospace;
    --sans:'Inter', system-ui, sans-serif;
    --heading:'Space Grotesk', var(--sans);

    /* Colores fijos por camioneta (rediseño 8.2) — deben coincidir con
       COLOR_CAMIONETA en js/utilidades.js; si cambian acá, cambiarlos ahí también. */
    --cam-fiorino:#2DD4BF;
    --cam-vieja:#D4A24C;
    --cam-nueva:#60A5FA;
    --cam-nn:#F472B6;
    --cam-newnew:#A78BFA;
    --shadow:0 8px 30px rgba(0,0,0,.45);
    --tap:44px;
  }

  *{box-sizing:border-box;}
  html{ -webkit-text-size-adjust:100%; }
  body{
    margin:0; background:var(--bg); color:var(--text); font-family:var(--sans);
    min-height:100vh; -webkit-font-smoothing:antialiased; font-size:15px; line-height:1.5;
  }
  /* Títulos genéricos con la tipografía de encabezados (Space Grotesk).
     Los labels tipo dato (.panel-block h4, .history h4, más abajo) pisan
     esto con font-family:var(--mono) por mayor especificidad. */
  h1,h2,h3,h4,h5{ font-family:var(--heading); font-weight:600; }
  ::selection{background:var(--accent); color:#04121f;}
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:4px; }
  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
  }

  /* ============ HEADER ============ */
  header{
    position:sticky; top:0; z-index:30;
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 24px; border-bottom:1px solid var(--line);
    background:rgba(15,21,32,.92); backdrop-filter:blur(12px);
  }
  header .brand{display:flex; align-items:center; gap:12px; min-width:0;}
  header .brand .mark{
    width:36px; height:36px; border-radius:9px; overflow:hidden; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  header h1{font-size:16px; margin:0; letter-spacing:-.01em; font-weight:600; white-space:nowrap; font-family:var(--heading);}
  header .sub{font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:1px;}
  header .who{display:flex; align-items:center; gap:12px; font-size:13px; color:var(--muted); min-width:0;}
  header .who .email{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:30vw; }
  header button.logout{
    background:none; border:1px solid var(--line); color:var(--text-2);
    padding:8px 13px; border-radius:var(--radius); cursor:pointer; font-family:var(--sans);
    font-size:13px; transition:.15s; white-space:nowrap;
  }
  header button.logout:hover{border-color:var(--danger); color:var(--danger); background:var(--danger-dim);}

  main{padding:22px 24px 60px; max-width:1440px; margin:0 auto;}

  /* ============ LOGIN ============ */
  #login-view{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
  .login-card{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:38px 34px; width:100%; max-width:380px; box-shadow:var(--shadow);
  }
  .login-card .mark{
    width:52px;height:52px;border-radius:13px;overflow:hidden;
    display:flex;align-items:center;justify-content:center;margin-bottom:20px;
  }
  .login-card h2{margin:0 0 4px; font-size:22px; letter-spacing:-.02em; font-family:var(--heading); font-weight:600;}
  .login-card p.hint{color:var(--muted); font-size:13.5px; margin:0 0 24px;}
  label{display:block; font-size:11.5px; color:var(--muted); margin:15px 0 6px; font-family:var(--mono); letter-spacing:.02em; text-transform:uppercase;}
  input[type=email], input[type=password], input[type=text], input[type=date], input[type=number], input[type=week], select, textarea{
    width:100%; background:var(--panel-2); border:1px solid var(--line); color:var(--text);
    padding:11px 12px; border-radius:var(--radius); font-family:var(--sans); font-size:15px;
    transition:border-color .15s;
  }
  /* Los íconos de calendario/reloj que agrega el navegador en date/week vienen en
     negro por defecto — se invierten a blanco para que se vean sobre el fondo oscuro. */
  input[type=date]::-webkit-calendar-picker-indicator,
  input[type=week]::-webkit-calendar-picker-indicator{
    filter: invert(1);
    cursor: pointer;
  }
  /* Las flechitas de subir/bajar de los inputs numéricos también son un elemento
     nativo del navegador; con esto quedan integradas al tema en vez de blancas. */
  input[type=number]{ color-scheme: dark; }
  input[type=date], input[type=week]{ color-scheme: dark; }
  input:hover, select:hover, textarea:hover{ border-color:#2e3a52; }
  input:focus, textarea:focus, select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,132,255,.15);}
  input:disabled, select:disabled, textarea:disabled{ opacity:.55; cursor:not-allowed; }
  textarea{min-height:72px; resize:vertical; line-height:1.5;}
  button.primary{
    width:100%; margin-top:24px; padding:13px; border:none; border-radius:var(--radius);
    background:var(--accent); color:#031222; font-weight:600; cursor:pointer; font-family:var(--sans);
    font-size:15px; transition:.15s;
  }
  button.primary:hover:not(:disabled){ filter:brightness(1.08); }
  button.primary:disabled{opacity:.45; cursor:default;}
  #login-error{color:var(--danger); font-size:13px; margin-top:12px; min-height:16px;}

  /* ============ SWITCH DE VISTA ============ */
  .view-switch{
    display:flex; gap:6px; margin-bottom:20px; background:var(--panel); padding:5px;
    border-radius:12px; border:1px solid var(--line); width:fit-content; max-width:100%;
    overflow-x:auto; scrollbar-width:none;
  }
  .view-switch::-webkit-scrollbar{display:none;}
  .view-btn{
    background:none; border:none; color:var(--muted); white-space:nowrap;
    padding:10px 18px; border-radius:8px; cursor:pointer; font-size:14px;
    font-family:var(--sans); font-weight:500; transition:.15s; min-height:var(--tap);
  }
  .view-btn:hover{color:var(--text-2);}
  .view-btn.active{background:var(--accent); color:#031222; font-weight:600;}
  .nav-badge{
    position:absolute; top:-6px; right:-6px; min-width:19px; height:19px; padding:0 5px;
    border-radius:10px; background:var(--danger); color:#fff; font-family:var(--mono);
    font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center;
    border:2px solid var(--bg); line-height:1;
  }

  /* ============ RESUMEN ============ */
  .summary{
    display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin-bottom:20px;
    align-items:start; /* que una tarjeta más alta (el mini-gráfico) no estire a sus vecinas */
  }
  .stat{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
    padding:14px 16px; position:relative; overflow:hidden;
    /* Alto compartido por todas las tarjetas del resumen (número suelto o el
       mini-gráfico), para que queden parejas en vez de que la del gráfico
       sobresalga — con flex + justify-content:center, el número y la etiqueta
       de las tarjetas simples quedan centrados en ese alto en vez de pegados
       arriba con un hueco vacío abajo. */
    min-height:124px; display:flex; flex-direction:column; justify-content:center;
  }
  .stat::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--grey); }
  .stat.s-stock::before{background:var(--st-neutral);}     /* En stock / Trabajos totales */
  .stat.s-asignada::before{background:var(--st-info);}     /* En camionetas / Instalaciones */
  .stat.s-instalada::before{background:var(--st-exito);}   /* Instaladas / Soporte resuelto */
  .stat.s-defectuosa::before{background:var(--st-peligro);}/* Defectuosas / Soporte no resuelto */
  .stat .n{ font-size:26px; font-weight:600; letter-spacing:-.02em; font-family:var(--mono); }
  .stat .l{ font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:2px; }

  /* Tarjeta de mini-gráfico (restyling ronda 2) — ocupa más ancho que una
     tarjeta de número suelta, para que el gráfico de barras no quede apretado. */
  .stat-tendencia{ grid-column:span 2; min-width:220px; justify-content:flex-start; }
  .stat-tendencia .l{ margin-bottom:10px; }
  /* Alto fijo y position:relative: Chart.js con responsive:true necesita que
     el contenedor INMEDIATO del canvas tenga una altura explícita, si no
     entra en un bucle de "crecer para llenar el espacio disponible" que a su
     vez agranda ese espacio — y como .summary es un grid, terminaba estirando
     también a las otras tarjetas de la misma fila. */
  .stat-tendencia .chart-box{ position:relative; height:70px; width:100%; }
  .stat-tendencia .tendencia-hint{ font-size:12.5px; color:var(--muted); padding:8px 0 2px; }

  /* ============ TABS ============ */
  .tabs{display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap;}
  .tab-btn{
    background:var(--panel); border:1px solid var(--line); color:var(--muted);
    padding:9px 15px; border-radius:20px; cursor:pointer; font-size:13.5px; font-family:var(--sans);
    display:inline-flex; align-items:center; gap:7px; transition:.15s;
  }
  .tab-btn:hover{ border-color:#2e3a52; color:var(--text-2); }
  .tab-btn .n{font-family:var(--mono); font-size:11px; opacity:.8;}
  .tab-btn.active{background:var(--accent-dim); border-color:var(--accent); color:var(--accent); font-weight:600;}

  /* ============ TOOLBAR ============ */
  .toolbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-bottom:16px;}
  .toolbar input[type=text]{max-width:300px; flex:1 1 220px;}
  .btn-toolbar{
    background:var(--panel); border:1px solid var(--line); color:var(--text-2);
    padding:11px 15px; border-radius:var(--radius); cursor:pointer; font-size:13.5px;
    font-family:var(--sans); transition:.15s; min-height:var(--tap); white-space:nowrap;
  }
  .btn-toolbar:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}
  .btn-toolbar-accent{background:var(--accent); border-color:var(--accent); color:#031222; font-weight:600;}
  .btn-toolbar-accent:hover{filter:brightness(1.08); color:#031222; background:var(--accent);}
  .counts{margin-left:auto; font-family:var(--mono); font-size:12px; color:var(--muted);}

  /* ============ TABLA ============ */
  /* Ojo con esto: overflow:hidden acá convertía a .table-wrap en el propio
     contenedor de referencia para el thead pegajoso (position:sticky calcula
     el offset contra el ancestro con scroll/overflow más cercano, no contra
     la ventana) — el encabezado terminaba pegándose a un offset fijo desde
     ACÁ ADENTRO en vez de desde arriba de la página, tapando filas reales.
     Por eso sin overflow:hidden, y las esquinas redondeadas se hacen a mano
     en la primera/última celda en vez de recortarlas por afuera. */
  .table-wrap{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg); }
  table{width:100%; border-collapse:collapse;}
  thead th{
    text-align:left; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
    color:var(--muted); text-transform:uppercase; padding:12px 14px;
    border-bottom:1px solid var(--line); background:var(--panel-2);
  }
  thead tr:first-child th:first-child{ border-top-left-radius:var(--radius-lg); }
  thead tr:first-child th:last-child{ border-top-right-radius:var(--radius-lg); }
  tbody tr:last-child td:first-child{ border-bottom-left-radius:var(--radius-lg); }
  tbody tr:last-child td:last-child{ border-bottom-right-radius:var(--radius-lg); }
  tbody td{padding:13px 14px; border-bottom:1px solid var(--line-soft); font-size:14px; vertical-align:middle;}
  tbody tr:last-child td{border-bottom:none;}
  tbody tr{ transition:background .12s; }
  tbody tr:hover{background:var(--panel-2);}
  td.serial{font-family:var(--mono); font-weight:600; font-size:13px; letter-spacing:-.01em;}
  td.mac{font-family:var(--mono); color:var(--muted); font-size:12.5px;}

  /* Riel de estado: el borde izquierdo codifica el estado del registro.
     Sistema de 5 tokens (rediseño 8.4) — el mismo tono siempre significa lo
     mismo, sin importar la colección:
       éxito/verde: instalada (onu) · completada (instalación) · resuelto (soporte)
       info-activo/azul: asignada (onu) · pasar_a_ubi (soporte)
       alerta/ámbar: devuelta (onu) · pendiente (instalación/soporte)
       peligro/rojo: defectuosa (onu) · no_resuelto (soporte)
       neutral-inactivo/gris: en_stock (onu) · cancelada (instalación) · cancelado (soporte, "Anulado") */
  tbody tr{ border-left:3px solid transparent; }
  tbody tr.st-instalada,tbody tr.st-completada,tbody tr.st-resuelto{ border-left-color:var(--st-exito); }
  tbody tr.st-asignada,tbody tr.st-pasar_a_ubi{ border-left-color:var(--st-info); }
  tbody tr.st-devuelta,tbody tr.st-pendiente{ border-left-color:var(--st-alerta); }
  tbody tr.st-defectuosa,tbody tr.st-no_resuelto{ border-left-color:var(--st-peligro); }
  tbody tr.st-en_stock,tbody tr.st-cancelada,tbody tr.st-cancelado{ border-left-color:var(--st-neutral); }

  .chip{
    display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:20px;
    font-size:11px; font-family:var(--mono); font-weight:600; white-space:nowrap;
  }
  .chip .dot{width:6px; height:6px; border-radius:50%; flex-shrink:0;}
  /* Mismo sistema de 5 tokens que el riel de arriba. sopChipClase() (en
     soporte.js) mapea los 4 estados propios de soporte a estas mismas clases
     según su significado — ver el comentario ahí para el detalle. */
  .chip.instalada,.chip.completada{background:var(--st-exito-dim); color:var(--st-exito);} .chip.instalada .dot,.chip.completada .dot{background:var(--st-exito);}
  .chip.asignada,.chip.pasar_a_ubi{background:var(--st-info-dim); color:var(--st-info);} .chip.asignada .dot,.chip.pasar_a_ubi .dot{background:var(--st-info);}
  .chip.devuelta,.chip.pendiente{background:var(--st-alerta-dim); color:var(--st-alerta);} .chip.devuelta .dot,.chip.pendiente .dot{background:var(--st-alerta);}
  .chip.defectuosa{background:var(--st-peligro-dim); color:var(--st-peligro);} .chip.defectuosa .dot{background:var(--st-peligro);}
  .chip.en_stock,.chip.cancelada{background:var(--st-neutral-dim); color:var(--st-neutral);} .chip.en_stock .dot,.chip.cancelada .dot{background:var(--st-neutral);}
  /* Chip de camioneta: color por instancia via --cam-color (inline, seteado
     desde JS con colorCamioneta()), no por clase — así cualquier camioneta
     nueva funciona sin tocar el CSS. */
  .chip.camioneta{background:color-mix(in srgb, var(--cam-color, var(--muted)) 18%, transparent); color:var(--cam-color, var(--muted));}
  .chip.camioneta .dot{background:var(--cam-color, var(--muted));}

  /* Nivel de acceso (gestión de usuarios) — paleta propia, sin relación con
     el sistema de 5 tokens de estado de arriba (esto no es un estado de un
     registro, es un rol fijo de la persona). */
  .chip.nivel-1{background:var(--accent-dim); color:var(--accent);}
  .chip.nivel-2{background:var(--ok-dim); color:var(--ok);}
  .chip.nivel-4{background:var(--warn-dim); color:var(--warn);}

  /* Avatares de técnicos (rediseño 8.3): iniciales sobre un color fijo por
     nombre, estilo Notion/Linear. --av-color lo setea JS con colorPorNombre(). */
  .avatar{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:22px; height:22px; border-radius:50%; font-family:var(--sans);
    font-size:10px; font-weight:600; color:#04121f;
    background:var(--av-color, var(--muted));
  }
  .avatar-chip{
    display:inline-flex; align-items:center; gap:6px; font-size:12.5px;
    color:var(--text-2); white-space:nowrap;
  }
  .avatar-stack{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; }

  .row-actions{ text-align:right; }
  .row-check{ width:36px; text-align:center; }
  .row-check input, #inst-select-all-th input, #sop-select-all-th input{ width:16px; height:16px; cursor:pointer; }
  .row-actions button{
    background:var(--panel-2); border:1px solid var(--line); color:var(--text-2);
    padding:8px 13px; border-radius:var(--radius); cursor:pointer; font-size:13px; transition:.15s;
  }
  .row-actions button:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}

  /* Rediseño 8.5: textos que invitan a actuar, no solo informan — cuando hay
     una única acción clara (cargar el primer registro), el estado vacío
     tiene su propio botón en vez de mandar a buscarlo en la barra de arriba. */
  .empty-state{padding:56px 24px; text-align:center;}
  .empty-state .t{ font-size:16px; font-family:var(--heading); font-weight:600; color:var(--text); margin-bottom:5px; }
  .empty-state .s{ font-size:13.5px; color:var(--muted); max-width:420px; margin:0 auto; line-height:1.5; }
  .empty-state .btn-toolbar{ display:inline-flex; margin-top:18px; }

  /* ============ PAGINACIÓN ============ */
  .pagination{display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; flex-wrap:wrap;}
  .pagination button{
    background:var(--panel); border:1px solid var(--line); color:var(--text-2);
    padding:10px 14px; border-radius:var(--radius); cursor:pointer; font-family:var(--sans);
    font-size:13.5px; min-height:var(--tap); transition:.15s;
  }
  .pagination button:hover:not(:disabled){border-color:var(--accent); color:var(--accent);}
  .pagination button:disabled{opacity:.3; cursor:default;}
  .pagination .page-info{font-family:var(--mono); font-size:12px; color:var(--muted); min-width:110px; text-align:center;}
  .pagination select{
    background:var(--panel); border:1px solid var(--line); color:var(--text-2);
    padding:9px 10px; border-radius:var(--radius); font-family:var(--sans); font-size:13px; width:auto;
  }

  /* ============ MODAL ============ */
  .overlay{
    position:fixed; inset:0; background:rgba(4,7,12,.78); display:none;
    align-items:center; justify-content:center; z-index:60; padding:20px;
    backdrop-filter:blur(3px);
  }
  .overlay.open{display:flex;}
  .modal{
    background:var(--panel); border:1px solid var(--line); border-radius:var(--radius-lg);
    width:100%; max-width:620px; max-height:90vh; overflow-y:auto; padding:28px;
    box-shadow:var(--shadow);
  }
  .modal h3{margin:0 0 3px; font-size:19px; letter-spacing:-.02em; font-family:var(--heading); font-weight:600;}
  .modal .modal-sub{font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:18px;}
  .modal .tech-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:10px 20px; font-family:var(--mono); font-size:12px;
    color:var(--muted); background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 16px; margin-bottom:18px;
  }
  .tech-grid b{color:var(--text); font-weight:500; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);}
  .tech-grid > div{ color:var(--text-2); }
  .grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 14px;}

  .estado-actual{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap;}
  .estado-actual .lbl{font-size:11px; color:var(--muted); font-family:var(--mono); text-transform:uppercase; letter-spacing:.04em;}

  .panel-block{background:var(--panel-2); border:1px solid var(--line); border-radius:var(--radius); padding:16px; margin-bottom:12px;}
  .rep-graficos-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:start;}
  .rep-graficos-grid .panel-block{margin-bottom:0;}
  @media (max-width:860px){ .rep-graficos-grid{grid-template-columns:1fr;} }
  .panel-block h4{margin:0 0 12px; font-size:11.5px; font-family:var(--mono); color:var(--text-2); text-transform:uppercase; letter-spacing:.05em;}
  .panel-block .row-btns{display:flex; gap:10px; margin-top:14px; flex-wrap:wrap;}
  .btn{
    padding:11px 15px; border-radius:var(--radius); cursor:pointer; font-family:var(--sans);
    font-size:13.5px; border:1px solid var(--line); background:none; color:var(--text-2);
    flex:1 1 auto; min-height:var(--tap); transition:.15s;
  }
  .btn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-dim);}
  .btn-accent{background:var(--accent); border-color:var(--accent); color:#031222; font-weight:600;}
  .btn-accent:hover{filter:brightness(1.08); color:#031222; background:var(--accent);}
  .btn-warn{background:var(--warn); border-color:var(--warn); color:#231703; font-weight:600;}
  .btn-warn:hover{filter:brightness(1.08); color:#231703; background:var(--warn);}
  .btn-violet{background:var(--violet); border-color:var(--violet); color:#140d2c; font-weight:600;}
  .btn-violet:hover{filter:brightness(1.08); color:#140d2c; background:var(--violet);}
  .btn-danger-outline{border-color:var(--danger); color:var(--danger);}
  .btn-danger-outline:hover{background:var(--danger-dim); color:var(--danger); border-color:var(--danger);}
  .btn-secondary{ background:none; }
  .readonly-line{font-size:13.5px; color:var(--muted); margin-bottom:6px;}
  .readonly-line b{color:var(--text-2); font-weight:500;}

  .danger-zone{border:1px dashed var(--danger); border-radius:var(--radius); padding:14px 16px; margin-top:18px;}
  .danger-zone summary{cursor:pointer; color:var(--danger); font-size:13px; font-family:var(--mono); list-style:none;}
  .danger-zone summary::-webkit-details-marker{display:none;}
  .danger-zone .confirm-row{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap;}
  .danger-zone input{flex:1 1 180px;}

  .history{margin-top:16px; border-top:1px solid var(--line); padding-top:14px;}
  .history h4{margin:0 0 8px; font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; font-family:var(--mono);}
  .history-item{font-size:13px; color:var(--muted); padding:8px 0; border-bottom:1px dashed var(--line);}
  .history-item:last-child{border-bottom:none;}
  .history-item b{color:var(--text-2);}
  #modal-error, #inst-modal-error, #sop-modal-error{color:var(--danger); font-size:13px; margin-top:10px; min-height:14px;}
  .modal-close-row{display:flex; justify-content:flex-end; margin-top:10px;}
  .modal-close-row button{
    background:none; border:1px solid var(--line); color:var(--text-2); padding:11px 18px;
    border-radius:var(--radius); cursor:pointer; min-height:var(--tap); font-size:13.5px;
  }
  .modal-close-row button:hover{ border-color:var(--accent); color:var(--accent); }
  .modal-actions{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}

  /* ============ TOASTS ============ */
  #toasts{position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; width:calc(100% - 40px); max-width:420px;}
  .toast{
    background:var(--panel-3); border:1px solid var(--line); color:var(--text);
    padding:13px 18px; border-radius:var(--radius); font-size:14px; box-shadow:var(--shadow);
    display:flex; align-items:center; gap:10px; animation:toastIn .22s ease-out; width:100%;
  }
  .toast.ok{ border-left:3px solid var(--ok); }
  .toast.err{ border-left:3px solid var(--danger); }
  @keyframes toastIn{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:none;} }

  /* ============ FOOTER ============ */
  footer.credit{
    text-align:center; padding:24px 0 8px; color:var(--muted);
    font-family:var(--mono); font-size:11.5px; border-top:1px solid var(--line); margin-top:32px;
  }
  footer.credit a{display:inline-flex; align-items:center; gap:7px; color:var(--muted); text-decoration:none; transition:.15s;}
  footer.credit a:hover{color:var(--text-2);}
  footer.credit svg{display:block;}

  /* ============================================================
     RESPONSIVE — en pantallas chicas la tabla se vuelve tarjetas
     ============================================================ */
  @media (max-width: 860px){
    header{ padding:12px 16px; }
    header .who .email{ display:none; }
    main{ padding:16px 14px 48px; }
    .summary{ grid-template-columns:repeat(2,1fr); gap:8px; }
    .stat{ padding:12px 14px; }
    .stat .n{ font-size:22px; }
    .toolbar input[type=text]{ max-width:none; flex:1 1 100%; }
    .counts{ margin-left:0; width:100%; }
    .btn-toolbar{ flex:1 1 auto; }
    .modal{ padding:20px 18px; max-height:94vh; border-radius:12px; }
    .tech-grid{ grid-template-columns:1fr; gap:8px; }
    .grid2{ grid-template-columns:1fr; }
    .modal-actions .btn{ flex:1 1 100%; }

    /* Tabla -> tarjetas */
    .table-wrap{ background:none; border:none; border-radius:0; overflow:visible; }
    table, thead, tbody, tr, td{ display:block; width:100%; }
    thead{ display:none; }
    tbody tr{
      background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--grey);
      border-radius:var(--radius-lg); margin-bottom:10px; padding:6px 2px; position:relative;
    }
    tbody tr:hover{ background:var(--panel); }
    tbody td{
      border-bottom:none; padding:7px 14px; display:flex; align-items:center;
      justify-content:space-between; gap:14px; font-size:14px;
    }
    tbody td::before{
      content:attr(data-label); font-family:var(--mono); font-size:10px; color:var(--muted);
      text-transform:uppercase; letter-spacing:.05em; flex-shrink:0;
    }
    tbody td:empty{ display:none; }
    tbody td.row-actions{ justify-content:stretch; padding:10px 14px 12px; }
    tbody td.row-actions::before{ display:none; }
    tbody td.row-actions button{ width:100%; min-height:var(--tap); }
    tbody td.serial{ font-size:15px; }
    tbody td.row-check::before{ content:'Seleccionar para archivar'; }

    .pagination{ gap:8px; }
    .pagination button{ flex:1 1 auto; }
    .pagination select{ flex:1 1 100%; }
  }

  @media (max-width: 420px){
    .summary{ grid-template-columns:1fr 1fr; }
    header h1{ font-size:15px; }
    .view-btn{ padding:10px 14px; font-size:13.5px; }
  }

  /* Íconos en línea dentro de botones */
  .ico{ width:16px; height:16px; flex-shrink:0; }
  .view-btn, .btn-toolbar, .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; }
  .tab-btn{ justify-content:center; }

  /* Botón de instalar (PWA) */
  #install-btn{ display:none; }

  /* ============ RESTYLING RONDA 2 ============ */

  /* ---- Estados de carga (esqueletos) ----
     Filas placeholder mientras el primer onSnapshot todavía no llegó — ver
     filasEsqueleto() en js/utilidades.js. El shimmer respeta
     prefers-reduced-motion automáticamente (regla global más arriba). */
  .skeleton{
    display:inline-block; height:13px; border-radius:4px;
    background:linear-gradient(90deg, var(--panel-3) 25%, var(--line) 37%, var(--panel-3) 63%);
    background-size:400% 100%;
    animation:skeletonShimmer 1.4s ease infinite;
  }
  @keyframes skeletonShimmer{
    0%{ background-position:100% 50%; }
    100%{ background-position:0% 50%; }
  }
  tr.fila-esqueleto{ pointer-events:none; }
  tr.fila-esqueleto:hover{ background:none; }

  /* ---- Tablas más cómodas: encabezado pegajoso + más aire entre filas ----
     --header-h la fija main.js midiendo el <header> real (altura variable
     según el email/nivel mostrado), con 64px de respaldo antes de esa medición. */
  :root{ --header-h:64px; }
  thead th{
    position:sticky; top:var(--header-h); z-index:5;
  }
  tbody td{ padding:15px 14px; }

  /* ---- Micro-interacciones: transiciones suaves en vez de aparecer de golpe ----
     Con @keyframes (no transition) para que ande apenas se agrega la clase
     .open, sin depender de un JS que separe el display:none -> flex del
     resto (una transition normal no anima ese primer frame). */
  .overlay.open .modal{ animation:modalIn .16s ease; }
  @keyframes modalIn{ from{ opacity:0; transform:translateY(6px) scale(.98); } to{ opacity:1; transform:none; } }
  .btn, .btn-toolbar, .view-btn, .tab-btn, button{ transition:background .15s ease, border-color .15s ease, opacity .15s ease, transform .1s ease; }
  .btn:active, .btn-toolbar:active, .view-btn:active{ transform:scale(.98); }
  /* Los toasts ya animaban al entrar (ver @keyframes toastIn más arriba) — nada que sumar acá. */