/* ==========================================================
ZENT — Tokens de diseño (refinamiento estricto según DESIGN.md)
Sistema visual Linear.app sobre la app:
- Canvas profundo + escalera de superficies (sin sombras de marca).
- Hairline de 1px en tarjetas/dividers; radios compactos.
- Único acento cromático de marca: lavanda #5e6ad2 (CTA, focus, links).
- Los colores de categoría (cyan eventos / ámbar racha) actúan
como etiquetas discretas de producto, no como acentos de marca.
========================================================== */
:root {
color-scheme: light;
--color-bg: #FBFBFD; /* inverse-canvas sedoso */
--color-surface: #FFFFFF; /* inverse-surface-1 */
--color-surface-2: #F5F6F6; /* inverse-surface-2 */
--color-surface-3: #EFEFF1;
--color-border: #E7E9EC; /* hairline */
--color-border-strong:#DBDEE3; /* hairline-strong */
--color-overlay: rgba(17, 18, 22, 0.45);
--color-primary: #5e6ad2; /* Linear lavender - marca */
--color-primary-hover: #515dd0;
--color-primary-focus: #5e69d1;
--color-primary-soft: #EEF0FB;
--color-focus-ring: rgba(94, 105, 209, 0.5);
--color-secondary: #7C9C8C; /* salvia - tranquilidad */
--color-secondary-soft: #EAF0EB;
--color-accent: #E0A458; /* ámbar - motivación / racha */
--color-accent-soft: #FBEEDC;
--color-events-accent: #4A6357;
--color-events-accent-soft: rgba(124, 156, 140, 0.14);
--color-tasks-accent: #5e6ad2;
--color-tasks-accent-soft: var(--color-primary-soft);
--color-text: #17181C; /* ink */
/* Oscurecido de #6C7380 a #656C78. El anterior cumplia AA sobre
--color-bg (4.62:1) pero se caia en las dos superficies mas oscuras:
4.41:1 sobre --color-surface-2 y 4.15:1 sobre --color-surface-3, por
debajo del 4.5:1 que WCAG AA pide para texto normal. Como hay texto
atenuado sobre esas superficies, el fallo era real y no teorico. Este
valor deja el peor caso en 4.61:1 y no obliga a tocar ninguna
superficie, que es lo mas barato de arreglar. */
--color-text-muted: #656C78; /* ink-muted, AA sobre las 4 superficies */
--color-danger: #C03A2F;
/* Calendarios: color de los puntos de calendario y color de los avisos de
"un calendario no se pudo leer". Es ámbar y no rojo a propósito: no es un
error de la app ni un fallo de red, es un dato que falta, y un rojo haría
pensar que Zent está roto. Como tampoco es un estado de error de la UI
existente, se declara aquí. */
--cal-fallback: #B26A00;
/* Linear usa su propia sans; el sustituto recomendado es Inter. */
--font-display: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
--font-body: "Inter", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
/* La mono se usaba como `var(--font-mono, ui-monospace, monospace)` en el
único sitio que la necesitaba, así que el valor de verdad vivía dentro de
la regla y no se podía reutilizar ni cambiar desde `:root`. Se sube aquí
para que sea una variable del sistema, como las otras dos.
Se mantienen los tres niveles de respaldo a propósito: `ui-monospace` es lo
que da la fuente del sistema (SF Mono en Apple, Cascadia en Windows) y solo
existe en navegadores modernos; `monospace` es la palabra clave CSS, que no
puede faltar nunca y termina en la misma fuente por defecto del sistema
si los dos anteriores no existen. Los tres van sin comillas porque son
nombres genéricos, no familias concretas. */
--font-mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono",
Menlo, Consolas, monospace;
/* Escala tipografica. Antes habia 21 tamanos en `rem` escritos a mano
(0.62, 0.68, 0.7, 0.72, 0.75, 0.76, 0.78, 0.8, 0.82, 0.83, 0.85, 0.875,
0.92, 0.98, 1.0, 1.02, 1.05, 1.2, 1.3, 1.55, 2.6...), de los que seis
valores distintos eran el mismo numero escrito de otra manera. Con eso no
se puede cambiar el cuerpo de texto sin recorrer media hoja.
Se definen solo los seis niveles que ya existen en el producto. La
escala no va mas alla a proposito: anadir niveles que nadie usa invite a
inventar el siguiente en la siguiente regla.
`xs` es el suelo legible. Antes el texto mas pequeno de la app era
0.62rem (los chips dentro de `.event-chips`), que a 360 px de ancho es
por debajo de lo que se considera comfortable; 0.75rem sigue siendo
denso pero se lee. Por eso el multiplicador de abajo no baja de 0.9: a
esa escala el suelo queda en 0.675rem, que se lee, y a 0.8 se caeria al
suelo que la Fase A.Sequero levantar y que este ajuste no puede volver a
tirar.
Los seis multiplican `--font-scale`, que es lo que hace funcionar el
ajuste de tamano de letra de Ajustes. Va con `calc()` en los seis, y no
en un unico sitio mas abajo, porque si el multiplicador viviera solo en
`body` los elementos con `font-size` en `rem` de un subarbol —los chips
de una tarjeta, las celdas del timeline— se calcularian contra la raiz y
no se escalarian. Multiplicando el token, TODO lo que usa la escala se
mueve a la vez, y un ajuste de lectura no deja partes sin escalar.
`--font-scale` lo pone en linea `js/apariencia.js` sobre ``, antes
del primer pintado: asi no hay un instante en el que se ve una cosa y
acto seguido otra. Este `1` de aqui es el valor por defecto para cuando no
hay JS, no un valor que se pueda quitar. */
--font-scale: 1;
--font-size-xs: calc(0.75rem * var(--font-scale)); /* chips, etiquetas muy cortas */
--font-size-sm: calc(0.8125rem * var(--font-scale)); /* descripciones, pestanas */
--font-size-base: calc(0.875rem * var(--font-scale)); /* botones y cuerpo de la interfaz */
--font-size-md: calc(1rem * var(--font-scale)); /* input, texto de formulario */
--font-size-lg: calc(1.25rem * var(--font-scale)); /* subtitulos, cifras destacadas */
--font-size-xl: calc(1.6rem * var(--font-scale)); /* titulos de seccion */
--radius-xs: 4px;
--radius-sm: 6px;
--radius-md: 8px;
--radius-lg: 12px;
--radius-xl: 16px;
--radius-pill: 999px;
--shadow-soft: 0 1px 2px rgba(23, 24, 28, 0.05);
--glass-blur: none;
/* Movimiento: solo transform/opacity, 150-250 ms, sin rebotes.
Único cambio de idioma se permite 50 ms (micro-cambio de texto). */
--dur-rapida: 150ms;
--dur-media: 200ms;
--dur-lenta: 250ms;
--dur-idioma: 50ms;
--dur-toast: 200ms;
--dur-modal: 150ms;
--dur-pill: 200ms;
--ease-pill: cubic-bezier(.4, 0, .2, 1);
--ease-out: cubic-bezier(.2, .8, .2, 1);
}
/* Dark — línea de diseño Linear ("Dark Premium"):
canvas casi negro, escalera surface-1..3, hairlines, tinta en gris claro.
Elevación sin sombras: superficie + borde hairline + highlight superior. */
[data-theme="dark"] {
color-scheme: dark;
--color-bg: #010102; /* canvas */
--color-surface: #0f1011; /* surface-1 */
--color-surface-2: #141516; /* surface-2 */
--color-surface-3: #18191a; /* surface-3 */
--color-surface-4: #191a1b;
--color-border: #23252a; /* hairline */
--color-border-strong:#34343a; /* hairline-strong */
--color-overlay: rgba(0, 0, 0, 0.62);
--color-primary: #5e6ad2; /* lavender - único acento de marca */
--color-primary-hover: #828fff;
--color-primary-focus: #5e69d1;
--color-primary-soft: rgba(94, 106, 210, 0.14);
--color-focus-ring: rgba(94, 105, 209, 0.5);
--color-secondary: #38bdf8; /* cyan - categoría: eventos */
--color-secondary-soft: rgba(56, 189, 248, 0.12);
--color-accent: #E7B778; /* ámbar - racha / acciones clave */
--color-accent-soft: rgba(231, 183, 120, 0.12);
--color-events-accent: #38bdf8;
--color-events-accent-soft: rgba(56, 189, 248, 0.10);
--color-tasks-accent: #5e6ad2; /* lavanda - categoría: tareas */
--color-tasks-accent-soft: rgba(94, 106, 210, 0.12);
--color-text: #f7f8f8; /* ink */
--color-text-muted: #d0d6e0; /* ink-muted */
/* Más claro que en claro: sobre fondo oscuro el mismo ámbar del modo claro
no llega al contraste mínimo y el aviso se lee como texto apagado. */
--cal-fallback: #F0A830;
--shadow-soft: 0 0 0 rgba(0, 0, 0, 0); /* Linear: sin sombras de marca */
--glass-blur: none;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
/* ============================================================
FOCO VISIBLE (respaldo global)
============================================================
Hay 22 reglas `:focus-visible` sueltas por la hoja, todas con la misma
forma. Lo que NO habia era un respaldo: cualquier elemento fuera de esa
lista se quedaba con el anillo que ponga el navegador, que cambia entre
Chrome, Firefox y Safari, y que sobre `--color-bg` puede ser casi
invisible. Es decir, el indicador de foco era consistente justo en los
sitios donde ya se habia escrito a mano, e impredecible en el resto.
Este selector va a propósito SIN clase: con especificidad 0,1,0 no gana a
ninguna de las 22 reglas de componente (0,2,0), asi que sigue mandando
donde ya hay un anillo propio con su offset y su color. Solo actúa donde
no hay nada.
`:focus-visible` y no `:focus`: con `:focus` el anillo aparece también al
pulsar con el raton, que es cuando la persona no lo necesita. El teclado y
el mando lo activan; el raton no.
No se anula el `outline` en ningun sitio. Para los inputs sin borde hay
una regla de foco propia mas abajo, con `:focus-within` sobre el marco. */
:focus-visible {
outline: 2px solid var(--color-focus-ring);
outline-offset: 2px;
}
/* ---------- Google Material Symbols ----------
Iconografía oficial de Google (Material Symbols Outlined). La fuente se
carga desde Google Fonts en app.html/admin.html. El span trae el nombre del
símbolo como texto: edit.
Material Symbols es una fuente con métricas propias, así que hay que
neutralizar el interlineado del texto que contiene el nombre del símbolo
(si no, el glifo se descentra dentro del botón). */
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-smoothing: antialiased;
-webkit-font-feature-settings: 'liga';
font-feature-settings: 'liga';
/* Por defecto neutro; cada botón ajusta el tamaño con su propia regla. */
font-size: 1.15em;
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
user-select: none;
vertical-align: middle;
flex-shrink: 0;
}
/* El span trae el NOMBRE del símbolo como texto ("edit", "close"). Si la
fuente no llegara a cargar (PWA sin conexión, CDN caído), se vería esa
palabra suelta. config.js hace una comprobación de document.fonts y, si la
fuente no está, marca y estos iconos se
ocultan por completo: el botón conserva su aria-label y sigue siendo
usable, pero no muestra un glifo ni una palabra rara. */
html.sin-material-symbols .material-symbols-outlined { visibility: hidden; }
/* Tamaños para los iconos de acción. Material Symbols es variable y usa
"opsz" (optical sizing) para ajustar el grosor del trazo: si no coincide con
el tamaño real, los glifos se ven finos o difusos, así que se fija por regla. */
.card-edit .material-symbols-outlined,
.card-del .material-symbols-outlined {
font-size: 17px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.modal-close .material-symbols-outlined {
font-size: 20px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}
.racha-popover-cerrar .material-symbols-outlined {
font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.ctx-item-icon {
font-size: 17px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
.adj-preview-cerrar .material-symbols-outlined {
font-size: 18px; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}
/* ---------- Pantalla de carga (splash) ---------- */
.splash {
position: fixed; inset: 0; z-index: 300;
/* Va centrada, pero en un móvil muy bajo con notch el logo puede quedar
rozando el borde superior; el inset lo baja un poco. */
padding-top: env(safe-area-inset-top, 0px);
background: var(--color-bg);
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
transition: opacity .45s ease;
}
.splash.hide { opacity: 0; pointer-events: none; }
.splash-logo { width: 180px; height: auto; max-width: 60vw; animation: splashPulse 1.4s ease-in-out infinite; }
@keyframes splashPulse {
0%, 100% { transform: scale(1); opacity: 0.92; }
50% { transform: scale(1.06); opacity: 1; }
}
.splash-text { color: var(--color-text); font-size: 0.98rem; }
.splash-dots span { display: inline-block; font-weight: 700; animation: dotBlink 1.1s infinite; }
.splash-dots span:nth-child(2) { animation-delay: .18s; }
.splash-dots span:nth-child(3) { animation-delay: .36s; }
@keyframes dotBlink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }
/* --- Zonas seguras ----------------------------------------------------
`viewport-fit=cover` (en la meta viewport de las seis HTML) deja que la
página se dibuje DEBAJO de la muesca y de la Dynamic Island. Sin esta
reserva, en un iPhone con notch la barra superior queda medio tapada por el
reloj, y en horizontal los botones de los extremos quedan bajo el corte.
Abajo ya había `env(safe-area-inset-bottom)` para el dock y los bottom
sheets; arriba no había nada, que es justo lo que este bloque arregla.
`env(...)` lleva SIEMPRE el segundo argumento con el 0px de reserva: en
navegadores que no conocen la función, un `env()` sin valor por defecto
hace que TODO el `padding` de la declaración sea inválido y se pierda. */
body {
margin: 0;
padding-left: env(safe-area-inset-left, 0px);
padding-right: env(safe-area-inset-right, 0px);
background: var(--color-bg);
color: var(--color-text);
font-family: var(--font-body);
-webkit-font-smoothing: antialiased;
transition: background .2s ease, color .2s ease;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; }
a { color: var(--color-primary); }
ul { list-style: none; margin: 0; padding: 0; }
/* ---------- Botones ---------- */
.btn {
font-family: var(--font-body);
font-weight: 500;
font-size: var(--font-size-base);
padding: 8px 14px; /* spec Linear: botones 8x14 */
border-radius: var(--radius-md);
border: 1px solid transparent;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: transform .12s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn-block { width: 100%; }
/* Botón deshabilitado.
`.btn` no tenía ninguna regla `:disabled`, y `.btn:active` se aplicaba
igual, así que un botón apagado seguía hundiéndose al pulsarlo y seguía
cambiando de color al pasar el ratón por encima: dos señales que mienten con
su estado. Con `cursor: not-allowed` el puntero además avisa de que no hay
nada que pulsar.
Se baja la opacidad en vez de cambiar el color a gris para que siga leyéndose
el texto y la jerarquía se mantenga. `.btn-generate` ya define su propio
`:disabled` en otro sitio (era el único que lo tenía), así que esta regla no
le pisa nada: el orden del fichero manda. */
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: .4;
cursor: not-allowed;
transform: none;
}
/* Los `:hover` de las variantes NO filtraban `:disabled` (solo lo hacia
`.btn-generate`), de modo que un `.btn-primary` apagado se ponia lavanda
al pasar el raton por encima. Se les anade `:not(:disabled)` para dejar
el estado quieto. */
.btn:disabled:hover,
.btn[aria-disabled="true"]:hover { transform: none; }
.btn-sm { padding: 6px 12px; font-size: 0.8rem; }
/* Linear button-primary: lavanda (#5e6ad2), press #5e69d1, hover #828fff */
.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }
.btn-primary:active:not(:disabled) { background: var(--color-primary-focus); }
.btn-outline { background: transparent; border-color: var(--color-border); color: var(--color-text); }
.btn-outline:hover:not(:disabled) { background: var(--color-primary-soft); }
.btn-danger { background: transparent; color: var(--color-danger); border-color: var(--color-danger); }
/* Botón principal de la vista IA: mismo acento lavanda (Linear no usa
contraste de color extra para el CTA principal). */
.btn-generate {
background: var(--color-primary); color: #fff;
box-shadow: 0 1px 2px rgba(23, 24, 28, 0.18);
}
.btn-generate:hover:not(:disabled) { background: var(--color-primary-hover); color: #fff; }
.btn-generate:active:not(:disabled) { background: var(--color-primary-focus); color: #fff; }
[data-theme="dark"] .btn-generate {
background: var(--color-primary); color: #fff;
box-shadow: none;
}
[data-theme="dark"] .btn-generate:hover:not(:disabled) { background: var(--color-primary-hover); color: #fff; }
/* Acción principal de panel: "+" circular con relleno lavanda de alto
contraste (Linear button-primary en forma de check-open). El halo de
hover es un anillo de surface tint, no una sombra de marca. */
.btn-icon-round {
width: 34px; height: 34px; border: none; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--color-primary); color: #fff;
font-size: 1.2rem; font-weight: 600; line-height: 1; cursor: pointer;
flex-shrink: 0;
transition: background .15s ease, transform .12s ease, box-shadow .2s ease;
}
.btn-icon-round:hover:not(:disabled) {
background: var(--color-primary-hover);
transform: translateY(-1px);
box-shadow: 0 0 0 4px var(--color-primary-soft);
}
.btn-icon-round:active {
background: var(--color-primary-focus);
transform: translateY(0) scale(.96);
}
.btn-icon-round:focus-visible {
outline: 2px solid var(--color-focus-ring); outline-offset: 2px;
}
/* ==========================================================
PANTALLA DE BIENVENIDA (banner de inicio)
========================================================== */
.welcome-body {
background: linear-gradient(180deg, var(--color-secondary-soft) 0%, var(--color-bg) 55%);
}
.welcome-screen {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 32px 24px;
text-align: center;
}
.welcome-header { display: flex; flex-direction: column; align-items: center; }
.welcome-logo { margin-bottom: 0; }
.welcome-title {
font-family: var(--font-display);
font-weight: 600;
/* `clamp()` en vez de un 2.6rem fijo: a 360 px, 2.6rem son 41.6 px y el
logotipo se comia media pantalla en un movil pequeno. El minimo (1.6rem,
el token `--font-size-xl`) mantiene la presencia de marca; el maximo
conserva el 2.6rem de escritorio, de modo que en un monitor grande no
cambia ni un pixel. El termino `6vw` hace que en tablet quede en medio,
que es donde el salto fijo se notaba mas. */
font-size: clamp(1.6rem, 6vw + 0.6rem, 2.6rem);
letter-spacing: 0.05em;
margin-top: 18px;
}
.brand-logo-full { width: 200px; height: auto; max-width: 60vw; }
.tagline { color: var(--color-text-muted); margin-top: 10px; font-size: 1rem; }
#about {
width: 100%;
max-width: 560px;
margin: 40px 0 44px;
padding: 28px 30px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-soft);
}
#about h2 { font-size: 1.55rem; margin-bottom: 12px; }
#about p { color: var(--color-text-muted); font-size: 0.98rem; line-height: 1.65; margin: 0; }
.welcome-actions { width: 100%; max-width: 340px; display: flex; flex-direction: column; gap: 12px; }
.welcome-note { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.4; margin-top: 6px; }
/* Aviso de "tu sesión se cerró" (llega desde app.html?sesion=expirada):
se pinta antes de los botones para que se lea sin tener que buscarse el
motivo de que la app le haya cerrado la sesión en la cara. */
.login-aviso {
display: flex; align-items: flex-start; gap: 8px;
margin: 0 0 14px; padding: 10px 12px;
font-size: 0.82rem; line-height: 1.4; text-align: left;
color: var(--color-text);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-left: 3px solid var(--color-secondary);
border-radius: var(--radius-sm);
}
.login-aviso.hidden { display: none; }
/* El tema se sigue aplicando por atributo, `[data-theme="dark"]`, y NUNCA por
`@media (prefers-color-scheme: dark)`.
El motivo de que siga siendo por atributo es el de siempre: la media query
pregunta al SISTEMA y no se puede ganarle a la eleccion de la persona. Con las
dos a la vez pasaba esto: alguien elige "claro" en un movil con el sistema en
oscuro, y el borde naranja del aviso se le queda en su variante oscura
mientras el resto de la pagina esta en claro.
Lo que si ha cambiado es el punto de partida: `js/theme.js` ahora consulta la
preferencia del sistema SOLO cuando no hay eleccion guardada, y deja de
seguir al sistema en cuanto la hay. Son dos cosas distintas que conviene no
confundirlas:
- el RESPALDO por defecto es el del sistema;
- la CAPACIDAD de override sigue siendo de la persona.
`data-theme` lo escribe `zentAplicarTema`, tanto al arrancar (theme.js) como
al cambiarlo en Ajustes (settings.js, que delega en la misma funcion). */
[data-theme="dark"] .login-aviso { border-left-color: #f97316; }
.welcome-signin { margin-top: 40px; font-size: 0.9rem; color: var(--color-text-muted); }
.btn-icon { display: inline-flex; }
/* Enlaces legales de la portada. Antes de esto no había ninguna forma de llegar
a los documentos legales desde la pantalla de consentimento: OAuth exige que
estén a la vista ANTES de que la persona autorice el acceso al calendario. */
.welcome-note a { color: var(--color-primary); text-decoration: underline; }
.welcome-note a:hover { color: var(--color-primary-hover); }
.welcome-note a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.welcome-legal {
display: flex; gap: 6px 16px; flex-wrap: wrap; justify-content: center;
margin-top: 18px; font-size: 0.78rem;
}
.welcome-legal a { color: var(--color-text-muted); text-decoration: none; }
.welcome-legal a:hover { color: var(--color-text); text-decoration: underline; }
.welcome-legal a:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; border-radius: 4px; }
/* ==========================================================
APP — Navegador (topbar + tabbar)
========================================================== */
.topbar {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 20px;
padding-top: calc(16px + env(safe-area-inset-top, 0px));
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
}
.topbar-brand { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; }
/* Botón de búsqueda del topbar: discreto, se ensancha al pasar por encima. */
.topbar-search {
display: inline-flex; align-items: center; gap: 7px;
margin-left: auto; margin-right: 10px;
padding: 5px 10px; border-radius: 8px;
border: 1px solid var(--color-border);
background: var(--color-surface-2);
color: var(--color-text-muted, #7a8291);
font: inherit; font-size: 0.85rem;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.topbar-search:hover { background: var(--color-surface-3); border-color: var(--color-border-strong); }
.topbar-search:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
.topbar-search .material-symbols-outlined { font-size: 18px; }
.topbar-search-kbd {
font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.68rem; letter-spacing: 0.02em;
padding: 1px 5px; border-radius: 4px;
border: 1px solid var(--color-border);
background: var(--color-surface);
color: var(--color-text-muted, #7a8291);
}
@media (max-width: 560px) {
.topbar-search-label, .topbar-search-kbd { display: none; }
.topbar-search { padding: 6px 8px; margin-right: 6px; }
}
/* ==========================================================
Command Palette (Ctrl/Cmd + K)
========================================================== */
.search-overlay {
position: fixed; inset: 0; z-index: 400;
display: flex; justify-content: center;
/* El panel arranca cerca del borde superior, como en Linear: así se ve la
lista sin tener que mirar hacia abajo. */
align-items: flex-start;
padding: 8vh 16px 16px;
background: var(--color-overlay, rgba(17, 18, 22, 0.45));
backdrop-filter: blur(2px);
}
.search-overlay.hidden { display: none; }
.search-panel {
width: 100%; max-width: 620px;
max-height: 76vh;
display: flex; flex-direction: column;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 12px;
box-shadow: 0 16px 48px rgba(17, 18, 22, 0.24);
overflow: hidden;
}
.search-head {
display: flex; align-items: center; gap: 10px;
padding: 12px 14px;
border-bottom: 1px solid var(--color-border);
}
.search-head-icon { color: var(--color-text-muted, #7a8291); font-size: 20px; }
.search-input {
flex: 1; min-width: 0;
/* Sin `outline: 0`: este input no tiene borde propio, y su unico indicador
de foco era el anillo del navegador sobre un fondo transparente. */
border: 0; background: transparent;
color: var(--color-text);
font: inherit; font-size: 1rem;
}
/* El anillo se pone en el marco que lo rodea, no en el input: un rectángulo
alrededor del texto suelto se ve descuadrado dentro de una caja redondeada.
`:focus-within` cubre tambien el caso de pegar con el raton dentro del
campo, que con `:focus-visible` no daria ningun aviso. */
.search-head:focus-within {
outline: 2px solid var(--color-focus-ring);
outline-offset: -1px;
}
.search-input::placeholder { color: var(--color-text-muted, #7a8291); }
.search-cerrar {
border: 0; background: transparent; cursor: pointer;
color: var(--color-text-muted, #7a8291);
font-size: 20px; padding: 2px; border-radius: 6px;
}
.search-cerrar:hover { background: var(--color-surface-3); }
.search-results { overflow-y: auto; padding: 6px; flex: 1; }
.sp-grupo-titulo {
margin: 10px 8px 4px;
font-size: 0.7rem; font-weight: 600;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--color-text-muted, #7a8291);
}
.sp-fila {
display: flex; align-items: center; gap: 10px;
width: 100%; text-align: left;
padding: 8px 10px; margin: 1px 0;
border: 0; border-radius: 8px; background: transparent;
color: var(--color-text); font: inherit;
cursor: pointer;
}
.sp-fila:hover { background: var(--color-surface-2); }
.sp-fila.sel { background: var(--color-primary-soft, #eef0fb); }
.sp-icon { color: var(--color-text-muted, #7a8291); font-size: 20px; flex: none; }
.sp-fila.sel .sp-icon { color: var(--color-primary, #5e6ad2); }
.sp-cuerpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.sp-titulo {
font-size: 0.92rem;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-sub {
font-size: 0.76rem; color: var(--color-text-muted, #7a8291);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sp-meta {
font-size: 0.72rem; color: var(--color-text-muted, #7a8291);
white-space: nowrap; flex: none;
}
.sp-grupo {
font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em;
padding: 2px 6px; border-radius: 4px; flex: none;
background: var(--color-surface-2); color: var(--color-text-muted, #7a8291);
}
/* Sello de "tarea completada" en la paleta: se distingue de un resultado
pendiente sin tener que abrir la tarjeta. */
.sp-badge-done {
display: inline-block; vertical-align: middle; margin-left: 2px;
padding: 1px 6px; border-radius: 999px;
font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.04em;
background: color-mix(in srgb, #2e9e5b 18%, transparent);
color: #2e9e5b; font-weight: 600;
}
.sp-titulo mark {
background: transparent; color: var(--color-primary, #5e6ad2);
font-weight: 600;
}
.sp-vacio {
margin: 0; padding: 26px 14px; text-align: center;
color: var(--color-text-muted, #7a8291); font-size: 0.88rem;
}
/* Aviso de "el servidor no responde", encima de los resultados. No es un
error: la paleta sigue buscando en lo que hay; por eso el tono es
informativo y no rojo. */
.sp-nota-red {
display: flex; align-items: center; gap: 8px;
margin: 6px 8px 0;
padding: 8px 10px;
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-surface-2);
color: var(--color-text-muted, #7a8291);
font-size: 0.78rem;
}
.sp-nota-red .material-symbols-outlined { font-size: 16px; flex: none; }
/* Respuesta de un comando ("tareas hoy"): no es una fila navegable, así que
no lleva hover ni cursor de acción; se lee como el resultado de una
pregunta. */
.sp-comando {
display: flex; align-items: center; gap: 10px;
margin: 10px 6px; padding: 14px 12px;
border: 1px solid var(--color-border);
border-radius: 10px;
background: var(--color-surface-2);
}
.sp-comando .sp-icon { color: var(--color-tasks-accent, #5e6ad2); }
.sp-comando .sp-titulo { font-weight: 600; white-space: normal; }
.sp-comando .sp-meta {
font-size: 1.15rem; font-weight: 700;
color: var(--color-primary, #5e6ad2);
}
.search-foot {
display: flex; gap: 14px; align-items: center;
padding: 8px 14px;
border-top: 1px solid var(--color-border);
background: var(--color-surface-2);
font-size: 0.7rem; color: var(--color-text-muted, #7a8291);
}
.search-foot kbd {
font-family: var(--font-mono, ui-monospace, monospace);
/* Estos `` son atajos de teclado ("⌘K", "Esc"). La nueva variable de
`:root` no trae comillas porque son nombres genéricos, pero aquí, dentro de
un pseudo-elemento de contenido, sí se muestran las teclas tal cual. */
font-size: 0.68rem; padding: 1px 5px; margin-right: 3px;
border-radius: 4px; border: 1px solid var(--color-border);
background: var(--color-surface);
}
/* FASE F — fila de filtros activos y avisos de la paleta.
Va entre la caja de búsqueda y los resultados, que es donde el ojo ya está:
se lee como parte de la consulta, no como una nota aparte. */
.search-filtros {
display: flex; flex-wrap: wrap; gap: 6px;
padding: 8px 12px 0;
}
.search-filtros[hidden] { display: none; }
.sp-chip {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 8px; border-radius: 999px;
border: 1px solid var(--color-primary, #5e6ad2);
background: color-mix(in srgb, var(--color-primary, #5e6ad2) 10%, transparent);
color: var(--color-text);
font-size: 0.72rem; line-height: 1.5;
cursor: pointer;
}
.sp-chip:hover { background: color-mix(in srgb, var(--color-primary, #5e6ad2) 18%, transparent); }
.sp-chip-texto { font-variant-numeric: tabular-nums; }
.sp-chip-x { font-size: 13px; opacity: 0.6; }
.sp-chip-x:hover, .sp-chip:hover .sp-chip-x { opacity: 1; }
/* "Limpiar filtros" es la acción destructiva de la fila: sin borde, en
apagado, para que no se confunda con un filtro puesto. */
.sp-chip-todo {
border-color: var(--color-border); background: transparent;
color: var(--color-text-muted, #7a8291);
}
.sp-chip-todo:hover {
background: var(--color-surface-2); color: var(--color-text);
border-color: var(--color-border);
}
/* El aviso de operador mal escrito. Va en tono de aviso, no de error, porque
la búsqueda sigue funcionando: simplemente ese filtro no se ha aplicado. */
.search-aviso {
padding: 6px 12px 0; font-size: 0.72rem;
color: #B26A00;
}
.search-aviso[hidden] { display: none; }
[data-theme="dark"] .search-aviso { color: #F0A830; }
/* La pista de sintaxis se va primero cuando la pantalla es estrecha: es la
parte menos necesaria de las tres. */
.search-foot-filtros {
margin-left: auto; font-family: var(--font-mono, ui-monospace, monospace);
font-size: 0.66rem; opacity: 0.75;
}
@media (max-width: 560px) { .search-foot { display: none; } }
.racha {
display: inline-flex; align-items: center;
padding: 5px 11px; border-radius: 999px;
border: 1px solid var(--color-border, #e2e6ee);
background: rgba(127, 127, 127, 0.06); /* fondo semi-transparente discreto */
color: #666666;
font: inherit; font-weight: 600; font-size: 0.85rem;
white-space: nowrap; line-height: 1; cursor: pointer;
transition: color .3s ease, border-color .3s ease, background .3s ease;
}
.racha:hover { background: rgba(127, 127, 127, 0.12); }
.racha:focus-visible { outline: 2px solid var(--color-primary, #4a78f5); outline-offset: 2px; }
.racha-count { font-variant-numeric: tabular-nums; }
/* ---------- Llama animada de la racha ----------
Se construye con dos pseudo-elementos y CSS keyframes (sin Lottie ni
peticiones extra). Por defecto está oculta y sin animación: racha.js solo
añade .racha-flame-activa cuando la racha es mayor que 0. */
.racha-flame {
position: relative; display: none;
width: 11px; height: 14px; margin-right: 6px; flex-shrink: 0;
filter: drop-shadow(0 0 3px rgba(249, 115, 22, .45));
}
.racha-flame-activa { display: inline-block; }
.racha-flama-nucleo, .racha-flama-lengua {
position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
}
.racha-flama-nucleo {
width: 10px; height: 13px;
background: linear-gradient(180deg, #fbbf24 0%, #f97316 45%, #ea580c 100%);
animation: racha-llama-latido 1.15s ease-in-out infinite;
transform-origin: 50% 100%;
}
.racha-flama-lengua {
width: 5px; height: 7px; bottom: 1px;
background: linear-gradient(180deg, #fde68a 0%, #fbbf24 100%);
animation: racha-llama-llama 0.78s ease-in-out infinite alternate;
transform-origin: 50% 100%;
}
@keyframes racha-llama-latido {
0%, 100% { transform: translateX(-50%) scaleY(1) scaleX(1); }
35% { transform: translateX(-50%) scaleY(1.16) scaleX(.92); }
65% { transform: translateX(-50%) scaleY(.93) scaleX(1.05); }
}
@keyframes racha-llama-llama {
from { transform: translateX(-50%) translateY(0) scaleY(1); opacity: .95; }
to { transform: translateX(-50%) translateY(-3px) scaleY(1.35); opacity: .55; }
}
/* Respeta la preferencia de movimiento reducido del sistema. */
@media (prefers-reduced-motion: reduce) {
.racha-flama-nucleo, .racha-flama-lengua { animation: none; }
}
/* ---------- Racha perdida: el fuego se apaga ----------
Se añade al pill cuando, al entrar, el backend detecta que pasó un día
completo sin generar ni escuchar el resumen diario: el badge se sacude y la
llama mengua hasta apagarse. Lo dispara racha.js (animarRachaPerdida). */
@keyframes zent-rp-sacudida {
0%, 100% { transform: translateX(0); }
20% { transform: translateX(-4px); }
40% { transform: translateX(4px); }
60% { transform: translateX(-3px); }
80% { transform: translateX(2px); }
}
@keyframes zent-rp-apagar {
0% { opacity: 1; transform: scale(1) translateY(0); }
100% { opacity: 0; transform: scale(.35) translateY(3px); }
}
.zent-racha-perdida {
animation: zent-rp-sacudida 450ms cubic-bezier(.36, .07, .19, .97) both;
border-color: var(--color-danger, #ef4444) !important;
}
.zent-racha-perdida .racha-flame { animation: zent-rp-apagar 650ms ease-in forwards; }
/* ------- Popover del botón de racha ------- */
.racha-popover {
position: fixed; z-index: 130; width: 280px;
background: var(--color-surface, #fff);
color: var(--color-text, #1b1f27);
border: 1px solid var(--color-border, #e2e6ee);
border-radius: 12px; padding: 12px 14px 12px 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
font-size: 0.82rem; line-height: 1.5;
animation: racha-pop-in .18s ease;
}
.racha-popover.hidden { display: none; }
.racha-popover-tit { font-weight: 600; padding-right: 22px; }
.racha-popover-sub { margin-top: 5px; color: var(--color-text-muted, #7a8291); font-size: 0.78rem; }
.racha-popover-cerrar {
position: absolute; top: 6px; right: 6px;
width: 24px; height: 24px;
display: inline-flex; align-items: center; justify-content: center;
border: 0; background: transparent; color: var(--color-text-muted, #7a8291);
font-size: 0.85rem; cursor: pointer; border-radius: 50%;
}
.racha-popover-cerrar:hover { background: var(--color-primary-soft, #e8f0fe); }
@keyframes racha-pop-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: none; }
}
.tabbar {
display: flex;
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
position: sticky; top: 0; z-index: 5;
/* La barra pega al borde superior, así que su padding es lo que aparta el
contenido del reloj y de la muesca. */
padding-top: env(safe-area-inset-top, 0px);
}
/* Indicador tipo pastilla: se desliza con transform (compuesto) para no
provocar reflow al cambiar de pestaña. */
.tab-pill {
position: absolute; bottom: -1px; left: 0;
height: 2px; width: 0;
background: var(--color-primary);
border-radius: 2px 2px 0 0;
transform: translateX(0);
transition: transform var(--dur-pill) var(--ease-pill), width var(--dur-pill) var(--ease-pill);
pointer-events: none;
will-change: transform;
}
.tab-btn {
flex: 1;
background: none; border: none; cursor: pointer;
padding: 12px 8px 10px;
display: flex; flex-direction: column; align-items: center; gap: 4px;
color: var(--color-text-muted);
font-family: var(--font-body); font-size: var(--font-size-sm); font-weight: 600;
transition: color var(--dur-rapida) ease;
}
.tab-icon { font-size: 1.05rem; }
.tab-btn.active { color: var(--color-primary); }
/* Ancho de trabajo: en escritorios grandes la lectura se rompe más
allá de cierto punto, pero 1100 px dejaba la mitad de la pantalla
vacía. 1400 px centra el conjunto y deja a Tareas y Eventos un
hueco proporcional de verdad (ver F5 y el informe de UI). */
.views { max-width: 1400px; margin: 0 auto; padding: 24px 20px 60px; }
.view { display: none; }
.view.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px);} to { opacity: 1; transform: none; } }
/* ---------- Vista Visual ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* Los hijos de un grid se niegan a encoger por debajo de su contenido
(min-width: auto) y un título o un chip largo empujaba la columna
vecina hasta montar una columna sobre otra. min-width: 0 devuelve al
grid el control del reparto. */
.split > * { min-width: 0; }
/* En modo Timeline el lienzo ocupa la fila ENTEA. Antes caía en una
celda de media pantalla (1fr): las columnas de solape colapsaban,
los bloques se montaban unos sobre otros y la rejilla de horas
quedaba ilegible. */
.split .timeline-view:not(.hidden) { grid-column: 1 / -1; }
/* Vistas combinadas (la barra Lista/Mini/Timeline). `data-vista` lo
escribe minical.js y aquí se decide qué se ve, sin estilos inline:
Mini es exclusivo (sólo el widget centrado) y Timeline puede ir solo
(lienzo a todo el ancho, sin paneles) o con Lista (paneles arriba,
lienzo a fila completa debajo). */
#view-visual[data-vista="mini"] > .split { display: none; }
#view-visual[data-vista="timeline"] > .split > .panel { display: none; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } }
.panel {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 18px;
box-shadow: var(--shadow-soft);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
.panel-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; }
.panel-counter { margin: 4px 0 0; font-size: 0.8rem; color: var(--color-text-muted); }
/* Acciones del header: el filtro y el "+" van en fila, pegados al borde
derecho, con el "+" (acción principal) como último para que el pulgar caiga
en él. El filtro es secundario: por eso es un botón fantasma. */
.panel-acciones { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
/* Botón fantasma de icono: mismo tamaño que .btn-icon-round, pero sin relleno
de marca. Es para acciones que se usan de vez en cuando (ordenar), no para
la acción principal del panel. */
.btn-icon-ghost {
width: 34px; height: 34px; border: none; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: transparent; color: var(--color-text-muted);
cursor: pointer; flex-shrink: 0; padding: 0;
transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.btn-icon-ghost:hover:not(:disabled) { background: var(--color-primary-soft); color: var(--color-primary); }
.btn-icon-ghost:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
/* Desplegable abierto: el botón se queda marcado, para que se sepa qué
botón es el que tiene el menú flotando debajo. */
.btn-icon-ghost[aria-expanded="true"] { background: var(--color-primary-soft); color: var(--color-primary); }
.btn-icon-ghost .material-symbols-outlined { font-size: 20px; line-height: 1; }
/* Interruptor "Mostrar / Ocultar completadas": un botón fantasma con texto, lo
bastante pequeño para caber en el header junto al filtro y el "+". El estado
activo (mostrando completadas) lleva la marca tenue para no competir con la
acción principal del panel. */
.btn-toggle-completadas {
display: inline-flex; align-items: center; gap: 5px;
height: 30px; padding: 0 10px; border: 1px solid var(--color-border);
border-radius: 999px; background: transparent;
color: var(--color-text-muted); font-size: 0.78rem; cursor: pointer;
transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease,
border-color var(--dur-rapida) ease;
}
.btn-toggle-completadas .material-symbols-outlined { font-size: 17px; line-height: 1; }
.btn-toggle-completadas:hover:not(:disabled) {
background: var(--color-primary-soft); color: var(--color-primary);
}
.btn-toggle-completadas.activo { color: var(--color-primary); border-color: var(--color-primary); }
.btn-toggle-completadas:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: 2px; }
/* Sin tareas hechas el interruptor no tiene nada que esconder: se apaga sin
quitarse del DOM (su estado sigue siendo el que es) pero deja claro que
tocar no hará nada. */
.btn-toggle-completadas:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Desplegable de ordenamiento (hermano del menú contextual, se apoya en los
mismos tokens y la misma sombra). `max-height` + scroll por si en una pantalla
muy baja no cabe debajo del botón: mejor que se recorra a que se corte. */
.orden-menu {
position: fixed; z-index: 300; min-width: 190px;
max-height: min(60vh, 320px); overflow-y: auto;
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
padding: 6px; display: flex; flex-direction: column; gap: 2px;
}
.orden-menu-tit {
margin: 0 0 4px; padding: 4px 12px 6px;
font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
color: var(--color-text-muted);
border-bottom: 1px solid var(--color-border);
}
.orden-item {
display: flex; align-items: center; gap: 9px; width: 100%;
text-align: left; padding: 9px 12px; border: none; border-radius: var(--radius-xs);
background: none; cursor: pointer; white-space: nowrap;
font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--color-text);
transition: background var(--dur-rapida) ease, color var(--dur-rapida) ease;
}
.orden-item:hover { background: var(--color-primary-soft); }
.orden-item:focus-visible { outline: 2px solid var(--color-focus-ring); outline-offset: -2px; }
.orden-item.activo { color: var(--color-primary); font-weight: 600; }
.orden-item-icon { font-size: 17px; color: var(--color-text-muted); }
.orden-item.activo .orden-item-icon { color: var(--color-primary); }
/* La columna del check reserva el hueco siempre: si no, la lista "da saltos"
horizontalmente cada vez que se elige una opción distinta. */
.orden-item-check { font-size: 17px; color: var(--color-primary); margin-left: auto; }
.orden-item-check:empty { visibility: hidden; }
.panel-progress {
height: 2px; width: 100%; margin-top: 8px;
background: var(--color-border, #e2e6ee);
border-radius: 999px; overflow: hidden;
}
.panel-progress-fill {
display: block; height: 100%;
background: var(--color-primary, #4f46e5);
border-radius: 999px;
transition: width .3s ease;
}
/* --- Tareas: rectángulos con check + hora, expandibles --- */
.task-list { display: flex; flex-direction: column; gap: 8px; list-style: none; margin: 0; padding: 0; }
/* Separa las pendientes de las ya completadas. Sin esto, al marcar tareas se
mezclaban con las pendientes y la lista se volvía difícil de recorrer. */
.task-group-separator {
display: flex; align-items: center; gap: 10px;
margin: 6px 2px 0; list-style: none;
font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--color-text-muted);
}
.task-group-separator::after {
content: ""; flex: 1; height: 1px;
background: var(--color-border);
}
.task-card {
border: 1px solid var(--color-border);
background: var(--color-bg);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
transition: transform .12s ease, border-color .15s ease, box-shadow .2s ease;
}
.task-card:hover { transform: translateY(-1px); }
.task-card:active { transform: translateY(0) scale(.99); }
.task-card-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.task-card.done .task-card-row { opacity: 0.5; }
.task-card.done .task-title { text-decoration: line-through; }
.card-del {
width: 24px; height: 24px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border: none; border-radius: 50%;
background: transparent; color: var(--color-text-muted);
font-size: 0.8rem; line-height: 1; cursor: pointer;
opacity: 0.5; transition: opacity .15s ease, background .15s ease, color .15s ease;
}
.card-del:hover { opacity: 1; background: var(--color-danger); color: #fff; }
.task-card:hover .card-del, .event-card:hover .card-del { opacity: 0.9; }
/* Grupo de acciones (editar + eliminar) de cada tarjeta. Se mantiene siempre
visible en la sección "Sin hora" para que ninguna tarea quede sin salida. */
.card-acciones { display: inline-flex; align-items: center; gap: 2px; flex-shrink: 0; }
.card-edit {
width: 24px; height: 24px; flex-shrink: 0;
display: inline-flex; align-items: center; justify-content: center;
border: none; border-radius: 50%;
background: transparent; color: var(--color-text-muted);
font-size: 0.8rem; line-height: 1; cursor: pointer;
opacity: 0.5; transition: opacity .15s ease, background .15s ease;
}
.card-edit:hover { opacity: 1; background: var(--color-primary-soft); }
.task-card:hover .card-edit, .event-card:hover .card-edit { opacity: 0.9; }
.mini-item .card-acciones .card-edit,
.mini-item .card-acciones .card-del { opacity: 0.8; }
.task-check {
width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
border: 2px solid var(--color-tasks-accent); background: transparent; cursor: pointer;
}
.task-check.checked { background: var(--color-tasks-accent); }
.task-title {
flex: 1; font-weight: 500; text-transform: capitalize;
min-width: 0; overflow-wrap: anywhere; word-break: break-word; white-space: normal;
line-height: 1.3;
}
.task-time {
font-size: 0.75rem; font-weight: 600; color: var(--color-tasks-accent);
background: var(--color-tasks-accent-soft); padding: 3px 9px; border-radius: 999px; white-space: nowrap;
border: 1px solid transparent;
}
[data-theme="dark"] .task-time { border-color: rgba(94, 106, 210, 0.25); }
[data-theme="dark"] .task-card {
background: rgba(255, 255, 255, 0.03);
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
box-shadow: var(--shadow-soft);
}
.task-desc {
max-height: 0; overflow: hidden; transition: max-height .2s ease, padding .2s ease;
padding: 0 14px; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5;
overflow-wrap: anywhere; word-break: break-word;
}
.task-card.expanded .task-desc { max-height: 200px; padding: 0 14px 14px; }
.task-desc-empty { font-style: italic; opacity: 0.7; }
/* Etiquetas dentro de cada tarjeta de tarea: nota, prioridad, rutina, lista, tags */
.task-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 8px 14px; }
.task-chip, .event-chip {
font-size: var(--font-size-xs); font-weight: 700; letter-spacing: 0.02em;
padding: 3px 9px; border-radius: var(--radius-pill);
border: 1px solid var(--color-border); background: var(--color-primary-soft);
color: var(--color-text-muted); white-space: nowrap;
/* Un enlace o una etiqueta largos (p. ej. el título de un adjunto de Drive)
rompían la tarjeta por su borde derecho: la etiqueta no cabía y la parrilla
la estiraba. Se corta con puntos suspensivos dentro de la columna. */
overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.chip-rutina {
background: var(--color-accent-soft); color: var(--color-accent);
border-color: transparent;
}
.chip-note { text-transform: uppercase; }
.chip-prio.prio-1 { background: var(--color-secondary-soft); color: var(--color-secondary); border-color: transparent; }
.chip-prio.prio-3 { background: var(--color-accent-soft); color: #A9742F; border-color: transparent; }
[data-theme="dark"] .chip-prio.prio-3 { color: var(--color-accent); }
.chip-prio.prio-5 { background: var(--color-danger); color: #fff; border-color: transparent; }
.chip-tag { font-weight: 600; }
/* Lista pequeña "Sin hora": tareas sin fecha asignada */
.panel-sub { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--color-border); }
.panel-sub h3 {
font-family: var(--font-body); font-size: 0.72rem; text-transform: uppercase;
letter-spacing: 0.05em; color: var(--color-text-muted); margin-bottom: 8px;
}
/* Panel "SIN HORA" al quedarse vacío: colapsa su altura antes de desmontarse.
grid-template-rows 0fr -> 1fr evita tener que medir la altura real; el
envoltorio interno recorta durante la transición. */
.panel-sub.animable {
display: grid;
grid-template-rows: 1fr;
transition: grid-template-rows 220ms var(--ease-out), opacity 180ms ease;
}
.panel-sub.animable > * { min-height: 0; }
/* El recorte solo hace falta durante el colapso: en abierto recortaría los
focus rings de los botones de la lista. */
.panel-sub.animable.zent-panel-colapsando > * { overflow: hidden; }
.panel-sub.animable.zent-panel-colapsando {
grid-template-rows: 0fr;
opacity: 0;
pointer-events: none;
}
.mini-list { display: flex; flex-direction: column; gap: 6px; }
.mini-item {
display: flex; align-items: center; justify-content: space-between; gap: 8px;
padding: 8px 10px; border-radius: var(--radius-sm);
background: var(--color-surface); border: 1px solid var(--color-border);
font-size: 0.82rem;
transition: border-color .15s ease;
}
.mini-item:hover { border-color: var(--color-tasks-accent); }
.mini-item .mini-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mini-item.done .mini-title { text-decoration: line-through; opacity: .55; }
/* Checkbox de la sección "Sin hora": mismas interacciones que la lista del día. */
.mini-check { width: 16px; height: 16px; border-width: 2px; }
.mini-badge {
font-size: 0.62rem; font-weight: 700; color: var(--color-secondary);
padding: 2px 7px; border-radius: 999px; background: var(--color-secondary-soft);
}
/* Animación al cambiar de día: los elementos entran deslizados y con fade */
@keyframes cardIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.task-card, .event-card { animation: cardIn 220ms var(--ease-out) both; }
/* Eliminado: la tarjeta se desplaza 20px y se desvanece en 200 ms. Al
desmontarla, el resto se recoloca solo (sin animar su layout). */
@keyframes zent-card-sale {
from { opacity: 1; transform: translateX(0) scale(1); }
to { opacity: 0; transform: translateX(20px) scale(0.95); }
}
.zent-card-salida {
animation: zent-card-sale var(--dur-media) var(--ease-out) both !important;
pointer-events: none;
}
/* Salida de un bloque del timeline (eliminar): fade + pequeño encogido, igual
que las tarjetas de la lista. El nodo se quita al acabar la animación o al
llegar el re-render. */
@keyframes zent-bloque-sale {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.95); }
}
.timeline-bloque.zent-bloque-salida {
animation: zent-bloque-sale 220ms var(--ease-out) both;
pointer-events: none;
}
/* --- Eventos: tarjetas de altura natural --- */
.event-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px;
}
/* La tarjeta ocupa lo que necesita su contenido. Antes llevaba
`aspect-ratio: 1 / 1`, pensado para una cuadrícula de cuadrados: en móvil
la rejilla pasa a una sola columna, así cada tarjeta se volvía un cuadrado
del ancho de la pantalla y quedaba altísima respecto a su texto. */
.event-card {
position: relative;
height: auto;
border: 1px solid var(--color-border);
background: var(--color-events-accent-soft);
border-radius: var(--radius-md);
padding: 12px 16px;
display: flex; flex-direction: column; gap: 6px;
cursor: pointer;
transition: transform .12s ease, border-color .15s ease;
backdrop-filter: var(--glass-blur);
-webkit-backdrop-filter: var(--glass-blur);
}
.event-card:hover { transform: translateY(-2px); }
.event-card:active { transform: translateY(0) scale(.98); }
.event-card .card-acciones { position: absolute; top: 8px; right: 8px; z-index: 2; }
.event-card-time {
align-self: flex-start;
font-size: 0.7rem; font-weight: 700; color: var(--color-events-accent);
background: rgba(255,255,255,0.6); padding: 2px 8px; border-radius: 999px;
border: 1px solid transparent;
}
[data-theme="dark"] .event-card-time { background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.2); }
.event-card-title {
font-weight: 600; font-size: 0.92rem; line-height: 1.25; text-transform: capitalize;
min-width: 0; overflow-wrap: anywhere; word-break: break-word; white-space: normal;
}
.event-card-desc {
font-size: var(--font-size-sm); color: var(--color-text-muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
overflow-wrap: anywhere; word-break: break-word;
}
.event-card.expanded .event-card-desc { -webkit-line-clamp: unset; overflow-y: auto; }
.event-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.event-chips .event-chip { align-self: flex-start; font-size: var(--font-size-xs); }
/* De qué calendario es cada evento. El punto lleva el color que eligió la
persona en Google; el nombre va al lado porque con dos calendarios del mismo
color el punto no basta para distinguirlos. */
.event-card-calendar {
display: flex; align-items: center; gap: 6px;
grid-column: 1 / -1;
font-size: var(--font-size-xs); color: var(--color-text-muted);
min-width: 0;
}
.event-card-calendar-name {
overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
/* El punto de color es reutilizable en la lista de Ajustes, en el detalle y en
la tarjeta. Es decorativo y lleva la inicial como texto de respaldo: si el
color no llega (un calendario sin color, o un bloqueo de CSS que impida el
`background`), se ve una inicial y no un hueco. */
.calendar-dot {
width: 12px; height: 12px; border-radius: 50%;
flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
color: #fff; font-size: 7px; font-weight: 700; line-height: 1;
box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
/* Aviso de calendario caído: ámbar, no rojo. No es un error de la app ni un
fallo de red, es un dato que falta, y ponerlo en rojo haría sospechar de
algo que está funcionando. Sigue el mismo mecanismo que el resto de la banda
de estado (`data-tipo`) para no inventar una clase paralela. */
.zent-estado[data-tipo="aviso"] { border-color: var(--cal-fallback); }
.zent-estado[data-tipo="aviso"] .zent-estado-icono { color: var(--cal-fallback); }
.grid-empty, .item-empty {
grid-column: 1 / -1; color: var(--color-text-muted); font-size: 0.85rem;
padding: 22px 16px; text-align: center;
background: var(--color-surface-2);
border: 1px solid var(--color-border); border-radius: var(--radius-lg);
animation: cardIn .28s ease both;
}
/* ---------- Modal (agregar tarea / evento) ---------- */
.modal-overlay {
position: fixed; inset: 0;
/* Capa de fondo: 75% de negro + desenfoque. Con el 45% anterior se seguían
leyendo las tarjetas del fondo y competían con el texto del modal. */
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
display: flex; align-items: center; justify-content: center;
/* Por encima de todo lo demás (topbar 5, dock 60, búsqueda 120, ajustes y
developer terminal 400): si no, un modal abierto desde la paleta de
comandos o la terminal se quedaba por debajo de ellas. */
z-index: 1000;
padding: 20px;
opacity: 0;
transition: opacity var(--dur-modal) var(--ease-out);
}
.modal-overlay.zent-abierto { opacity: 1; }
.modal-overlay.hidden { display: none; }
.modal-box {
background: var(--color-surface); border-radius: var(--radius-lg);
border: 1px solid var(--color-border);
width: 100%; max-width: 420px; padding: 22px; box-shadow: 0 12px 40px rgba(0,0,0,0.25);
/* El tope no puede ser 100vh a secas: en móvil, 100vh mide la ventana
INCLUYE la barra de direcciones, así que la caja se salía por debajo de
la UI del navegador y el botón "Guardar" quedaba inalcanzable aunque la
caja scrollease. dvh (dynamic viewport) ya descuenta esa barra; se
declara 88vh antes para los navegadores que no lo conocen, que se
quedan con un tope algo más alto pero siempre dentro de la pantalla. */
max-height: 88vh;
max-height: min(88vh, calc(100dvh - 32px));
overflow-y: auto;
scrollbar-width: thin; scrollbar-color: var(--color-border) transparent;
backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
/* Entrada discreta: escala 0.97 -> 1 en 150 ms, sin rebote. */
opacity: 0; transform: scale(.97);
transition: opacity var(--dur-modal) var(--ease-out),
transform var(--dur-modal) var(--ease-out);
}
.modal-overlay.zent-abierto .modal-box { opacity: 1; transform: scale(1); }
.modal-box::-webkit-scrollbar { width: 8px; }
.modal-box::-webkit-scrollbar-track { background: transparent; }
.modal-box::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 999px; }
/* ---- El modal que tiene