/* Estructura de la página (tarea 12): cabecera con la navegación en dos grupos, barra inferior en
   móvil, encabezado de cada sección y botones base. Los colores salen de las variables de styles.css. */

/* Lo oculto con el atributo hidden no se ve aunque una regla de estas hojas le dé display. */
[hidden]{display:none!important}
body{font-size:15px;line-height:1.5;background:var(--bg)}
.skip{position:fixed;top:-80px;left:12px;z-index:100;background:var(--paper);color:var(--ink);padding:12px 16px;border-radius:8px}
.skip:focus{top:12px}

/* Botones base: altura táctil de 44 px y texto legible en todas las secciones. */
.button{min-height:44px;font-size:15px;padding:0 18px;border-radius:8px;line-height:1.2;text-align:center}
.button.secondary{background:transparent;border:1px solid #3a4a5e;color:var(--ink)}
.button:hover{filter:brightness(1.08)}
.button svg{width:18px;height:18px}
.text-btn{font-size:14px;min-height:44px;padding:0 6px;color:var(--gold-soft)}
.text-btn:disabled{color:var(--muted)}
.icon-btn{min-width:44px;min-height:44px;color:var(--ink-soft)}
.danger-text{color:#ef9478}

/* Cabecera: marca, campaña activa con su «hoy», idioma y «Nueva ficha»; debajo, la navegación. */
.app-header{position:sticky;top:0;z-index:30;background:var(--side);border-bottom:1px solid #e2a23b2e}
.header-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;padding:10px 28px}
.brand{display:flex;align-items:center;gap:10px;color:var(--gold-soft);text-decoration:none;font-family:var(--font-display);font-size:26px;line-height:1;margin-right:auto}
.brand-mark{width:34px;height:34px}
.header-tools{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.campaign-switch{display:flex;align-items:center;gap:8px;font-size:14px;color:#a9b4be}
.campaign-switch select{height:44px;max-width:260px;background:var(--paper);color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:0 10px;font-weight:600;font-size:15px}
.today-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:8px;background:#e2a23b1f;color:var(--gold-soft);font-size:14px;text-align:left}
.today-chip:hover{background:#e2a23b33}
.language-switch{display:flex;align-items:center;gap:2px;color:var(--muted)}
.language-switch button{min-width:44px;min-height:44px;border-radius:8px;font-size:14px;font-weight:700;color:var(--ink-soft)}
.language-switch button[aria-pressed="true"]{color:var(--gold-soft);background:#e2a23b1f}
.main-nav{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:0 20px 6px}
.nav-group-label{font-family:var(--font-label);font-size:12px;letter-spacing:.08em;text-transform:lowercase;color:#a9b4be;padding:0 8px}
.nav-divider{width:1px;height:24px;background:var(--line);margin:0 10px}
.nav-item{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--ink-soft);font-size:15px;font-weight:500;white-space:nowrap}
.nav-item:hover{color:var(--ink);background:#ffffff0a}
.nav-item.active{color:var(--gold-soft);background:#e2a23b1f;box-shadow:inset 0 -3px 0 var(--gold)}
.small-count{font-size:12px;color:var(--muted);min-width:18px;text-align:center}
.nav-item.active .small-count{color:var(--gold-soft)}

/* Contenido: un solo ancho máximo para todas las secciones. */
main{max-width:1400px;margin:0 auto;padding:24px 28px 48px;box-sizing:border-box;outline:0}
.storage-note{margin:0 0 16px;padding:12px 16px;border-radius:8px;background:var(--paper);border:1px solid var(--line);font-size:14px;color:var(--ink-soft)}
/* El aviso normal solo se ve en «Fichas propias»; los de riesgo, en todas las secciones. */
.storage-note:not(.storage-warning){display:none}
body[data-page="campaign"] .storage-note{display:block}
.storage-note.storage-warning{border-color:#ef947866;background:#d06a4c1f;color:#f3c6b6}
.workspace-heading{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;margin-bottom:20px}
.workspace-heading h1{margin:0;font-family:var(--font-display);font-weight:400;font-size:40px;line-height:1.1;color:var(--gold-soft)}
.view-description{margin:6px 0 0;max-width:720px;font-size:16px;color:var(--ink-soft)}
.page-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.footer{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:13px;color:var(--muted)}
.footer>span{font-family:var(--font-label);letter-spacing:.1em;color:var(--ink-soft)}
.footer p{flex:1 1 360px;margin:0}

/* Barra inferior: solo en pantallas chicas. */
.bottom-nav{display:none}
.filter-open,.filter-close,.filter-apply{display:none}

/* Mesa: pantalla completa (tarea 08); sin cabecera, navegación ni explorador. */
body.table-mode .app-header,body.table-mode .workspace,body.table-mode .bottom-nav,body.table-mode .filter-open,body.table-mode .storage-note:not(.storage-warning){display:none!important}
body.table-mode main{max-width:none;padding:0}

@media(max-width:760px){
 .header-bar{padding:8px 16px;gap:8px}
 .brand{font-size:20px}
 .brand span{display:none}
 /* La cabecera no queda fija en móvil: la barra inferior ya da la navegación y así se gana alto. */
 .app-header{position:static}
 .brand{margin-right:0}
 .header-tools{flex:1 1 0;min-width:0;justify-content:flex-end;gap:6px}
 .campaign-switch label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
 .campaign-switch select{max-width:150px}
 .campaign-switch .text-btn,#new-record{display:none}
 .today-chip{order:3;flex:1 1 100%;justify-content:center}
 .language-switch{order:2}
 /* Arriba quedan solo las secciones del grupo elegido en la barra inferior. */
 .main-nav{flex-wrap:nowrap;overflow-x:auto;padding:0 8px 4px;scrollbar-width:none}
 .main-nav .nav-group-label,.main-nav .nav-divider{display:none}
 .main-nav[data-group="archive"] .nav-item:not([data-group="archive"]),.main-nav[data-group="campaign"] .nav-item:not([data-group="campaign"]),.main-nav[data-group="saved"] .nav-item,.main-nav[data-group="table"] .nav-item{display:none}
 .main-nav[data-group="saved"],.main-nav[data-group="table"]{display:none}
 main{padding:16px 16px 140px}
 .workspace-heading h1{font-size:32px}
 .bottom-nav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--side);border-top:1px solid var(--line);padding:4px 6px calc(6px + env(safe-area-inset-bottom))}
 .bottom-nav button{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;font-size:12px;font-weight:500;color:#a9b4be}
 .bottom-nav button.active{color:var(--gold-soft)}
 .bottom-nav svg{width:22px;height:22px}
 .footer{margin-top:32px}
}
@media print{.app-header,.bottom-nav,.filter-open{display:none!important}}