/* Nutrialog app shell — design system "Organic" (claude.ai/design), aplicado
   fuera de la landing (que tiene su propia copia con reglas #landing en
   landing.css). Este fichero es global: sustituye Tailwind CDN en el layout
   autenticado (template.html) y en las páginas que ya se han migrado.
   Ver claude.md §3. */
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&display=swap');

:root {
    /* Paleta "Clínica" — sobria, letra Figtree en negrita para titulares,
       tarjetas de contorno (sin sombra) en vez de elevación. Ver claude.md §3
       y el proyecto de diseño "Nutrialog Landing Page Review" en claude.ai/design. */
    --color-bg: #f6f6f4;
    --color-surface: #e9ebe8;
    --color-text: #191d1c;
    --color-accent: #35766f;
    --color-accent-2: #a89360;
    --color-divider: color-mix(in srgb, #191d1c 15%, transparent);

    --color-neutral-100: #fafaf9;
    --color-neutral-200: #eeefed;
    --color-neutral-300: #dcdedb;
    --color-neutral-400: #bfc2be;
    --color-neutral-500: #a0a4a0;
    --color-neutral-600: #82867f;
    --color-neutral-700: #64685f;
    --color-neutral-800: #464a43;
    --color-neutral-900: #2c2f2a;

    --color-accent-100: #e8f4f2;
    --color-accent-200: #cfe8e4;
    --color-accent-300: #a6d2cc;
    --color-accent-400: #74b3ab;
    --color-accent-500: #4d948c;
    --color-accent-600: #35766f;
    --color-accent-700: #245852;
    --color-accent-800: #163b37;
    --color-accent-900: #0c2523;

    --color-accent-2-100: #f8f2e6;
    --color-accent-2-200: #f0e5cd;
    --color-accent-2-300: #ddcda6;
    --color-accent-2-400: #c4b07f;
    --color-accent-2-500: #a89360;
    --color-accent-2-600: #8a7649;
    --color-accent-2-700: #6a5936;
    --color-accent-2-800: #4a3d24;
    --color-accent-2-900: #2f2716;

    --font-heading: "Figtree", system-ui, sans-serif;
    --font-heading-weight: 700;
    --font-body: "Figtree", system-ui, sans-serif;

    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;

    /* "Contorno": las tarjetas llevan borde en vez de sombra — shadow-lg se
       deja intacto porque lo usan los modales/dropdowns, que sí necesitan
       elevación real por encima del contenido. */
    --shadow-sm: 0 0 0 1.5px var(--color-divider);
    --shadow-md: 0 0 0 1.5px var(--color-divider);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #191d1c 22%, transparent);
}

/* Reset ligero. Ojo: template.html es el layout de TODA la app autenticada,
   incluidas páginas que todavía no se han migrado a este sistema (siguen en
   Tailwind CDN, ver claude.md §3/§10) — por eso las reglas que reescriben
   tipografía de contenido (h1-h4, p, a) van bajo .organic-page, no bajo
   .app-shell: así solo se aplican a las páginas ya migradas y no rompen el
   espaciado/color de las que siguen con Tailwind. .app-shell en cambio sí es
   seguro globalmente: solo toca layout, fondo y la fuente de base. */
.app-shell, .app-shell * , .app-shell *::before, .app-shell *::after { box-sizing: border-box; }
.app-shell {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    display: flex;
}
.app-shell :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }

/* Tipografía de contenido — solo dentro de páginas ya migradas. */
.organic-page h1, .organic-page h2, .organic-page h3, .organic-page h4 {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.15;
    letter-spacing: -0.01em; margin: 0 0 6px;
}
.organic-page p { margin: 0 0 10px; }
.organic-page a { color: var(--color-accent); text-decoration: none; }
.organic-page a:hover { color: var(--color-accent-700); }

/* — botones — */
.app-shell .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    cursor: pointer; text-decoration: none; white-space: nowrap;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; line-height: 1.2;
    color: var(--color-text); background: transparent; border: 1.5px solid transparent;
    padding: 11px 22px; border-radius: 999px; transition: background 0.15s ease, transform 0.1s ease;
}
.app-shell .btn:active { transform: translateY(1px); }
.app-shell .btn:disabled { opacity: 0.5; cursor: not-allowed; }
.app-shell .btn-primary { background: var(--color-accent); color: var(--color-neutral-100); }
.app-shell .btn-primary:hover { background: var(--color-accent-600); color: var(--color-neutral-100); }
.app-shell .btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.app-shell .btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.app-shell .btn-ghost { color: var(--color-accent); border-color: transparent; padding-inline: 10px; }
.app-shell .btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.app-shell .btn-danger { color: #b3261e; border-color: color-mix(in srgb, #b3261e 35%, transparent); }
.app-shell .btn-danger:hover { background: color-mix(in srgb, #b3261e 8%, transparent); }
.app-shell .btn-icon { width: 40px; height: 40px; padding: 0; flex: none; }
.app-shell .btn-block { width: 100%; }
.app-shell .btn-sm { padding: 7px 14px; font-size: 13.5px; }

/* — inputs — */
.app-shell .field > label {
    display: block; font-size: 12.5px; margin-bottom: 6px;
    color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.app-shell .input, .app-shell select.input {
    width: 100%; min-height: 42px; padding: 8px 16px; font: inherit; font-size: 14.5px;
    color: var(--color-text); background: var(--color-neutral-100);
    border: 1px solid var(--color-divider); border-radius: 999px; appearance: none;
}
.app-shell .input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.app-shell .input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
.app-shell textarea.input { min-height: 90px; border-radius: var(--radius-md); resize: vertical; }
.app-shell .field-highlight {
    padding: 10px 12px; margin: -10px -12px; border-radius: var(--radius-md);
    background: var(--color-accent-2-100);
}

/* — tarjetas / tags — */
.app-shell .card { background: var(--color-surface); border-radius: calc(var(--radius-lg) * 1.1); }
.app-shell .elev-sm { box-shadow: var(--shadow-sm); }
.app-shell .elev-md { box-shadow: var(--shadow-md); }
.app-shell .elev-lg { box-shadow: var(--shadow-lg); }
.app-shell .tag {
    display: inline-flex; align-items: center; font-size: 12px; letter-spacing: 0.02em;
    padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.app-shell .tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.app-shell .tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.app-shell .tag-neutral { background: var(--color-neutral-200); color: var(--color-neutral-800); }
.app-shell .icon-badge {
    width: 40px; height: 40px; border-radius: 999px; flex: none;
    display: inline-flex; align-items: center; justify-content: center;
}
.app-shell .icon-badge svg { display: block; }

/* ══════════════ Estructura de la app (sidebar + main) ══════════════ */
.app-sidebar {
    width: 264px; flex: none; background: var(--color-surface);
    padding: 20px 16px; display: flex; flex-direction: column; gap: 22px;
    position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.app-sidebar-brand {
    display: flex; align-items: center; gap: 9px; font-family: var(--font-heading);
    font-weight: var(--font-heading-weight); font-size: 19px; padding: 4px 8px; color: var(--color-text);
}
.app-sidebar-brand:hover { color: var(--color-text); }
.app-sidebar-brand .icon-badge { background: var(--color-accent-2-500); }

.app-nav { display: grid; gap: 3px; }
.app-nav a {
    display: flex; align-items: center; gap: 12px; padding: 11px 14px;
    border-radius: 999px; font-size: 15px; color: var(--color-text); font-weight: 500;
}
.app-nav a:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.app-nav a svg { flex: none; }
.app-nav a[aria-current="page"] { background: var(--color-accent); color: var(--color-neutral-100); }
.app-nav a[aria-current="page"]:hover { background: var(--color-accent); color: var(--color-neutral-100); }
.app-nav a.disabled { color: var(--color-text-muted, #9ca3af); opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.app-nav a.disabled:hover { background: none; }

.app-sidebar-cta {
    margin-top: auto; border-radius: 22px; background: var(--color-accent-2-100); padding: 16px;
}
.app-sidebar-cta p { font-size: 13px; margin: 0 0 4px; color: var(--color-accent-2-900); }
.app-sidebar-cta .app-sidebar-cta-title { font-family: var(--font-heading); font-size: 15px; margin: 0 0 4px; }
.app-sidebar-cta .btn-secondary { width: 100%; border-color: var(--color-accent-2-400); color: var(--color-accent-2-900); }

.app-sidebar-pro {
    margin-top: auto; border-radius: 22px; background: var(--color-neutral-900); color: var(--color-neutral-100);
    padding: 16px; display: flex; align-items: center; gap: 12px;
}
.app-sidebar-pro:hover { color: var(--color-neutral-100); background: var(--color-accent-900); }
.app-sidebar-pro svg { flex: none; color: var(--color-accent-400); }

.app-main-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
#main-content { flex: 1 0 auto; }

.app-topbar {
    display: flex; align-items: center; gap: 16px; padding: 22px 40px;
    border-bottom: 1px solid var(--color-divider);
    position: sticky; top: 0; z-index: 30; background: var(--color-bg);
}
.app-topbar-hamburger { display: inline-flex; }
.app-topbar-titles { margin-right: auto; min-width: 0; }
.app-topbar-titles .kicker {
    font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin: 0 0 3px;
}
.app-topbar-titles h1 {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.15;
    letter-spacing: -0.01em; margin: 0; font-size: 24px;
}

.app-topbar-avatar {
    width: 38px; height: 38px; border-radius: 999px; background: var(--color-accent-2-500);
    color: var(--color-bg); display: inline-flex; align-items: center; justify-content: center;
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 15px; border: 0; cursor: pointer; flex: none;
}

.app-content { padding: 32px 40px 64px; width: 100%; }

.app-footer {
    border-top: 1px solid var(--color-divider); padding: 18px 40px 28px;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 24px;
    font-size: 13px; position: relative;
}
.app-footer .app-footer-version { position: absolute; left: 40px; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.app-footer a { color: var(--color-text); }
.app-footer a:hover { color: var(--color-accent); }

/* — dropdowns (notificaciones / usuario) — */
.app-dropdown { position: relative; }
.app-dropdown-panel {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 50;
    background: var(--color-neutral-100); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg); overflow: hidden;
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.app-dropdown-panel.active { opacity: 1; visibility: visible; transform: translateY(0); }
#notification-dropdown { width: 340px; }
.app-dropdown-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--color-divider); background: var(--color-surface);
}
.app-dropdown-header h3 { font-size: 14px; font-family: var(--font-body); font-weight: 600; margin: 0; }
.app-notification-list { max-height: 300px; overflow-y: auto; }
.app-notification-item {
    display: block; padding: 13px 18px; border-bottom: 1px solid var(--color-divider);
    color: var(--color-text); position: relative;
}
.app-notification-item:last-child { border-bottom: 0; }
.app-notification-item:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); color: var(--color-text); }
.app-notification-item.unread { background: var(--color-accent-100); }
.app-notification-item .msg { font-size: 13.5px; margin: 0; }
.app-notification-item .meta { font-size: 11.5px; margin: 3px 0 0; color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.app-notification-empty { padding: 26px 18px; text-align: center; font-size: 13.5px; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.app-dropdown-footer { padding: 10px 12px; border-top: 1px solid var(--color-divider); display: grid; gap: 2px; }
.app-menu-item {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    padding: 10px 14px; border-radius: 999px; font: inherit; font-size: 13.5px;
    color: var(--color-text); background: transparent; border: 0; cursor: pointer; text-decoration: none;
}
.app-menu-item:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.app-menu-item.danger { color: #b3261e; }
.app-menu-item.danger:hover { background: color-mix(in srgb, #b3261e 8%, transparent); }

.app-user-panel { width: 220px; }
.app-user-panel-head { padding: 14px 18px; border-bottom: 1px solid var(--color-divider); }
.app-user-panel-head p:first-child { font-family: var(--font-heading); font-size: 15px; }
.app-user-panel-head p:last-child { font-size: 12.5px; margin-top: 2px; }
.app-user-panel a, .app-user-panel button {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 18px;
    font: inherit; font-size: 14px; color: var(--color-text); background: transparent; border: 0; cursor: pointer; text-align: left;
}
.app-user-panel a:hover, .app-user-panel button:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); }
.app-user-panel .danger { color: #b3261e; }
.app-user-panel .danger:hover { background: color-mix(in srgb, #b3261e 8%, transparent); }

/* — modal genérico (usado por "Vincular consulta", "¿Eres nutricionista?", etc.) — */
.app-modal-backdrop {
    position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: color-mix(in srgb, var(--color-neutral-900) 55%, transparent);
}
.app-modal { width: min(420px, 100%); background: var(--color-neutral-100); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 28px; }
.app-modal h3 {
    font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.15;
    font-size: 21px; margin: 0 0 8px;
}
.app-modal p { font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin-bottom: 4px; }
.app-modal .app-modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.app-modal .app-modal-actions .btn { flex: 1; }

/* — asistente de bienvenida (onboarding, ver template.html + onboarding.js) — */
.ob-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; background: var(--color-neutral-300); transition: background 0.2s ease; }

/* — mobile — */
@media (max-width: 1023px) {
    .app-sidebar {
        position: fixed; inset: 0 auto 0 0; z-index: 45; width: 280px; height: 100vh;
        transform: translateX(-100%); transition: transform 0.28s ease; box-shadow: var(--shadow-lg);
    }
    .app-sidebar.mobile-open { transform: translateX(0); }
    .app-topbar { padding: 18px 18px; gap: 12px; }
    .app-topbar-titles h1 { font-size: 19px; }
    .app-content { padding: 22px 18px 48px; }
    .app-footer { padding: 16px 18px 24px; justify-content: center; }
    .app-footer .app-footer-version { position: static; width: 100%; text-align: center; order: 2; }
    #notification-dropdown { width: min(88vw, 340px); }
}

/* — colapso del sidebar en desktop (mismo botón hamburguesa que en móvil) — */
@media (min-width: 1024px) {
    .app-sidebar.collapsed { display: none; }
}
.app-sidebar-backdrop {
    position: fixed; inset: 0; z-index: 40; background: color-mix(in srgb, var(--color-neutral-900) 45%, transparent);
    opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s;
}
.app-sidebar-backdrop.active { opacity: 1; visibility: visible; }
@media (min-width: 1024px) {
    .app-sidebar-backdrop { display: none; }
}