/* ==========================================================================
   app-base — Estilos base
   Mobile-first. Sin frameworks. Variables CSS para tematizar.
   Sólo contiene lo que cualquier app que herede esta plantilla necesita
   out-of-the-box: shell, tabbar flotante, FABs superiores, auth-card,
   formulario, botón, flash. Las vistas específicas de cada proyecto
   meten sus estilos aquí (o en archivos aparte si crece).
   ========================================================================== */

:root {
    /* Color */
    --c-brand:       #4f46e5;   /* texto y acentos sobre fondo claro */
    --c-brand-50:    #eef2ff;   /* tinte de fondo (píldora activa, chip) */
    --c-brand-600:   #4f46e5;   /* fondo de botón (lleva texto blanco) */
    --c-brand-700:   #4338ca;   /* hover del botón: más oscuro que el 600 */
    --c-brand-soft:  #4338ca;   /* texto de marca sobre el tinte 50 */
    --c-bg:          #ffffff;
    --c-bg-soft:     #f8fafc;
    --c-bg-card:     #ffffff;
    --c-border:      #e2e8f0;
    --c-text:        #0f172a;
    --c-text-muted:  #64748b;
    --c-success:     #10b981;
    --c-warning:     #f59e0b;
    --c-danger:      #ef4444;

    /* Tipografía */
    --font-base: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Espaciado (escala 4px) */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.25rem;
    --s-6: 1.5rem;
    --s-8: 2rem;
    --s-12: 3rem;
    --s-16: 4rem;
    --s-20: 5rem;

    /* Otros */
    --radius:    0.75rem;
    --radius-sm: 0.5rem;
    --shadow-card: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
    --shadow-pop:  0 8px 24px rgba(15,23,42,.08);
    --max-w:    720px;
}

/* ==========================================================================
   Variables glassmorphism (clara). Se sobreescriben abajo para el tema oscuro.
   ========================================================================== */
:root {
    --glass-bg:     rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.55);
    --glass-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    --glass-blur:   saturate(180%) blur(18px);
    /* Velo sutil al pasar el cursor (encabezado, botones de icono). */
    --c-hover:      rgba(15, 23, 42, 0.07);
    --header-hover: var(--c-hover);
}

/* ==========================================================================
   Reset y base
   ========================================================================== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/*
   El atributo `hidden` manda sobre cualquier `display`.

   El navegador esconde lo que lleva `hidden` con una regla del estilo del
   navegador, pero cualquier regla del autor con `display` la pisa: un
   `.btn` (display: inline-flex) con `hidden` se quedaba visible. Por eso
   el botón de "Activar notificaciones" salía aunque el navegador ya
   permitiera avisar.
*/
[hidden] { display: none !important; }
body {
    font-family: var(--font-base);
    background: var(--c-bg-soft);
    color: var(--c-text);
    -webkit-text-size-adjust: 100%;
    line-height: 1.5;
}
a { color: var(--c-brand); text-decoration: none; }
a:hover { text-decoration: underline; }

h1 { font-size: 1.5rem;  margin: 0 0 var(--s-4); }
h2 { font-size: 1.25rem; margin: 0 0 var(--s-3); }
h3 { font-size: 1.05rem; margin: 0 0 var(--s-2); }

/* ==========================================================================
   App shell
   ========================================================================== */
.app-shell {
    max-width: var(--max-w);
    margin: 0 auto;
    padding: var(--s-4);
}
/*
   Encabezado flotante: la barra va FIJA arriba del cuerpo, así que el
   shell reserva su alto para que el contenido no quede debajo.
*/
.app-shell--with-header {
    padding-top: calc(52px + 0.6rem + var(--s-3) + env(safe-area-inset-top, 0px));
}
/* Cuando el shell trae tabbar inferior, dejamos respiro generoso al final. */
.app-shell--with-tabbar {
    padding-bottom: calc(var(--s-20) + env(safe-area-inset-bottom, 0px));
}

/* El <main> dentro del shell no añade padding propio. */
.app-shell > main { padding: 0; max-width: none; margin: 0; }
/* Respiro final del contenido para que no se pegue al tabbar. */
.app-shell > main > *:last-child { margin-bottom: var(--s-4); }
.app-shell--with-tabbar > main > *:last-child { margin-bottom: var(--s-6); }

/* ==========================================================================
   Grupo inferior: la barra de navegación y la lupa de la búsqueda
   La lupa va suelta a la derecha de la barra, en su propio círculo. El
   grupo se ancla abajo y se centra como un todo: así la lupa queda
   pegada al engranaje (el menú de opciones) y no en la esquina.
   ========================================================================== */
.app-bottom-nav {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 0.75rem);
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    /* El grupo se mide por su contenido y se ancla al centro: la barra y
       la lupa se centran JUNTAS, como un solo bloque. Con width: 100% el
       contenido se pegaba a la izquierda de la pantalla. */
    width: max-content;
    max-width: calc(100% - 1rem);
    /* El hueco entre la barra y la lupa no debe capturar toques. */
    pointer-events: none;
}
.app-bottom-nav > * { pointer-events: auto; }

/* ==========================================================================
   Tabbar inferior (glassmorphism, flotante)
   ========================================================================== */
.app-tabbar {
    display: flex;
    gap: var(--s-2);
    padding: 0.55rem 0.6rem;
    border-radius: 999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    max-width: 100%;
    min-width: 0;
    flex: 0 1 auto;
}
.app-tabbar__item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-width: 76px;
    padding: 0.45rem 0.6rem;
    border-radius: 999px;
    color: var(--c-text-muted);
    text-decoration: none;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.1;
    transition: background 0.15s ease-out, color 0.15s ease-out;
    -webkit-tap-highlight-color: transparent;
}
.app-tabbar__item:active { background: var(--c-bg-soft); }
.app-tabbar__item.is-active {
    color: var(--c-brand);
    background: var(--c-brand-50);
}
.app-tabbar__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.app-tabbar__icon svg { display: block; }

/*
   La barra compacta: con cuatro pestañas (Biblioteca, Tareas, Páginas,
   Ajustes) las etiquetas no caben con el ancho mínimo de 76 px junto a la
   lupa en un teléfono de 320 px. Aquí cada pestaña se mide por su texto y
   la etiqueta se recorta con puntos suspensivos antes de desbordar.
*/
.app-tabbar--compact {
    gap: 0.15rem;
    padding: 0.4rem 0.35rem;
}
.app-tabbar--compact .app-tabbar__item {
    min-width: 0;
    padding: 0.45rem 0.25rem;
    font-size: 0.7rem;
}
.app-tabbar--compact .app-tabbar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
   En cuanto la pantalla da más de 360 px, la barra respira: las pestañas no
   van pegadas unas a otras ni pegadas a la lupa. Por debajo de ese ancho se
   queda con las medidas justas, que son las que caben en el teléfono más
   pequeño que todavía se usa (a 320 px el grupo entero mide 295 px).
*/
@media (min-width: 360px) {
    .app-tabbar--compact {
        gap: 0.4rem;
        padding: 0.45rem 0.5rem;
    }
    .app-tabbar--compact .app-tabbar__item {
        padding: 0.5rem 0.45rem;
    }
}

/* ==========================================================================
   Lupa de la búsqueda global
   Su propio círculo, con el mismo vidrio que la barra: comparte el
   lenguaje visual del menú, pero es una pieza aparte (por eso no lleva
   texto).
   ========================================================================== */
.app-nav-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    /* El mismo alto que los botones del menú (24 de ícono + 2 de separación
       + la etiqueta + el padding), para que no se vea chiquito al lado. */
    width: 54px;
    height: 54px;
    border-radius: 999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: var(--c-brand);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s ease-out, background 0.15s ease-out;
}
.app-nav-search:hover { text-decoration: none; }
.app-nav-search:active { transform: scale(0.94); }
.app-nav-search.is-active {
    background: var(--c-brand-50);
    color: var(--c-brand);
}

/* ==========================================================================
   Encabezado flotante (glassmorphism)

   Es la barra superior de TODA pantalla de la app: título (o campo
   editable), botón de volver y las acciones que pida la vista. Va fija
   arriba del cuerpo; el shell deja el hueco para que nada quede tapado.
   ========================================================================== */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 55;
    padding: calc(env(safe-area-inset-top, 0px) + 0.6rem) 0.75rem 0;
    /* El header es transparente: solo la barra de dentro recibe toques. */
    pointer-events: none;
}

.app-header__bar {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: var(--s-2);
    max-width: var(--max-w);
    min-height: 52px;
    margin: 0 auto;
    padding: 0.3rem 0.45rem 0.3rem 0.85rem;
    border-radius: 999px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

.app-header__titles {
    flex: 1;
    min-width: 0;
}

.app-header__title {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* El título puede ser un campo editable (el editor de páginas). */
.app-header__title--field {
    display: block;
    width: 100%;
    padding: 0.1rem 0.25rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-text);
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
}
.app-header__title--field:focus {
    outline: 2px solid var(--c-brand);
    outline-offset: 1px;
}

.app-header__subtitle {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-header__actions {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}

/* El menú de opciones cuelga del botón de tres puntitos. */
.app-header__menu {
    position: relative;
    display: flex;
}

.app-header__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: var(--c-text);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, transform 0.1s ease-out;
}
.app-header__btn:hover { background: var(--header-hover); }
.app-header__btn:active { transform: scale(0.94); }
.app-header__btn--primary {
    background: var(--c-brand-600);
    color: #fff;
}
.app-header__btn--primary:hover { background: var(--c-brand-700); }

/* ==========================================================================
   Menú flotante de opciones (cuelga del encabezado)
   ========================================================================== */
.app-menu {
    position: absolute;
    top: calc(100% + 0.5rem);
    right: 0;
    z-index: 70;
    min-width: 12rem;
    padding: 0.3rem;
    border-radius: var(--radius-sm);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    box-shadow: var(--shadow-pop);
}
.app-menu[hidden] { display: none; }

.app-menu__item {
    display: block;
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--c-text);
    font-family: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.app-menu__item:hover { background: var(--c-bg-soft); }
.app-menu__item--danger { color: var(--c-danger); }

/* ==========================================================================
   Banda del gesto de borde (Fase 26)
   ==========================================================================
   La señal visual del arrastre desde la orilla izquierda: una banda de vidrio
   que entra desde el borde y crece con el dedo. Va fija sobre el contenido
   pero por debajo del encabezado, el menú, la hoja y el aviso flotante, y
   nunca recibe toques: solo informa.
   ========================================================================== */
.gesto-borde {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--gesto-borde-px, 0px);
    z-index: 50;
    pointer-events: none;
    opacity: 0;
    background: linear-gradient(90deg, var(--c-brand-50) 0%, transparent 100%);
    border-right: 2px solid var(--c-brand);
    box-shadow: var(--glass-shadow);
    transition: opacity 0.15s ease-out;
}
.gesto-borde.is-active { opacity: 1; }

/* ==========================================================================
   Card + page header
   ========================================================================== */
.card {
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    padding: var(--s-4);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--s-4);
}
.card.placeholder { text-align: center; padding: var(--s-8) var(--s-4); }
.card.placeholder h2 { font-size: 1.75rem; margin-bottom: var(--s-3); }

/* ==========================================================================
   Subtítulo de una página (el que va bajo el título en el cuerpo)
   ========================================================================== */
.page__subtitle {
    margin: 0;
    color: var(--c-text-muted);
    font-size: 0.85rem;
}

/* ==========================================================================
   Botones
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    background: var(--c-brand-600);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 1rem;
    transition: background 0.15s ease, transform 0.05s ease;
    text-decoration: none;
}
.btn:hover { background: var(--c-brand-700); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn--block { width: 100%; }
.btn--ghost { background: transparent; color: var(--c-brand); border-color: var(--c-brand); }
.btn--ghost:hover { background: var(--c-brand-50); }
.btn--danger { background: var(--c-danger); }
.btn--danger:hover { background: #b91c1c; }
.btn--sm { padding: 0.5rem 0.75rem; font-size: 0.875rem; }

/* ==========================================================================
   Formularios
   ========================================================================== */
.field { margin-bottom: var(--s-4); }
.field__label {
    display: block;
    margin-bottom: var(--s-1);
    color: var(--c-text-muted);
    font-size: 0.875rem;
    font-weight: 600;
}
.field__input,
.field__textarea,
.field__select {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 1rem;
    font-family: inherit;
}
.field__input:focus,
.field__textarea:focus,
.field__select:focus {
    outline: 2px solid var(--c-brand);
    outline-offset: 1px;
    border-color: var(--c-brand);
}
.field__hint {
    margin: var(--s-1) 0 0;
    font-size: 0.78rem;
    color: var(--c-text-muted);
}
.field__error {
    color: var(--c-danger);
    font-size: 0.875rem;
    margin-top: var(--s-1);
}
/* Estado de algo que decide el navegador (el permiso de notificaciones):
   el texto lo pone el JS, así que el estilo es el de un aviso. */
.settings__status {
    margin: 0;
    padding: var(--s-3);
    border-radius: var(--radius-sm);
    background: var(--c-bg-soft);
    border: 1px solid var(--c-border);
    font-size: 0.9rem;
    color: var(--c-text);
}

/* ==========================================================================
   Flash / toast
   ========================================================================== */
.flash {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--radius-sm);
    margin-bottom: var(--s-4);
    font-size: 0.95rem;
}
.flash--error   { background: #fef2f2; color: var(--c-danger);  border: 1px solid #fecaca; }
.flash--success { background: #ecfdf5; color: var(--c-success); border: 1px solid #bbf7d0; }
.flash--info    { background: var(--c-brand-50); color: var(--c-brand-soft); border: 1px solid #c7d2fe; }

/* ==========================================================================
   Hero (home pública)
   ========================================================================== */
.hero {
    padding: var(--s-12) var(--s-4);
    text-align: center;
}
.hero h1 { font-size: 2rem; }
.hero p  { color: var(--c-text-muted); font-size: 1.05rem; }
.hero__cta {
    margin-top: var(--s-6);
    display: flex;
    gap: var(--s-3);
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   Auth (login / registro)
   ========================================================================== */
.auth-card {
    max-width: 380px;
    margin: var(--s-12) auto;
    padding: var(--s-6);
    background: var(--c-bg-card);
    border: 1px solid var(--c-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-pop);
}

/* ==========================================================================
   Guest nav (header del layout público)
   ========================================================================== */
.guest-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--s-3) var(--s-4);
    gap: var(--s-3);
}
.guest-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 700;
    color: var(--c-text);
    text-decoration: none;
}
.guest-nav__brand:hover { text-decoration: none; }
.guest-nav__brand-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 999px;
    background: var(--c-brand);
}
.guest-nav__links {
    display: flex;
    gap: var(--s-2);
    flex-wrap: wrap;
    align-items: center;
}
.guest-nav__links a {
    padding: 0.4rem 0.7rem;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--c-text);
}
.guest-nav__links a:hover { background: var(--c-bg-soft); }

/* ==========================================================================
   Hoja inferior (sheet) — patrón reutilizable
   Componente genérico: lo usan las pantallas que necesitan pedir un dato
   sin salir de donde están (alta de tarea, alta de página, acciones).
   ========================================================================== */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 80;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
.sheet[hidden] { display: none; }

/* Con una hoja abierta el fondo no debe hacer scroll detrás. */
body.is-sheet-open { overflow: hidden; }

.sheet__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    animation: sheet-fade 0.2s ease-out;
}

.sheet__panel {
    position: relative;
    width: min(520px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--c-bg-card);
    border-radius: var(--radius) var(--radius) 0 0;
    box-shadow: var(--shadow-pop);
    padding: var(--s-4);
    padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0px));
    animation: sheet-up 0.22s ease-out;
}

.sheet__head {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}
.sheet__title {
    margin: 0;
    font-size: 1.05rem;
    flex: 1;
    overflow-wrap: anywhere;
}
.sheet__close {
    appearance: none;
    border: 0;
    background: var(--c-bg-soft);
    color: var(--c-text-muted);
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
}
.sheet__hint {
    margin: 0 0 var(--s-2);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--c-text-muted);
}
.sheet__actions {
    display: flex;
    flex-direction: column;
    gap: var(--s-2);
    margin-bottom: var(--s-4);
}
/* Un bloque con su propio contenido dentro de la hoja (un formulario, un
   aviso). Va separado del resto de las acciones. */
.sheet__block {
    padding-top: var(--s-3);
    border-top: 1px solid var(--c-border);
    margin-bottom: var(--s-4);
}
.sheet__block .sheet__actions { margin-bottom: 0; }
.sheet__action {
    appearance: none;
    width: 100%;
    text-align: left;
    padding: 0.8rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--c-border);
    background: var(--c-bg);
    color: var(--c-text);
    font: inherit;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sheet__action:active { background: var(--c-bg-soft); }
.sheet__action--danger {
    color: var(--c-danger);
    border-color: var(--c-danger);
    background: transparent;
}
.sheet__error {
    margin: 0 0 var(--s-3);
    color: var(--c-danger);
    font-size: 0.875rem;
}

@keyframes sheet-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes sheet-up {
    from { transform: translateY(12%); }
    to   { transform: translateY(0); }
}

/* ==========================================================================
   Control segmentado

   Un control con estados se queda en su sitio y lo que cambia es el color:
   la opción elegida se pinta con el índigo de la marca. El botón real es un
   radio escondido (para que el teclado y los lectores de pantalla lo
   traten como un grupo), y la etiqueta es lo que se ve y lo que se toca.

   Vive aquí y no en la hoja de Ajustes porque lo usan dos pantallas: el
   tema (claro / oscuro / sistema) y el tipo de una carpeta inteligente
   (páginas / tareas). Igual que la hoja y el aviso flotante, es un
   componente de la app, no de una pantalla.
   ========================================================================== */

.segmento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.25rem;
    margin: 0;
    padding: 0.25rem;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg);
    -webkit-backdrop-filter: var(--glass-blur);
    backdrop-filter: var(--glass-blur);
    box-shadow: var(--glass-shadow);
}

/* Con dos opciones en vez de tres (el tipo de la carpeta). */
.segmento--dos { grid-template-columns: repeat(2, 1fr); }

.segmento__opcion {
    position: relative;
    display: block;
    min-width: 0;
}

/* El radio real se esconde pero sigue siendo el que lleva el foco. */
.segmento__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Un radio deshabilitado (el tipo de una carpeta no cambia): su etiqueta
   se ve, pero no se toca. */
.segmento__input:disabled + .segmento__texto {
    opacity: 0.6;
    cursor: default;
}

.segmento__texto {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 2.75rem;
    padding: 0 var(--s-2);
    border-radius: var(--radius-sm);
    color: var(--c-text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.15s ease-out, color 0.15s ease-out;
}

.segmento__icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* La opción elegida: el índigo de la marca, con el texto encima. */
.segmento__input:checked + .segmento__texto {
    background: var(--c-brand-600);
    color: #fff;
}

.segmento__input:focus-visible + .segmento__texto {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

/* ==========================================================================
   Aviso flotante (toast)
   ========================================================================== */
.toast {
    position: fixed;
    left: 50%;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 5.5rem);
    transform: translateX(-50%);
    z-index: 90;
    max-width: calc(100% - 2rem);
    padding: 0.65rem 1rem;
    border-radius: 999px;
    background: var(--c-text);
    color: var(--c-bg);
    font-size: 0.88rem;
    font-weight: 600;
    text-align: center;
    box-shadow: var(--shadow-pop);
}
.toast[hidden] { display: none; }
.toast.is-error {
    background: var(--c-danger);
    color: #fff;
}

/* ==========================================================================
   Utilidades
   ========================================================================== */
.muted { color: var(--c-text-muted); }
.center { text-align: center; }
.stack > * + * { margin-top: var(--s-3); }
.stack--lg > * + * { margin-top: var(--s-6); }
.row { display: flex; gap: var(--s-3); flex-wrap: wrap; align-items: center; }
.spacer { flex: 1; }

/* Solo para lectores de pantalla. */
.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;
}

/* ==========================================================================
   Respeta a quien pidió menos movimiento
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .sheet__backdrop,
    .sheet__panel { animation: none; }
    .gesto-borde { transition: none; }
}

/* ==========================================================================
   Tema oscuro (variables + glass + flashes)
   ==========================================================================
   Reglas:
     1. `:root[data-theme="dark"]`        → forzado oscuro, gana por especificidad.
     2. `@media prefers-color-scheme:dark { :root:not([data-theme="light"]) }`
                                          → cubre 'system' y 'dark' a la vez.
     3. No hace falta regla para `data-theme="light"` — el `:not()` ya
        evita que estas variables se apliquen si el usuario eligió Claro.
   4. `data-theme="system"` no tiene reglas propias: el `:not()` de arriba
      lo cubre, y añadirle las suyas rompería el orden de la cascada.

   La marca se parte en dos: `--c-brand` es el color del TEXTO (y de los
   iconos), y `--c-brand-600` el del FONDO de un botón, que lleva texto
   blanco encima. En oscuro el texto necesita ser más claro (#818cf8) que
   en claro (#4f46e5), y el botón se queda en el índigo que ya aguanta
   el blanco. Por eso no son la misma variable.
   ========================================================================== */
:root[data-theme="dark"] {
    --c-brand:      #818cf8;
    --c-brand-50:   #1e1b4b;
    --c-brand-600:  #4f46e5;
    --c-brand-700:  #4338ca;
    --c-brand-soft: #c7d2fe;
    --c-bg:         #0b1020;
    --c-bg-soft:    #111935;
    --c-bg-card:    #1a234a;
    --c-border:     #1f2a55;
    --c-text:       #e5e7eb;
    --c-text-muted: #94a3b8;
    --glass-bg:     rgba(11, 16, 32, 0.72);
    --glass-border: rgba(31, 42, 85, 0.6);
    --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --c-hover:      rgba(255, 255, 255, 0.10);
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --c-brand:      #818cf8;
        --c-brand-50:   #1e1b4b;
        --c-brand-600:  #4f46e5;
        --c-brand-700:  #4338ca;
        --c-brand-soft: #c7d2fe;
        --c-bg:         #0b1020;
        --c-bg-soft:    #111935;
        --c-bg-card:    #1a234a;
        --c-border:     #1f2a55;
        --c-text:       #e5e7eb;
        --c-text-muted: #94a3b8;
        --glass-bg:     rgba(11, 16, 32, 0.72);
        --glass-border: rgba(31, 42, 85, 0.6);
        --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
        --c-hover:      rgba(255, 255, 255, 0.10);
    }
}
:root[data-theme="dark"] .flash--error   { background: #2a0e0e; border-color: #5a1d1d; }
:root[data-theme="dark"] .flash--success { background: #062c20; border-color: #115e44; }
:root[data-theme="dark"] .flash--info    { border-color: #312e81; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .flash--error   { background: #2a0e0e; border-color: #5a1d1d; }
    :root:not([data-theme="light"]) .flash--success { background: #062c20; border-color: #115e44; }
    :root:not([data-theme="light"]) .flash--info    { border-color: #312e81; }
}