/* Estilos del sitio que no vienen del lienzo: login, barra de usuario, avisos. */
html, body { margin: 0; background: #080607; color: #F5F1F1; }
#app { position: relative; min-height: 100vh; }

.cai-pantalla { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box;
  background: radial-gradient(ellipse 60% 60% at 50% 35%, rgba(228, 0, 43, .22), rgba(8, 6, 7, 0) 70%), #080607;
  font-family: Inter, system-ui, sans-serif; }
.cai-caja { width: 100%; max-width: 380px; text-align: center; }
.cai-escudo { width: 96px; height: 96px; display: block; margin: 0 auto 18px; filter: drop-shadow(0 0 24px rgba(228, 0, 43, .45)); }
.cai-sup { margin: 0 0 6px; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: #B9B1B3; }
.cai-tit { margin: 0 0 22px; font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 52px; line-height: 1; text-transform: uppercase; }
.cai-form { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.cai-form label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #D6CFD1; }
.cai-form input { min-height: 46px; padding: 0 14px; border: 1px solid #4A3F42; background: #120E0F; color: #F5F1F1; font: 16px Inter, system-ui, sans-serif; }
.cai-form input:focus { outline: 2px solid #E4002B; outline-offset: 0; border-color: #E4002B; }
.cai-btn { min-height: 48px; border: 0; background: #E4002B; color: #fff; font: 600 14px Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.cai-btn:hover { background: #FF1A45; }
.cai-link { background: none; border: 0; color: #D6CFD1; font: 13px Inter, system-ui, sans-serif; text-decoration: underline; cursor: pointer; padding: 4px 0; }
.cai-msg { min-height: 1.4em; margin: 6px 0 0; font-size: 14px; line-height: 1.5; color: #D6CFD1; text-align: center; }
.cai-carga { letter-spacing: .14em; text-transform: uppercase; font-size: 12px; }

#cai-usuario { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px;
  background: rgba(18, 14, 15, .88); border: 1px solid #3A3134; font: 12px Inter, system-ui, sans-serif; color: #B9B1B3; backdrop-filter: blur(6px); }
#cai-usuario button { border: 1px solid #4A3F42; background: transparent; color: #F5F1F1; font: 600 11px Inter, system-ui, sans-serif; letter-spacing: .1em; text-transform: uppercase; padding: 6px 10px; cursor: pointer; }
#cai-usuario button:hover { background: #E4002B; border-color: #E4002B; }
@media (max-width: 640px) { #cai-usuario span { display: none; } }

.cai-aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; padding: 10px 16px; background: #E4002B; color: #fff;
  font: 600 13px Inter, system-ui, sans-serif; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }

/* Botón y menú de secciones (en todas las páginas menos Inicio) */
#cai-secciones { position: fixed; left: 14px; bottom: 14px; z-index: 55; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 16px;
  border: 1px solid #E4002B; background: #E4002B; color: #fff; font: 600 13px Inter, system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 30px rgba(0,0,0,.5); }
#cai-secciones:hover { background: #FF1A45; }
#cai-menu { position: fixed; inset: 0; z-index: 70; background: rgba(8, 6, 7, .7); backdrop-filter: blur(4px); display: none; }
#cai-menu.abierto { display: block; }
#cai-menu > div, #cai-menu > nav { position: relative; }
#cai-menu .cai-menu-cab, #cai-menu nav { width: min(440px, 100%); box-sizing: border-box; background: #120306; }
#cai-menu .cai-menu-cab { display: flex; justify-content: space-between; align-items: center; padding: 22px 26px 10px; border-left: 3px solid #E4002B; }
#cai-menu .cai-menu-tit { font-family: 'Big Shoulders Display', sans-serif; font-weight: 900; font-size: 40px; text-transform: uppercase; color: #fff; }
#cai-menu .cai-menu-cerrar { border: 1px solid #fff; background: transparent; color: #fff; padding: 8px 12px; font: 600 12px Inter, sans-serif; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
#cai-menu nav { display: flex; flex-direction: column; padding: 6px 0 26px; min-height: calc(100vh - 80px); border-left: 3px solid #E4002B; overflow-y: auto; }
#cai-menu nav a { display: flex; flex-direction: column; gap: 2px; padding: 11px 26px; text-decoration: none; color: #fff; border-bottom: 1px solid rgba(255,255,255,.06); }
#cai-menu nav a b { font-family: 'Big Shoulders Display', sans-serif; font-weight: 800; font-size: 26px; line-height: 1; text-transform: uppercase; }
#cai-menu nav a small { font: 12px Inter, sans-serif; color: #D6CFD1; }
#cai-menu nav a:hover, #cai-menu nav a[aria-current="page"] { background: #E4002B; }
#cai-menu nav a:hover small, #cai-menu nav a[aria-current="page"] small { color: #fff; }

/* Las páginas del lienzo usan overflow:hidden en la raíz; con clip el navegador no puede desplazarlas de costado al enfocar algo. */
#app > div { overflow: clip !important; }