/* Palette around #02443e */
:root {
  --teal-base: #02443e;
  --teal-dark: #01302b;
  --teal-darker: #011f1c;
  --teal-light: #036b62;
  --teal-bright: #048f82;
  --teal-glow: rgba(4, 143, 130, 0.4);
  --teal-tint: rgba(2, 68, 62, 0.5);
}

html {
  scroll-behavior: smooth;
  height: 100%;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: linear-gradient(135deg, var(--teal-darker) 0%, var(--teal-dark) 40%, var(--teal-base) 100%);
  min-height: 100vh;
  height: 100%;
  margin: 0;
}

/* Lector digital: sin scroll de página ni smooth (evita el «salto» al pasar el mouse). */
html.lector-digital-open,
html.lector-digital-open body {
  overflow: hidden !important;
  scroll-behavior: auto !important;
  overscroll-behavior: none !important;
}
html.lector-digital-open .app-main {
  overflow: hidden !important;
}

/* Lector CSS fullscreen (para móviles donde requestFullscreen no funciona).
   El fondo llega hasta la hora; el texto respeta el notch. */
.lector-css-fullscreen {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 99999 !important;
  width: 100% !important;
  width: 100vw !important;
  height: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  min-height: -webkit-fill-available !important;
  border-radius: 0 !important;
  border: none !important;
  box-sizing: border-box !important;
  /* Sin `margin-top` negativo: con `viewport-fit=cover` (lo pone el lector al
     entrar) el `top: 0` de un fixed YA es el borde de la pantalla, debajo de la
     hora. Subirlo además el alto del notch dejaba el menú del lector justo bajo
     el reloj, y la franja crema de abajo —que va por encima— se lo tapaba: el
     menú se veía cortado por arriba.

     El relleno de arriba es el mismo `max(12px, …)` que el alto de esa franja,
     así que la franja sólo pinta sobre papel en blanco y nunca sobre el menú. */
  padding-top: max(12px, env(safe-area-inset-top, 0px)) !important;
  padding-right: env(safe-area-inset-right, 0px) !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  padding-left: env(safe-area-inset-left, 0px) !important;
  background: var(--lector-paper, #f6f1e7) !important;
  background-color: var(--lector-paper, #f6f1e7) !important;
}
/* Relleno extra de la franja superior (hora / Dynamic Island).
   Safari 26+ ignora theme-color y muestrea un fixed/sticky arriba. */
html.lector-css-fs-active::before,
.lector-status-tint {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;
  width: 100%;
  /* min 12px: aunque safe-area sea 0, Safari puede muestrear el tint */
  height: max(12px, env(safe-area-inset-top, 0px));
  min-height: 12px;
  background-color: var(--lector-paper, #f6f1e7);
  background: var(--lector-paper, #f6f1e7);
  pointer-events: none;
}
.lector-status-tint {
  content: none;
}
html.lector-css-fs-active,
html.lector-css-fs-active body,
html.lector-css-fs-active #root {
  overflow: hidden !important;
  background: var(--lector-paper, #f6f1e7) !important;
  background-color: var(--lector-paper, #f6f1e7) !important;
}
html.lector-css-fs-active {
  background-color: var(--lector-paper, #f6f1e7) !important;
}
.lector-fs-bar-hidden {
  display: none !important;
}
/* El botón suelto para salir de pantalla completa se quitó de los dos lectores:
   el del menú hace lo mismo. Aquí no queda nada que pintar. */

/* Lector immersive mode: oculta header de Harmonia cuando lector está activo */
html.lector-immersive .app-header,
html.lector-immersive .app-sidebar,
html.lector-immersive header.sticky,
html.lector-immersive nav {
  display: none !important;
}

/* Auto-hide UI del lector: toolbar y header propio */
.lector-toolbar-autohide {
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lector-toolbar-hidden {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(-100%) !important;
}
.lector-header-autohide {
  transition: opacity 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}
html.lector-ui-hidden .lector-header-autohide {
  opacity: 0 !important;
  max-height: 0 !important;
  pointer-events: none !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.epub-body p { margin: 0 0 0.9em; }
.epub-body h1, .epub-body h2 { font-weight: 700; margin: 1.2em 0 0.6em; }

/* Lector móvil: el marco negro no tapa el color del papel.
   El color de reserva es el mismo que el de las demás reglas —y que el
   `paper-color` del lector—: aquí decía #f5f5f5 y era medio culpable de que unos
   documentos salieran del color del libro y otros con la franja de arriba
   blanca. */
@media (max-width: 767px) {
  .lector-css-fullscreen .bg-slate-950,
  .lector-css-fullscreen .bg-black,
  .lector-css-fullscreen .bg-neutral-100 {
    background: var(--lector-paper, #f6f1e7) !important;
  }
}

#root {
  min-height: 100%;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(2, 68, 62, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: var(--teal-glow);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(4, 143, 130, 0.6);
}

/* Logo in sidebar: transparent background (no white) */
aside img[src*="logo"],
aside [class*="flex-shrink-0"] img[src*="logo"] {
  background: transparent !important;
  background-color: transparent !important;
}
aside .relative.flex-shrink-0:has(img[src*="logo"]) {
  background: transparent !important;
}

.glass-card {
  background: rgba(46, 142, 134, 0.25);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(4, 143, 130, 0.15);
}

/* Lighter variant so icons and labels are more visible */
.glass-card--lighter {
  background: rgba(4, 143, 130, 0.12);
  border-color: rgba(4, 143, 130, 0.25);
}

.gradient-border {
  position: relative;
  background: linear-gradient(135deg, rgba(4, 143, 130, 0.15), rgba(2, 68, 62, 0.2));
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--teal-bright), var(--teal-base));
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0.5;
  transition: opacity 0.3s;
}

.gradient-border:hover::before {
  opacity: 1;
}

.glow-amber {
  box-shadow: 0 0 40px var(--teal-glow);
}

.glow-purple {
  box-shadow: 0 0 40px rgba(4, 143, 130, 0.2);
}

* {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 20px rgba(4, 143, 130, 0.2); }
  50% { box-shadow: 0 0 40px var(--teal-glow); }
}

.animate-pulse-glow {
  animation: pulse-glow 3s ease-in-out infinite;
}

.timeline-line {
  background: linear-gradient(180deg, var(--teal-bright) 0%, var(--teal-base) 100%);
}

input, select, textarea {
  transition: all 0.2s ease;
}

/* Las opciones de un <select> nativo las pinta el sistema: sobre el tema oscuro
   salían en blanco sobre blanco (ilegibles en Windows/Chrome). Se les da fondo y
   color propios. Los desplegables nuevos usan ui/combo-select, pero mientras
   queden <select> nativos tienen que leerse. */
select option,
select optgroup {
  background-color: #0b1a17;
  color: #e2e8f0;
}
select option:checked {
  background-color: rgba(251, 191, 36, 0.25);
  color: #ffffff;
}

input:focus, select:focus, textarea:focus {
  box-shadow: 0 0 0 3px rgba(4, 143, 130, 0.25);
  outline: none;
}

/* Teal accent utilities for layout (avoid # in Clojure source) */
.bg-teal-dark { background-color: var(--teal-dark); }
.bg-teal-bright { background-color: var(--teal-bright); }
.bg-teal-base-tint { background-color: rgba(2, 68, 62, 0.4); }
.text-teal-mint { color: #7dd3c8; }
.border-teal-dark { border-color: var(--teal-dark); }
.nav-pill-teal { background: linear-gradient(to bottom, var(--teal-bright), var(--teal-base)); }
.blur-teal-top { background-color: rgba(4, 143, 130, 0.15); }
.blur-teal-bottom { background-color: rgba(2, 68, 62, 0.2); }

/* Sidebar layout fix */
aside.flex.flex-col {
  display: flex !important;
  flex-direction: column !important;
}

nav.flex-1 {
  flex: 1 1 0% !important;
  overflow-y: auto !important;
}

.custom-scrollbar::-webkit-scrollbar {
  width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: rgba(4, 143, 130, 0.3);
  border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: rgba(4, 143, 130, 0.5);
}

/* Leaflet map on login - theme #2b6257 */
.leaflet-na-tooltip {
  background: rgba(43, 98, 87, 0.95) !important;
  border: 1px solid rgba(90, 163, 150, 0.5) !important;
  color: #a8e6d9 !important;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
}
/* Map semi-transparent so gradient shows through; subtle blur for depth */
.login-map-container {
  pointer-events: auto !important;
  outline: none !important;
  backdrop-filter: blur(6px);
}
.login-map-container:focus,
.login-map-container:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}
/* Remove Leaflet path focus/selection rectangle */
.login-map-container .leaflet-interactive:focus,
.login-map-container .leaflet-interactive:focus-visible {
  outline: none !important;
}
.login-map-container path.leaflet-interactive {
  outline: none !important;
}
/* Hide Leaflet box zoom selection rectangle */
.login-map-container .leaflet-box {
  display: none !important;
}
/* Exclude map from global transform transition so panning stays responsive */
.login-map-container * {
  transition: none !important;
}
.login-map-container .leaflet-control-zoom,
.login-map-container .leaflet-control-container {
  display: none !important;
}
.login-map-container .leaflet-interactive {
  cursor: pointer !important;
  pointer-events: auto !important;
}
/* Leaflet sets pointer-events:none on SVG by default - ensure country paths receive clicks */
.login-map-container .leaflet-overlay-pane path {
  pointer-events: auto !important;
}
.login-map-container .login-map-pin {
  background: none !important;
  border: none !important;
}

/* Login wall: subtle pattern overlay */
.login-wall-pattern-overlay {
  position: absolute;
  inset: 0;
  background-image: url("/img/pattern-overlay.png");
  background-size: cover;
  background-position: center;
  opacity: 0.2;
  pointer-events: none;
  z-index: 1;
}

/* Login wall: map left (20% narrower), login right wider, fill viewport */
.login-wall-layout {
  position: relative;
  display: grid !important;
  grid-template-columns: 0.8fr 1fr !important;
  align-items: center !important;
  height: 100vh !important;
  min-height: 100vh;
  width: 100%;
}
/* Login map wrapper: fade transition when hiding on resize */
.login-map-wrap {
  transition: opacity 0.35s ease-out;
}

@media (max-width: 640px) {
  .login-wall-layout {
    grid-template-columns: 1fr !important;
  }
  .login-wall-right-col {
    border-left: none !important;
  }
  .login-map-wrap {
    position: absolute !important;
    inset: 0;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
  }
  .login-wall-layout .order-1 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    flex: none !important;
  }
}
.login-wall-right-col {
  border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Match form card height to map for harmonious layout */
.login-form-card {
  min-height: 383px;
}

.login-logo-container {
  height: 124px;
}

/* Login logo - bigger, more prominent */
.login-logo {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  object-fit: contain;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4));
}
@media (min-width: 768px) {
  .login-logo {
    width: 160px;
    height: 160px;
    margin-bottom: 2rem;
  }
}

/* Rendered markdown (event class notes). An editorial, magazine-style reading
   treatment: an elegant serif (Spectral) on a comfortable measure, refined
   typographic rhythm, drop-cap opening and book-like headings. Tailwind's
   preflight strips default element styling, so we restore it all here. */
.prose-notes {
  font-family: "Spectral", Georgia, "Times New Roman", serif;
  font-size: 1.0625rem;
  line-height: 1.78;
  color: #dfe5ec;
  max-width: 68ch;
  margin-inline: auto;
  text-wrap: pretty;
  hanging-punctuation: first allow-end;
}
.prose-notes > :first-child { margin-top: 0; }
.prose-notes > :last-child { margin-bottom: 0; }
.prose-notes h1,
.prose-notes h2,
.prose-notes h3,
.prose-notes h4 {
  font-family: "Spectral", Georgia, serif;
  color: #f4f6f9;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 1.5em 0 0.5em;
  text-wrap: balance;
}
.prose-notes h1 {
  font-size: 2em;
  font-weight: 800;
  margin-top: 0.2em;
}
.prose-notes h2 {
  font-size: 1.5em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.prose-notes h3 { font-size: 1.25em; }
.prose-notes h4 { font-size: 1.05em; font-weight: 600; color: #e2c98a; }
.prose-notes p { margin: 0 0 1.05em; }
/* Drop cap on the opening paragraph for a true editorial feel. */
.prose-notes > p:first-of-type::first-letter {
  float: left;
  font-size: 3.4em;
  line-height: 0.82;
  font-weight: 700;
  padding: 0.05em 0.1em 0 0;
  color: #e2c98a;
}
.prose-notes a {
  color: #5eead4;
  text-decoration: underline;
  text-decoration-color: rgba(94, 234, 212, 0.4);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s ease;
}
.prose-notes a:hover { text-decoration-color: #5eead4; }
.prose-notes strong { color: #f4f6f9; font-weight: 700; }
.prose-notes em { font-style: italic; }
.prose-notes ul,
.prose-notes ol { margin: 0 0 1.05em; padding-left: 1.5em; }
.prose-notes ul { list-style: disc; }
.prose-notes ol { list-style: decimal; }
.prose-notes li { margin: 0.3em 0; padding-left: 0.2em; }
.prose-notes li::marker { color: rgba(226, 201, 138, 0.7); }
.prose-notes blockquote {
  border-left: 3px solid rgba(226, 201, 138, 0.55);
  padding: 0.1em 0 0.1em 1.1em;
  margin: 1.2em 0;
  color: #b9c2cf;
  font-style: italic;
  font-size: 1.08em;
}
.prose-notes code {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.1em 0.4em;
  border-radius: 0.35rem;
  font-size: 0.85em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.prose-notes pre {
  background: rgba(0, 0, 0, 0.4);
  padding: 0.9em 1.1em;
  border-radius: 0.6rem;
  overflow-x: auto;
  margin: 1.2em 0;
  font-size: 0.9rem;
  line-height: 1.5;
}
.prose-notes pre code { background: none; padding: 0; font-size: 1em; }
.prose-notes pre.mermaid {
  background: transparent;
  padding: 0.6em 0;
  text-align: center;
}
.prose-notes hr {
  border: 0;
  margin: 2em auto;
  width: 40%;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.prose-notes table { border-collapse: collapse; margin: 1.2em 0; width: 100%; font-size: 0.95em; }
.prose-notes th,
.prose-notes td { border: 1px solid rgba(255, 255, 255, 0.12); padding: 0.5em 0.75em; text-align: left; }
.prose-notes th { background: rgba(255, 255, 255, 0.05); font-weight: 600; }
.prose-notes img { max-width: 100%; border-radius: 0.5rem; margin: 1.2em auto; display: block; }

/* Cátedra sigla pills on grupo cards — a fixed palette of 10 distinct colors,
   referenced by .cat-pill-N (see na-sys.views.cursos/catedra-pill-class).
   Defined here (not via Tailwind utilities) so they render against the
   prebuilt tailwind.css. */
.cat-pill { border: 1px solid transparent; }
.cat-pill--btn { cursor: pointer; }
.cat-pill-0 { background: rgba(45, 212, 191, 0.15);  color: #5eead4; }   /* teal */
.cat-pill-1 { background: rgba(56, 189, 248, 0.15);  color: #7dd3fc; }   /* sky */
.cat-pill-2 { background: rgba(167, 139, 250, 0.16); color: #c4b5fd; }   /* violet */
.cat-pill-3 { background: rgba(251, 191, 36, 0.15);  color: #fcd34d; }   /* amber */
.cat-pill-4 { background: rgba(251, 113, 133, 0.15); color: #fda4af; }   /* rose */
.cat-pill-5 { background: rgba(52, 211, 153, 0.15);  color: #6ee7b7; }   /* emerald */
.cat-pill-6 { background: rgba(232, 121, 249, 0.16); color: #f0abfc; }   /* fuchsia */
.cat-pill-7 { background: rgba(34, 211, 238, 0.15);  color: #67e8f9; }   /* cyan */
.cat-pill-8 { background: rgba(129, 140, 248, 0.16); color: #a5b4fc; }   /* indigo */
.cat-pill-9 { background: rgba(163, 230, 53, 0.15);  color: #bef264; }   /* lime */
.cat-pill--btn.cat-pill-0:hover { background: rgba(45, 212, 191, 0.3); }
.cat-pill--btn.cat-pill-1:hover { background: rgba(56, 189, 248, 0.3); }
.cat-pill--btn.cat-pill-2:hover { background: rgba(167, 139, 250, 0.32); }
.cat-pill--btn.cat-pill-3:hover { background: rgba(251, 191, 36, 0.3); }
.cat-pill--btn.cat-pill-4:hover { background: rgba(251, 113, 133, 0.3); }
.cat-pill--btn.cat-pill-5:hover { background: rgba(52, 211, 153, 0.3); }
.cat-pill--btn.cat-pill-6:hover { background: rgba(232, 121, 249, 0.32); }
.cat-pill--btn.cat-pill-7:hover { background: rgba(34, 211, 238, 0.3); }
.cat-pill--btn.cat-pill-8:hover { background: rgba(129, 140, 248, 0.32); }
.cat-pill--btn.cat-pill-9:hover { background: rgba(163, 230, 53, 0.3); }


/* Planner floating preview: full-width on mobile, right third on desktop.
   `md:w-1/3` is not in the prebuilt tailwind.css, so the width lives here. */
.planner-preview { width: 100%; background: rgba(2, 6, 23, 0.94); }
@media (min-width: 768px) {
  .planner-preview { width: 33.3333%; min-width: 360px; max-width: 560px; }
  /* The preview is `position: fixed; right: 0` (≈420px wide), so it sits ON TOP
     of the calendar's right columns (SÁB/DOM) and hides them. The panel and the
     calendar card (`.glass-card`) are DOM siblings inside the planner view — and
     the panel only exists in the DOM while open — so shrink the calendar by the
     panel width whenever a preview is present. The 7-col grid reflows narrower
     and Saturday/Sunday stay visible. Closing the panel removes the element, the
     selector stops matching, and the calendar reclaims full width. */
  .planner-preview ~ .glass-card {
    /* matches the panel's actual rendered width: inline `min(420px, 100vw)`,
       which the stylesheet's 33.33% can't override (inline wins). */
    margin-right: 420px;
    transition: margin-right 0.18s ease;
  }
}

/* Day-panel slide-in (planner floating preview) */
@keyframes naSlideInRight {
  from { transform: translateX(24px); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}

/* ── Nav drawer: one elegant translateX slide on every breakpoint ─────────────
   Both mobile AND desktop now use the same off-canvas slide (GPU-friendly
   transform) instead of the old desktop width-collapse, so pressing «t» (or the
   hamburger) glides the drawer in and out. `.app-nav-open` is toggled on the
   <aside>; `.app-main-open` shifts the content while the drawer is in. */
.app-sidebar { transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.app-main    { transition: margin-left 0.42s cubic-bezier(0.4, 0, 0.2, 1); }
.app-hamburger { display: inline-flex; }
.app-nav-backdrop { display: none; }

/* Desktop: drawer hidden until opened; when open it pushes the content right
   (they sit side by side, so no backdrop). */
@media (min-width: 768px) {
  .app-sidebar { transform: translateX(-100%); box-shadow: 0 0 40px rgba(0, 0, 0, 0.45); }
  .app-sidebar.app-nav-open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .app-main.app-main-open { margin-left: 18rem; }
}

/* Mobile: same slide, overlaying the content with a tap-to-dismiss backdrop. */
@media (max-width: 767px) {
  .app-sidebar {
    width: 16rem !important;
    transform: translateX(-100%);
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.55);
  }
  .app-sidebar.app-nav-open { transform: translateX(0); }
  .app-main { margin-left: 0 !important; }
  .app-nav-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 45;
  }
}

/* Hide an element on mobile only (the prebuilt Tailwind lacks md:block / md:hidden
   responsive display variants, so we ship our own). Used to drop the dashboard
   notifications card on phones — notifications stay reachable from the avatar menu. */
.hide-on-mobile { display: none; }
@media (min-width: 768px) {
  .hide-on-mobile { display: block; }
}

/* Perfil: sm:/md: de Tailwind no están en el CSS precompilado, así que
   PC y móvil se veían iguales. Media queries reales: pastilla en desktop,
   solo avatar + menú a lo ancho en móvil. */
.header-next-class { display: flex; }
.user-menu-btn { padding-right: 0.75rem; }
.user-menu-meta { display: flex; flex-direction: column; align-items: flex-start; }
.user-menu-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  margin-top: 0.5rem;
  width: 20rem;
  z-index: 80;
}
.user-menu-panel--wide { width: 24rem; }
@media (max-width: 767px) {
  .header-next-class { display: none; }
  .user-menu-btn { padding-right: 0.25rem; }
  .user-menu-meta { display: none !important; }
  .user-menu-panel {
    position: fixed;
    top: 5rem;
    left: 0.75rem;
    right: 0.75rem;
    width: auto;
    margin-top: 0;
    max-height: min(32rem, calc(100dvh - 5.5rem));
    overflow-y: auto;
  }
}

/* Warm "parchment" card for the Release Notes / Tareas page — a Roman cream tone
   instead of the dark green glass, while staying readable with light text. */
.card-cream {
  background: rgba(240, 232, 214, 0.11);
  border: 1px solid rgba(240, 232, 214, 0.20);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.5);
}

/* Tareas kanban: 1 column on mobile, N columns on desktop (prebuilt Tailwind has
   no md:grid-cols-4, so we ship our own responsive grid). */
.kanban-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
@media (min-width: 768px) {
  .kanban-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kanban-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Guía (wiki): parchment ────────────────────────────────────────────────
   The wiki reads like a manual, so it gets a beige "paper" surface with dark
   ink instead of the app's dark glass. Tailwind here is prebuilt and never
   scans .cljs, so the colours live in plain CSS and cascade over the markdown
   renderer's own (dark-theme) utility classes. */
.wiki-paper {
  background: #fffdf5;
  border: 1px solid #dfd3b4;
  color: #4a4234;
}
.wiki-paper h1, .wiki-paper h2, .wiki-paper h3, .wiki-paper h4 { color: #3f382c; }
.wiki-paper p, .wiki-paper li, .wiki-paper .prose-notes { color: #4a4234; }
.wiki-paper a { color: #8b5e34; }
.wiki-paper a:hover { color: #6f4a29; }
.wiki-paper hr { border-color: #dfd3b4; }
.wiki-paper blockquote { border-left-color: #c8b48a; color: #5c5343; }
.wiki-paper code { background: rgba(139, 94, 52, 0.10) !important; color: #6f4a29; }
.wiki-paper figure img { border-color: #dfd3b4; }
.wiki-paper figcaption { color: #94866a; }
.wiki-paper h2 { border-bottom: 1px solid #ece2cb; padding-bottom: 0.25rem; }

/* Sidebar of the wiki: a slightly darker sheet of the same paper. */
.wiki-sidebar {
  background: #f3ecda;
  border: 1px solid #dfd3b4;
  color: #7a6d55;
}
.wiki-sidebar input { background: #fffdf5; border-color: #dfd3b4; color: #3f382c; }
.wiki-sidebar input::placeholder { color: #b0a180; }
.wiki-sidebar .wiki-group { color: #94866a; }
.wiki-sidebar .wiki-page-link { color: #7a6d55; border-left: 2px solid transparent; }
.wiki-sidebar .wiki-page-link:hover { background: rgba(139, 94, 52, 0.06); color: #3f382c; }
.wiki-sidebar .wiki-page-link.is-active {
  background: rgba(139, 94, 52, 0.10);
  color: #8b5e34;
  border-left-color: #8b5e34;
}

/* A step of a step-by-step page: number/icon badge + text + optional figure. */
.wiki-step { border: 1px solid #ece2cb; background: #fffaf0; border-radius: 0.9rem; }
.wiki-step-badge {
  background: rgba(139, 94, 52, 0.10);
  border: 1px solid rgba(139, 94, 52, 0.25);
  color: #8b5e34;
}

/* Markdown links: teal on the app's dark glass, sepia on the wiki's parchment.
   (Defined here because the prebuilt Tailwind sheet never scans .cljs.) */
.md-link { color: #5eead4; }
.md-link:hover { color: #99f6e4; }

.wiki-paper .md-link { color: #8b5e34; font-weight: 600; }
.wiki-paper .md-link:hover { color: #6f4a29; }
.wiki-paper strong { color: #2f2a21; font-weight: 700; }
.wiki-paper em { color: #5c5343; }
.wiki-paper ul li::marker, .wiki-paper ol li::marker { color: #b08d5e; }
.wiki-paper figcaption { color: #94866a; }

/* ```html blocks embedded in a wiki article: inherit the parchment palette so a
   pasted table/callout doesn't fight the page. */
.wiki-paper .md-html table { width: 100%; border-collapse: collapse; }
.wiki-paper .md-html th, .wiki-paper .md-html td {
  border: 1px solid #ece2cb; padding: 0.5rem 0.75rem; text-align: left;
}
.wiki-paper .md-html th { background: #f3ecda; color: #3f382c; font-weight: 700; }
.wiki-paper .md-html a { color: #8b5e34; text-decoration: underline; }
.wiki-paper .md-html img { max-width: 100%; border-radius: 0.75rem; }

/* ── /asistencia: entrada escalonada, barras y realce de pendientes ────────
   Tailwind aquí es preconstruido y NO escanea .cljs, así que las utilidades
   nuevas de esta vista viven en este archivo, no en clases arbitrarias. */
@keyframes asisFadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.asis-in {
  opacity: 0;
  animation: asisFadeUp .45s cubic-bezier(.22,.61,.36,1) forwards;
  animation-delay: calc(var(--i, 0) * 45ms);
}
.asis-card { transition: transform .2s ease, background-color .2s ease, border-color .2s ease; }
.asis-card:hover { transform: translateY(-2px); }

/* Barra de cobertura: el ancho se anima al cambiar de mes o de filtro. */
.asis-bar { overflow: hidden; }
.asis-bar > span {
  display: block; height: 100%; border-radius: inherit;
  transition: width .9s cubic-bezier(.22,.61,.36,1);
}

/* Pendiente de pasar lista: latido ámbar, discreto pero visible. */
@keyframes asisPulseRing {
  0%, 100% { box-shadow: 0 0 0 0 rgba(251,191,36,.40); }
  50%      { box-shadow: 0 0 0 6px rgba(251,191,36,0); }
}
.asis-urgent { animation: asisPulseRing 2.4s ease-in-out infinite; }

/* Despliegue suave del detalle de asistencia. */
@keyframes asisExpand {
  from { opacity: 0; max-height: 0; }
  to   { opacity: 1; max-height: 1400px; }
}
.asis-expand { animation: asisExpand .35s ease-out; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .asis-in, .asis-urgent, .asis-expand { animation: none; opacity: 1; max-height: none; }
  .asis-card, .asis-bar > span { transition: none; }
  .asis-card:hover { transform: none; }
}

/* ── Campos de fecha y hora ──────────────────────────────────────────────────
   Sin color-scheme, Chrome dibuja el calendario y el reloj nativos en claro
   sobre la interfaz oscura (caja blanca, texto negro). Con esto el desplegable
   nativo sale en oscuro y el icono deja de ser negro sobre verde.
   Las fechas además se teclean en ui/date-field, que es un campo de texto. */
input[type="date"],
input[type="time"],
input[type="month"],
input[type="week"],
input[type="datetime-local"] {
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .55;
  cursor: pointer;
  transition: opacity .15s ease;
}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}