/* ═══════════════════════════════════════════════════════════════════════════
   Registro Técnico Profesional — hoja de estilos (diseño teal del original)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --bg:#f5f7fb; --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,#eef6ff 0%,#f7fafc 40%,#f4fbf8 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,.97);
  /* backdrop-filter:blur(16px) eliminado OPT#12: operación GPU costosa */
  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 h1 .rtp-copyright{font-size:13px;font-weight:500;color:var(--muted)}
.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;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}
/* Columnas "No." y "Nombre" quedan fijas 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}
.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}
.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}
/* Columna No. editable: sin flechas de incremento/decremento */
.sheet-table input.js-numero::-webkit-inner-spin-button,
.sheet-table input.js-numero::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.sheet-table input.js-numero{-moz-appearance:textfield;appearance:textfield}
/* 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[data-g="nota"]:disabled{background:#f1f5f9;color:#94a3b8;cursor:not-allowed}
.sheet-table input[data-g="extra"]:disabled{background:#f1f5f9;color:#94a3b8;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}
.locked{background:var(--locked)!important;font-weight:900}
.calc{background:#f0fdf4!important;color:#14532d!important;font-weight:900}
.sheet-table thead th.calc,
.sheet-table thead th.numtot{background:#dcfce7!important;color:#1d4ed8!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}
/* Colores distintos por RA en la hoja ACTIVIDADES, para diferenciarlos entre sí
   y del encabezado general "ACTIVIDADES POR RESULTADOS DE APRENDIZAJE" (.month). */
.month.ra-color-0{background:#191970!important}
.month.ra-color-1{background:#7f6000!important}
.month.ra-color-2{background:#365314!important}
.month.ra-color-3{background:#4c1d95!important}
.month.ra-color-4{background:#881337!important}
.month.ra-color-5{background:#164e63!important}
.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 solo texto (totales/sumas) marcadas en error, sin input dentro */
th.cell-error,td.cell-error{background:#fef2f2!important;box-shadow:inset 0 0 0 2px #dc2626!important;color:#b91c1c!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}
/* ACTIVIDADES: columna "Total" (suma horizontal por RA) — misma caja azul, más ancha para mostrar texto/número */
.att-total-th{min-width:44px;width:44px;padding:2px;text-align:center}
.att-total-cell{min-width:44px;width:44px;padding:0;text-align:center;color:#e2e8f0;font-weight:800}
/* 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)}
/* Indicador Total RAs (Actividades / Calificaciones) */
.search-bar .total-ras{display:inline-flex;align-items:center;gap:5px;margin-left:4px;white-space:nowrap}
.search-bar .total-ras b{color:var(--ink);font-weight:700}
.search-bar .total-ras b.total-ras-val{color:var(--accent);font-weight:700}

.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}
.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:16px;text-align:center}
.stat .n{font-size:30px;font-weight:900;color:var(--primary)}
.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,.menu-toggle{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}
  .toolbar.mobile-open{display:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE DESIGN — Sistema completo para todos los dispositivos
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Variables responsive ────────────────────────────────────────────────── */
:root {
  --header-height: 70px;
  --sidebar-width: 280px;
}

/* ── Menu hamburguesa (oculto en desktop) ───────────────────────────────── */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 100;
  flex-shrink: 0;
}
.menu-toggle span {
  display: block;
  width: 24px;
  height: 3px;
  background: var(--ink);
  margin: 5px 0;
  border-radius: 2px;
  transition: .3s;
}
.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(7px, -6px); }

/* Toolbar mobile responsive */
@media (max-width: 768px) {
  .toolbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    z-index: 99;
    display: none;
    overflow-y: auto;
  }
  .toolbar.mobile-open {
    display: flex;
  }
  .toolbar .btn {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* ── Grid del alta rápida ───────────────────────────────────────────────── */
.nuevo-grid {
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr 1fr auto;
  gap: 8px;
  align-items: end;
}

/* ── Tabla usuarios ─────────────────────────────────────────────────────── */
.tabla-usuarios th,
.tabla-usuarios td { 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; }

/* ── Tablas de datos (reportes, historial) ──────────────────────────────── */
.tabla-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(15,23,42,.05);
}

/* ── Formularios responsive ─────────────────────────────────────────────── */
.form-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: end;
}
.form-row > div {
  flex: 1;
  min-width: 140px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINT: Móvil pequeño (max-width: 480px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* Header */
  .top { padding: 10px 12px; gap: 10px; }
  .brand h1 { font-size: 16px; }
  .brand h1 .rtp-copyright { display: none; }
  .brand small { font-size: 11px; }
  .logo { width: 36px; height: 36px; font-size: 14px; }
  
  /* Menu hamburguesa visible */
  .menu-toggle { display: block; }
  
  /* Toolbar apilada */
  .toolbar {
    flex-direction: column;
    width: 100%;
    gap: 6px;
  }
  .toolbar .btn {
    width: 100%;
    justify-content: center;
    padding: 10px 12px;
    font-size: 12px;
  }
  
  /* Tabs scrollables */
  .tabs { 
    padding: 0 12px 10px;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tab { 
    padding: 8px 12px;
    font-size: 11px;
    white-space: nowrap;
  }
  .kbd-hint { 
    padding: 4px 12px 8px;
    font-size: 10px;
  }
  
  /* Main content */
  main { padding: 6px 10px 14px; }
  .wrap { padding: 14px 10px; }
  
  /* Sheet (tab content) */
  .sheet { border-radius: 12px; }
  .sheet-head { 
    padding: 10px 12px;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .sheet-title { font-size: 15px; }
  
  /* Grid de datos con scroll horizontal */
  .grid-wrap { 
    max-height: calc(100vh - 280px);
    border-radius: 8px;
  }
  .sheet-table { font-size: 11px; }
  .sheet-table th, .sheet-table td {
    min-width: 26px;
    height: 28px;
  }
  .sheet-table .name { 
    min-width: 140px;
    max-width: 140px;
  }
  .sheet-table td.name input {
    width: 136px;
    max-width: 136px;
    font-size: 11px;
  }
  
  /* Summary card */
  .summary-card {
    grid-template-columns: 1fr;
    padding: 10px 12px;
    gap: 8px;
  }
  .metric { padding: 10px; }
  .metric .big { font-size: 16px; }
  
  /* Stats grid */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin: 12px 0;
  }
  .stat { 
    padding: 12px 8px;
    border-radius: 12px;
  }
  .stat .n { font-size: 24px; }
  .stat .l { font-size: 11px; }
  
  /* Cards (index) */
  .cards { gap: 12px; margin-top: 12px; }
  .card { 
    padding: 14px;
    border-radius: 12px;
  }
  .card h3 { font-size: 15px; }
  .card .meta { font-size: 12px; }
  .card .row { 
    flex-direction: column;
    gap: 6px;
  }
  .card .row .btn { 
    width: 100%;
    justify-content: center;
  }
  
  /* Search bar */
  .search-bar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
  }
  .search-bar input { width: 100%; }
  .search-bar label { margin-left: 0; }
  
  /* Tablas de reportes/historial */
  .tabla { font-size: 12px; }
  .tabla th, .tabla td { 
    padding: 6px 8px;
    font-size: 11px;
  }
  
  /* Modal */
  .modal-bg { padding: 12px; }
  .modal-box { 
    padding: 16px;
    border-radius: 14px;
    max-width: 100%;
  }
  .bulletin-table { font-size: 11px; }
  .bulletin-table th, .bulletin-table td { padding: 4px 6px; }
  .bulletin-final { font-size: 16px; padding: 10px; }
  
  /* Boletín selector */
  .card.flex-row {
    flex-direction: column;
    align-items: stretch;
  }
  .card select { min-width: 0; width: 100%; }
  
  /* Toast */
  .toast {
    left: 10px;
    right: 10px;
    max-width: none;
    bottom: 10px;
    font-size: 12px;
    padding: 10px 14px;
  }
  
  /* Botones de acción en historial */
  .badge { font-size: 10px; padding: 2px 8px; }
  
  /* Formulario nueva sección */
  .form-row {
    flex-direction: column;
    gap: 10px;
  }
  .form-row > div {
    width: 100%;
    min-width: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINT: Móvil (max-width: 768px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Header */
  .top { padding: 12px 14px; }
  .brand h1 { font-size: 17px; }
  .brand small { font-size: 12px; }
  
  /* Menu hamburguesa */
  .menu-toggle { display: block; }
  
  /* Toolbar */
  .toolbar { 
    flex-wrap: wrap;
    gap: 6px;
  }
  .toolbar .btn { font-size: 12px; }
  
  /* Tabs */
  .tabs { 
    gap: 5px;
    padding: 0 14px 10px;
  }
  .tab { 
    padding: 8px 14px;
    font-size: 12px;
  }
  
  /* Main */
  main { padding: 8px 14px 16px; }
  .wrap { padding: 16px 14px; }
  
  /* Summary card */
  .summary-card {
    grid-template-columns: repeat(2, 1fr);
    padding: 12px 14px;
  }
  
  /* Stats grid */
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .stat .n { font-size: 26px; }
  
  /* Cards */
  .card .row { flex-wrap: wrap; }
  .card .row .btn { 
    flex: 1;
    min-width: calc(50% - 4px);
  }
  
  /* Tablas de datos */
  .grid-wrap { max-height: calc(100vh - 260px); }
  .sheet-table .name { 
    min-width: 180px;
    max-width: 180px;
  }
  .sheet-table td.name input {
    width: 176px;
    max-width: 176px;
  }
  
  /* Tabla reportes/historial */
  .tabla-wrap { margin: 12px 0; }
  
  /* Select de secciones en registro */
  .rtp-select-seccion {
    width: 100%;
  }
  
  /* Botones de accion en historial */
  .historial-actions {
    flex-direction: column;
    width: 100%;
  }
  .historial-actions .btn { width: 100%; }
  
  /* Alta rápida: apilar */
  .nuevo-grid { grid-template-columns: 1fr; }
  .nuevo-grid .btn { width: 100%; justify-content: center; }
  
  /* Menú configuración */
  .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 { z-index: 200; }
  .rtp-top-right { position: static; }
  header .top { position: relative; }
  
  /* User chip */
  .rtp-user-chip { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINT: Tablet (max-width: 1024px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* Header */
  .brand h1 { font-size: 18px; }
  
  /* Toolbar */
  .toolbar { gap: 6px; }
  .toolbar .btn { font-size: 12px; padding: 8px 10px; }
  
  /* Tabs */
  .tabs { gap: 5px; }
  .tab { padding: 9px 14px; font-size: 12px; }
  
  /* Summary card */
  .summary-card {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Stats grid */
  .stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  /* Cards */
  .cards { gap: 14px; }
  .card .row { flex-wrap: wrap; }
  .card .row .btn { 
    flex: 1;
    min-width: calc(33% - 4px);
  }
  
  /* Tabla datos */
  .grid-wrap { max-height: calc(100vh - 240px); }
  .sheet-table .name { 
    min-width: 200px;
    max-width: 200px;
  }
  .sheet-table td.name input {
    width: 196px;
    max-width: 196px;
  }
  
  /* ── Tabla usuarios (tarjetas) ─────────────────────────────────────── */
  .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: 10px 12px;
    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: 11px;
    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;
  }
  .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; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BREAKPOINT: Desktop grande (min-width: 1400px)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  .wrap { max-width: 1400px; }
  .summary-card { grid-template-columns: repeat(5, 1fr); }
  .stat-grid { grid-template-columns: repeat(6, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILIDADES RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ocultar en móvil */
@media (max-width: 768px) {
  .hide-mobile { display: none !important; }
}

/* Ocultar en tablet */
@media (min-width: 769px) and (max-width: 1024px) {
  .hide-tablet { display: none !important; }
}

/* Ocultar en desktop */
@media (min-width: 1025px) {
  .hide-desktop { display: none !important; }
}

/* Solo visible en móvil */
@media (min-width: 769px) {
  .show-mobile-only { display: none !important; }
}

/* Flex utilities responsive */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 768px) {
  .flex-responsive {
    flex-direction: column;
  }
  .flex-responsive > * {
    width: 100%;
  }
}

/* Grid responsive */
.grid-responsive {
  display: grid;
  gap: 16px;
}
.grid-responsive.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-responsive.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-responsive.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 768px) {
  .grid-responsive.cols-2,
  .grid-responsive.cols-3,
  .grid-responsive.cols-4 {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .grid-responsive.cols-3,
  .grid-responsive.cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}


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

/* ─────────────────────────────────────────────────────────────────────────
   MEJORA #6 — Estilos para el placeholder de carga diferida (lazy load)
   ───────────────────────────────────────────────────────────────────────── */

/* Sección placeholder mientras la hoja no ha sido cargada todavía */
.sheet-lazy {
  min-height: 200px;
  display: none;           /* ocultada por defecto, igual que .sheet */
  align-items: center;
  justify-content: center;
}
.sheet-lazy.active {
  display: flex;           /* cuando se activa muestra el spinner centrado */
}

/* Contenedor del spinner + texto */
.sheet-lazy-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 40px;
  color: var(--muted, #64748b);
  font-weight: 700;
  font-size: 15px;
}

/* Spinner CSS puro (sin imágenes ni fuentes externas) */
.sheet-lazy-spinner {
  width: 44px;
  height: 44px;
  border: 5px solid #e2e8f0;
  border-top-color: #0b1324;
  border-radius: 50%;
  animation: rtp-spin 0.75s linear infinite;
  will-change: transform;  /* OPT #13: avisa al GPU con antelación */
}

@keyframes rtp-spin {
  to { transform: rotate(360deg); }
}