/* Agenda compartida — Max & Zulma
   Hoja de tokens lista para pegar en el CSS del proyecto.
   Fuentes: Instrument Sans (UI) + IBM Plex Mono (etiquetas/meta)
   <link href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> */

:root {
  /* superficies */
  --bg:            #F4F2EF;
  --surface:       #FFFFFF;
  --surface-2:     #F7F6F4;
  --today-bg:      #EFEDE9;
  --hairline:      rgba(28, 27, 26, .07);

  /* texto y acción (único acento neutro) */
  --text-1:        #1C1B1A;
  --text-body:     #3A3835;
  --text-2:        #75716B;
  --text-3:        #A6A29B;
  --action:        #1C1B1A;
  --action-fg:     #FFFFFF;
  --action-soft:   #F4F2EF;

  /* identidad por persona — SOLO en píldoras e indicadores */
  --max-bg:        #E7EEFB;
  --max-fg:        #2B5FCB;
  --max-dot:       #3B72DA;
  --zulma-bg:      #FBEAEF;
  --zulma-fg:      #B0426A;
  --zulma-dot:     #DB7A9B;
  --pill-both-bg:  linear-gradient(100deg, var(--max-bg) 0 52%, var(--zulma-bg) 52% 100%);
  --pill-both-fg:  #4A4744;
  --pill-done-bg:  #EFEEEB;
  --pill-done-fg:  #8A867F;

  /* estado */
  --ring-progress: conic-gradient(#8A867F 0 50%, rgba(28,27,26,.13) 0 50%);
  --ring-empty:    inset 0 0 0 1.5px rgba(28,27,26,.20);
  --strike:        rgba(28, 27, 26, .22);

  /* tipografía */
  --font-ui:       'Instrument Sans', 'Helvetica Neue', Helvetica, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --fs-display:    26px;  /* 600 / -0.02em — título de ficha */
  --fs-h1:         19px;  /* 600 / -0.02em */
  --fs-h2:         17px;  /* 600 — encabezado móvil */
  --fs-body:       14px;  /* 1.6 */
  --fs-card:       13px;  /* 1.35 — título de tarjeta */
  --fs-meta:       12px;
  --fs-pill:       10px;  /* 600 */
  --fs-label:      10px;  /* mono / .08em / uppercase */

  /* espaciado (base 2/4) */
  --s-1: 4px;  --s-2: 6px;  --s-3: 8px;  --s-4: 10px;
  --s-5: 14px; --s-6: 18px; --s-7: 22px; --s-8: 34px;

  /* radios */
  --r-chip:   6px;
  --r-button: 9px;
  --r-card:   10px;
  --r-panel:  14px;
  --r-pill:   999px;

  /* sombras (los bordes se sugieren, no se dibujan) */
  --sh-card:   0 1px 2px rgba(28,27,26,.06), 0 1px 1px rgba(28,27,26,.03);
  --sh-raised: 0 1px 2px rgba(28,27,26,.07), 0 2px 4px rgba(28,27,26,.04);
  --sh-drag:   0 10px 24px rgba(28,27,26,.16);
  --sh-modal:  0 20px 60px rgba(28,27,26,.22), 0 2px 6px rgba(28,27,26,.08);
  --sh-side:   -1px 0 0 var(--hairline), -14px 0 34px rgba(28,27,26,.05);
  --scrim:     rgba(28, 27, 26, .16);
}

:root[data-theme="dark"] {
  --bg:            #131313;
  --surface:       #1D1D1D;
  --surface-2:     #1F1F1F;   /* tarjeta */
  --today-bg:      #191919;
  --hairline:      rgba(255, 255, 255, .07);

  --text-1:        #EDEBE8;
  --text-body:     #C9C5BF;
  --text-2:        #9C9893;
  --text-3:        #6E6A66;
  --action:        #EDEBE8;
  --action-fg:     #131313;
  --action-soft:   #292929;

  --max-bg:        rgba(59, 114, 218, .18);
  --max-fg:        #9CBBF5;
  --max-dot:       #6E9BF0;
  --zulma-bg:      rgba(219, 122, 155, .18);
  --zulma-fg:      #F0A9C0;
  --zulma-dot:     #E29CB6;
  --pill-both-fg:  #C9C5BF;
  --pill-done-bg:  #2A2A2A;
  --pill-done-fg:  #8B8781;

  --ring-progress: conic-gradient(#8B8781 0 50%, rgba(255,255,255,.14) 0 50%);
  --ring-empty:    inset 0 0 0 1.5px rgba(255,255,255,.22);
  --strike:        rgba(255, 255, 255, .24);

  --sh-card:   0 1px 2px rgba(0,0,0,.35);
  --sh-raised: 0 2px 8px rgba(0,0,0,.40);
  --sh-drag:   0 12px 28px rgba(0,0,0,.55);
  --sh-modal:  0 24px 64px rgba(0,0,0,.60);
  --scrim:     rgba(0, 0, 0, .48);
}

/* ── Medidas estructurales del calendario ─────────────────────────── */
:root {
  --topbar-h:        52px;
  --week-gutter:     64px;   /* columna izquierda con mes/semana */
  --day-min-h:      230px;   /* semana actual en escritorio */
  --day-min-h-quiet:132px;   /* semanas vecinas */
  --panel-w:        720px;   /* ficha flotante de escritorio */
  --sidepanel-w:    392px;   /* ficha lateral de libretas */
  --libretas-nav-w: 232px;
  --mobile-daycol:   52px;
  --tap-min:         44px;   /* mínimo táctil */
}

/* ── Reglas de uso (no romper) ─────────────────────────────────────
   1. Sin franjas horarias: cada día es una pila vertical de tarjetas.
   2. Navegación vertical continua entre semanas; nunca lateral.
   3. --max-* / --zulma-* solo en píldoras, puntos y avatares.
      El fondo de la tarjeta es SIEMPRE var(--surface).
   4. Escritorio: ficha flotante con --sh-modal sobre --scrim; clic fuera cierra.
   5. Celular: ficha a pantalla completa con X flotante (--tap-min).
   6. Fecha y hora siempre visibles en cada comentario (--font-mono, --fs-label).
   7. Máximo dos colores de identidad; el resto es escala de grises.
   ───────────────────────────────────────────────────────────────── */