/* Reset, layout del shell, tab bar y safe areas. Componentes van en componentes.css. */

*,*::before,*::after{ box-sizing:border-box; }
html,body,h1,h2,h3,p,ul,ol,li,figure{ margin:0; padding:0; }
ul,ol{ list-style:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:inherit; text-decoration:none; }
[hidden]{ display:none !important; }

html{ -webkit-text-size-adjust:100%; }

body{
  font-family:var(--fuente);
  font-size:15px;
  line-height:1.45;
  color:var(--fg);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  /* Sin rebote elástico raro dentro de la PWA */
  overscroll-behavior-y:none;
}

/* Nada depende de :hover — esto es para dedos, no para mouse. */
@media (hover:none){ *{ -webkit-tap-highlight-color:transparent; } }

/* ------------------------------------------------------------ cabecera --- */
.cabecera{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
  padding:env(safe-area-inset-top) var(--sep) 0;
  min-height:calc(var(--alto-cabecera) + env(safe-area-inset-top));
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.cabecera h1{
  font-size:19px; font-weight:650; letter-spacing:-0.02em;
  padding-block:14px;
}
.cabecera-acciones{ display:flex; align-items:center; gap:4px; }

/* ---------------------------------------------------------------- vista --- */
.vista{
  padding:var(--sep);
  /* espacio para la tab bar fija + el notch de abajo */
  padding-bottom:calc(var(--alto-tab) + env(safe-area-inset-bottom) + 28px);
  max-width:640px; margin-inline:auto;
}

/* -------------------------------------------------------------- tab bar --- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:20;
  display:grid; grid-template-columns:repeat(5,1fr);
  padding-bottom:env(safe-area-inset-bottom);
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:saturate(180%) blur(12px);
  border-top:1px solid var(--line);
}
.tab{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px;
  min-height:var(--alto-tab);
  text-decoration:none; color:var(--fg-3);
  font-size:10.5px; letter-spacing:-0.01em;
  transition:color var(--transicion);
}
.tab[aria-current="page"]{ color:var(--fg); }
.tab svg{ display:block; }

/* ------------------------------------------------------------------ fab --- */
.fab{
  position:fixed; right:var(--sep); z-index:21;
  bottom:calc(var(--alto-tab) + env(safe-area-inset-bottom) + 14px);
  width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center;
  background:var(--fg); color:var(--bg);
  border:none; cursor:pointer;
  box-shadow:0 2px 10px rgb(0 0 0 / 0.16);
  transition:transform var(--transicion), opacity var(--transicion);
}
.fab:active{ transform:scale(0.94); }

/* ---------------------------------------------------------------- login --- */
.login{
  min-height:100dvh;
  display:flex; flex-direction:column; justify-content:center;
  gap:22px;
  padding:calc(env(safe-area-inset-top) + 32px) 24px calc(env(safe-area-inset-bottom) + 32px);
  max-width:400px; margin-inline:auto;
}
.login-marca{ display:flex; flex-direction:column; gap:6px; }
.login-marca h1{ font-size:26px; font-weight:680; letter-spacing:-0.03em; }
.login form{ display:flex; flex-direction:column; gap:12px; }

/* ---------------------------------------------------------- utilidades --- */
.pila{ display:flex; flex-direction:column; gap:var(--sep); }
.pila-sm{ display:flex; flex-direction:column; gap:8px; }
.fila{ display:flex; align-items:center; gap:10px; }
.fila-entre{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.crece{ flex:1; min-width:0; }
.truncar{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seccion-titulo{
  font-size:12px; font-weight:600; text-transform:uppercase;
  letter-spacing:0.05em; color:var(--fg-3);
  margin-bottom:8px;
}

/* El botón volver vive a la izquierda del título, no a la derecha. */
.icono-btn-izq{ margin-right:0; margin-left:-10px; }