/* Chanak Flex · aspecto «SIS» (prototipo). Colores del panel del estudiante del SIS: azul marino #0B2D5C y azul #2F80ED. Solo se aplica con body.skin-sis. */
body.skin-sis { background: #f8fafc; color: #1f2937; --sis-navy: #0b2d5c; --sis-blue: #2f80ed; --sis-line: #e2e8f0; }
.skin-sis #app-header { background: var(--sis-navy); }
.skin-sis #app-header > div:last-child { background: var(--sis-blue); height: 3px; }
.skin-sis #app-header .bg-amber-400 { background: #fff; color: var(--sis-navy); }
.skin-sis h1, .skin-sis h2, .skin-sis h3, .skin-sis .font-serif { font-family: Inter, system-ui, sans-serif; letter-spacing: -0.01em; }
.skin-sis h2.font-serif { font-weight: 700; color: var(--sis-navy); }
/* Botones y enlaces principales */
.skin-sis .bg-sky-700, .skin-sis .bg-sky-600 { background-color: var(--sis-blue); }
.skin-sis .hover\:bg-sky-800:hover { background-color: #1f6fe0; }
.skin-sis .text-sky-700, .skin-sis .text-sky-800 { color: var(--sis-blue); }
.skin-sis .border-sky-700 { border-color: var(--sis-blue); }
.skin-sis .accent-sky-700 { accent-color: var(--sis-blue); }
/* Tarjetas como en el SIS: borde fino, esquinas de 8 px */
.skin-sis .rounded-xl, .skin-sis .rounded-2xl { border-radius: 0.5rem; }
.skin-sis .bg-white { border-color: var(--sis-line); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04); }
/* Encabezado de la unidad */
.skin-sis #unit-wrap > header { background: linear-gradient(135deg, var(--sis-navy), #17488c); }
.skin-sis #unit-wrap > header .text-amber-300 { color: #cfe3ff; }
/* Menú de pasos: píldoras con el paso activo en azul */
.skin-sis #unit-wrap nav a.bg-sky-700 { background: var(--sis-navy); }

/* ── Cuadernillo ─────────────────────────────────────────────────────── */
.booklet { margin-bottom: 1rem; }
.booklet-bar { display: flex; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.booklet-nav { width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 1px solid var(--sis-line, #cbd5e1); background: #fff; font-size: 1.1rem; font-weight: 700; color: #0b2d5c; }
.booklet-nav:disabled { opacity: 0.35; cursor: not-allowed; }
.booklet-nav:not(:disabled):hover { background: #eff6ff; }
.booklet-dots { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; max-width: 24rem; }
.booklet-dot { width: 0.7rem; height: 0.7rem; border-radius: 9999px; border: 1.5px solid #94a3b8; background: #fff; padding: 0; }
.booklet-dot.seen { background: #bfdbfe; border-color: #60a5fa; }
.booklet-dot.on { background: #2f80ed; border-color: #2f80ed; transform: scale(1.25); }
.booklet-sheet { background: #fffefb; border: 1px solid #e5e0d3; border-radius: 6px; box-shadow: 0 1px 0 #fff inset, 0 8px 24px rgba(15, 23, 42, 0.08); padding: 0 1.5rem 1rem; max-width: 46rem; margin: 0 auto; }
.booklet-head, .booklet-foot { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #64748b; }
.booklet-head { padding: 0.8rem 0 0.5rem; border-bottom: 2px solid #0b2d5c; }
.booklet-foot { padding-top: 0.7rem; border-top: 1px solid #e5e0d3; margin-top: 0.5rem; }
.booklet-score { font-weight: 700; color: #0b2d5c; }
.booklet-body { padding: 0.25rem 0 0.5rem; min-height: 22rem; }
.booklet-body .reading-section > div:first-child { margin-top: 1rem; }
.booklet-page[hidden] { display: none; }
.booklet:focus-visible { outline: 2px solid #2f80ed; outline-offset: 4px; border-radius: 6px; }
@media (max-width: 640px) { .booklet-sheet { padding: 0 1rem 0.75rem; } .booklet-body { min-height: 16rem; } }
@media print { .booklet-bar { display: none; } .booklet-page[hidden] { display: block; } .booklet-sheet { box-shadow: none; border: 0; } }

/* En teléfono y tablet la lección va primero y el menú de pasos queda debajo. */
@media (max-width: 1023px) { .skin-sis #unit-wrap > div.grid > aside { order: 2; } }

/* Hojas de práctica, autoevaluación y examen */
.booklet-single .booklet-body { min-height: 0; }
.skin-sis .booklet-single #checkup > * { border-color: #e5e0d3; }

/* El menú lateral no debe desbordar su columna (el campo de archivo es ancho en algunos idiomas). */
.skin-sis #unit-wrap aside > * { min-width: 0; max-width: 100%; }
.skin-sis #unit-wrap aside input[type=file], .skin-sis #unit-wrap aside select { max-width: 100%; width: 100%; }