/* ──────────────────────────────────────────────────────────────
   Λ U R Ø — layout.css
   Estructura principal: contenedor, header, listado, footer y splash.
   Las variaciones por breakpoint viven en responsive.css.
   ────────────────────────────────────────────────────────────── */

/* ── Layout responsive (móvil por defecto) ── */
#app{
  max-width:480px;
  margin:0 auto;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  position:relative;
}

/* Cabecera fija: header + barra de totales siempre visibles al scrollear */
.top-stack{
  position:sticky;top:0;z-index:10;
  background:var(--bg);
}

/* ── Header ── */
header{
  padding:20px 10px 10px;
  /* Respeta la barra de estado del sistema (móvil/PWA standalone/Capacitor).
     En navegador normal env() vale 0px y no cambia nada. */
  padding-top:calc(20px + env(safe-area-inset-top));
  background:var(--bg);
  border-bottom:1px solid var(--border);
}
.header-row{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.header-left{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.app-title{font-family:'DM Sans',sans-serif;font-size:26px;font-weight:900;letter-spacing:-.5px;line-height:1}
.app-title em{color:var(--text-muted);font-style:normal}
/* Indicador del archivo vinculado, justo debajo del título */
.file-indicator{
  display:flex;align-items:center;gap:5px;
  margin-top:5px;font-size:11px;color:var(--text-muted);
  max-width:480px;
}
.file-label{flex-shrink:0;color:var(--text-muted)}
.file-name{
  font-family:'JetBrains Mono',monospace;font-size:11px;
  color:var(--text);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  flex:0 1 auto;min-width:0;
}
.header-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}

/* ── Listado de asientos y estado vacío ── */
.entries{flex:1;padding:14px 10px 30px;display:flex;flex-direction:column;gap:10px}
/* En modo selección, dejar espacio inferior para que la barra flotante no tape la última tarjeta */
body.selecting .entries{padding-bottom:80px}
.empty{
  flex:1;
  display:flex;flex-direction:column;
  justify-content:center;align-items:center;
  padding:0 20px;
  text-align:center;
  color:var(--text-muted);
}
.empty-icon{font-size:44px;margin-bottom:14px}
.empty-title{font-family:'DM Sans',sans-serif;font-size:20px;color:var(--text);margin-bottom:6px}
.empty-sub{font-size:14px;line-height:1.6}

/* ── Footer fijo (botones + versión) ── */
/* Sticky bottom:0 lo mantiene pegado al borde inferior del viewport mientras se hace scroll,
   pero al estar contenido dentro de #app respeta su max-width en desktop (sin desbordamientos). */
#app-footer-fixed{
  position:sticky;bottom:0;z-index:10;
  background:var(--bg);
  border-top:1px solid var(--border);
  padding:8px 10px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:6px;
  width:100%;
}
/* Fila horizontal con los 3 botones del footer */
.footer-row{
  display:flex;gap:10px;justify-content:center;align-items:center;
}
.footer-btn{
  flex:1;height:36px;border-radius:8px;
  background:var(--surface);border:1px solid var(--border);
  color:var(--text);cursor:pointer;
  font-size:12px;font-weight:500;
  transition:all .15s ease;
}
.footer-btn:hover:not(:disabled){
  border-color:var(--border-hi);background:var(--surface2);
}
.footer-btn:active:not(:disabled){transform:scale(.97)}
.footer-btn:disabled{
  opacity:.4;cursor:not-allowed;
}

/* Pie discreto con versión y copyright (anidado dentro del footer fijo,
   debajo de los botones). Usa --text-muted (el mismo gris apagado de los
   elementos inactivos) por ser la metainformación menos relevante de la
   pantalla; debe pasar desapercibida. NO usar opacity encima: el color ya
   da el efecto discreto. */
.app-footer{
  text-align:center;padding:0;
  font-size:10px;color:var(--text-muted);
  font-family:'JetBrains Mono',monospace;letter-spacing:.5px;
}
.app-footer span{cursor:pointer}
.app-footer span:hover{opacity:.8;text-decoration:underline}
/* Enlace al autor: hereda el aspecto discreto del footer.
   No usa el color azul de enlace por defecto. */
.app-footer .author-link{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.app-footer .author-link:hover{
  opacity:.8;
  text-decoration:underline;
}

/* ── Splash screen (pantalla de carga inicial) ── */
#splash{
  position:fixed;inset:0;z-index:100;
  background:var(--bg-deep);
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  gap:20px;
  transition:opacity .35s ease,visibility .35s;
}
#splash.hidden{opacity:0;visibility:hidden;pointer-events:none}
.splash-img{
  display:block;
  /* Tamaño objetivo 450x450. Si la pantalla es más pequeña, se autoajusta
     hacia abajo manteniendo la proporción cuadrada gracias a aspect-ratio. */
  width:100%;
  max-width:450px;
  max-height:450px;
  aspect-ratio:1/1;
  object-fit:contain;
  animation:splashIn .5s cubic-bezier(.33,1,.68,1) both;
}
.splash-logo{
  font-family:'DM Sans',sans-serif;
  font-size:42px;font-weight:900;letter-spacing:-1px;line-height:1;
  animation:splashIn .5s cubic-bezier(.33,1,.68,1) .1s both;
}
.splash-logo em{color:var(--text-muted);font-style:normal}
.splash-text{
  font-size:11px;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:1.5px;
  animation:splashIn .5s cubic-bezier(.33,1,.68,1) .2s both;
}