/* ═══════════════════════════════════════════════════════════════════════════
   Registro Técnico Profesional — hoja de estilos (diseño teal del original)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#fdf6ec; --panel:#f1f7f6; --ink:#172033; --muted:#667085; --line:#d6dce8;
  --primary:#0f766e; --primary-2:#14b8a6; --accent:#1d4ed8; --danger:#dc2626;
  --warn:#d97706; --ok:#15803d; --head:#0b1324; --head2:#153a5b; --soft:#e3f4f1;
  --cell:#f7fbfa; --locked:#eaf3f5; --shadow:0 20px 50px rgba(16,24,40,.10); --radius:18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:linear-gradient(145deg,#fef9f0 0%,#fdf6ec 40%,#f9f3e8 100%);
  color:var(--ink);font-family:Inter,"Segoe UI",Roboto,Arial,sans-serif}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.app{min-height:100%;display:flex;flex-direction:column}

header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.94);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);box-shadow:0 8px 28px rgba(15,23,42,.05)}
.top{display:flex;align-items:center;gap:5px 16px;padding:5px 18px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;flex:1 1 100%}
.logo{width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--accent));
  box-shadow:0 8px 20px rgba(15,118,110,.25);display:grid;place-items:center;color:#fff;font-weight:900;flex-shrink:0}
.brand h1{font-size:20px;line-height:1.1;margin:0}
.brand small{display:block;color:var(--muted);font-weight:500;margin-top:3px;font-size:13px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;flex:1 1 100%}

.btn{border:1px solid #cbd5e1;background:#f8fbfa;color:#0f172a;border-radius:12px;
  padding:9px 12px;font-weight:700;cursor:pointer;box-shadow:0 2px 8px rgba(15,23,42,.04);font-size:13px;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;transition:.12s}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,23,42,.10);text-decoration:none}
.btn.primary{background:linear-gradient(135deg,var(--primary),#0f8c82);color:#fff;border-color:transparent}
.btn.blue{background:linear-gradient(135deg,var(--accent),#2563eb);color:#fff;border-color:transparent}
.btn.danger{background:#fff1f2;color:#be123c;border-color:#fecdd3}
.btn.purple{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff;border-color:transparent}
.btn.orange{background:linear-gradient(135deg,#ea580c,#c2410c);color:#fff;border-color:transparent}
.btn.sm{padding:6px 10px;font-size:12px}

.tabs{display:flex;gap:6px;overflow:auto;padding:0 18px 12px}
.tab{white-space:nowrap;border:1px solid #d9e1ee;background:#f8fbfa;color:#334155;
  padding:9px 12px;border-radius:999px;font-weight:800;cursor:pointer;font-size:13px}
.tab.active{background:#0b1324;color:#fff;border-color:#0b1324}
.kbd-hint{font-size:11px;color:var(--muted);padding:4px 18px 10px}
kbd{background:#e2e8f0;border:1px solid #cbd5e1;border-radius:4px;padding:1px 5px;font-family:monospace;font-size:10px}

main{padding:8px 18px 18px;display:flex;flex-direction:column;gap:8px}
.sheet{display:none;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden}
.sheet.active{display:block}
.sheet-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:linear-gradient(180deg,#eef8f6,#f5faf9);flex-wrap:wrap}
.sheet-title{font-size:18px;font-weight:900}
.hint{color:var(--muted);font-size:13px}

.grid-wrap{overflow:auto;max-height:calc(100vh - 240px);background:#f3f8f7}
.sheet-table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:12px}
.sheet-table th,.sheet-table td{border-right:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:0;min-width:28px;height:30px;text-align:center;background:var(--cell)}
/* ── Congelación (freeze) ────────────────────────────────────────────────── */
/* Encabezados (verde + oscuro): fijos verticalmente DENTRO del contenedor de
   la tabla (su propio scroll), no con el menú de arriba. Aplica a todas las hojas. */
.sheet-table thead{position:sticky;top:0;z-index:6}
.sheet-table thead th{background:#102033;color:#fff;font-weight:900}
/* SOLO la columna "No." queda fija horizontalmente (al hacer scroll lateral). */
.sheet-table .rownum{position:sticky;left:0;z-index:4;background:#f8fafc;font-weight:900;color:#172033;
  min-width:40px;max-width:40px;width:40px}
.sheet-table thead .rownum{background:#102033;color:#fff;z-index:9}
/* "Nombre" queda fija igual que "No." (pegada a su derecha). */
.sheet-table .name{position:sticky;left:40px;z-index:4;min-width:240px;max-width:240px;text-align:center;background:#f8fafc;font-weight:900;color:#172033}
.sheet-table thead .name{background:#102033;color:#fff;z-index:9}
.sheet-table td.name input{text-align:center;width:236px;max-width:236px}
/* "No." editable: input compacto, sin flechas de spinner dentro de la columna de 40px */
.sheet-table .rownum input{font-weight:900;text-align:center;padding:0;min-width:0}
.sheet-table .rownum input::-webkit-outer-spin-button,
.sheet-table .rownum input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.sheet-table .rownum input[type=number]{-moz-appearance:textfield;appearance:textfield}
.sheet-table .rownum input:focus{background:#fff7ed}
.sheet-table input,.sheet-table select{width:100%;height:29px;border:0;background:transparent;text-align:center;
  font:inherit;color:#172033;outline:0;padding:2px 2px;box-sizing:border-box}
/* En asistencia el desplegable debe caber en la columna fija angosta */
.sheet-table.sheet-asist td select{padding:0;min-width:0;max-width:100%}
.sheet-table input:focus,.sheet-table select:focus{background:#fff7ed;box-shadow:inset 0 0 0 2px #fb923c;color:#0f172a}
.sheet-table input:disabled{background:#f1f5f9!important;color:#94a3b8!important;cursor:not-allowed}
.sheet-table th input{color:#fff}
.sheet-table th input:focus{background:rgba(255,255,255,.95);color:#0f172a;box-shadow:inset 0 0 0 2px #fb923c}
.th-input{color:#fff!important;background:rgba(255,255,255,.15)!important;border:0!important;border-radius:4px!important;
  text-align:center!important;font-weight:900!important}
.th-input:focus{color:#0f172a!important;background:#fff!important;box-shadow:inset 0 0 0 2px #fb923c!important}
.th-input-sm{color:#fff!important;background:rgba(255,255,255,.18)!important;border:0!important;border-radius:3px!important;
  text-align:center!important;font-size:9px!important}
.th-input-sm:focus{color:#0f172a!important;background:#fff!important;box-shadow:inset 0 0 0 2px #fb923c!important}
/* La celda de "Puntuación máxima" tiene fondo amarillo claro (#fef3c7); el input debe
   usar un color oscuro que combine con ese fondo en vez del blanco heredado de .th-input-sm */
.valmax-input{color:#78350f!important;background:rgba(120,53,15,.08)!important;font-weight:900!important}
.valmax-input:focus{color:#78350f!important;background:#fffbeb!important;box-shadow:inset 0 0 0 2px #d97706!important}
.valmax-input.valmax-lleno{color:#9a3412!important;background:rgba(120,53,15,.16)!important;cursor:not-allowed!important}
.locked{background:var(--locked)!important;font-weight:900}
/* CALIFICACIONES P1 a P4: rojo suave si la nota NO alcanza el umbral de aprobación (70 por
   defecto); verde en PC1-PC4 y C.F. cuando sí lo alcanza. Colores discretos, sin fondo extra. */
.nota-roja{color:#b3261e!important}
.nota-verde{color:#14532d!important}
.rp-input input.nota-roja{color:#b3261e!important}
.calc{background:#f0fdf4!important;color:#14532d!important;font-weight:900!important}
/* Refuerzo: .calc y .aprobado-cell/.reprobado-cell ya traen o pueden traer su propio color
   con !important, así que sin esta regla más específica el rojo/verde no siempre ganaba. */
.calc.nota-roja,.locked.nota-roja,.reprobado-cell.nota-roja{color:#b3261e!important}
.calc.nota-verde,.aprobado-cell.nota-verde{color:#14532d!important}
/* Columnas A y R en CALIFICACIONES: negrita + colores oscuros sin dañar la vista */
td.aprobado-cell.nota-verde{font-weight:900!important;color:#14532d!important;background:#f0fdf4!important}
td.reprobado-cell.nota-roja{font-weight:900!important;color:#7f1d1d!important;background:#fff1f2!important}
.sheet-table thead th.calc,
.sheet-table thead th.numtot{background:#dcfce7!important;color:#1e3a8a!important;font-weight:900!important;text-shadow:none!important}
.sheet-table thead input.att-num{background:#dcfce7!important;color:#1d4ed8!important;font-weight:900!important;-webkit-text-fill-color:#1d4ed8!important;opacity:1!important;text-shadow:none!important}
.sheet-table thead input.att-num:focus{background:#eff6ff!important;color:#1d4ed8!important;-webkit-text-fill-color:#1d4ed8!important}
.month{background:#0f766e!important;color:#fff!important;font-size:14px}
.bad{color:#b91c1c!important}.good{color:#166534!important}
.cell-error input{background:#fef2f2!important;box-shadow:inset 0 0 0 2px #dc2626!important}
/* Celdas de calificación (mejor intento / tenue / vacío) */
.g-mejor{font-weight:900;color:#172033!important;background:#fff!important}
.g-mejor-mal{font-weight:900;color:#b91c1c!important;background:#fef2f2!important}
.g-tenue{color:#9ca3af!important;font-weight:500!important;background:#f0fdf4!important}
.g-vacio{color:#d1d5db!important;font-weight:500!important;background:#f0fdf4!important}
.row-name-missing input{background:#fef9c3!important;box-shadow:inset 0 0 0 2px #ca8a04!important}
.row-hidden{display:none}
.att-sep{background:#1e3a5f!important;border-left:2px solid #0f2744;min-width:10px;width:10px;padding:0}
/* Hojas de asistencia: no estirar la tabla → celdas P/T/E/A/R compactas como en el HTML */
.sheet-table.sheet-asist{min-width:unset}
/* CALIFICACIONES: columnas Total / Aprobado / Reprobado con ancho cómodo */
.sheet-table .col-final{min-width:78px;width:78px;padding:0 6px}
.sheet-table th.col-final{font-size:11px;white-space:nowrap}

.summary-card{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;padding:14px 16px;
  border-bottom:1px solid var(--line);background:#edf7f5}
.metric{background:#f8fbfa;border:1px solid var(--line);border-radius:14px;padding:12px}
.metric span{color:var(--muted);font-size:12px;font-weight:700;display:block;margin-bottom:4px}
.metric input,.metric select{width:100%;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;color:#172033;background:#fff}
.metric input:focus,.metric select:focus{border-color:var(--primary);box-shadow:0 0 0 2px #d1fae5;outline:none}
.metric .big{font-weight:900;font-size:18px;color:var(--primary)}

.search-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#f8fbfa;border-bottom:1px solid var(--line);flex-wrap:wrap}
.search-bar input{border:1px solid #cbd5e1;border-radius:8px;padding:6px 10px;font-size:13px;width:240px;outline:none}
.search-bar input:focus{border-color:var(--primary);box-shadow:0 0 0 2px #d1fae5}
.search-bar label{font-size:13px;font-weight:700;color:var(--muted)}

.toast{position:fixed;right:18px;bottom:18px;background:#0b1324;color:#fff;border-radius:14px;padding:12px 16px;
  box-shadow:var(--shadow);display:none;z-index:50;font-weight:800;max-width:420px;line-height:1.4}
.toast.show{display:block;animation:pop .18s ease}
@keyframes pop{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* Tarjetas de secciones (index) */
.wrap{max-width:1200px;margin:0 auto;padding:22px 18px}
.cards{display:grid;grid-template-columns:1fr;gap:16px;margin-top:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:0 8px 24px rgba(15,23,42,.05);display:flex;flex-direction:column;gap:10px}
.card h3{margin:0;font-size:17px}
.card .meta{color:var(--muted);font-size:13px;line-height:1.5}
.card .pill{display:inline-block;background:var(--soft);color:var(--primary);font-weight:800;font-size:12px;padding:3px 10px;border-radius:999px}
.card .row{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto}
.card .row > a.btn,.card .row > form{flex:1 1 auto}
.card .row > form{display:flex}
.card .row > form .btn{flex:1 1 auto;width:100%}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin:16px 0}
.stat{background:#fff;border:1px solid var(--line);border-radius:16px;padding:10px 16px;text-align:center}
.stat .n{font-size:30px;font-weight:900;color:var(--primary);white-space:nowrap}
.stat .l{color:var(--muted);font-size:13px;font-weight:700;margin-top:2px}

/* Tablas de reportes / historial */
.tabla{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;font-size:13px;box-shadow:0 6px 18px rgba(15,23,42,.05)}
.tabla th,.tabla td{border:1px solid var(--line);padding:8px 10px;text-align:center}
.tabla th{background:#102033;color:#fff}
.tabla tr:nth-child(even) td{background:#f8fbfa}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-weight:800;font-size:12px}
.badge.ok{background:#dcfce7;color:#15803d}
.badge.no{background:#fee2e2;color:#dc2626}

/* Barra de progreso (gráfica sencilla) */
.barra{background:#eef2f7;border-radius:8px;height:22px;overflow:hidden;position:relative}
.barra>span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2))}
.barra em{position:absolute;left:8px;top:0;line-height:22px;font-style:normal;font-weight:800;font-size:12px;color:#0b1324}

.empty{text-align:center;color:var(--muted);padding:60px 20px}
.empty .big{font-size:48px;margin-bottom:10px}

/* Modal boletín */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:100;overflow:auto;padding:24px}
.modal-bg.show{display:block}
.modal-box{background:#fff;border-radius:20px;max-width:760px;margin:0 auto;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.25)}
.bulletin-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:8px}
.bulletin-table th,.bulletin-table td{border:1px solid var(--line);padding:5px 8px;text-align:center}
.bulletin-table th{background:#102033;color:#fff}
.bulletin-section h3{font-size:14px;font-weight:900;color:var(--head2);border-bottom:2px solid var(--line);padding-bottom:4px;margin:14px 0 8px}
.bulletin-final{font-size:20px;font-weight:900;text-align:center;padding:14px;border-radius:12px;margin-top:14px}
.bulletin-final.pass{background:#dcfce7;color:#15803d}
.bulletin-final.fail{background:#fee2e2;color:#dc2626}

@media print{
  header,.tabs,.kbd-hint,.search-bar,.toast,.no-print,.sheet-head .actions{display:none!important}
  body{background:#fff}
  main{padding:0}
  .sheet{display:block!important;border:0;box-shadow:none;border-radius:0;page-break-after:always}
  .grid-wrap{max-height:none;overflow:visible}
  .sheet-table th{position:static}
  .sheet-table .rownum,.sheet-table .name{position:static}
  .sheet-table th,.sheet-table td{height:22px;font-size:9px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive móvil — pantalla de Usuarios docentes + menú Configuración
   ═══════════════════════════════════════════════════════════════════════════ */

/* Grid del alta rápida: en pantallas cómodas 5 columnas, se apila en móvil */
.nuevo-grid{
  display:grid;
  grid-template-columns:1fr 1.5fr 1fr 1fr 1fr auto;
  gap:8px;
  align-items:end;
}

/* Acciones por fila: botones apilados a ancho completo, sin superponerse */
.tabla-usuarios th,
.tabla-usuarios td{
  /* .sheet-table impone height:30px pensado para la grilla compacta de
     calificaciones; en esta tabla eso recorta/superpone el contenido
     (p.ej. los botones de la columna Acciones), así que aquí se anula. */
  height:auto;
}
.tabla-usuarios .celda-acciones{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:6px;
  min-width:130px;
}
.tabla-usuarios .celda-acciones form{ display:block !important; width:100%; margin:0; }
.tabla-usuarios .celda-acciones .btn{ white-space:nowrap; width:100%; justify-content:center; }
.tabla-usuarios-wrap{ overflow:auto; max-height:none; }
.tabla-usuarios{ min-width:900px; }

/* ── Móvil / tablet estrecha ─────────────────────────────────────────────── */
@media (max-width: 780px){

  /* 1) La tabla deja de ser tabla y cada fila se convierte en una tarjeta
        para que el contenido se ajuste a la celda y nada se salga. */
  .tabla-usuarios-wrap{ overflow:visible; }
  .tabla-usuarios{
    min-width:0;
    width:100%;
    display:block;
    background:transparent;
    box-shadow:none;
  }
  .tabla-usuarios thead{ display:none; }
  .tabla-usuarios tbody,
  .tabla-usuarios tr,
  .tabla-usuarios td{ display:block; width:100%; }
  .tabla-usuarios tr{
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    margin-bottom:12px;
    padding:8px 10px;
    box-shadow:0 4px 12px rgba(15,23,42,.04);
  }
  .tabla-usuarios td{
    border:0;
    border-bottom:1px dashed #e2e8f0;
    padding:8px 4px;
    text-align:left;
    display:grid;
    grid-template-columns:120px 1fr;
    gap:8px;
    align-items:center;
    min-height:0;
    height:auto;
    background:transparent;
  }
  .tabla-usuarios td:last-child{ border-bottom:0; }
  .tabla-usuarios td::before{
    content:attr(data-label);
    font-weight:800;
    color:var(--muted);
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.02em;
  }
  .tabla-usuarios td input[type="text"],
  .tabla-usuarios td input[name="nombre"],
  .tabla-usuarios td input[type="date"]{
    width:100%;
    max-width:100%;
    min-width:0;
  }

  /* 2) Botones de Acciones apilados a ancho completo, sin superponerse. */
  .tabla-usuarios .celda-acciones{
    grid-template-columns:1fr;
    display:grid;
    gap:6px;
  }
  .tabla-usuarios .celda-acciones::before{
    grid-column:1 / -1;
  }
  .tabla-usuarios .celda-acciones form{
    display:block !important;
    width:100%;
  }
  .tabla-usuarios .celda-acciones .btn{
    width:100%;
    justify-content:center;
  }

  /* Alta rápida: apilar los campos en una sola columna */
  .nuevo-grid{
    grid-template-columns:1fr;
  }
  .nuevo-grid .btn{ width:100%; justify-content:center; }
}

/* ── 3) Menú "Configuración" siempre a todo el ancho ─────────────────────── */
@media (max-width: 640px){
  .rtp-config-menu{
    position:fixed;
    left:8px;
    right:8px;
    top:auto;
    min-width:0;
    width:auto;
    max-width:none;
  }
  .rtp-config[open] > .rtp-config-menu{
    /* garantizar visibilidad por encima del contenido */
    z-index:200;
  }
  .rtp-top-right{ position:static; }
  header .top{ position:relative; }
}

/* ── Tablet (incluye iPad Pro vertical, ~834–1200px) ─────────────────────── */
@media (min-width: 781px) and (max-width: 1200px){
  /* La tabla sigue siendo tabla, pero las filas dejan de tener altura fija
     para que los botones apilados no se superpongan. */
  .tabla-usuarios{ min-width:0; }
  .tabla-usuarios td,
  .tabla-usuarios th{
    height:auto;
    padding:6px 8px;
    vertical-align:middle;
  }
  .tabla-usuarios .celda-acciones{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    flex-wrap:nowrap;
    min-width:150px;
    padding:6px 8px;
  }
  .tabla-usuarios .celda-acciones form{
    display:block !important;
    width:100%;
    margin:0;
  }
  .tabla-usuarios .celda-acciones .btn{
    width:100%;
    justify-content:center;
    white-space:nowrap;
  }
}


/* Colores de marcas de asistencia en los selects */
select.asis-P{color:#14532d!important;font-weight:900!important;background:#f0fdf4!important}
select.asis-T{color:#6d28d9!important;font-weight:900!important;background:#f5f3ff!important}
select.asis-A{color:#7f1d1d!important;font-weight:900!important;background:#fff1f2!important}
select.asis-E{color:#854d0e!important;font-weight:900!important;background:#fef08a!important}
select.asis-R{color:#1e3a8a!important;font-weight:900!important;background:#eff6ff!important}
select.asis-vacio{color:#94a3b8!important;background:var(--cell)!important}

.sheet-loading{padding:48px;text-align:center;font-weight:800;color:#667085;background:#f7fbfa}

/* ═══════════════════════════════════════════════════════════════════════════
   Responsive completo — Mobile First + todas las vistas
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .top{padding:10px 12px;gap:10px}
  .brand h1{font-size:16px}
  .brand small{font-size:11px}
  .logo{width:36px;height:36px;border-radius:10px}
  .toolbar{gap:6px}
  .toolbar .btn{padding:7px 10px;font-size:12px}
  .rtp-user-chip{font-size:11px;padding:3px 8px}
  .rtp-config>summary{padding:6px 10px;font-size:12px}
}

/* ── Tabs responsive ────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .tabs{padding:0 12px 8px;gap:4px}
  .tab{padding:7px 10px;font-size:11px;border-radius:8px}
  .kbd-hint{display:none}
}

/* ── Main/content responsive ────────────────────────────────────────────── */
@media (max-width: 640px) {
  main{padding:8px 10px 18px}
  .wrap{padding:14px 10px}
  .sheet{margin:0 10px!important;border-radius:14px}
  .sheet-head{padding:10px 12px;flex-direction:column;align-items:flex-start;gap:8px}
  .sheet-title{font-size:15px}
  .summary-card{grid-template-columns:1fr 1fr;gap:8px;padding:10px 12px}
  .metric{padding:8px}
  .metric input,.metric select{padding:5px 6px;font-size:13px}
  .metric .big{font-size:15px}
}

/* ── Stat-grid responsive ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  .stat-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:8px 10px}
  .stat .n{font-size:22px}
  .stat .l{font-size:11px}
}
@media (min-width: 481px) and (max-width: 780px) {
  .stat-grid{grid-template-columns:repeat(3,1fr);gap:10px}
}

/* ── Search-bar responsive ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  .search-bar{padding:8px 10px;flex-direction:column;align-items:stretch;gap:6px}
  .search-bar input{width:100%;min-width:0;font-size:14px;padding:8px 10px}
  .search-bar label{font-size:12px}
  .search-bar select{width:100%;font-size:14px;padding:8px}
  .search-bar .btn{width:100%;justify-content:center}
}

/* ── Cards responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .card{padding:14px;border-radius:14px}
  .card h3{font-size:15px}
  .card .row{flex-direction:column}
  .card .row>.btn,.card .row>form{width:100%}
  .card .row>form .btn{width:100%}
}

/* ── Tablas de reportes/historial responsive ────────────────────────────── */
@media (max-width: 780px) {
  .tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
  .tabla{min-width:600px}
}

@media (max-width: 640px) {
  .tabla{font-size:12px;min-width:auto}
  .tabla th,.tabla td{padding:6px 8px;font-size:11px}
  .tabla th{font-size:11px}
}

/* ── Modal responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .modal-bg{padding:12px}
  .modal-box{padding:18px;border-radius:16px;max-width:100%}
  .modal-box h3{font-size:16px}
  .bulletin-table{font-size:10px}
  .bulletin-table th,.bulletin-table td{padding:3px 5px}
  .bulletin-final{font-size:16px;padding:10px}
}

/* ── Toast responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .toast{left:10px;right:10px;bottom:10px;max-width:none;font-size:13px;border-radius:12px;padding:10px 14px}
}

/* ── Botones de marcar todos P responsive ───────────────────────────────── */
@media (max-width: 640px) {
  .grid-wrap+.search-bar,
  [style*="display:flex"][style*="gap:6px"]{flex-wrap:wrap}
  .btn.sm{padding:5px 8px;font-size:11px}
}

/* ── Formularios responsive ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .nuevo-grid{gap:6px}
  .nuevo-grid input,.nuevo-grid select{font-size:14px;padding:10px}
  .nuevo-grid .btn{padding:12px;font-size:14px}
}

/* ── Login responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .wrap[style*="max-width:440px"]{margin:20px auto!important;padding:0 12px}
  .wrap[style*="max-width:440px"] .card{padding:16px}
  .wrap[style*="max-width:440px"] input{font-size:16px;padding:12px}
}

/* ── Banner responsive ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .banner-limite{margin:0 10px 8px!important;font-size:12px;padding:6px 10px}
}

/* ── Tabla de usuarios responsive (mejora adicional) ────────────────────── */
@media (max-width: 780px) {
  .tabla-usuarios{min-width:0;width:100%}
  .tabla-usuarios-wrap{overflow:visible}
}

/* ── Toolbar de registro responsive ─────────────────────────────────────── */
@media (max-width: 640px) {
  .toolbar .btn{font-size:11px;padding:6px 8px;white-space:nowrap}
  .toolbar select{font-size:12px;padding:5px 8px}
}

/* ── Scroll horizontal suave para tablas grandes ────────────────────────── */
.grid-wrap{
  -webkit-overflow-scrolling:touch;
  scroll-behavior:smooth;
}
.grid-wrap::-webkit-scrollbar{height:6px}
.grid-wrap::-webkit-scrollbar-track{background:#f1f5f9;border-radius:3px}
.grid-wrap::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}
.grid-wrap::-webkit-scrollbar-thumb:hover{background:#94a3b8}

/* ── Touch-friendly: botones más grandes en táctil ──────────────────────── */
@media (hover:none) and (pointer:coarse){
  .btn{min-height:44px;min-width:44px}
  .btn.sm{min-height:36px;min-width:36px}
  .tab{min-height:44px;padding:10px 14px}
  .sheet-table input,.sheet-table select{min-height:36px}
}

/* ── Orientación landscape ──────────────────────────────────────────────── */
@media (max-height:500px) and (orientation:landscape){
  header{position:relative}
  .top{padding:6px 12px}
  .brand h1{font-size:14px}
  .brand small{display:none}
}

/* ── Pantallas grandes (1400px+) ────────────────────────────────────────── */
@media (min-width:1400px){
  .wrap{max-width:1300px}
  .stat-grid{grid-template-columns:repeat(6,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
}

/* ── Ultra-wide (1800px+) ──────────────────────────────────────────────── */
@media (min-width:1800px){
  .cards{grid-template-columns:repeat(3,1fr)}
}

/* ── Preferencias de accesibilidad ──────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ── Modo oscuro (futuro) ───────────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  /* Placeholder para modo oscuro futuro */
}