/* public/css/habitta.css — identidad visual de Habitta (portal, portería y vistas operativas). Se carga después de app.css. */
:root {
  --hb-arena: #D9A35B; --hb-arena-suave: #F6EAD7; --hb-fondo: #F5F3EE; --hb-superficie: #FFFFFF; --hb-texto: #1C2B2A; --hb-suave: #5E6B69; --hb-borde: #E3DED4;
  --hb-ok: #1D7A4E; --hb-ok-fondo: #E4F4EA; --hb-aviso-fondo: #FFF4DF; --hb-aviso: #8A5A00; --hb-error-fondo: #FCE9E7; --hb-error: #A12B1F;
  --hb-radio: 14px; --hb-sombra: 0 1px 2px rgba(28,43,42,.06), 0 4px 14px rgba(28,43,42,.05);
  --hb-fuente: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --hb-fondo: #111817; --hb-superficie: #18211F; --hb-texto: #E7EEEC; --hb-suave: #9DB0AC; --hb-borde: #2A3633; --hb-arena-suave: #3A2F1E;
    --hb-ok-fondo: #12301F; --hb-ok: #8FE0B0; --hb-aviso-fondo: #3A2E10; --hb-aviso: #F3D58A; --hb-error-fondo: #3A1717; --hb-error: #F5A3A3; }
}
body.hb { background: var(--hb-fondo); color: var(--hb-texto); font-family: var(--hb-fuente); }
.hb a { color: var(--primario); }
.hb h1 { font-size: 1.7rem; letter-spacing: -.01em; margin: 0 0 .2rem; }
.hb h2 { font-size: 1.1rem; margin: 1.6rem 0 .7rem; }
.hb .sub { color: var(--hb-suave); margin: 0 0 1.2rem; }
.hb .muted { color: var(--hb-suave); }

/* Estructura del portal: barra lateral en escritorio, barra inferior en celular */
.hb-app { display: grid; grid-template-columns: 264px 1fr; min-height: 100vh; }
.hb-lateral { position: sticky; top: 0; height: 100vh; overflow-y: auto; background: var(--hb-superficie); border-right: 1px solid var(--hb-borde); padding: 1rem .8rem; display: flex; flex-direction: column; gap: .3rem; }
.hb-marca { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.2rem; text-decoration: none; color: var(--hb-texto) !important; padding: .2rem .5rem .8rem; }
.hb-marca img { width: 34px; height: 34px; }
.hb-unidad { background: var(--hb-arena-suave); border-radius: 12px; padding: .7rem .8rem; margin-bottom: .6rem; }
.hb-unidad strong { display: block; }
.hb-unidad span { font-size: .85rem; color: var(--hb-suave); }
.hb-grupo { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--hb-suave); margin: .9rem .6rem .2rem; }
.hb-enlace { display: flex; align-items: center; gap: .7rem; padding: .55rem .7rem; border-radius: 10px; text-decoration: none; color: var(--hb-texto) !important; font-weight: 600; font-size: .95rem; }
.hb-enlace:hover { background: var(--hb-fondo); }
.hb-enlace.activo { background: color-mix(in srgb, var(--primario) 12%, transparent); color: var(--primario) !important; }
.hb-enlace svg { width: 20px; height: 20px; flex: none; }
.hb-pie { margin-top: auto; border-top: 1px solid var(--hb-borde); padding-top: .8rem; display: flex; align-items: center; gap: .6rem; }
.hb-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primario); color: #fff; display: grid; place-items: center; font-weight: 800; font-size: .85rem; flex: none; }
.hb-pie small { display: block; color: var(--hb-suave); }
.hb-principal { padding: 1.6rem 2rem 6rem; max-width: 1100px; width: 100%; }
.hb-barra-movil { display: none; }
@media (max-width: 900px) {
  .hb-app { grid-template-columns: 1fr; }
  .hb-lateral { position: fixed; inset: 0 auto 0 0; width: 84vw; max-width: 320px; z-index: 40; transform: translateX(-102%); transition: transform .2s; box-shadow: 0 0 40px rgba(0,0,0,.25); }
  .hb-lateral.abierto { transform: none; }
  .hb-principal { padding: 1rem 1rem 6.5rem; }
  .hb-barra-movil { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--hb-superficie); border-top: 1px solid var(--hb-borde); padding: .35rem .2rem calc(.35rem + env(safe-area-inset-bottom)); }
  .hb-barra-movil a, .hb-barra-movil button { display: flex; flex-direction: column; align-items: center; gap: .15rem; font-size: .7rem; font-weight: 600; text-decoration: none; color: var(--hb-suave) !important; background: none; border: 0; font-family: inherit; cursor: pointer; padding: .2rem; }
  .hb-barra-movil .activo { color: var(--primario) !important; }
  .hb-barra-movil svg { width: 22px; height: 22px; }
}
.hb-velo { display: none; }
.hb-velo.abierto { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 35; }

/* Componentes */
.hb-tarjeta { background: var(--hb-superficie); border: 1px solid var(--hb-borde); border-radius: var(--hb-radio); padding: 1.1rem 1.2rem; box-shadow: var(--hb-sombra); }
.hb-pila { display: flex; flex-direction: column; gap: .8rem; }
.hb-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.hb-rejilla.dos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.hb-atajos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .7rem; margin: 1rem 0 .4rem; }
.hb-atajo { display: flex; flex-direction: column; align-items: flex-start; gap: .5rem; padding: 1rem; border-radius: var(--hb-radio); background: var(--hb-superficie); border: 1px solid var(--hb-borde); text-decoration: none; color: var(--hb-texto) !important; font-weight: 700; box-shadow: var(--hb-sombra); }
.hb-atajo .ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--hb-arena-suave); color: var(--primario); }
.hb-atajo.principal { background: var(--primario); color: #fff !important; border-color: var(--primario); }
.hb-atajo.principal .ico { background: rgba(255,255,255,.18); color: #fff; }
.hb-atajo svg { width: 22px; height: 22px; }
.hb-cifra { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-decoration: none; color: var(--hb-texto) !important; }
.hb-cifra b { font-size: 1.8rem; line-height: 1; color: var(--primario); }
.hb-cifra span { font-weight: 600; }
.hb-kpi b { display: block; font-size: 1.7rem; line-height: 1.1; }
.hb-kpi span { color: var(--hb-suave); font-size: .88rem; }
.hb-lista { list-style: none; margin: 0; padding: 0; }
.hb-lista > li { display: flex; gap: .8rem; align-items: flex-start; justify-content: space-between; padding: .8rem 0; border-bottom: 1px solid var(--hb-borde); }
.hb-lista > li:last-child { border-bottom: 0; }
.hb-lista .meta { font-size: .84rem; color: var(--hb-suave); }
.hb-linea { position: relative; padding-left: 1.6rem; }
.hb-linea::before { content: ""; position: absolute; left: .45rem; top: .3rem; bottom: .3rem; width: 2px; background: var(--hb-borde); }
.hb-linea li { position: relative; padding: .5rem 0 .9rem; }
.hb-linea li::before { content: ""; position: absolute; left: -1.38rem; top: .75rem; width: 12px; height: 12px; border-radius: 50%; background: var(--hb-superficie); border: 3px solid var(--primario); }
.hb-chip { display: inline-block; font-size: .75rem; font-weight: 700; padding: .18rem .55rem; border-radius: 999px; background: var(--hb-fondo); color: var(--hb-suave); border: 1px solid var(--hb-borde); white-space: nowrap; }
.hb-chip.ok { background: var(--hb-ok-fondo); color: var(--hb-ok); border-color: transparent; }
.hb-chip.aviso { background: var(--hb-aviso-fondo); color: var(--hb-aviso); border-color: transparent; }
.hb-chip.error { background: var(--hb-error-fondo); color: var(--hb-error); border-color: transparent; }
.hb-chip.marca { background: var(--hb-arena-suave); color: var(--hb-texto); border-color: transparent; }
.hb-vacio { text-align: center; padding: 2.2rem 1rem; }
.hb-vacio .ico { width: 54px; height: 54px; margin: 0 auto .6rem; border-radius: 50%; display: grid; place-items: center; background: var(--hb-arena-suave); color: var(--primario); }
.hb-vacio .ico svg { width: 26px; height: 26px; }
.hb-vacio h3 { margin: 0 0 .3rem; }
.hb-vacio p { color: var(--hb-suave); margin: 0 auto 1rem; max-width: 460px; }
.hb-pestanas { display: inline-flex; gap: .2rem; background: var(--hb-superficie); border: 1px solid var(--hb-borde); border-radius: 12px; padding: .25rem; margin-bottom: 1rem; flex-wrap: wrap; }
.hb-pestanas button, .hb-pestanas a { border: 0; background: none; font: inherit; font-weight: 700; padding: .45rem .9rem; border-radius: 9px; color: var(--hb-suave); cursor: pointer; text-decoration: none; }
.hb-pestanas .activo { background: var(--hb-fondo); color: var(--hb-texto); }
.hb-panel[hidden] { display: none; }
.hb .btn { border-radius: 10px; }
.hb .btn-sec { border-radius: 10px; }
.btn-peq { padding: .32rem .7rem !important; font-size: .85rem; }
.btn-ok { background: var(--hb-ok) !important; border-color: var(--hb-ok) !important; color: #fff !important; }
.btn-peligro { background: var(--hb-error) !important; border-color: var(--hb-error) !important; color: #fff !important; }
.hb-anuncio { display: flex; gap: .9rem; }
.hb-anuncio .ico { width: 40px; height: 40px; border-radius: 12px; background: var(--hb-arena-suave); color: var(--primario); display: grid; place-items: center; flex: none; }
.hb-anuncio p { margin: .2rem 0 .4rem; white-space: pre-line; }
.hb-cinta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--hb-arena-suave); border: 1px solid color-mix(in srgb, var(--hb-arena) 40%, transparent); border-radius: var(--hb-radio); padding: .8rem 1rem; margin-bottom: 1rem; }
.hb-totales { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .8rem; margin-bottom: 1.2rem; }
.hb-total { border-radius: var(--hb-radio); padding: 1rem 1.1rem; border: 1px solid var(--hb-borde); background: var(--hb-superficie); }
.hb-total.ok { background: var(--hb-ok-fondo); border-color: transparent; }
.hb-total.aviso { background: var(--hb-aviso-fondo); border-color: transparent; }
.hb-total b { display: block; font-size: 1.5rem; }
.hb-turnos { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .5rem; }
.hb-turnos label { display: block; border: 1px solid var(--hb-borde); border-radius: 10px; padding: .55rem; text-align: center; cursor: pointer; font-weight: 600; background: var(--hb-superficie); }
.hb-turnos input { display: none; }
.hb-turnos input:checked + span { color: var(--primario); }
.hb-turnos label:has(input:checked) { border-color: var(--primario); outline: 2px solid var(--primario); }
.hb-turnos label.ocupado { opacity: .45; cursor: not-allowed; text-decoration: line-through; }
.hb-barra { height: 10px; border-radius: 6px; background: var(--hb-fondo); overflow: hidden; border: 1px solid var(--hb-borde); }
.hb-barra i { display: block; height: 100%; background: var(--primario); }
.hb-msg:empty { display: none; }
.hb-toast { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 60; background: var(--hb-texto); color: var(--hb-superficie); padding: .7rem 1.1rem; border-radius: 12px; box-shadow: var(--hb-sombra); font-weight: 600; max-width: 92vw; }
.hb-toast.error { background: var(--hb-error); color: #fff; }
.hb dialog { border-radius: var(--hb-radio); border: 1px solid var(--hb-borde); background: var(--hb-superficie); color: var(--hb-texto); }
.hb-timbre { border: 2px solid var(--hb-arena); background: var(--hb-arena-suave); border-radius: var(--hb-radio); padding: 1rem 1.1rem; margin-bottom: 1rem; display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; animation: hb-pulso 1.6s ease-in-out infinite; }
@keyframes hb-pulso { 0%,100% { box-shadow: 0 0 0 0 rgba(217,163,91,.45); } 50% { box-shadow: 0 0 0 10px rgba(217,163,91,0); } }
.hb-acceso { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; }
.hb-acceso-arte { background: var(--primario); color: #F4E7D3; display: flex; flex-direction: column; justify-content: space-between; padding: 2.4rem; }
.hb-acceso-arte h2 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 .6rem; color: #fff; }
.hb-acceso-form { display: grid; place-items: center; padding: 2rem 1.2rem; }
.hb-acceso-form .hb-tarjeta { width: 100%; max-width: 410px; }
@media (max-width: 820px) { .hb-acceso { grid-template-columns: 1fr; } .hb-acceso-arte { padding: 1.4rem; } .hb-acceso-arte .grande { display: none; } }
.hb-tabla { overflow-x: auto; background: var(--hb-superficie); border: 1px solid var(--hb-borde); border-radius: var(--hb-radio); }
.hb-tabla table th { background: var(--hb-fondo); }
.hb-buscar { display: flex; gap: .5rem; }
.hb-buscar input { flex: 1; }
.hb-porteria .hb-principal { max-width: 1250px; }
details.hb-tarjeta summary { cursor: pointer; font-weight: 700; }
.hb a.btn { color: #fff !important; text-decoration: none; }
.hb a.btn-sec { color: var(--hb-texto) !important; text-decoration: none; }