* { box-sizing: border-box; }

:root {
  --naranja: #e07b2e;
  --naranja-oscuro: #c2631d;
  --gris-fondo: #191b20;
  --gris-hex: #21242b;
  --gris-panel: #23262e;
  --gris-borde: #383c46;
  --blanco: #f4f4f6;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--blanco);
  margin: 0;
  padding: 16px;
  background-color: var(--gris-fondo);
  /* Malla hexagonal fina, solo CSS */
  background-image:
    linear-gradient(30deg, var(--gris-hex) 12%, transparent 12.5%, transparent 87%, var(--gris-hex) 87.5%, var(--gris-hex)),
    linear-gradient(150deg, var(--gris-hex) 12%, transparent 12.5%, transparent 87%, var(--gris-hex) 87.5%, var(--gris-hex)),
    linear-gradient(30deg, var(--gris-hex) 12%, transparent 12.5%, transparent 87%, var(--gris-hex) 87.5%, var(--gris-hex)),
    linear-gradient(150deg, var(--gris-hex) 12%, transparent 12.5%, transparent 87%, var(--gris-hex) 87.5%, var(--gris-hex)),
    linear-gradient(60deg, #1d2027 25%, transparent 25.5%, transparent 75%, #1d2027 75%, #1d2027),
    linear-gradient(60deg, #1d2027 25%, transparent 25.5%, transparent 75%, #1d2027 75%, #1d2027);
  background-size: 40px 70px;
  background-position: 0 0, 0 0, 20px 35px, 20px 35px, 0 0, 20px 35px;
  background-attachment: fixed;
}

/* --- Estructura de la app: barra lateral + barra superior de subsecciones --- */
.app-shell { display: flex; min-height: 100vh; }

.btn-menu {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 110;
  width: auto;
  padding: 8px 12px;
  font-size: 1.2rem;
  background: var(--gris-panel);
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  box-shadow: none;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 90;
  display: none;
}
.overlay.visible { display: block; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 230px;
  background: #15171b;
  border-right: 1px solid var(--gris-borde);
  padding: 20px 14px;
  z-index: 100;
  transform: translateX(-100%);
  transition: transform 0.25s ease;
  overflow-y: auto;
}
.sidebar.abierto { transform: translateX(0); }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  padding-left: 4px;
}
.sidebar-brand img { width: 28px; height: 28px; }
.sidebar-brand span { font-weight: 700; font-size: 0.95rem; }

.sidebar-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  color: var(--blanco);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.92rem;
}
.nav-item.activo { background: rgba(224, 123, 46, 0.25); color: var(--naranja); }
.nav-item:not(.activo):not(.disabled):hover { background: var(--gris-hex); }
.nav-item.disabled { color: #6b6f7a; cursor: default; }

.main-area { flex: 1; min-width: 0; padding: 0 16px 16px; }
.main-area .wrap { margin: 0 auto; }

.topbar {
  display: flex;
  justify-content: center;
  padding: 60px 0 4px;
}
.topbar-tabs {
  display: flex;
  gap: 6px;
  background: var(--gris-panel);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 4px;
  max-width: 480px;
  width: 100%;
}
.tab {
  flex: 1;
  text-align: center;
  padding: 8px 10px;
  border-radius: 7px;
  color: #b8bcc6;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}
.tab.activo { background: var(--naranja); color: white; }

@media (min-width: 860px) {
  .sidebar { position: sticky; transform: none; height: 100vh; }
  .btn-menu, .overlay { display: none !important; }
  .topbar { padding-top: 20px; }
}

.wrap { max-width: 480px; margin: 0 auto; }

/* --- Cabecera con logos --- */
.cabecera {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #22252c, #191b20);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  border-bottom: 3px solid var(--naranja);
}
.cabecera img.escudo { width: 52px; height: 52px; object-fit: contain; flex-shrink: 0; }
.cabecera img.wordmark { height: 34px; object-fit: contain; }
.cabecera .titulo-pagina { font-size: 0.85rem; color: #b8bcc6; margin: 2px 0 0; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }

/* --- Cabecera de Forma (logo + selectores) en Cronogramas --- */
.cabecera-forma {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 20px;
  background: linear-gradient(180deg, #22252c, #191b20);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  border-bottom: 3px solid var(--naranja);
}
.cabecera-forma .logo-forma { width: 64px; height: 64px; object-fit: contain; flex-shrink: 0; }
.cabecera-forma .selectores-forma { flex: 1; }
.cabecera-forma .selectores-forma label { margin-bottom: 8px; }
.cabecera-forma .selectores-forma label:last-child { margin-bottom: 0; }

/* --- Ancho completo para páginas de contenido denso (Cronogramas) --- */
.wrap-ancho { max-width: 1400px; }

.grid-tarjetas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
  align-items: start;
}
.grid-tarjetas-programa { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid-tarjetas .detalle, .grid-tarjetas .bloque-card, .grid-tarjetas .sesion-card { margin-top: 0; height: 100%; }
.grid-tarjetas iframe { max-width: 100%; }

.pills-fase { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pill-fase {
  background: var(--gris-panel); border: 1px solid var(--gris-borde); color: #b8bcc6;
  border-radius: 20px; padding: 7px 16px; font-weight: 600; font-size: 0.85rem; cursor: pointer;
}
.pill-fase.activo { background: var(--naranja); border-color: var(--naranja); color: white; }

/* --- Pestañas de nivel: Cronograma / Temario / Programa --- */
.tabs-nivel { display: flex; gap: 8px; margin-bottom: 18px; border-bottom: 1px solid var(--gris-borde); }
.tab-nivel {
  background: none; border: none; color: #b8bcc6; font-weight: 700; font-size: 0.9rem;
  padding: 10px 4px; cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -1px;
}
.tab-nivel.activo { color: var(--naranja); border-bottom-color: var(--naranja); }
.nivel.oculto { display: none; }

.bloque-card { background: linear-gradient(180deg, #22252c, #191b20); border: 1px solid var(--gris-borde); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.bloque-card h3 { margin: 0 0 4px; font-size: 1rem; }
.bloque-card .duracion { color: #b8bcc6; font-size: 0.85rem; }

.sesion-card { background: linear-gradient(180deg, #22252c, #191b20); border: 1px solid var(--gris-borde); border-radius: 10px; padding: 12px 16px; margin-bottom: 10px; }
.sesion-card h3 { margin: 0 0 6px; font-size: 0.95rem; color: var(--naranja); }
.sesion-card .contenido { white-space: pre-line; margin: 0 0 6px; }
.sesion-card .notas { white-space: pre-line; font-size: 0.85rem; color: #b8bcc6; border-left: 2px solid var(--gris-borde); padding-left: 10px; margin: 0; }

.sub { margin-top: 0; margin-bottom: 20px; }
.sub a { color: var(--naranja); text-decoration: none; font-weight: 700; }
.sub a:hover { text-decoration: underline; }

label { display: block; margin-bottom: 16px; font-weight: 600; font-size: 0.95rem; }

select, input[type="date"], textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 10px;
  font-size: 1rem;
  border-radius: 8px;
  border: 1px solid var(--gris-borde);
  background: var(--gris-panel);
  color: var(--blanco);
  font-family: inherit;
  resize: vertical;
}
select:focus, input:focus, textarea:focus { outline: 2px solid var(--naranja); outline-offset: 1px; }

label.check { display: flex; align-items: center; gap: 8px; font-weight: 500; }
label.check input { width: auto; }
.oculto { display: none; }
.etiqueta { font-weight: 600; margin-bottom: 8px; }

.lista-check {
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--gris-borde);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 16px;
  background: var(--gris-panel);
}
.lista-check label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 400;
  margin-bottom: 6px;
  padding: 6px;
  border-radius: 6px;
}
.lista-check label:has(input:checked) { background: rgba(224, 123, 46, 0.22); }
.lista-check input { width: auto; accent-color: var(--naranja); }
.lista-check .grupo { font-weight: 700; margin: 10px 0 4px; color: var(--naranja); font-size: 0.85rem; }

button, a.boton {
  width: 100%;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--naranja), var(--naranja-oscuro));
  color: white;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.25);
}
button:active, a.boton:active { transform: translateY(1px); box-shadow: none; }

#mensaje { text-align: center; font-weight: 600; }

table { width: 100%; border-collapse: collapse; margin-top: 16px; }
th, td { text-align: left; padding: 8px; border-bottom: 1px solid var(--gris-borde); font-size: 0.9rem; }
th { color: var(--naranja); text-transform: uppercase; font-size: 0.75rem; letter-spacing: 0.04em; }
tr { cursor: pointer; }
tr:hover { background: var(--gris-hex); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: rgba(224, 123, 46, 0.22); color: var(--naranja); font-size: 0.8rem; font-weight: 700; }

.detalle {
  background: var(--gris-panel);
  border: 1px solid var(--gris-borde);
  border-radius: 12px;
  padding: 16px;
  margin-top: 16px;
  position: relative;
  overflow: hidden;
}
.detalle h3 { margin-top: 0; color: var(--naranja); }
.detalle ul { margin: 4px 0 12px; padding-left: 20px; }
a.boton { display: inline-block; text-decoration: none; text-align: center; }

.acciones { display: flex; gap: 8px; margin-top: 10px; }
.acciones .boton, .acciones button { width: auto; flex: 1; margin: 0; }
button.peligro {
  background: linear-gradient(180deg, #c23d2e, #971f14);
}

.cuadrante-titulo { margin: 0 0 10px; font-size: 0.85rem; color: var(--naranja); text-transform: uppercase; letter-spacing: 0.04em; }
.cuadrante-mes {
  background: var(--gris-panel);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.cuadrante-mes h4 { margin: 0 0 8px; font-size: 0.95rem; }
.cuadrante-fila { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; font-size: 0.9rem; }
.cuadrante-fila + .cuadrante-fila { border-top: 1px solid var(--gris-borde); }

.selector-mes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 16px;
}
.selector-mes button {
  width: 40px;
  padding: 8px;
  font-size: 1.2rem;
}
.selector-mes span { font-weight: 700; text-transform: capitalize; min-width: 160px; text-align: center; }

.panel-dia {
  background: var(--gris-panel);
  border: 1px solid var(--gris-borde);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.panel-dia h4 { margin: 0 0 8px; font-size: 0.95rem; }

.panel-sesion { padding: 8px 0; }
.panel-sesion + .panel-sesion { border-top: 1px solid var(--gris-borde); }
.panel-sesion-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.9rem; }
.panel-clan { font-weight: 600; }
.panel-detalle { color: #b8bcc6; }

.pill.estado-dada { background: rgba(70, 176, 90, 0.22); color: #5fd57a; }
.pill.estado-anulada { background: rgba(194, 61, 46, 0.22); color: #e8746a; }
.pill.estado-falta_info { background: rgba(224, 123, 46, 0.22); color: var(--naranja); }
.pill.estado-pendiente { background: rgba(120, 124, 136, 0.22); color: #b8bcc6; }

.panel-sesion .btn-anular {
  width: auto;
  margin-top: 6px;
  padding: 6px 12px;
  font-size: 0.8rem;
}
.panel-form-anular { margin-top: 8px; }
.panel-form-anular textarea { margin-bottom: 8px; }
.panel-form-anular button { width: auto; padding: 8px 14px; font-size: 0.85rem; }

/* Easter egg: sombra de la estrella de la muerte, sutil, esquina del detalle */
.detalle::after {
  content: "";
  position: absolute;
  right: -30px;
  bottom: -30px;
  width: 110px;
  height: 110px;
  background: url('assets/sombras-muerte.jpg') center/cover;
  border-radius: 50%;
  opacity: 0.12;
  pointer-events: none;
}