/* ui-inicio.css — estilos del módulo "inicio" (perfiles Residente / Control de acceso). Prefijo de clases: cs-inicio-* ; cs-res-* (estados vacíos del residente) */

/* ---- estados vacíos con ilustración (también los usa «perfil») ---- */
.cs-res-vacio { text-align: center; padding: 1.25rem 1rem 1rem; display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--cs-muted); animation: cs-entra .35s ease both; }
.cs-res-vacio h3 { color: var(--cs-ink); font-size: 1.02rem; margin-top: .25rem; }
.cs-res-vacio p { font-size: .9rem; max-width: 30ch; }
.cs-res-vacio .cs-btn { margin-top: .6rem; }
.cs-res-ilus { max-width: 100%; height: auto; }

/* ---- esqueleto de carga del inicio ---- */
.cs-inicio-esqueleto { display: flex; flex-direction: column; gap: 1rem; }
.cs-inicio-esq-heroe, .cs-inicio-esq-atajos i { border-radius: 24px; background: linear-gradient(90deg, var(--cs-line) 25%, var(--cs-surface-2) 50%, var(--cs-line) 75%); background-size: 200% 100%; animation: cs-brillo 1.3s infinite linear; }
.cs-inicio-esq-heroe { height: 176px; }
.cs-inicio-esq-atajos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.cs-inicio-esq-atajos i { height: 96px; border-radius: var(--cs-radius); display: block; }

/* ---- tarjeta héroe ---- */
.cs-inicio-heroe { display: flex; flex-direction: column; gap: .15rem; animation: cs-entra .4s ease both; }
.cs-inicio-heroe::after { content: ""; position: absolute; right: -40px; bottom: -50px; width: 170px; height: 170px; border-radius: 50%; background: rgba(255,255,255,.1); pointer-events: none; }
.cs-inicio-heroe--vencido { background: radial-gradient(120% 140% at 100% 0%, #FB7185 0%, transparent 55%), linear-gradient(135deg, #9F1239, #7F1D1D); box-shadow: 0 16px 40px rgba(159,18,57,.35); }
.cs-inicio-heroe--ok { background: radial-gradient(120% 140% at 100% 0%, #86EFAC 0%, transparent 55%), linear-gradient(135deg, #15803D, #14532D); box-shadow: 0 16px 40px rgba(21,128,61,.3); }
.cs-inicio-heroe-linea { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .92rem; opacity: .95; }
.cs-inicio-heroe-linea .cs-chip { background: rgba(255,255,255,.92); color: #9F1239; }
.cs-inicio-heroe-pie { font-size: .78rem; opacity: .8; margin-top: .35rem; }
.cs-inicio-heroe-btn { margin-top: .85rem; background: #fff; color: var(--cs-primary-dark); align-self: flex-start; position: relative; z-index: 1; box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.cs-inicio-heroe--vencido .cs-inicio-heroe-btn { color: #9F1239; }
.cs-inicio-heroe--ok .cs-inicio-heroe-btn { color: #14532D; }
:root[data-tema="oscuro"] .cs-inicio-heroe-btn { color: #0B1413; }

/* ---- accesos rápidos ---- */
.cs-inicio-atajos { grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cs-inicio-atajos .cs-atajo { min-height: 88px; align-items: center; text-align: center; font-size: .82rem; padding: .75rem .4rem; gap: .35rem; animation: cs-entra .4s ease both; }
.cs-inicio-atajos .cs-atajo:nth-child(2) { animation-delay: .04s; } .cs-inicio-atajos .cs-atajo:nth-child(3) { animation-delay: .08s; }
.cs-inicio-atajos .cs-atajo:nth-child(4) { animation-delay: .12s; } .cs-inicio-atajos .cs-atajo:nth-child(5) { animation-delay: .16s; } .cs-inicio-atajos .cs-atajo:nth-child(6) { animation-delay: .2s; }
@media (min-width: 560px) { .cs-inicio-atajos { grid-template-columns: repeat(6, 1fr); } }

/* ---- paquetes en caseta ---- */
.cs-inicio-paquetes { display: flex; align-items: center; gap: .85rem; padding: .85rem 1rem; border-radius: var(--cs-radius); background: var(--cs-warn-bg); color: var(--cs-warn); border: 1px solid color-mix(in srgb, var(--cs-warn) 30%, transparent); animation: cs-entra .4s ease both; }
.cs-inicio-paquetes .cs-fila-ico { background: color-mix(in srgb, var(--cs-warn) 18%, transparent); color: var(--cs-warn); }
.cs-inicio-paquetes strong { color: var(--cs-ink); display: block; }
.cs-inicio-paquetes .cs-fila-cuerpo span { color: var(--cs-muted); font-size: .82rem; }

/* ---- listas: avisos, eventos, reservas ---- */
.cs-inicio-lista { margin-top: .5rem; }
.cs-inicio-ico--err { background: var(--cs-err-bg); color: var(--cs-err); }
.cs-inicio-ico--warn { background: var(--cs-warn-bg); color: var(--cs-warn); }
.cs-inicio-ico--info { background: var(--cs-info-bg); color: var(--cs-info); }
.cs-inicio-ico--ok { background: var(--cs-primary-soft); color: var(--cs-primary-dark); }
.cs-inicio-fecha { width: 46px; height: 52px; border-radius: 12px; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--cs-primary-soft); color: var(--cs-primary-dark); line-height: 1.05; }
.cs-inicio-fecha b { font-size: 1.15rem; font-weight: 800; }
.cs-inicio-fecha small { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

/* ---- cifras rápidas ---- */
.cs-inicio-cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem; }
.cs-inicio-cifra { display: flex; flex-direction: column; gap: .1rem; color: var(--cs-text); }
.cs-inicio-cifra strong { font-size: 1.7rem; font-weight: 800; color: var(--cs-primary); line-height: 1.1; }
.cs-inicio-cifra span { font-size: .82rem; color: var(--cs-muted); }

/* ---- corrección de apilado (módulo RES): la animación de entrada de .cs-contenido con «both» dejaba un contexto de apilamiento
   permanente y las hojas inferiores (position: fixed, dentro del contenido) quedaban DEBAJO de la barra de pestañas.
   Con «backwards» el contexto desaparece al terminar la animación. Ver PEDIDOS-INTEGRACION.md (ui-base.css). ---- */
.cs-contenido { animation-fill-mode: backwards; }