/* ============================================================
   HUB CLÍNICA DE ESQUIZOFRENIA — HOJA DE ESTILOS
   ------------------------------------------------------------
   Organización del archivo:
     01. Tokens de diseño (color, sombra, radio, ritmo, motion)
     02. Reset y base
     03. Fondo (museo + grano de papel)
     04. Encabezado
     05. Navegación por pestañas
     06. Barra de herramientas (búsqueda, botones, tema)
     07. Chips de filtro
     08. Banner de anuncios
     09. Aplicaciones de la clínica
     10. Bloc de notas
     11. Tarjetas de enlaces
     12. Vista de tabla
     13. Estados (vacío, error, carga)
     14. Documento de lineamientos
     15. Póster de mandamientos
     16. Actividades
     17. Entrevista
     18. Modales
     19. Accesibilidad, movimiento e impresión
     20. Adaptación a pantallas pequeñas
   ============================================================ */

/* ============================================================
   01. TOKENS DE DISEÑO
   ============================================================ */
:root {
  color-scheme: light;

  /* -- Tipografías -- */
  @font-face {
    font-family: 'CthulhuRunes';
    src: url('../fonts/CthulhuRunes.ttf') format('truetype');
    font-display: swap;
  }
  @font-face {
    font-family: 'MainCustomFont';
    src: url('../fonts/MainCustomFont.woff2') format('woff2'),
         url('../fonts/MainCustomFont.woff') format('woff'),
         url('../fonts/MainCustomFont.ttf') format('truetype');
    font-display: swap;
  }

  --font-title: 'MainCustomFont', 'Playfair Display', Georgia, serif;
  --font-hand: 'Patrick Hand', cursive;
  --font-body: 'MainCustomFont', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;

  /* -- Superficies de papel -- */
  --paper-rgb: 237, 230, 214;
  --paper: #EDE6D6;
  --paper-2: #E3DAC6;
  --paper-3: #D7CCB4;
  --card-bg: #FCF9F3;
  --surface: #FCF9F3;
  --surface-raised: #FFFDF8;

  /* -- Tinta -- */
  --ink: #2E3A47;
  --ink-soft: #626D7A;
  --ink-faint: #8B949E;
  --ink-rgb: 46, 58, 71;

  /* -- Líneas -- */
  --line: rgba(46, 58, 71, 0.13);
  --line-strong: rgba(46, 58, 71, 0.26);

  /* -- Acentos -- */
  --terracota: #C17A56;
  --terracota-deep: #A2603E;
  --salvia: #8A9B6E;
  --salvia-deep: #6C7D52;
  --mostaza: #D1A54E;
  --mostaza-deep: #A57C2C;
  --rosa: #C08787;
  --rosa-deep: #A06565;
  --peligro: #C0392B;
  --peligro-deep: #A5291C;
  --violeta: #6F5FA8;

  /* -- Estrellas / favoritos -- */
  --star-off: #C2BAA6;
  --star-on: #D1A54E;

  /* -- Sombras (capas suaves, nunca un bloque duro) -- */
  --shadow-rgb: 46, 58, 71;
  --shadow-xs: 0 1px 2px rgba(var(--shadow-rgb), 0.06);
  --shadow-sm: 0 1px 2px rgba(var(--shadow-rgb), 0.05),
               0 2px 6px rgba(var(--shadow-rgb), 0.06);
  --shadow-md: 0 2px 4px rgba(var(--shadow-rgb), 0.05),
               0 8px 18px rgba(var(--shadow-rgb), 0.09);
  --shadow-lg: 0 4px 10px rgba(var(--shadow-rgb), 0.07),
               0 18px 40px rgba(var(--shadow-rgb), 0.13);
  /* Compatibilidad con estilos en línea que aún usan --card-shadow */
  --card-shadow: rgba(46, 58, 71, 0.16);

  /* -- Radios -- */
  --r-xs: 4px;
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-pill: 999px;
  /* Radio irregular, como un papel cortado a mano */
  --r-paper: 4px 5px 4px 6px / 6px 4px 6px 4px;

  /* -- Ritmo vertical y anchos -- */
  --wrap: 1140px;
  --wrap-narrow: 860px;
  --gutter: clamp(20px, 5vw, 44px); /* Ampliado para que respire más a los lados */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 28px; /* Era 24px */
  --s6: 40px; /* Era 32px */
  --s7: 56px; /* Era 48px */
  --s8: 80px; /* Era 72px */

  /* -- Movimiento -- */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 150ms; /* Suavizamos un milisegundo más para transiciones menos agresivas */
  --t-med: 250ms;
  --t-slow: 450ms;

  /* -- Foco -- */
  --focus: 0 0 0 2px var(--paper), 0 0 0 4.5px var(--terracota);
}

html[data-theme="dark"] {
  color-scheme: dark;

  --paper-rgb: 25, 27, 32;
  --paper: #191B20;
  --paper-2: #23262D;
  --paper-3: #2E323A;
  --card-bg: #212429;
  --surface: #212429;
  --surface-raised: #282C33;

  --ink: #EAE4D5;
  --ink-soft: #A0A7B0;
  --ink-faint: #767D87;
  --ink-rgb: 234, 228, 213;

  --line: rgba(234, 228, 213, 0.12);
  --line-strong: rgba(234, 228, 213, 0.24);

  /* Acentos aclarados para mantener contraste sobre fondo oscuro */
  --terracota: #D4906B;
  --terracota-deep: #E0A98A;
  --salvia: #A2B387;
  --salvia-deep: #B6C49F;
  --mostaza: #DFBB72;
  --mostaza-deep: #E9CE96;
  --rosa: #CE9E9E;
  --rosa-deep: #DBB5B5;
  --peligro: #E0705F;
  --peligro-deep: #EC8B7B;
  --violeta: #9A8AD4;

  --star-off: #4C515A;
  --star-on: #DFBB72;

  --shadow-rgb: 0, 0, 0;
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35),
               0 2px 8px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.4),
               0 10px 24px rgba(0, 0, 0, 0.42);
  --shadow-lg: 0 6px 14px rgba(0, 0, 0, 0.45),
               0 22px 50px rgba(0, 0, 0, 0.55);
  --card-shadow: rgba(0, 0, 0, 0.5);
}

/* ============================================================
   02. RESET Y BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.62; /* Aumentado para que respire más el texto */
  color: var(--ink);
  background-color: var(--paper);
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'cv05' 1;
  transition: background-color var(--t-med) var(--ease),
              color var(--t-med) var(--ease);
  animation: bodyFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes bodyFadeUp {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

img { max-width: 100%; }

::selection {
  background: color-mix(in srgb, var(--mostaza) 45%, transparent);
  color: var(--ink);
}

/* Jerarquía tipográfica editorial y balanceo de líneas (Estándares Awwwards / NN/g) */
h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
  letter-spacing: -0.015em;
}

p, li, .activity-detail, .class-description {
  text-wrap: pretty;
}

/* Anillos de foco nítidos y accesibles para navegación por teclado */
:focus-visible {
  outline: 2px solid var(--terracota) !important;
  outline-offset: 3px !important;
}

/* Respeto a las preferencias de reducción de movimiento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Barras de desplazamiento discretas, en tono papel */
* { scrollbar-width: thin; scrollbar-color: var(--paper-3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--paper-3);
  border: 3px solid transparent;
  border-radius: var(--r-pill);
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--line-strong); background-clip: content-box; }

/* Contenedor común: un solo ancho y una sola canaleta para toda la página */
.wrap,
.toolbar,
.chips-row,
.dashboard-row,
.announcements-banner,
.search-shortcuts,
main {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  position: relative;
  z-index: 1;
}

/* ============================================================
   03. FONDO (MUSEO + GRANO DE PAPEL)
   ============================================================ */
#museum-bg {
  position: fixed;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -3;
  filter: saturate(0.62) brightness(1.04) blur(1px);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s var(--ease-out);
}
#museum-bg.loaded { opacity: 0.3; }
html[data-theme="dark"] #museum-bg { filter: saturate(0.5) brightness(0.55) blur(1px); }
html[data-theme="dark"] #museum-bg.loaded { opacity: 0.26; }

#museum-overlay {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(120% 80% at 50% 0%,
      rgba(var(--paper-rgb), 0.3) 0%,
      rgba(var(--paper-rgb), 0.55) 55%,
      rgba(var(--paper-rgb), 0.8) 100%);
}

/* Grano sutil de papel: da textura sin pesar ni distraer */
#museum-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.14'/%3E%3C/svg%3E");
}
html[data-theme="dark"] #museum-overlay::after { mix-blend-mode: screen; opacity: 0.35; }

#museum-credit {
  position: fixed;
  bottom: 10px;
  left: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: min(46vw, 400px);
  padding: 4px 5px 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(var(--paper-rgb), 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  opacity: 0.6;
  transition: opacity var(--t-med) var(--ease), color var(--t-med) var(--ease);
}
#museum-credit:hover { opacity: 1; color: var(--ink-soft); }
#museum-credit:empty { display: none; }
#museum-credit .credit-text {
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#museum-credit .credit-shuffle {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              transform var(--t-slow) var(--ease-out);
}
#museum-credit .credit-shuffle:hover {
  background: var(--paper-2);
  color: var(--terracota-deep);
  transform: rotate(180deg);
}
#museum-credit .credit-shuffle[disabled] { opacity: 0.4; cursor: progress; }

/* ============================================================
   04. ENCABEZADO
   ============================================================ */
header {
  text-align: center;
  padding: clamp(38px, 6vw, 62px) var(--gutter) clamp(20px, 3vw, 28px);
  position: relative;
  z-index: 1;
}

header h1 {
  font-family: var(--font-title);
  font-size: clamp(2.1rem, 6vw, 4rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
  display: inline-block;
  transform: rotate(-0.7deg);
}

/* Antetítulo con filetes a los lados, como una portada impresa */
header p {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 14px auto 0;
  max-width: 620px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
header p::before,
header p::after {
  content: '';
  flex: 1 1 auto;
  max-width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-strong));
}
header p::after { background: linear-gradient(90deg, var(--line-strong), transparent); }

/* ============================================================
   05. NAVEGACIÓN POR PESTAÑAS
   ============================================================ */
.tabs-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  padding: 10px var(--gutter);
  margin-bottom: var(--s5);
  background: rgba(var(--paper-rgb), 0);
  transition: background var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease),
              padding var(--t-med) var(--ease);
}
.tabs-nav.is-stuck {
  background: rgba(var(--paper-rgb), 0.65);
  backdrop-filter: blur(24px) saturate(1.4);
  -webkit-backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15),
              0 1px 0 var(--line), 
              0 12px 28px rgba(var(--shadow-rgb), 0.08);
}

/* Control segmentado: una pista de papel con la pestaña activa "levantada" */
.tabs-track {
  display: flex;
  gap: 2px;
  padding: 4px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 78%, transparent);
  box-shadow: var(--shadow-xs);
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent, black 15px, black calc(100% - 15px), transparent);
  mask-image: linear-gradient(90deg, transparent, black 15px, black calc(100% - 15px), transparent);
}
/* Ensure tabs are centered when they don't overflow */
.tabs-track::before, .tabs-track::after {
  content: '';
  margin: auto;
}
.tabs-track::-webkit-scrollbar { display: none; }

.tab-btn {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 9px 17px;
  border: none;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.005em;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.tab-btn .tab-ico {
  font-size: 13px;
  line-height: 1;
  opacity: 0.85;
  transition: transform var(--t-med) var(--ease-out);
}
.tab-btn:hover { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.tab-btn:hover .tab-ico { transform: translateY(-1px) scale(1.06); }

.tab-btn.active {
  color: var(--terracota-deep);
  font-weight: 600;
  background: var(--surface-raised);
  box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line);
}
.tab-btn.active .tab-ico { opacity: 1; }

/* ============================================================
   06. BARRA DE HERRAMIENTAS
   ============================================================ */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-bottom: var(--s4);
}

/* Campo de búsqueda con lupa integrada */
.search-field {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
}
.search-field::before {
  content: '';
  position: absolute;
  left: 15px;
  width: 15px;
  height: 15px;
  pointer-events: none;
  opacity: 0.5;
  background: currentColor;
  -webkit-mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
  mask: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E");
}

/* Campo base: papel, filete fino y foco cálido (sin bordes de caricatura) */
.doodle-input,
.search-box {
  width: 100%;
  padding: 11px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  outline: none;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease);
}
.search-field .doodle-input { padding-left: 40px; }
.doodle-input::placeholder { color: var(--ink-faint); }
.doodle-input:hover { border-color: color-mix(in srgb, var(--terracota) 45%, var(--line-strong)); }
.doodle-input:focus {
  border-color: var(--terracota);
  box-shadow: 0 0 0 3.5px color-mix(in srgb, var(--terracota) 18%, transparent);
}

/* Botón base: papel con filete, elevación suave y respuesta táctil */
.btn,
.doodle-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease),
              background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease);
}
.btn:hover,
.doodle-btn:hover {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--terracota) 55%, var(--line-strong));
  box-shadow: var(--shadow-sm);
}
.btn:active,
.doodle-btn:active {
  transform: scale(0.975);
  box-shadow: var(--shadow-xs);
}
.btn[disabled],
.doodle-btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }

.btn.active {
  background: var(--terracota);
  border-color: var(--terracota);
  color: #fff;
}

/* Botón de acento, para acciones principales dentro de tarjetas y modales */
.doodle-btn.is-primary {
  background: var(--terracota);
  border-color: var(--terracota);
  color: #fff;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--terracota) 35%, transparent);
}
.doodle-btn.is-primary:hover {
  background: var(--terracota-deep);
  border-color: var(--terracota-deep);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--terracota) 45%, transparent);
  transform: translateY(-1px);
}
.doodle-btn.is-primary:active {
  transform: scale(0.975);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--terracota) 25%, transparent);
}
html[data-theme="dark"] .btn.active,
html[data-theme="dark"] .doodle-btn.is-primary { color: #23180F; }

/* -- Interruptor de tema -- */
.theme-switch {
  position: relative;
  display: inline-block;
  width: 54px;
  height: 30px;
  margin-left: auto;
  cursor: pointer;
  flex: 0 0 auto;
}
.theme-switch__checkbox { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-switch__container {
  position: absolute;
  inset: 0;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--mostaza) 22%, var(--surface)),
    var(--surface));
  box-shadow: var(--shadow-xs), inset 0 1px 2px rgba(var(--shadow-rgb), 0.06);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  overflow: hidden;
}
html[data-theme="dark"] .theme-switch__container {
  background: linear-gradient(180deg, #2A2F3A, #1D2027);
}
/* Sol y luna tenues dentro de la pista, para que el control se lea de un vistazo */
.theme-switch__container::before,
.theme-switch__container::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  line-height: 1;
  opacity: 0.45;
  transition: opacity var(--t-med) var(--ease);
}
.theme-switch__container::before { content: '☀'; left: 8px; color: var(--mostaza-deep); }
.theme-switch__container::after  { content: '☾'; right: 9px; color: var(--ink-faint); }
html[data-theme="dark"] .theme-switch__container::before { opacity: 0.2; }
html[data-theme="dark"] .theme-switch__container::after { opacity: 0.55; color: #C9C4B6; }
.theme-switch__circle-container {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mostaza);
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.25),
              0 0 0 4px color-mix(in srgb, var(--mostaza) 22%, transparent);
  transition: transform var(--t-slow) var(--ease-out),
              background var(--t-med) var(--ease),
              box-shadow var(--t-med) var(--ease);
  z-index: 2;
}
html[data-theme="dark"] .theme-switch__circle-container {
  transform: translateX(24px);
  background: #E8E4DA;
  box-shadow: inset -6px -2px 0 -1px #C9C4B6,
              0 0 0 4px rgba(232, 228, 218, 0.14);
}
.theme-switch:hover .theme-switch__circle-container { transform: translateX(2px); }
html[data-theme="dark"] .theme-switch:hover .theme-switch__circle-container { transform: translateX(22px); }

/* -- Atajos de búsqueda en otras apps -- */
.search-shortcuts {
  margin-top: calc(var(--s3) * -1);
  margin-bottom: var(--s4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  animation: fadeSlideIn var(--t-med) var(--ease-out) both;
}
.shortcut-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  text-decoration: none;
  transition: all var(--t-fast) var(--ease);
}
.shortcut-link:hover {
  border-color: var(--terracota);
  color: var(--terracota-deep);
  transform: translateY(-1px);
}

/* ============================================================
   07. CHIPS DE FILTRO
   ============================================================ */
.chips-container {
  margin-bottom: var(--s6);
}
.chips-summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  font-weight: 600;
  color: var(--ink-soft);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  cursor: pointer;
  list-style: none;
  transition: all var(--t-fast) var(--ease);
  box-shadow: var(--shadow-xs);
  margin-bottom: 12px;
}
.chips-summary::-webkit-details-marker { display: none; }
.chips-summary:hover {
  color: var(--ink);
  border-color: var(--terracota);
}
.chips-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  padding-left: 10px;
  animation: fadeSlideIn 0.2s ease-out forwards;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  color: var(--ink-soft);
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.chip:hover {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--surface);
  transform: translateY(-1px);
}
.chip.active {
  background: var(--salvia);
  border-color: var(--salvia);
  color: #fff;
  box-shadow: var(--shadow-xs);
}
html[data-theme="dark"] .chip.active { color: #1B2015; }

/* Chips de etiqueta: más ligeros, en mono, para distinguirlos de categorías */
.chip.tag-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  background: transparent;
  border-style: dashed;
}
.chip.tag-chip:hover { color: var(--ink-soft); border-style: solid; }
.chip.tag-chip.active {
  background: color-mix(in srgb, var(--salvia) 16%, transparent);
  border-color: var(--salvia);
  border-style: solid;
  color: var(--salvia-deep);
}

.chip.star-chip.active { background: var(--mostaza); border-color: var(--mostaza); }
html[data-theme="dark"] .chip.star-chip.active { color: #241C0A; }

.chip.clear-chip {
  border-color: color-mix(in srgb, var(--terracota) 40%, transparent);
  color: var(--terracota-deep);
  background: color-mix(in srgb, var(--terracota) 10%, transparent);
}
.chip.clear-chip:hover { border-color: var(--terracota); }

/* Separador fino entre grupos de chips */
.chip-sep {
  width: 1px;
  align-self: stretch;
  min-height: 20px;
  margin: 0 2px;
  background: var(--line-strong);
}

/* ============================================================
   08. BANNER DE ANUNCIOS
   ============================================================ */
.announcements-banner {
  display: none; /* JS lo cambia a flex cuando hay un anuncio vigente */
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  margin-bottom: var(--s5);
  padding: 14px 20px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--mostaza) 45%, transparent);
  border-left: 3px solid var(--mostaza);
  background:
    linear-gradient(100deg,
      color-mix(in srgb, var(--mostaza) 18%, var(--surface)),
      color-mix(in srgb, var(--mostaza) 6%, var(--surface)) 60%,
      var(--surface));
  box-shadow: var(--shadow-sm),
              0 0 0 4px color-mix(in srgb, var(--mostaza) 9%, transparent);
  font-size: 14.5px;
  line-height: 1.45;
  color: var(--ink);
  position: relative;
  overflow: hidden;
  animation: bannerIn var(--t-slow) var(--ease-out) both;
}

/* Destello que recorre el banner: llama la atención sin parpadear */
.announcements-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg,
    transparent 35%,
    color-mix(in srgb, var(--mostaza) 26%, transparent) 50%,
    transparent 65%);
  transform: translateX(-100%);
  animation: bannerSheen 5.5s var(--ease) 0.6s infinite;
}

/* Fila de cada anuncio individual */
.announcement-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  position: relative;
  z-index: 1;
}
.announcement-item:not(:last-child) {
  padding-bottom: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--mostaza) 30%, transparent);
}

/* Distintivo con punto que late */
.announcements-banner .badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px 4px 9px;
  border-radius: var(--r-pill);
  background: var(--mostaza);
  color: #3A2A08;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  box-shadow: 0 1px 4px color-mix(in srgb, var(--mostaza) 55%, transparent);
}
.announcements-banner .badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  animation: badgePulse 2.2s var(--ease) infinite;
}
.announcements-banner .ann-text { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.announcements-banner strong { font-weight: 600; letter-spacing: -0.005em; }
.announcements-banner .ann-date {
  display: block;
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}
.announcements-banner .btn {
  flex: 0 0 auto;
  border-color: color-mix(in srgb, var(--mostaza) 55%, transparent);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  z-index: 1;
}
.announcements-banner .btn:hover {
  background: var(--mostaza);
  border-color: var(--mostaza);
  color: #3A2A08;
}

@keyframes bannerIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
@keyframes bannerSheen {
  0%       { transform: translateX(-100%); }
  22%, 100% { transform: translateX(100%); }
}
@keyframes badgePulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.35; transform: scale(0.75); }
}

/* Aviso de datos en caché */
#offline-indicator {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

/* ============================================================
   09. APLICACIONES DE LA CLÍNICA
   ============================================================ */
/* Las dos columnas comparten la misma altura: la nota deja de estirar la fila
   y las tarjetas de app crecen para cuadrar con ella. */
.dashboard-row {
  display: grid;
  grid-template-columns: minmax(0, 1.9fr) minmax(272px, 0.95fr);
  gap: var(--s5);
  align-items: stretch;
  margin-bottom: var(--s6);
}

.dashboard-col-left,
.dashboard-col-right {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Título de sección reutilizable */
.apps-title,
.section-label {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.apps-title::after,
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}

.apps-grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-auto-rows: 1fr;
  gap: var(--s3);
}

/* Mosaico vertical: icono arriba, texto abajo. Así la tarjeta llena su alto
   en el tablero en vez de dejar un hueco muerto. */
.app-link-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 15px 16px 16px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-out);
}
/* Filete de color a la izquierda que se revela al pasar el cursor */
.app-link-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--app-accent, var(--terracota));
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--t-slow) var(--ease-out);
}
/* Un ligero resplandor superior para simular cristal */
.app-link-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--r-md);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
  pointer-events: none;
  opacity: 0.5;
  transition: opacity var(--t-med) var(--ease);
}
.app-link-card:hover,
.app-link-card:focus-visible {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--app-accent, var(--terracota)) 50%, var(--line));
  box-shadow: 0 12px 24px rgba(var(--shadow-rgb), 0.12),
              0 4px 8px rgba(var(--shadow-rgb), 0.06);
}
.app-link-card:hover::after,
.app-link-card:focus-visible::after { opacity: 1; }
.app-link-card:hover::before,
.app-link-card:focus-visible::before { transform: scaleY(1); }

.app-link-card:nth-child(6n+1) { --app-accent: var(--terracota); }
.app-link-card:nth-child(6n+2) { --app-accent: var(--salvia); }
.app-link-card:nth-child(6n+3) { --app-accent: var(--mostaza); }
.app-link-card:nth-child(6n+4) { --app-accent: var(--rosa); }
.app-link-card:nth-child(6n+5) { --app-accent: var(--violeta); }
.app-link-card:nth-child(6n+6) { --app-accent: var(--salvia); }

.app-link-card .app-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--app-accent, var(--terracota)) 14%, transparent);
  font-size: 17px;
  line-height: 1;
  transition: transform var(--t-med) var(--ease-out);
}
.app-link-card:hover .app-icon { transform: scale(1.08) rotate(-3deg); }

.app-link-card .app-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin-top: auto;
}
.app-link-card .app-info span:first-child {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.app-link-card .app-info span:last-child {
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--ink-faint);
}

/* Flecha que aparece al pasar el cursor */
.app-link-card .app-go {
  position: absolute;
  top: 16px;
  right: 15px;
  font-size: 13px;
  line-height: 1;
  color: var(--app-accent, var(--terracota));
  opacity: 0;
  transform: translate(-4px, 2px);
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease);
}
.app-link-card:hover .app-go,
.app-link-card:focus-visible .app-go { opacity: 1; transform: none; }

.qr-badge-btn {
  position: absolute;
  top: 13px;
  right: 12px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--ink-soft);
  font-family: var(--font-mono);
  font-size: 10px;
  cursor: pointer;
  z-index: 2;
  transition: all var(--t-fast) var(--ease);
}
.qr-badge-btn:hover { background: var(--terracota); border-color: var(--terracota); color: #fff; }
html[data-theme="dark"] .qr-badge-btn:hover { color: #23180F; }

/* ============================================================
   10. BLOC DE NOTAS
   ------------------------------------------------------------
   Único elemento "escrito a mano" de la interfaz: papel rayado,
   cinta adhesiva y trazos. Se mantiene el carácter, pero con
   filetes finos y sombra suave en lugar de contornos duros.
   ============================================================ */
.notepad-postit {
  --note-bg: #FDFBF6;
  --note-ink: #3A3630;
  --note-line: rgba(58, 54, 48, 0.11);
  --note-tape: rgba(209, 165, 78, 0.5);
  --accent-mint: var(--salvia);
  --accent-lavender: var(--violeta);
  --accent-yellow: var(--mostaza);

  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  /* La nota fija una altura cómoda y las tarjetas de app crecen para igualarla,
     en vez de dejar un hueco vacío debajo de ellas. */
  flex: 1 1 auto;
  min-height: 306px;
  padding: 24px 22px 16px;
  font-size: 14px;
  color: var(--note-ink);
  background:
    linear-gradient(var(--note-bg) 1.55em, transparent 1.55em) 0 0 / 100% 1.6em,
    linear-gradient(var(--note-line) 1px, transparent 1px) 0 1.55em / 100% 1.6em,
    var(--note-bg);
  border: 1px solid var(--line-strong);
  /* Radio irregular: se nota, pero ya no grita */
  border-radius: 60px 10px 52px 12px / 12px 52px 12px 58px;
  box-shadow: var(--shadow-md);
  transition: transform var(--t-slow) var(--ease-out),
              box-shadow var(--t-slow) var(--ease),
              border-radius var(--t-slow) var(--ease);
}
html[data-theme="dark"] .notepad-postit {
  --note-bg: #23252B;
  --note-ink: #E4DFD2;
  --note-line: rgba(228, 223, 210, 0.1);
  --note-tape: rgba(212, 144, 107, 0.42);
}
.notepad-postit:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-radius: 12px 58px 12px 52px / 52px 12px 60px 12px;
}

/* Cinta adhesiva */
.notepad-postit::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 82px;
  height: 20px;
  background:
    linear-gradient(90deg,
      color-mix(in srgb, var(--note-tape) 70%, transparent),
      var(--note-tape) 20%,
      var(--note-tape) 80%,
      color-mix(in srgb, var(--note-tape) 70%, transparent));
  border-radius: 1px 3px 2px 4px;
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.13);
  z-index: 3;
}

/* Trazos decorativos, muy tenues */
.doodle {
  position: absolute;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  z-index: 0;
  pointer-events: none;
}
.doodle.star {
  width: 18px; height: 18px; top: 12px; right: 14px;
  fill: color-mix(in srgb, var(--accent-yellow) 55%, transparent);
  stroke: color-mix(in srgb, var(--accent-yellow) 70%, transparent);
}
.doodle.sparkle {
  width: 15px; height: 15px; bottom: 52px; left: 16px;
  fill: color-mix(in srgb, var(--accent-mint) 42%, transparent);
  stroke: none;
}
.doodle.swirl {
  width: 32px; height: 32px; bottom: 46px; right: 14px;
  stroke: color-mix(in srgb, var(--accent-lavender) 32%, transparent);
  stroke-width: 5;
}

.notepad-postit-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
  width: 100%;
  margin-bottom: 10px;
  z-index: 2;
}
.notepad-postit-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--note-ink);
}
.notepad-postit-date {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.03em;
  color: var(--note-ink);
  opacity: 0.5;
}

.notepad-export-btn {
  flex: 0 0 auto;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--note-ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  cursor: pointer;
  z-index: 2;
  transition: all var(--t-fast) var(--ease);
}
.notepad-export-btn:hover {
  background: color-mix(in srgb, var(--accent-yellow) 22%, transparent);
  border-color: color-mix(in srgb, var(--accent-yellow) 60%, transparent);
}

.notepad-postit-textarea {
  width: 100%;
  flex: 1 1 auto;
  min-height: 96px;
  border: none;
  background: transparent;
  font-family: var(--font-hand);
  font-size: 20px;
  line-height: 1.6;
  color: var(--note-ink);
  resize: none;
  outline: none;
  z-index: 2;
}
.notepad-postit-textarea::placeholder { color: var(--note-ink); opacity: 0.35; }

/* Pie: estado de guardado y conteo de palabras */
.notepad-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--note-line);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  color: var(--note-ink);
  opacity: 0.45;
  z-index: 2;
}
.notepad-foot .save-state { display: inline-flex; align-items: center; gap: 5px; }
.notepad-foot .save-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--salvia);
  transition: background var(--t-med) var(--ease);
}
.notepad-foot.is-saving { opacity: 0.75; }
.notepad-foot.is-saving .save-dot { background: var(--mostaza); }

/* ============================================================
   11. TARJETAS DE ENLACES
   ============================================================ */
main { padding-bottom: var(--s8); }

.category-section { margin-bottom: var(--s7); }
.category-section:last-child { margin-bottom: var(--s6); }

/* Título de categoría: subrayado de marcador, sin bloque ni rotación */
.category-title {
  display: inline-block;
  margin: 0 0 var(--s4);
  padding: 0 3px;
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 2.4vw, 1.7rem);
  font-weight: 700;
  letter-spacing: -0.012em;
  color: var(--ink);
  /* Trazo de marcador que cruza la parte baja del texto */
  background-image: linear-gradient(
    to top,
    color-mix(in srgb, var(--cat-accent, var(--mostaza)) 42%, transparent) 0.1em,
    color-mix(in srgb, var(--cat-accent, var(--mostaza)) 42%, transparent) 0.36em,
    transparent 0.36em);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.category-section:nth-of-type(4n+1) { --cat-accent: var(--mostaza); }
.category-section:nth-of-type(4n+2) { --cat-accent: var(--salvia); }
.category-section:nth-of-type(4n+3) { --cat-accent: var(--terracota); }
.category-section:nth-of-type(4n+4) { --cat-accent: var(--rosa); }

.category-title .count {
  margin-left: 8px;
  font-family: var(--font-mono);
  font-size: 0.62em;
  font-weight: 400;
  color: var(--ink-faint);
  vertical-align: 0.15em;
}

/* Subcategorías plegables */
details.subcat { margin-bottom: var(--s5); }
details.subcat > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0 10px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--t-fast) var(--ease);
}
details.subcat > summary:hover { color: var(--ink-soft); }
details.subcat > summary::-webkit-details-marker { display: none; }
details.subcat > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 4.5px solid currentColor;
  border-top: 3.5px solid transparent;
  border-bottom: 3.5px solid transparent;
  transition: transform var(--t-fast) var(--ease);
}
details.subcat[open] > summary::before { transform: rotate(90deg); }
details.subcat > summary::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line), transparent);
}

.cards-grid {
  display: grid;
  /* auto-fit colapsa las columnas vacías cuando hay pocas tarjetas, en vez
     de repartir el ancho entre pistas invisibles y dejar un hueco a la
     derecha de la última tarjeta real. */
  grid-template-columns: repeat(auto-fit, minmax(216px, 260px));
  justify-content: start;
  gap: var(--s5) var(--s4);
}

/* -- Tarjeta -- */
.card {
  --tape-color: var(--terracota);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px; /* Increased gap */
  padding: 26px 20px 20px; /* Increased padding */
  text-decoration: none;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-paper);
  box-shadow: var(--shadow-sm);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
  animation: cardIn var(--t-slow) var(--ease-out) both;
  animation-delay: calc(var(--i, 0) * 22ms);
}
.card:nth-child(4n+1) { transform: rotate(-0.6deg); }
.card:nth-child(4n+2) { transform: rotate(0.45deg); }
.card:nth-child(4n+3) { transform: rotate(-0.25deg); }
.card:nth-child(4n+4) { transform: rotate(0.7deg); }
.card:hover,
.card:focus-visible {
  transform: translateY(-4px) rotate(0deg);
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--tape-color) 40%, var(--line));
  z-index: 3;
}

/* Cinta adhesiva superior, ahora completamente visible */
.card::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 68px;
  height: 17px;
  transform: translateX(-50%) rotate(var(--tape-rot, -3deg));
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--tape-color) 34%, transparent),
    color-mix(in srgb, var(--tape-color) 52%, transparent) 22%,
    color-mix(in srgb, var(--tape-color) 52%, transparent) 78%,
    color-mix(in srgb, var(--tape-color) 34%, transparent));
  border-radius: 1px 3px 2px 3px;
  box-shadow: 0 1px 3px rgba(var(--shadow-rgb), 0.12);
  transition: transform var(--t-med) var(--ease-out);
}
.card:hover::before { transform: translateX(-50%) rotate(calc(var(--tape-rot, -3deg) * 0.4)); }

.card:nth-child(5n+1) { --tape-color: var(--terracota); --tape-rot: -4deg; }
.card:nth-child(5n+2) { --tape-color: var(--salvia);    --tape-rot: 3deg; }
.card:nth-child(5n+3) { --tape-color: var(--mostaza);   --tape-rot: -2deg; }
.card:nth-child(5n+4) { --tape-color: var(--rosa);      --tape-rot: 4deg; }
.card:nth-child(5n+5) { --tape-color: var(--violeta);   --tape-rot: -3deg; }

.card h3 {
  margin: 0;
  padding-right: 20px;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.38;
  letter-spacing: -0.008em;
  text-wrap: pretty;
}


.card .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}

.tag-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tape-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--tape-color) 25%, transparent);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.04em;
  color: color-mix(in srgb, var(--tape-color) 80%, var(--ink));
  font-weight: 500;
  white-space: nowrap;
  transition: background var(--t-fast) var(--ease);
}
.card:hover .tag-pill {
  background: color-mix(in srgb, var(--tape-color) 18%, transparent);
}

/* Pie de tarjeta: dominio + flecha */
.card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  gap: 8px;
}

.card-domain {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.02em;
  color: var(--ink-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.card-arrow {
  flex-shrink: 0;
  font-size: 14px;
  color: var(--tape-color);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--t-fast) var(--ease),
              transform var(--t-fast) var(--ease);
}
.card:hover .card-arrow,
.card:focus-visible .card-arrow {
  opacity: 1;
  transform: translateX(0);
}


/* Botón de favorito */
.star-btn {
  position: absolute;
  top: 9px;
  right: 9px;
  padding: 2px;
  background: none;
  border: none;
  border-radius: var(--r-xs);
  cursor: pointer;
  font-size: 15px;
  line-height: 1;
  color: var(--star-off);
  opacity: 0;
  transition: transform var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease),
              opacity var(--t-fast) var(--ease);
}
.card:hover .star-btn,
.card:focus-within .star-btn,
.star-btn:focus-visible { opacity: 1; }
.star-btn:hover { transform: scale(1.22); color: var(--star-on); }
.star-btn.on { opacity: 1; color: var(--star-on); }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; }
}
@keyframes fadeSlideIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   12. VISTA DE TABLA
   ============================================================ */
table.hub-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 14px;
}
table.hub-table th {
  padding: 11px 14px;
  text-align: left;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-faint);
}
table.hub-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
table.hub-table tbody tr { transition: background var(--t-fast) var(--ease); }
table.hub-table tbody tr:hover { background: color-mix(in srgb, var(--paper-2) 45%, transparent); }
table.hub-table tr:last-child td { border-bottom: none; }
table.hub-table td:nth-child(2) {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-faint);
  white-space: nowrap;
}
table.hub-table td:last-child {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-faint);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.hub-table a {
  color: var(--ink);
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--terracota) 50%, transparent);
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
table.hub-table a:hover { color: var(--terracota-deep); border-bottom-color: var(--terracota); }
table.hub-table .star-btn { position: static; opacity: 1; font-size: 14px; }

/* ============================================================
   13. ESTADOS
   ============================================================ */
.empty-state,
.error-state {
  padding: var(--s8) var(--gutter);
  text-align: center;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-soft);
}
.empty-state { font-family: var(--font-mono); font-size: 13px; }
.error-state {
  max-width: 560px;
  margin: 0 auto;
  padding: var(--s6);
  border: 1px dashed color-mix(in srgb, var(--terracota) 45%, transparent);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--terracota) 6%, transparent);
}

/* ============================================================
   14. DOCUMENTO DE LINEAMIENTOS
   ============================================================ */
.doc-container {
  max-width: var(--wrap-narrow);
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 60px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.72;
  color: var(--ink);
  text-align: left;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
.doc-container code,
.doc-container strong { overflow-wrap: anywhere; }

.doc-title {
  margin: 0 0 var(--s2);
  text-align: center;
  font-family: var(--font-title);
  font-size: clamp(1.5rem, 3.4vw, 2.15rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.doc-kicker {
  margin: 0 0 var(--s7);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.doc-kicker::after {
  content: '';
  display: block;
  width: 46px;
  height: 2px;
  margin: var(--s4) auto 0;
  border-radius: 2px;
  background: var(--terracota);
  opacity: 0.65;
}

.doc-container h2 {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: var(--s7) 0 var(--s3);
  padding: 0;
  border: none;
  font-family: var(--font-title);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.doc-container h2::before {
  content: '';
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: var(--terracota);
  transform: rotate(45deg) translateY(-1px);
}
.doc-container h2::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.doc-container h3 {
  margin: var(--s5) 0 var(--s2);
  font-size: 15px;
  font-weight: 600;
}

.doc-container ul,
.doc-container ol { margin: 0 0 var(--s4); padding-left: 22px; }
.doc-container ul { list-style: none; padding-left: 20px; }
.doc-container ul > li { position: relative; }
.doc-container ul > li::before {
  content: '';
  position: absolute;
  left: -14px;
  top: 0.72em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--terracota) 55%, transparent);
}
.doc-container ul ul > li::before {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--terracota) 55%, transparent);
}
.doc-container ol { list-style: none; counter-reset: doc-ol; padding-left: 26px; }
.doc-container ol > li { position: relative; counter-increment: doc-ol; }
.doc-container ol > li::before {
  content: counter(doc-ol) '.';
  position: absolute;
  left: -22px;
  top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--terracota);
  line-height: 1.85;
}
.doc-container li { margin-bottom: 7px; }
.doc-container ul ul,
.doc-container ol ol,
.doc-container li > ul,
.doc-container li > ol { margin-top: 7px; }

.doc-container code {
  padding: 1px 7px;
  border-radius: var(--r-xs);
  border: 1px solid var(--line);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 0.84em;
  color: var(--terracota-deep);
}

/* Nota destacada dentro del documento */
.doc-note {
  margin: var(--s5) 0;
  padding: 14px 18px;
  border-left: 3px solid var(--mostaza);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: color-mix(in srgb, var(--mostaza) 10%, transparent);
  font-size: 14px;
  text-align: left;
}
.doc-closing {
  margin: var(--s7) 0 0;
  padding-top: var(--s5);
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-soft);
}
.doc-sign {
  margin: var(--s5) 0 0;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.9;
  color: var(--ink-soft);
}
.doc-sign strong { color: var(--ink); font-weight: 500; }

/* ============================================================
   15. PÓSTER DE MANDAMIENTOS
   ============================================================ */
.poster-container {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  padding: clamp(30px, 5vw, 58px) clamp(22px, 5vw, 54px) clamp(26px, 4vw, 44px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md), inset 0 0 0 1px var(--surface),
              inset 0 0 0 7px color-mix(in srgb, var(--paper-2) 60%, transparent),
              inset 0 0 0 8px var(--line);
  text-align: center;
}

.poster-title {
  margin: 0 0 6px;
  font-family: var(--font-title);
  font-size: clamp(1.9rem, 5vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.poster-kicker {
  margin: 0 auto var(--s7);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.poster-list {
  margin: 0 auto;
  padding: 0;
  max-width: 760px;
  list-style: none;
  text-align: left;
  columns: 1;
}
@media (min-width: 900px) {
  .poster-list { columns: 2; column-gap: 42px; }
}
.poster-item {
  display: flex;
  gap: 12px;
  align-items: baseline;
  margin: 0 0 13px;
  padding-bottom: 13px;
  border-bottom: 1px solid var(--line);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ink);
  break-inside: avoid;
  text-wrap: pretty;
}
.poster-number {
  flex: 0 0 auto;
  min-width: 22px;
  text-align: right;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--terracota);
  font-variant-numeric: tabular-nums;
}

.poster-illus-img {
  display: block;
  width: min(220px, 55%);
  margin: var(--s7) auto var(--s2);
  border-radius: 50%;
  border: 1px solid var(--line);
  padding: 6px;
  background: var(--paper-2);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-slow) var(--ease-out), box-shadow var(--t-slow) var(--ease);
}
.poster-illus-img:hover { transform: scale(1.04) rotate(2deg); box-shadow: var(--shadow-lg); }

/* ============================================================
   15. CALENDARIO SEMANAL (Diseño Ultra-Compacto)
   ============================================================ */
.weekly-calendar-section {
  margin: var(--s3) 0 var(--s2);
  padding: var(--s2) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.weekly-calendar-header {
  margin-bottom: var(--s1);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 var(--gutter);
}

.weekly-calendar-title {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 0;
}

.weekly-calendar-subtitle {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-soft);
  padding: 0;
}

.weekly-calendar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  padding: 0 var(--gutter);
  margin-bottom: var(--s1);
}

.calendar-day {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 7px 9px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-short) var(--ease);
}

.calendar-day:hover {
  border-color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: 2px;
  padding-bottom: 3px;
  border-bottom: 1.5px solid var(--terracota);
}

.day-name {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.day-emoji {
  font-size: 13px;
  display: inline-block;
}

.day-activities {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.activity-time {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 600;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.activity-item {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.activity-item strong {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}

.activity-detail {
  font-size: 10px;
  color: var(--ink-soft);
  font-style: normal;
  line-height: 1.2;
}

.activity-link {
  color: var(--terracota);
  text-decoration: underline;
  transition: color var(--t-short) var(--ease);
  cursor: pointer;
}

.activity-link:hover,
.activity-link:focus {
  color: var(--terracota-deep);
  outline: none;
}

.activity-note {
  display: flex;
  align-items: flex-start;
  gap: 3px;
  margin-top: 2px;
  padding: 2px 5px;
  background: color-mix(in srgb, var(--mostaza) 8%, transparent);
  border-left: 2px solid var(--mostaza);
  border-radius: var(--r-sm);
  font-size: 9.5px;
  color: var(--ink-soft);
  line-height: 1.25;
}

.note-icon {
  flex-shrink: 0;
  font-size: 10px;
  display: inline-block;
}

/* Codificación por tipo de actividad */
.calendar-day {
  border-left: 3px solid var(--line-strong);
}

.calendar-day[data-type="clinical"] {
  border-left-color: var(--terracota);
  background: linear-gradient(to right, rgba(193, 122, 86, 0.02), var(--surface));
}

.calendar-day[data-type="educational"] {
  border-left-color: var(--salvia);
  background: linear-gradient(to right, rgba(138, 155, 110, 0.02), var(--surface));
}

.calendar-day[data-type="administrative"] {
  border-left-color: var(--mostaza);
  background: linear-gradient(to right, rgba(209, 165, 78, 0.02), var(--surface));
}

/* Indicador de día actual — Diseño con distintivo HOY ultra-compacto */
.calendar-day[data-is-today] {
  border-color: var(--terracota) !important;
  border-left-width: 4px !important;
  background: color-mix(in srgb, var(--terracota) 4%, var(--surface)) !important;
  box-shadow: var(--shadow-sm), 0 0 0 1px color-mix(in srgb, var(--terracota) 35%, transparent) !important;
  position: relative;
}

.calendar-day[data-is-today] .day-name::after {
  content: "HOY";
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 1px 4px;
  border-radius: var(--r-pill);
  background: var(--terracota);
  color: #ffffff;
  margin-left: 4px;
  vertical-align: middle;
  text-transform: uppercase;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

/* Distintivo de obligatorio */
.activity-item[data-required="true"]::before {
  content: "⭐ ";
  font-size: 9px;
  margin-right: 2px;
}

.calendar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 18px;
  padding: 0 var(--gutter);
  margin-top: 12px;
  font-size: 10px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  letter-spacing: 0.03em;
}

.legend-badge {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.legend-badge.clinical {
  background: var(--terracota);
}

.legend-badge.educational {
  background: var(--salvia);
}

.legend-badge.administrative {
  background: var(--mostaza);
}

.legend-badge.required {
  background: transparent;
  font-size: 10px;
  width: auto;
  height: auto;
  line-height: 1;
}

.calendar-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 0 var(--gutter);
  margin-top: 6px;
}

.calendar-actions .doodle-btn {
  font-size: 11px;
  padding: 4px 10px;
  min-height: 32px;
}

/* ============================================================
   16. ACTIVIDADES
   ============================================================ */
.activities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
  max-width: 1000px;
  margin: 0 auto;
}

.activity-card {
  --act-accent: var(--terracota);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  text-align: left;
  overflow: hidden;
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}
.activity-card::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--act-accent);
  transform: scaleY(0);
  transition: transform var(--t-med) var(--ease-out);
}
.activity-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--act-accent) 42%, var(--line));
  box-shadow: var(--shadow-md);
}
.activity-card:hover::before { transform: scaleY(1); }

.activity-card:nth-child(6n+1) { --act-accent: var(--terracota); }
.activity-card:nth-child(6n+2) { --act-accent: var(--salvia); }
.activity-card:nth-child(6n+3) { --act-accent: var(--mostaza); }
.activity-card:nth-child(6n+4) { --act-accent: var(--rosa); }
.activity-card:nth-child(6n+5) { --act-accent: var(--violeta); }
.activity-card:nth-child(6n+6) { --act-accent: var(--salvia); }

.activity-card .icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 2px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--act-accent) 14%, transparent);
  font-size: 20px;
  line-height: 1;
  transition: transform var(--t-med) var(--ease-out);
}
.activity-card:hover .icon { transform: scale(1.07) rotate(-3deg); }

.activity-card h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.activity-card p {
  margin: 0 0 var(--s3);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-faint);
  text-wrap: pretty;
}
.activity-card .doodle-btn { width: 100%; margin-top: auto; }

/* Próximas Clases desde Google Sheets */
.upcoming-classes-section {
  margin: var(--s6) 0 var(--s5);
  padding: var(--s5) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 40%, transparent);
  border-radius: var(--r-lg);
}

.upcoming-classes-title {
  margin: 0 0 var(--s4);
  padding: 0 var(--gutter);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.upcoming-classes-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s4);
  padding: 0 var(--gutter);
}

.class-item {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s3);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 4px solid var(--salvia);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease),
              border-color var(--t-med) var(--ease);
}

.class-item:hover {
  border-left-color: var(--salvia-deep);
  border-color: color-mix(in srgb, var(--salvia) 40%, var(--line));
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.class-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s3);
}

.class-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: var(--s2);
}

.class-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.class-day {
  font-size: 12px;
  font-weight: 600;
  color: var(--salvia-deep);
  text-transform: capitalize;
}

.class-time {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.class-description {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.4;
  padding: var(--s2);
  background: rgba(138, 155, 110, 0.05);
  border-radius: var(--r-sm);
}

.class-location {
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.3;
}

/* Calendario detallado en la pestaña de Actividades */
.activities-calendar-section {
  margin-bottom: var(--s6);
}

.activities-calendar-title {
  margin: 0 0 var(--s4);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.detailed-calendar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s6);
}

.detailed-calendar-day {
  padding: var(--s3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: all var(--t-med) var(--ease);
}

.detailed-calendar-day:hover {
  border-color: var(--ink-soft);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.detailed-day-header {
  margin-bottom: var(--s3);
  padding-bottom: var(--s3);
  border-bottom: 2px solid var(--terracota);
}

.detailed-day-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.detailed-activities-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.detailed-activity-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s2);
  background: color-mix(in srgb, var(--terracota) 4%, transparent);
  border-left: 3px solid var(--terracota);
  border-radius: var(--r-sm);
}

.detailed-activity-item .activity-time {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--terracota-deep);
}

.detailed-activity-item .activity-content {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.detailed-activity-item .activity-content strong {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}

.detailed-activity-item .activity-detail {
  font-size: 12px;
  color: var(--ink-soft);
  font-style: italic;
  line-height: 1.3;
}

.activities-access-section {
  margin-top: var(--s6);
}

.activities-access-title {
  margin: 0 0 var(--s4);
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}

.activities-access-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s4);
}

/* ============================================================
   17. ENTREVISTA
   ============================================================ */
.entrevista-container { max-width: 980px; margin: 0 auto; }

.entrevista-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--s4); /* Increased gap */
  margin-bottom: var(--s6); /* Increased margin */
  padding: 30px 36px 26px; /* Increased padding */
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--terracota);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
}
.entrevista-header h2 {
  margin: 0 0 5px;
  font-family: var(--font-title);
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.entrevista-header p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
}
.entrevista-badge {
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  white-space: nowrap;
}

.print-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all var(--t-fast) var(--ease);
}
.print-btn:hover {
  color: var(--terracota-deep);
  border-color: color-mix(in srgb, var(--terracota) 50%, var(--line));
  transform: translateY(-2px);
  box-shadow: var(--shadow-xs);
}

.e-card {
  --e-accent: var(--terracota);
  margin-bottom: var(--s5); /* Increased margin */
  padding: 26px 32px; /* Increased padding */
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--e-accent);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease-out);
}
.e-card:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.e-card.e-risk {
  --e-accent: var(--peligro);
  background: color-mix(in srgb, var(--peligro) 5%, var(--surface));
}
.e-card.e-positive { --e-accent: var(--violeta); }
.e-card.e-negative { --e-accent: var(--mostaza); }

.e-card h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0 0 14px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.e-step {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  border: 1.5px solid var(--e-accent);
  background: color-mix(in srgb, var(--e-accent) 12%, transparent);
  color: var(--e-accent);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
}
.e-risk .e-step,
.e-positive .e-step,
.e-negative .e-step { background: color-mix(in srgb, var(--e-accent) 12%, transparent); }

.e-card ul { margin: 0; padding: 0; list-style: none; }
.e-card ul li {
  position: relative;
  margin-bottom: 3px;
  padding: 4px 0 4px 24px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  text-wrap: pretty;
}
.e-card ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.85em;
  width: 9px;
  height: 5px;
  border-left: 1.8px solid var(--e-accent);
  border-bottom: 1.8px solid var(--e-accent);
  transform: rotate(-45deg);
}
.e-card ul li strong { font-weight: 600; color: var(--ink); }
.e-card ul li em { color: var(--ink-soft); }
.e-card > div > strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.e-decision {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: var(--s3) 0 2px;
  padding: 12px 16px;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--paper-2) 60%, transparent);
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.e-decision .e-label {
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--ink-faint);
}
.e-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 13px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: 11px;
  font-weight: 500;
}
.e-opt.yes { border-color: color-mix(in srgb, var(--salvia) 60%, transparent); color: var(--salvia-deep); }
.e-opt.no  { border-color: color-mix(in srgb, var(--peligro) 55%, transparent); color: var(--peligro); }

.e-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); margin-bottom: var(--s4); }
.e-grid-2 .e-card { margin-bottom: 0; }

.e-alert-red {
  margin: var(--s5) 0 var(--s4);
  padding: 18px 24px;
  border-radius: var(--r-md);
  border: 1px solid color-mix(in srgb, var(--peligro) 45%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--peligro) 14%, var(--surface)),
      color-mix(in srgb, var(--peligro) 7%, var(--surface)));
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.e-alert-red h4 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--peligro-deep);
}
html[data-theme="dark"] .e-alert-red h4 { color: var(--peligro-deep); }
.e-alert-red p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.e-alert-red ul { margin: 8px 0 0; padding: 0; list-style: none; }
.e-alert-red ul li {
  position: relative;
  padding: 4px 0 4px 20px;
  font-size: 13.5px;
  line-height: 1.5;
}
.e-alert-red ul li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 0.82em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--peligro);
}

/* Checklist */
.e-checklist { display: flex; flex-direction: column; gap: var(--s2); margin-top: var(--s2); }
.e-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 15px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 35%, transparent);
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.e-check:hover { background: var(--paper-2); border-color: var(--line-strong); }
.e-check.e-check-risk { border-left: 3px solid var(--peligro); }
.e-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  margin: 3px 0 0;
  flex-shrink: 0;
  accent-color: var(--terracota);
  cursor: pointer;
}
.e-check label {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
  text-wrap: pretty;
}
.e-check:has(input:checked) { background: color-mix(in srgb, var(--salvia) 10%, transparent); border-color: color-mix(in srgb, var(--salvia) 40%, transparent); }
.e-check:has(input:checked) label { color: var(--ink-faint); text-decoration: line-through; text-decoration-color: var(--line-strong); }

/* Recursos */
.e-resources {
  margin-top: var(--s5);
  padding: 16px 20px;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper-2) 50%, transparent);
}
.e-resources h4 {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
}
.e-resources ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.e-resources ul li {
  padding: 5px 12px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--surface);
  font-size: 12.5px;
  color: var(--ink-soft);
}
.e-resources ul li::before { content: '📚'; margin-right: 6px; font-size: 11px; }

.e-footer {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  text-align: center;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--ink-faint);
}

/* ============================================================
   18. MODALES
   ============================================================ */
.modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--s4);
  background: rgba(20, 22, 26, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: modalFade var(--t-med) var(--ease) both;
}
.modal-content {
  position: relative;
  width: 100%;
  max-width: 340px;
  padding: 30px 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  color: var(--ink);
  text-align: center;
  animation: modalIn var(--t-slow) var(--ease-out) both;
}
.modal-content h3 {
  margin: 0 0 8px;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.012em;
}
.modal-content p {
  margin: 0 0 var(--s4);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.close-modal-btn {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--ink-faint);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.close-modal-btn:hover { background: var(--paper-2); color: var(--ink); }

.modal-qr {
  display: block;
  width: 190px;
  height: 190px;
  margin: var(--s4) auto;
  padding: 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: #fff;
}
.modal-error {
  margin-bottom: var(--s3);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--peligro);
}

@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

/* ============================================================
   19. ACCESIBILIDAD, MOVIMIENTO E IMPRESIÓN
   ============================================================ */
.tab-content { display: none; }
.tab-content.active { display: block; animation: tabIn var(--t-med) var(--ease-out) both; }
@keyframes tabIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* Anillo de foco visible y consistente en todos los controles */
:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: var(--r-sm);
}
.card:focus-visible { border-radius: var(--r-paper); }
.chip:focus-visible,
.tab-btn:focus-visible,
.e-opt:focus-visible { border-radius: var(--r-pill); }

.skip-link {
  position: absolute;
  left: 50%;
  top: 8px;
  transform: translate(-50%, -180%);
  z-index: 100;
  padding: 9px 18px;
  border-radius: var(--r-pill);
  background: var(--terracota);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform var(--t-med) var(--ease-out);
}
.skip-link:focus-visible { transform: translate(-50%, 0); }

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  #museum-bg,
  #museum-overlay,
  #museum-credit,
  .tabs-nav,
  .toolbar,
  .chips-row,
  .search-shortcuts,
  .dashboard-row,
  .announcements-banner,
  .star-btn,
  .doodle-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .doc-container,
  .poster-container,
  .e-card,
  .entrevista-header { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  a { text-decoration: underline; color: #000; }
}

/* ============================================================
   20. ADAPTACIÓN A PANTALLAS PEQUEÑAS
   ============================================================ */
@media (max-width: 600px) {
  .tabs-track { justify-content: flex-start; }

  /* Calendario responsivo */
  .weekly-calendar {
    grid-template-columns: 1fr;
    gap: var(--s3);
  }

  .weekly-calendar-title {
    font-size: 18px;
  }

  .day-header {
    flex-direction: row;
    align-items: center;
  }

  .calendar-legend {
    gap: 8px 12px;
  }

  .activity-time {
    font-size: 13px;
  }

  .activity-item strong {
    font-size: 14px;
  }

  .activity-detail {
    font-size: 12px;
  }
}

/* ============================================================
   21. IMPRESIÓN (PRINT MODE)
   ============================================================ */
@media print {
  @page {
    size: letter;
    margin: 1.5cm;
  }

  body {
    background: white !important;
    color: black !important;
    font-size: 11pt; /* Better reading size for paper */
  }

  /* Ocultar UI, fondos y menús */
  header, .tabs-nav, .toolbar, .chips-container, #museum-bg, #museum-overlay, #museum-credit, .theme-switch, .print-btn {
    display: none !important;
  }

  main {
    margin: 0 !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  .entrevista-container {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    background: white !important;
  }

  /* Eliminar fondos grises/rojos y usar bordes limpios para ahorrar tinta */
  .entrevista-container * {
    background: transparent !important;
    color: black !important;
  }

  /* Prevenir cortes a la mitad de una tarjeta o sección */
  .e-card, 
  .e-alert-red, 
  .e-checklist, 
  .e-resources, 
  .entrevista-header,
  .entrevista-footer {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid #999 !important;
    box-shadow: none !important;
    margin-bottom: 12px !important;
    padding: 12px 16px !important;
  }

  /* Las badges y números con bordes para que se vean */
  .badge-mini, .e-step, .e-label {
    border: 1px solid #666 !important;
  }

  /* Conservar el color del borde izquierdo de riesgo/positivo/negativo:
     es la señal que permite ubicar un paso de riesgo de un vistazo en papel. */
  .e-card.e-risk { border-left: 5px solid #b91c1c !important; }
  .e-card.e-positive { border-left: 5px solid #7c3aed !important; }
  .e-card.e-negative { border-left: 5px solid #a16207 !important; }

  /* Conservar distinción Sí/No de las cajas de decisión */
  .e-opt.yes { border-color: #15803d !important; color: #15803d !important; font-weight: 600; }
  .e-opt.no  { border-color: #b91c1c !important; color: #b91c1c !important; font-weight: 600; }

  /* Cada ítem del checklist en su propia casilla, para marcar con lápiz */
  .e-check {
    border: 1px solid #999 !important;
    break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: 4px !important;
    padding: 7px 10px !important;
  }

  /* Ajustar grid para papel */
  .e-grid-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
  }
  .e-grid-2 > div {
    flex: 1 1 calc(50% - 12px);
    margin-bottom: 0 !important; /* El margin bottom ya está en el gap */
  }

  /* Ocultar elementos visuales sin utilidad impresa */
  .yes, .no {
    border: 1px solid #999 !important;
  }

  /* Estilos específicos para el árbol de decisión impreso (Resumen) */
  body.print-tree-mode .e-card ul,
  body.print-tree-mode .e-card ol,
  body.print-tree-mode .e-card p,
  body.print-tree-mode .e-card div > ul,
  body.print-tree-mode .e-card div > ol,
  body.print-tree-mode .e-card > div > strong,
  body.print-tree-mode .e-alert-red ul,
  body.print-tree-mode .e-alert-red p,
  body.print-tree-mode .e-resources,
  body.print-tree-mode .e-pending-tasks,
  body.print-tree-mode .e-checklist {
    display: none !important;
  }

  body.print-tree-mode .e-card {
    padding: 8px 12px !important;
    margin-bottom: 8px !important;
    border: 1px solid #555 !important;
    border-left: 4px solid var(--e-accent) !important;
    break-inside: avoid;
  }

  body.print-tree-mode .e-card h3 {
    margin: 0 0 4px 0 !important;
    font-size: 11pt !important;
  }

  body.print-tree-mode .e-decision {
    margin: 6px 0 0 !important;
    padding: 6px 10px !important;
    border: 1px dashed #777 !important;
    background: #f9f9f9 !important;
    font-size: 9.5pt !important;
  }

  body.print-tree-mode .e-grid-2 {
    gap: 8px !important;
  }
}
@media (max-width: 900px) {
  .dashboard-row { grid-template-columns: 1fr; }
  .apps-grid { grid-auto-rows: auto; }
  .notepad-postit { min-height: 240px; }

  /* En una sola columna las apps vuelven a fila compacta: icono, texto y
     nada de aire vertical de más. */
  .app-link-card {
    flex-direction: row;
    align-items: center;
    gap: var(--s3);
    padding: 12px 14px;
  }
  .app-link-card .app-info { margin-top: 0; }
  .app-link-card .app-go { position: static; margin-left: auto; opacity: 1; transform: none; }
  .qr-badge-btn { position: static; margin-left: auto; }
}

@media (max-width: 768px) {
  body { font-size: 14.5px; }

  .tabs-nav { justify-content: flex-start; padding: 8px var(--gutter); }
  .tabs-track { width: 100%; }
  .tab-btn { padding: 9px 14px; font-size: 13px; }

  .doc-container { border-radius: var(--r-md); }
  .cards-grid { grid-template-columns: repeat(auto-fit, minmax(158px, 200px)); justify-content: start; gap: var(--s5) var(--s3); }
  .card { padding: 20px 13px 13px; }
  .card h3 { font-size: 13.5px; }
  .star-btn { opacity: 1; }

  #cards-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.hub-table { min-width: 460px; }

  .e-grid-2 { grid-template-columns: 1fr; }
  .entrevista-header { padding: 20px 20px 17px; }
  .poster-list { columns: 1; }

  /* Calendario semanal ultra-compacto en celular: tira horizontal deslizable */
  .weekly-calendar {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 8px;
    padding: 2px var(--gutter) 6px;
    margin-bottom: 4px;
    scrollbar-width: thin;
  }
  .weekly-calendar .calendar-day {
    flex: 0 0 145px;
    min-width: 145px;
    scroll-snap-align: start;
    padding: 6px 8px;
  }
  .weekly-calendar-header {
    margin-bottom: 4px;
  }
  .calendar-legend {
    font-size: 10px;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  header { padding-top: 30px; }
  header p { font-size: 9.5px; letter-spacing: 0.12em; gap: 8px; }
  header p::before, header p::after { max-width: 34px; }

  .toolbar { gap: var(--s2); }
  .search-field { flex: 1 1 100%; }
  .toolbar .doodle-btn { flex: 1 1 auto; }
  .theme-switch { margin-left: 0; }

  #tab-lineamientos,
  #tab-mandamientos,
  #tab-actividades,
  #tab-entrevista { padding-left: 0 !important; padding-right: 0 !important; }
  .doc-container,
  .poster-container,
  .activities-grid,
  .entrevista-container { margin-left: var(--gutter); margin-right: var(--gutter); }

  .notepad-postit { padding: 22px 18px 18px; }
  .notepad-postit-textarea { font-size: 18px; }

  .activities-grid { grid-template-columns: 1fr; }
  .e-card { padding: 18px 17px; }
  .e-alert-red { padding: 16px 18px; }

  .weekly-calendar .calendar-day {
    flex: 0 0 135px;
    min-width: 135px;
    padding: 5px 7px;
  }
  .weekly-calendar-header {
    flex-direction: column;
    gap: 2px;
  }

  #museum-credit { max-width: 64vw; font-size: 9px; }

  .modal-content { max-width: none; max-height: 88vh; overflow-y: auto; }
}