@import url('/fonts/fonts.css');
/* ===========================================================================
Lutea — sistema visual
Basado en DESIGN.md: lienzo crema, cámaras oscuras, bordes de 2px, radios
sobredimensionados y CERO sombras. La separación es por relleno y borde.
=========================================================================== */
:root {
/* Paleta */
--lavender: #f0d7ff;
--forest: #034f46;
--ember: #ffa946;
--ink: #1a1a1a;
--cream: #ffffeb;
--stone: #e4e4d0;
--fog: #8a8a80;
--charcoal: #222222;
--white: #ffffff;
/* Roles (tema claro) */
--canvas: var(--cream);
--surface: var(--cream);
--chamber: var(--ink);
--chamber-txt: var(--cream);
--text: var(--ink);
--text-muted: var(--fog);
--border: var(--ink);
--accent: var(--lavender);
--accent-txt: var(--ink);
--secondary: var(--forest);
--divider: var(--stone);
/* Tipografía */
--font-display: 'EB Garamond', 'Cormorant Garamond', Georgia, serif;
--font-ui: 'Figtree', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
--text-caption: 0.875rem;
--text-body-sm: 1rem;
--text-body: 1.25rem;
--text-subheading: 1.5rem;
/* Espaciado */
--s8: 8px; --s16: 16px; --s24: 24px; --s32: 32px;
--s40: 40px; --s48: 48px; --s64: 64px; --s80: 80px;
/* Formas */
--r-card: 32px;
--r-btn: 12px;
--r-input: 12px;
--r-pill: 9999px;
--r-section: 40px;
--page: 1100px;
--bw: 2px;
--tabbar-h: 76px;
}
/* Tema oscuro: se invierten los papeles, no se inventan colores nuevos.
Bare :root define el claro; se redefine bajo prefers-color-scheme y bajo
[data-theme] para que el conmutador gane en ambos sentidos. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme='light']) {
--canvas: #141413;
--surface: #1f1f1d;
--chamber: var(--cream);
--chamber-txt: var(--ink);
--text: var(--cream);
--text-muted: #a3a399;
--border: var(--cream);
--divider: #3a3a36;
}
}
:root[data-theme='dark'] {
--canvas: #141413;
--surface: #1f1f1d;
--chamber: var(--cream);
--chamber-txt: var(--ink);
--text: var(--cream);
--text-muted: #a3a399;
--border: var(--cream);
--divider: #3a3a36;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--canvas);
color: var(--text);
font-family: var(--font-ui);
font-size: var(--text-body-sm);
line-height: 1.4;
min-height: 100vh;
min-height: 100dvh;
overscroll-behavior-y: none;
-webkit-tap-highlight-color: transparent;
}
h1, h2, h3 {
font-family: var(--font-display);
font-weight: 400;
line-height: 0.98;
letter-spacing: -0.02em;
margin: 0;
}
.display { font-size: clamp(2.75rem, 11vw, 5rem); line-height: 0.9; letter-spacing: -0.03em; }
.h-lg { font-size: clamp(2rem, 7vw, 3.25rem); }
.h-md { font-size: clamp(1.6rem, 5vw, 2.25rem); }
.h-sm { font-size: 1.35rem; letter-spacing: -0.01em; }
p { margin: 0 0 var(--s16); }
.muted { color: var(--text-muted); }
.caption { font-size: var(--text-caption); }
.center { text-align: center; }
a { color: inherit; }
:where(button, a, input, select, textarea):focus-visible {
outline: 3px solid var(--secondary);
outline-offset: 2px;
}
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.hidden { display: none !important; }
/* --- Botones -------------------------------------------------------------- */
.btn {
font-family: var(--font-ui);
font-size: var(--text-body-sm);
font-weight: 500;
padding: 14px 24px;
border: var(--bw) solid var(--border);
border-radius: var(--r-btn);
background: var(--surface);
color: var(--text);
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--s8);
min-height: 48px;
transition: transform .06s ease;
}
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--accent); color: var(--accent-txt); border-color: var(--ink); }
.btn-ghost { background: transparent; border-color: transparent; text-decoration: underline; min-height: 40px; padding: 8px 12px; }
.btn-danger { background: transparent; border-color: var(--border); }
.btn-sm { padding: 8px 16px; min-height: 40px; font-size: var(--text-caption); }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-row { display: flex; gap: var(--s8); flex-wrap: wrap; }
/* --- Formularios ---------------------------------------------------------- */
.field { display: block; margin-bottom: var(--s16); }
.field > span {
display: block; font-size: var(--text-caption); font-weight: 600;
margin-bottom: 6px; letter-spacing: .01em;
}
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], select, textarea {
width: 100%;
font-family: var(--font-ui);
font-size: 1rem; /* 16px: por debajo de esto iOS hace zoom al enfocar */
padding: 13px 14px;
border: var(--bw) solid var(--border);
border-radius: var(--r-input);
background: var(--surface);
color: var(--text);
min-height: 48px;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.5; }
select { appearance: none; background-image: none; }
/* Campo de fecha: texto con máscara DD/MM/AAAA + botón que abre el selector nativo.
El real se queda oculto detrás; solo se usa como calendario, porque
pintado se ve con el formato del navegador (MM/DD/YYYY si está en inglés). */
.date-field { position: relative; display: flex; align-items: center; }
.date-field .date-text { padding-right: 56px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.date-field .date-text[aria-invalid='true'] { border-color: var(--ember); }
.date-pick {
position: absolute; right: 6px;
width: 40px; height: 40px; padding: 0;
border: 0; border-radius: 10px; background: transparent; color: var(--text);
cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.date-pick svg { width: 21px; height: 21px; }
.date-pick:active { transform: scale(.92); }
/* Invisible pero enfocable por showPicker(): display:none impediría abrir el calendario. */
.date-native {
position: absolute; right: 14px; bottom: 0;
width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; min-height: 0;
}
.error-box, .ok-box {
border: var(--bw) solid var(--border);
border-radius: var(--r-btn);
padding: 12px 16px;
margin-bottom: var(--s16);
font-size: var(--text-caption);
}
.error-box { background: var(--ember); color: var(--ink); }
.ok-box { background: var(--secondary); color: var(--cream); }
/* --- Tarjetas y cámaras --------------------------------------------------- */
.card {
background: var(--surface);
border: var(--bw) solid var(--border);
border-radius: var(--r-card);
padding: var(--s24);
margin-bottom: var(--s16);
}
.chamber {
background: var(--chamber);
color: var(--chamber-txt);
border-radius: var(--r-section);
padding: var(--s32) var(--s24);
margin-bottom: var(--s16);
border: var(--bw) solid var(--chamber);
}
.chamber .muted { color: color-mix(in srgb, var(--chamber-txt) 62%, transparent); }
.accent-card { background: var(--accent); color: var(--ink); border-color: var(--ink); }
.badge {
display: inline-flex; align-items: center; gap: 6px;
background: var(--secondary); color: var(--cream);
border-radius: var(--r-pill);
padding: 7px 14px;
font-size: var(--text-caption); font-weight: 500;
border: var(--bw) solid transparent;
}
.badge-outline { background: transparent; color: inherit; border-color: currentColor; }
.badge-ember { background: var(--ember); color: var(--ink); }
/* ===========================================================================
Estructura de página
=========================================================================== */
#app { min-height: 100dvh; display: flex; flex-direction: column; }
.screen { display: none; }
.screen.active { display: block; }
/* Las pantallas centradas solo se vuelven flex cuando están activas: si no, `display: flex`
de .centered-screen empata en especificidad con .screen y gana por orden, y no se ocultan. */
.screen.centered-screen.active { display: flex; }
.wrap { width: 100%; max-width: var(--page); margin: 0 auto; padding: 0 var(--s16); }
main { flex: 1; padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + var(--s32)); }
.view { display: none; }
.view.active { display: block; animation: fade .18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.view-head {
display: flex; align-items: baseline; justify-content: space-between;
gap: var(--s16); padding: var(--s24) 0 var(--s16);
}
/* --- Cabecera ------------------------------------------------------------- */
.topbar {
position: sticky; top: 0; z-index: 30;
background: var(--canvas);
padding: var(--s8) 0;
padding-top: calc(var(--s8) + env(safe-area-inset-top));
}
.topbar-inner {
display: flex; align-items: center; justify-content: space-between; gap: var(--s8);
border: var(--bw) solid var(--border);
border-radius: var(--r-pill);
padding: 8px 8px 8px 18px;
background: var(--surface);
}
.topbar-actions { display: flex; align-items: center; gap: 6px; }
/* Botones redondos de la barra: Admin y el conmutador claro/oscuro. Están arriba y no en
la barra de pestañas porque abajo solo hay cinco huecos y son los del uso diario. */
.icon-round {
width: 42px; height: 42px; flex: none;
border: var(--bw) solid var(--border); border-radius: 50%;
background: transparent; color: var(--text);
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 1.05rem; line-height: 1; padding: 0;
}
.icon-round svg { width: 21px; height: 21px; }
.icon-round:active { transform: scale(.94); }
.icon-round[aria-current='true'] { background: var(--accent); color: var(--ink); border-color: var(--ink); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.brand span { font-size: 1.05rem; letter-spacing: -0.01em; }
/* El logo va como