/* ===================== TEMA GLOBAL OSCURO + DORADO ===================== */

/* Paleta */
:root{
  --gap: 12px;
  --border: #2a2a2a;           /* borde para dark */
  --muted: #9aa0a6;

  /* Tema oscuro + dorado (home) */
  --negro: #0f0f0f;
  --negro-2: #1a1a1a;
  --negro-3: #101010;
  --blanco: #f3f3f3;
  --gris: #9aa0a6;
  --gris-2: #d1d5db;

  --dorado: #eab308;
  --dorado-oscuro: #c9960b;
}

/* Reset básico */
*{ box-sizing:border-box; margin:0; padding:0; }

/* Fondo y tipografía global */
html, body{ height:100%; }
body{
  min-height:100vh;
  color:var(--blanco);
  background: radial-gradient(80% 80% at 50% 20%, #1b1b1b 0%, #0f0f0f 35%, #000 100%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
}

/* ===================== NAVBAR ===================== */
.navbar, .topbar{
  position: sticky; top:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px 20px;
  background: linear-gradient(180deg, #0e0e0e 0%, #141414 100%);
  border-bottom: 3px solid var(--dorado);
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}
.navbar-left{ display:flex; align-items:center; gap:14px; }
.logo-unam{ height:48px; width:auto; display:block; }
.titulo-navbar{
  font-weight:700; letter-spacing:.4px; color:var(--dorado); text-transform:uppercase;
}

/* Botón logout */
.logout-button{
  border:0; background:#d9534f; color:#fff; font-weight:700;
  padding:10px 16px; border-radius:12px; cursor:pointer;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: transform .08s ease, background .15s ease;
}
.logout-button:hover{ background:#c3413d; transform: translateY(-1px); }

/* ===================== LAYOUT ===================== */
.container{ max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.main-wrapper{ max-width:1100px; margin:40px auto; padding:0 20px 48px; text-align:center; }
.titulo{
  font-size: clamp(28px, 5vw, 56px);
  margin: 12px 0 8px;
  color: var(--dorado);
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
.subtitulo{ color: var(--gris); margin: 0 0 28px; }

/* Grids para menús (usa .menu-grid en contenedores de tarjetas de home) */
.menu-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap:22px;
  justify-content:center;
}
@media (max-width:1100px){ .menu-grid{ grid-template-columns: repeat(2, minmax(220px,1fr)); } }
@media (max-width:560px){ .menu-grid{ grid-template-columns: 1fr; } }

/* ===================== TARJETAS / PANELES ===================== */
/* Panel/Sección por defecto (para formularios, tablas, etc.) */
.card{
  border:1px solid var(--border);
  border-radius:14px;
  padding:18px;
  background: var(--negro-2);
  box-shadow: 0 4px 12px rgba(0,0,0,.35);
  margin-bottom:20px;
}
.card h1, .card h2, .card h3{ color:#fff; }

/* Variante “vidrio” (opcional) */
.card--oscuro{
  background: rgba(20, 20, 20, .85);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(8px);
}

/* CTA dorada para menús/acciones (no uses esto para formularios) */
.card-cta{
  display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:88px; padding:20px 18px; text-decoration:none;
  background: var(--dorado); color:#1c1606; font-weight:800;
  border-radius:18px; border:2px solid rgba(0,0,0,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.45);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}
.card-cta:hover{
  transform: translateY(-2px);
  box-shadow:0 14px 32px rgba(0,0,0,.55);
  background: linear-gradient(180deg, var(--dorado) 0%, var(--dorado-oscuro) 100%);
}

/* Estilo global de card (blanca, formularios, tablas, etc.) */
.card {
  border:1px solid var(--border); 
  border-radius:12px; 
  padding:24px; 
  background:#fff; 
  box-shadow: 0 4px 10px rgba(0,0,0,0.05); 
  margin-bottom:20px;
}

/* Estilo de los botones/cuadros amarillos en Home */
.card-home {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:88px;
  padding:20px 18px;
  text-decoration:none;
  background: var(--accent);   /* el dorado institucional */
  color:#1c1606;
  font-weight:800;
  border-radius:18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  border: 2px solid rgba(0,0,0,.12);
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease;
}

.card-home:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(0,0,0,.45);
  background: linear-gradient(180deg, var(--accent) 0%, #c9960b 100%);
}

/* ========= PANELS (Admin / vistas de contenido) ========= */
.panel{
  display:block;                
  max-width: 100%;
  margin: 24px auto;
  padding: 18px 20px;
  border-radius: 14px;
  background: #151515;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 12px 28px rgba(0,0,0,.35);
  color: #e5e7eb;
}
.panel--oscuro{
  background: radial-gradient(120% 120% at 50% -10%, #1a1c20 0%, #121417 60%, #0f1013 100%);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(6px);

  /* Panel ancho especial para listas de registros */

.panel--full{
  max-width: 100%;   /* ocupa todo el ancho disponible */
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  border-radius: 0;  /* opcional: para que llegue hasta los lados */
}


}
.panel h2{ margin:0 0 6px; font-size:22px; font-weight:800; color:#f8fafc; }
.panel h3{ margin: 10px 0 8px; font-size:16px; font-weight:800; color:#f3f4f6; }
.panel .subtitle{ color:#cbd5e1; margin-bottom: 8px; }

.panel .section + .section{
  margin-top:14px; padding-top:12px;
  border-top:1px solid rgba(255,255,255,.08);
}

/* Formularios dentro del panel */
.panel .grid label span{ color:#eaecef; }
.panel .inline{ display:flex; align-items:center; gap:8px; }
.panel .actions{ margin-top: 6px; }

/* Botones */
.btn{
  padding: 10px 14px;
  border:0;
  border-radius:10px;
  background: var(--dorado, #eab308);
  color:#111;
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: background .15s, transform .08s;
}
.btn:hover{ background: var(--dorado-oscuro, #c9960b); color:#fff; transform: translateY(-1px); }

.btn--sm{ padding: 8px 10px; border-radius:9px; font-size:13px; }
.btn--ghost{
  background: transparent;
  border:1px solid #3a3a3a;
  color:#e5e7eb;
  box-shadow:none;
}
.btn--ghost:hover{
  background:#232323; color:#fff; transform:none;
}
.btn--danger{ background:#dc2626; color:#fff; }
.btn--danger:hover{ background:#b91c1c; }

/* Tabla admin */
.table-admin{
  width:100%;
  border-collapse: collapse;
  background:#121316;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.table-admin th, .table-admin td{
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  text-align: left;
  font-size: 14px;
}
.table-admin thead th{
  background:#191b1f;
  text-transform: uppercase;
  font-size:12px;
  letter-spacing:.4px;
  color:#cfd4de;
  position: sticky; top: 0; z-index: 1;
}
.table-admin tbody tr:hover{ background:#15181d; }

.admin-actions{ white-space: nowrap; }
.admin-actions form{ display:inline-block; margin-right:6px; }

/* Badges existentes ya combinan, pero sutil boost de contraste */
.badge-esp{ background:#0f5132; color:#e6fff3; border-color:#1b6b46; }
.badge-mae{ background:#1e3a8a; color:#e7edff; border-color:#284aa8; }


/* ===================== BOTONES ===================== */
button, .btn{
  padding:12px 18px;
  border:0; border-radius:10px;
  background: var(--dorado); color:#1c1606; font-weight:800;
  cursor:pointer;
  transition: background .2s ease, transform .08s ease, box-shadow .15s ease;
  display:inline-flex; align-items:center; gap:8px;
  box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
button:hover, .btn:hover{ background: var(--dorado-oscuro); color:#fff; transform: translateY(-1px); }
a.btn{ text-decoration:none; }

/* ===================== MENSAJES / UTILIDADES ===================== */
.alert{
  background: #2a1b1b;
  color: #ffd3d3;
  border:1px solid #5b2a2a;
  padding:10px; border-radius:8px;
}
.flash{ padding:10px; border:1px solid #2b3a29; background:#152015; color:#def0de; border-radius:8px; margin:12px 0; }
.flash.warn{ border-color:#5b4a2a; background:#2a2215; color:#ffe9b3; }
.flash.ok{ border-color:#2a5b2e; background:#152a18; color:#cfeccf; }
.muted{ color: var(--gris); }
.mt{ margin-top:20px; }

/* ===================== FORMULARIOS ===================== */
.form-shell{
  max-width: 900px;
  margin: 28px auto 56px;
  padding: 0;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #171717 0%, #121212 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  overflow: hidden;
}

/* Encabezado del panel */
.form-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 22px;
  background:#0f0f0f;
  border-bottom: 2px solid var(--dorado);
}
.form-head .icon{ font-size:22px; line-height:1; filter: drop-shadow(0 2px 0 rgba(0,0,0,.3)); }
.form-head h2{ margin:0; font-size:22px; font-weight:800; color:#f3f3f3; letter-spacing:.3px; }

/* Cuerpo del panel */
.form-body{ padding: 22px; }

/* Párrafo de ayuda encima del form */
.legend-small{ color:#9aa0a6; font-size:13px; margin-bottom:10px; }

/* Botones de acciones superiores */
.actions{
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center;
  margin: 0 0 14px;
}
.actions .btn{
  background:var(--dorado);
  color:#1c1606;
  font-weight:800;
  border-radius:12px;
  padding:10px 14px;
  border:0; cursor:pointer;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition: background .18s ease, transform .08s ease;
}
.actions .btn:hover{ background:var(--dorado-oscuro); color:#fff; transform: translateY(-1px); }

/* Variante pill para botones pequeños (+/-) */
.btn-pill{ border-radius:999px; padding:8px 12px; }

/* Bloques de registro (.row ya existe: lo reforzamos para dark) */
.row{
  border: 1px solid rgba(255,255,255,.08);
  border-radius:14px;
  padding:16px;
  background:#151515;
  box-shadow:0 6px 16px rgba(0,0,0,.35);
  margin-bottom:16px;
}
#rowsContainer .row:nth-child(odd){ background:#141414; }

.row-title{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:14px; color:#fde68a; /* dorado claro */
  text-transform:uppercase; letter-spacing:.4px;
}
.divider{ height:1px; background:#232323; margin:10px 0 14px; }

/* Nota/ayuda bajo el selector de horario */
.helper{ color:#9aa0a6; font-style:italic; margin-top:10px; }

/* Días (checkbox) — ya heredan tu accent dorado; solo look */
.horario-builder .dias label{
  display:flex; align-items:center; gap:6px;
  padding:4px 8px;
  background:#0f0f0f;
  border:1px solid #2f2f2f;
  border-radius:8px;
  color:#e5e7eb;
}

/* Inputs de horas (coinciden con tus inputs dark) */
.hora-inicio, .hora-fin{
  width:120px; text-align:center; padding:8px 10px;
  background:#0f0f0f; color:#fff; border:1px solid #2f2f2f; border-radius:8px;
}

/* Mensajes/alerts en dark */
.alert{
  border-radius:10px; padding:12px 16px; margin-bottom:16px;
  background:#2a1b1b; color:#ffd3d3; border:1px solid #5b2a2a;
}
.alert.ok{ background:#152015; color:#def0de; border-color:#2b3a29; }
.alert.warn{ background:#2a2215; color:#ffe9b3; border-color:#5b4a2a; }

/* Tabla dentro del panel (si la muestras debajo) */
.form-shell table{
  background:#141414; color:#f3f3f3; border-radius:12px; overflow:hidden;
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
.form-shell thead th{ background:#101010; color:var(--dorado); }

/* Asegura pop-up de flatpickr por encima */
.flatpickr-calendar{ z-index: 9999 !important; }

/* ========== FORM CAPTURA: GRID 3x3 ========== */
.capture-skin .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 columnas iguales */
  gap: 16px 20px; /* espacio entre filas y columnas */
}

.capture-skin .grid .full {
  grid-column: 1 / -1; /* campos que deben ocupar toda la fila */
}

/* Ajustar inputs para que no se vean "apretados" */
.capture-skin label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  font-weight: 600;
}

.capture-skin input,
.capture-skin select,
.capture-skin textarea {
  width: 100%; /* siempre llenan su columna */
  box-sizing: border-box;
}

/* Builder de horario también debe alinearse al grid */
.capture-skin .horario-builder {
  grid-column: 1 / -1; /* siempre ocupa fila completa */
}

/* Botones arriba también alineados */
.capture-skin .table-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}


/* ===================== TABLAS (DARK) ===================== */
.table-wrap{
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
}
table{
  width:100%;
  border-collapse: collapse;
  margin-top:20px;
  background: var(--negro-2);
  color: var(--blanco);
  border-radius:10px;
  overflow:hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
th, td{
  padding:12px 15px;
  text-align:left;
  border-bottom:1px solid var(--border);
  font-size:14px;
}
thead th{
  position: sticky; top:0; z-index:1;
  background:#151515;
  color: var(--dorado);
  text-transform:uppercase;
  font-weight:700; font-size:13px;
  letter-spacing:.3px;
}
tbody tr:hover{ background:#202020; }

/* Tabla editable */
table.editable input{
  width:100%;
  padding:8px;
  border:1px solid #333;
  border-radius:6px;
  font-size:14px;
  background:#0f0f0f; color:#fff;
}
table.editable input.is-invalid{ border-color:#d33; background:#3a0e0e; }

/* Distribución de columnas de la tabla editable */
#regTable{ table-layout: fixed; width:100%; }
#regTable th:nth-child(1),  #regTable td:nth-child(1){ width:80px; }   /* Clave */
#regTable th:nth-child(2),  #regTable td:nth-child(2){ width:80px; }   /* Grupo */
#regTable th:nth-child(3),  #regTable td:nth-child(3){ width:140px; }  /* Asignatura */
#regTable th:nth-child(4),  #regTable td:nth-child(4){ width:140px; }  /* Profesor */
#regTable th:nth-child(5),  #regTable td:nth-child(5){ width:180px; }  /* RFC */
#regTable th:nth-child(6),  #regTable td:nth-child(6){ width:180px; }  /* CURP */
#regTable th:nth-child(7),  #regTable td:nth-child(7){ width:160px; }  /* Horario */
#regTable th:nth-child(8),  #regTable td:nth-child(8){ width:80px; }   /* Cupo */
#regTable th:nth-child(9),  #regTable td:nth-child(9){ width:100px; }  /* Salón */

/* Tabla de registros (anchos, responsive) */
table.registros{ table-layout:auto; min-width:1200px; }
table.registros th, table.registros td{
  padding:10px 12px; vertical-align:top; white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; word-break:break-word; hyphens:auto;
}
table.registros th:nth-child(1),  table.registros td:nth-child(1) { min-width: 90px; }   /* CLAVE */
table.registros th:nth-child(2),  table.registros td:nth-child(2) { min-width: 80px; }   /* GRUPO */
table.registros th:nth-child(3),  table.registros td:nth-child(3) { min-width:160px; }   /* ASIGNATURA */
table.registros th:nth-child(4),  table.registros td:nth-child(4) { min-width:140px; }   /* PROFESOR */
table.registros th:nth-child(5),  table.registros td:nth-child(5) { min-width:140px; }   /* RFC */
table.registros th:nth-child(6),  table.registros td:nth-child(6) { min-width:160px; }   /* CURP */
table.registros th:nth-child(7),  table.registros td:nth-child(7) { min-width:320px; }   /* HORARIO */
table.registros th:nth-child(8),  table.registros td:nth-child(8) { min-width: 80px; }   /* CUPO */
table.registros th:nth-child(9),  table.registros td:nth-child(9) { min-width:110px; }   /* SALÓN */
table.registros th:nth-child(10), table.registros td:nth-child(10){ min-width:220px; }   /* ALTA */

@media (max-width:768px){
  table.registros th, table.registros td{ white-space:normal; }
}

/* ===================== CHIPS / LEYENDAS ===================== */
.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; line-height:1;
  border:1px solid rgba(255,255,255,.12);
}
.badge-esp{ background:#123; color:#7dd3fc; border-color:#1e293b; }
.badge-mae{ background:#221a10; color:#fde68a; border-color:#3b2f1e; }

.legend{ display:flex; gap:12px; align-items:center; font-size:13px; color:var(--gris); }
.legend .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; margin-right:6px; }
.legend .esp{ background:#7dd3fc; }
.legend .mae{ background:#fde68a; }

/* ===================== SCROLLBAR (opcional) ===================== */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-thumb{ background:#2a2a2a; border-radius:8px; }
::-webkit-scrollbar-thumb:hover{ background:#3a3a3a; }

/* ===================== Contenedores Lista ===================== */
/* contenedores responsivos */
.container        { max-width: 1100px; margin: 24px auto; padding: 0 16px; }
.container-wide   { max-width: 1400px; margin: 24px auto; padding: 0 16px; }
.container-fluid  { max-width: 100%;  margin: 24px auto; padding: 0 24px; }

/* si usas paneles anchos, asegura scroll horizontal en tablas */
.panel .table-wrap { overflow-x: auto; }
.panel table       { width: 100%; }


/* ====== Forzar skin clara SOLO dentro de la hoja (.page) ====== */

/* Hoja */
.page{
  background:#fff;
  color:#111;                /* texto general */
}

/* Textos dentro de la hoja */
.page .lbl{ color:#111; }
.page .muted{ color:#555; }
.page h3{ color:#111; }

/* Cajas de comentario/áreas */
.page .box{
  background:#fff;
  border:1px solid #cfd4dc;
}

/* Entradas: texto, selects y textarea en blanco */
.page input,
.page select,
.page textarea{
  background:#fff !important;     /* pisa el tema dark global */
  color:#111;
  border:1px solid #cfd4dc;
  border-radius:8px;
  padding:8px 10px;
  box-shadow:none;
}

/* Placeholders más suaves */
.page input::placeholder,
.page textarea::placeholder{
  color:#9aa0a6;
}

/* Enfoque con dorado institucional */
.page input:focus,
.page select:focus,
.page textarea:focus{
  border-color:#eab308;
  outline:none;
  box-shadow:0 0 0 2px rgba(234,179,8,.25);
}

/* Tamaños utilitarios que ya usas */
.page .u{ background:#fff !important; }
.page .sm{ max-width:220px; }
.page .center{ text-align:center; }

/* Radios y checkboxes con dorado */
.page input[type="checkbox"],
.page input[type="radio"]{
  accent-color:#eab308;
}

/* Líneas de firma y elementos decorativos siguen oscuros si quieres */
.page .signs .line{
  background:#111;
}





/* Styless Form*/

/* Variables + reset */
:root{
  /* colores base */
  --border:#2a2a2a;
  --blanco:#f3f3f3;
  --gris:#9aa0a6;
  --dorado:#eab308;
  --dorado-oscuro:#c9960b;
  /* radios comunes */
  --radius-card: 20px;
  --radius-input: 14px;
  --radius-chip: 999px;
}
*{ box-sizing:border-box; margin:0; padding:0; }

/* Botones globales */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border:0; border-radius:var(--radius-input);
  background: var(--dorado); color:#1c1606; font-weight:800;
  cursor:pointer; box-shadow: 0 6px 16px rgba(0,0,0,.35);
  transition: background .2s ease, transform .08s ease, box-shadow .15s ease;
}
.btn:hover{ background: var(--dorado-oscuro); color:#fff; transform: translateY(-1px); }
.btn-pill{ border-radius:var(--radius-chip); padding:8px 12px; }

/* Alertas globales */
.alert{
  border-radius:10px; padding:12px 16px; margin-bottom:16px;
  background:#2a1b1b; color:#ffd3d3; border:1px solid #5b2a2a;
}
.alert.ok{ background:#152015; color:#def0de; border-color:#2b3a29; }
.alert.warn{ background:#2a2215; color:#ffe9b3; border-color:#5b4a2a; }
.alert.error{ background:#2a1b1b; color:#ffd3d3; border-color:#5b2a2a; }

/* Utilidades globales */
.legend-small{ color:var(--gris); font-size:13px; margin-bottom:10px; }
.muted{ color:var(--gris); }
.logo-unam{ height:48px; width:auto; display:block; }
.divider{
  height:1px; margin:10px 0 14px;
  background: linear-gradient(90deg, transparent, #2b2b2b, transparent);
  border-radius: 1px;
}

/* =================== FORMULARIO: CONTENEDOR =================== */
.form-shell{
  max-width: 900px;
  margin: 28px auto 56px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(180deg, #171717 0%, #121212 100%);
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  overflow: hidden;
}
.form-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 22px;
  background:#0f0f0f;
  border-bottom: 2px solid var(--dorado);
}
.form-head h2{ margin:0; font-size:22px; font-weight:800; color:#f3f3f3; letter-spacing:.3px; }
.form-body{ padding:22px; }

.actions{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  margin: 0 0 14px;
}
.actions .btn{
  border-radius:var(--radius-chip); padding:10px 14px;
  box-shadow:0 8px 18px rgba(0,0,0,.35);
  transition: background .18s ease, transform .08s ease;
}

/* =================== FORMULARIO: LAYOUT =================== */
.form-shell .grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px 20px;                 /* un poco más de respiro vertical */
}
.form-shell .grid .full{ grid-column: 1 / -1; }

/* Fila/tarjeta de captura */
.row{
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-card);
  padding: 18px;
  background:#151515;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
  margin-bottom:16px;
}
#rowsContainer .row:nth-child(odd){ background:#141414; }

.row-title{
  display:flex; align-items:center; gap:10px;
  font-weight:800; font-size:14px; color:#fde68a;
  text-transform:uppercase; letter-spacing:.4px;
}

/* =================== FORMULARIO: CAMPOS =================== */
/* “Cajitas” (labels) como tarjetas limpias */
.form-shell label{
  display:flex; flex-direction:column; gap:8px;
  font-size:14px; font-weight:600; color:#eaecef;
  background: linear-gradient(180deg, #111 0%, #0f0f0f 100%);
  border: 1px solid #242424;
  border-radius: 14px;
  padding: 10px 12px;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 8px 22px rgba(0,0,0,.28);
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, transform .05s ease;
}
.form-shell label:hover{
  border-color: #2e2e2e;
  background: linear-gradient(180deg, #121212 0%, #0f0f0f 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 10px 28px rgba(0,0,0,.32);
}
.form-shell label:focus-within{
  border-color: var(--dorado);
  box-shadow:
    0 0 0 3px rgba(234,179,8,.18),
    0 1px 0 rgba(255,255,255,0.04) inset,
    0 12px 32px rgba(0,0,0,.34);
  transform: translateY(-1px);
}
.form-shell label > span{
  font-size: 12px; letter-spacing: .3px; color: #c9c9c9;
}

/* Inputs/selects/textarea (unificados) */
.form-shell input,
.form-shell select,
.form-shell textarea{
  width:100%;
  border-radius: var(--radius-input);
  padding: 12px 14px;
  background: #0e0e0e;
  color:#fff;
  border: 1px solid #2b2b2b;
  outline:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 2px 10px rgba(0,0,0,0.25);
  transition: border-color .15s ease, box-shadow .2s ease, transform .05s ease;
}
.form-shell input::placeholder,
.form-shell textarea::placeholder{ color:#a8a8a8; }
.form-shell input:hover,
.form-shell select:hover,
.form-shell textarea:hover{ border-color: #3a3a3a; }
.form-shell input:focus,
.form-shell select:focus,
.form-shell textarea:focus{
  border-color: var(--dorado);
  box-shadow:
    0 0 0 3px rgba(234,179,8,.22),
    0 1px 0 rgba(255,255,255,0.03) inset,
    0 2px 10px rgba(0,0,0,0.28);
}

/* Select con flechita custom (fusionado con padding/focus) */
.form-shell select{
  appearance: none; -webkit-appearance: none;
  padding-right: 44px; /* espacio para flecha */
  background-image:
    linear-gradient(45deg, transparent 50%, #bbb 50%),
    linear-gradient(135deg, #bbb 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 24px) 50%,
    calc(100% - 18px) 50%,
    100% 0;
  background-size: 6px 6px, 6px 6px, 2.8em 100%;
  background-repeat: no-repeat;
}

/* Estado de error específico del form */
.form-shell .is-invalid{
  border-color: #b45309 !important;
  box-shadow: 0 0 0 3px rgba(180,83,9,.18) !important;
}
.form-shell .is-invalid::placeholder{ color:#facc15; }

/* =================== HORARIO (builder) =================== */
.horario-builder .dias{
  display: grid;
  grid-template-columns: repeat(3, minmax(100px, 1fr));
  gap: 10px 12px;
  align-items:center; justify-items:start;
  margin: 8px 0 10px;
}
.horario-builder .dias label{
  display:flex; align-items:center; justify-content:flex-start; gap:6px;
  padding: 8px 12px;
  background: #101010;
  border: 1px solid #2b2b2b;
  border-radius: var(--radius-chip);
  color: #e5e7eb;
  font-size: 14px; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, box-shadow .2s ease, transform .05s ease;
  will-change: transform;
}
.horario-builder .dias label:hover{
  background: #171717;
  border-color: var(--dorado);
  box-shadow: 0 3px 12px rgba(0,0,0,.28);
  transform: translateY(-1px);
}
.horario-builder .dias input[type="checkbox"]{ accent-color: var(--dorado); }
.horas-container{ display:flex; gap:10px; align-items:center; }
.hora-inicio, .hora-fin{
  width: 140px; text-align:center; padding: 12px 14px;
  background:#0a0a0a; color:#fff; border:1px solid #2b2b2b; border-radius: var(--radius-input);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 2px 10px rgba(0,0,0,0.25);
}
.helper{ color:#9aa0a6; font-style:italic; margin-top:10px; }

/* Flatpickr por encima */
.flatpickr-calendar{ z-index: 9999 !important; }

/* =================== RESPONSIVO =================== */
@media (max-width: 760px){
  .form-shell .grid{ grid-template-columns: 1fr; }
  .horas-container{ flex-wrap: wrap; }
  .hora-inicio, .hora-fin{ width: 100%; }
}

/* === Ajuste de contraste y legibilidad en campos === */

/* Fondo general del form un poco más claro */
.form-shell {
  background: linear-gradient(180deg, #1b1b1b 0%, #161616 100%);
}

/* Tarjetas de campo (labels) más claras */
.form-shell label {
  background: linear-gradient(180deg, #1e1e1e 0%, #181818 100%);
  border-color: #2d2d2d;
}

/* Inputs / selects / textarea */
.form-shell input,
.form-shell select,
.form-shell textarea {
  background: #1b1b1b;           /* antes #0e0e0e */
  border-color: #3a3a3a;
  color: #f3f3f3;
}

/* Campos de hora */
.hora-inicio, .hora-fin {
  background: #1c1c1c;
  border-color: #3a3a3a;
}

/* Chips de días: más contraste */
.horario-builder .dias label {
  background: #1a1a1a;
  border-color: #353535;
}

/* Placeholder más claro */
.form-shell input::placeholder,
.form-shell textarea::placeholder {
  color: #bdbdbd;
}

/* === Días de la semana en una sola línea === */
.form-shell .horario-builder .dias {
  display: flex !important;
  flex-wrap: nowrap !important;     /* No saltar de línea */
  gap: 10px 12px !important;
  overflow-x: auto !important;      /* Scroll si no caben */
  padding-bottom: 6px;              /* Un poco de espacio para el scroll */
  align-items: center;
}

.form-shell .horario-builder .dias label {
  flex: 0 0 auto;                   /* No se estiran ni encogen */
  white-space: nowrap;              /* “Miércoles” no se parte */
}

/* En pantallas pequeñas sí se acomodan en varias líneas */
@media (max-width: 520px){
  .form-shell .horario-builder .dias {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
  }
}

/* === Todo input en mayúsculas === */
.form-shell input[type="text"],
.form-shell input[type="search"],
.form-shell input[type="email"],
.form-shell input[type="tel"],
.form-shell textarea {
  text-transform: uppercase !important;
}

/* Styless Form*/


/* ===== Botón Menú principal ===== */
.btn-menu {
  background: var(--dorado);
  color: #1c1606;
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 16px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: background .2s ease, transform .1s ease;
  margin-right: 12px;
}
.btn-menu:hover {
  background: var(--dorado-oscuro);
  color: #fff;
  transform: translateY(-1px);
}

.actions-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.actions-top .btn-menu {
  background: var(--dorado);
  color: #1c1606;
  font-weight: 800;
  border-radius: 12px;
  padding: 10px 16px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(0,0,0,.35);
  transition: background .2s ease, transform .1s ease;
}
.actions-top .btn-menu:hover {
  background: var(--dorado-oscuro);
  color: #fff;
  transform: translateY(-1px);
}

/* ===== NAV BAR STYLING ===== */
.nav-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 20px;
}

/* Botones uniformes */
.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 38px; /* altura fija para uniformidad */
  background: #1a1a1a;
  color: var(--dorado);
  font-weight: 700;
  font-size: 14px;
  border-radius: 12px;
  padding: 0 16px;
  text-decoration: none;
  border: 1px solid rgba(255, 215, 0, 0.25);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
  transition: all 0.2s ease-in-out;
}

/* Hover general */
.nav-btn:hover {
  background: var(--dorado);
  color: #000;
  border-color: var(--dorado);
  transform: translateY(-1px);
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.4);
}

/* Estado primario (menú principal) — mismo tamaño, solo color distinto */
.nav-btn.primary {
  background: var(--dorado);
  color: #000;
  border-color: var(--dorado);
}

.nav-btn.primary:hover {
  background: var(--dorado-oscuro);
  color: #fff;
}

/* Botones “fantasma” como Salir o Login */
.nav-btn.ghost {
  background: transparent;
  color: var(--dorado);
}

.nav-btn.ghost:hover {
  background: var(--dorado);
  color: #000;
}

/* Info del usuario */
.user-info {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  font-size: 0.9rem;
  color: #cfcfcf;
}

.user-info .avatar {
  background: var(--dorado);
  color: #000;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

#rowsContainer { position: relative; }

#rowsContainer .row{
  position: absolute;
  left: 0; right: 0;
  width: 100%;
}


/* Contenedor en modo "stack" */
#rowsContainer.stack {
  position: relative;
}

/* Cada fila como tarjeta apilada */
#rowsContainer.stack .row {
  position: relative;
  border-radius: 18px;
  transform-origin: top center;
  transition: transform 260ms ease, opacity 260ms ease, box-shadow 260ms ease;
  will-change: transform, opacity;
}

/* Animación de entrada (la fila nueva) */
#rowsContainer.stack .row.is-entering {
  opacity: 0;
  transform: translateY(-14px) rotateX(12deg) scale(0.98);
}

/* Estado final después de animar */
#rowsContainer.stack .row.is-entered {
  opacity: 1;
  transform: translateY(0) rotateX(0deg) scale(1);
}

.row.is-entering{
  transform: scale(1.02);
  opacity: 0;
}
.row.is-entered{
  opacity: 1;
}

#rowThumbs {
  position: relative;
  z-index: 20000;
}