/* ui-caseta.css — CASETA (perfil Control de acceso): teléfono primero, manos ocupadas, botones grandes, alto contraste.
   Prefijo cs-caseta-*  ·  cámara (JavaScript) cs-camara-*  ·  visor de fotos con marca de agua cs-visor-* */

body.cs-sin-scroll { overflow: hidden; }

/* ---------------------------------------------------------------- Resumen del turno */
.cs-caseta-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.cs-caseta-dato { background: var(--cs-surface); border: 1px solid var(--cs-line); border-radius: var(--cs-radius); padding: .75rem .5rem; text-align: center; box-shadow: var(--cs-shadow); }
.cs-caseta-dato strong { display: block; font-size: 2rem; line-height: 1.05; font-weight: 800; color: var(--cs-ink); font-variant-numeric: tabular-nums; }
.cs-caseta-dato span { display: block; margin-top: .15rem; font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--cs-muted); }
.cs-caseta-dato--rojo { border-color: var(--cs-err); background: var(--cs-err-bg); }
.cs-caseta-dato--rojo strong { color: var(--cs-err); }

/* ---------------------------------------------------------------- Escanear */
.cs-caseta-escaner {
    display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1.5rem 1rem 1.25rem; border-radius: 28px; color: #fff; text-align: center;
    background: radial-gradient(120% 120% at 100% 0%, #2DD4BF 0%, transparent 55%), linear-gradient(140deg, #0F766E, #0B4F4A); box-shadow: 0 16px 40px rgba(15,118,110,.35);
}
.cs-caseta-escaner p { font-weight: 600; opacity: .92; }
.cs-caseta-escaner-boton {
    width: min(62vw, 230px); aspect-ratio: 1; border: 0; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .3rem;
    background: #fff; color: #0B4F4A; font-weight: 800; font-size: 1.2rem; cursor: pointer;
    box-shadow: 0 0 0 10px rgba(255,255,255,.2), 0 0 0 22px rgba(255,255,255,.1), 0 20px 44px rgba(0,0,0,.3); transition: transform .12s;
}
.cs-caseta-escaner-boton:active { transform: scale(.95); }
.cs-caseta-escaner-boton[disabled] { opacity: .7; }
.cs-caseta-manual h2 { font-size: .95rem; }
.cs-caseta-manual-fila, .cs-caseta-busca-campo { display: flex; gap: .5rem; }
.cs-caseta-manual-fila .cs-input, .cs-caseta-busca-campo .cs-input { flex: 1; min-width: 0; }
.cs-caseta-manual-fila .cs-input { font-family: ui-monospace, Consolas, monospace; font-size: .9rem; letter-spacing: .02em; }

/* ---------------------------------------------------------------- Botones grandes */
.cs-caseta-btn-xl {
    display: flex; align-items: center; justify-content: center; gap: .6rem; width: 100%; min-height: 68px; padding: 0 1.25rem; border: 0; border-radius: 20px;
    font-size: 1.2rem; font-weight: 800; cursor: pointer; text-align: center; color: #fff; transition: transform .1s;
}
.cs-caseta-btn-xl:active { transform: scale(.97); }
.cs-caseta-btn-xl[disabled] { opacity: .55; pointer-events: none; }
.cs-caseta-btn-ok { background: #15803D; }
.cs-caseta-btn-no { background: transparent; color: var(--cs-err); box-shadow: inset 0 0 0 3px var(--cs-err); }
.cs-caseta-btn-pri { background: var(--cs-primary); color: #fff; }
.cs-caseta-btn-sec { background: var(--cs-surface); color: var(--cs-text); box-shadow: inset 0 0 0 2px var(--cs-line); max-width: 38%; }
.cs-caseta-btn-blanco { background: #fff; color: #14532D; }
.cs-caseta-btn-blanco--rojo { color: #7F1D1D; }
.cs-caseta-btn-fantasma { background: rgba(255,255,255,.14); box-shadow: inset 0 0 0 2px rgba(255,255,255,.8); text-decoration: none; }
.cs-caseta-btn-sal { background: #B45309; }
.cs-caseta-btn-atender { background: #15803D; }

/* ---------------------------------------------------------------- Resultado (pantalla completa) */
.cs-caseta-res {
    /* ocupa todo menos la barra superior y la barra de pestañas (la caseta puede cambiar de pantalla sin cerrar el resultado) */
    position: fixed; left: 0; right: 0; top: calc(3.85rem + var(--cs-safe-top)); bottom: calc(4.35rem + var(--cs-safe-bottom)); z-index: 25;
    display: flex; flex-direction: column; gap: .8rem; overflow-y: auto; color: #fff; text-align: center;
    padding: 1rem 1.1rem 1rem; animation: cs-fade .12s ease both;
}
.cs-caseta-res--ok { background: #15803D; }
.cs-caseta-res--no { background: #B91C1C; }
.cs-caseta-res-icono { width: 108px; height: 108px; margin: .6rem auto 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.2); flex: none; }
.cs-caseta-res h2 { font-size: 2.05rem; font-weight: 900; letter-spacing: .01em; line-height: 1.1; }
.cs-caseta-res-sub { font-size: 1.25rem; font-weight: 700; }
.cs-caseta-res-motivo { font-size: 1.3rem; font-weight: 800; background: rgba(0,0,0,.2); border-radius: 18px; padding: .9rem 1rem; }
.cs-caseta-res-datos { margin: 0; display: grid; gap: .1rem; background: rgba(0,0,0,.2); border-radius: 22px; padding: .6rem 1rem; text-align: left; }
.cs-caseta-res-datos > div { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(255,255,255,.18); }
.cs-caseta-res-datos > div:last-child { border-bottom: 0; }
.cs-caseta-res-datos dt { font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
.cs-caseta-res-datos dd { margin: 0; font-size: 1.3rem; font-weight: 800; text-align: right; }
.cs-caseta-res-placas { display: grid; gap: .3rem; text-align: left; font-weight: 700; font-size: .9rem; }
.cs-caseta-res-placas .cs-input { background: #fff; color: #0B1220; text-transform: uppercase; font-weight: 800; font-size: 1.1rem; }
.cs-caseta-res-acc { margin-top: auto; display: flex; flex-direction: column; gap: .7rem; padding-top: .5rem; }

/* instrucciones del residente (ámbar, siempre legible) */
.cs-caseta-instr { background: #FEF3C7; color: #78350F; border-radius: 18px; padding: .8rem 1rem; text-align: left; display: flex; flex-direction: column; gap: .25rem; }
.cs-caseta-instr strong { font-weight: 800; }
.cs-caseta-instr p, .cs-caseta-instr span, .cs-caseta-instr small { margin: 0; font-weight: 600; }
.cs-caseta-instr--inline { margin-top: .4rem; border-left: 5px solid #D97706; }

/* ---------------------------------------------------------------- Pasos de la llegada */
.cs-caseta-pasos { display: flex; gap: .35rem; }
.cs-caseta-paso { flex: 1; height: 7px; border-radius: 4px; background: var(--cs-line); }
.cs-caseta-paso--hecho { background: var(--cs-primary); }
.cs-caseta-seccion { display: flex; flex-direction: column; gap: .9rem; }
.cs-caseta-titulo-paso { font-size: 1.45rem; font-weight: 800; letter-spacing: -.01em; color: var(--cs-ink); margin: 0; }
.cs-caseta-opciones { display: grid; gap: .65rem; }
.cs-caseta-opciones--chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.cs-caseta-opcion {
    display: flex; align-items: center; gap: .9rem; width: 100%; min-height: 72px; padding: .8rem 1rem; border-radius: 20px; text-align: left; cursor: pointer;
    border: 2px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); font-size: 1.1rem; font-weight: 700;
}
.cs-caseta-opcion small { display: block; font-size: .8rem; font-weight: 600; color: var(--cs-muted); }
.cs-caseta-opcion--sel { border-color: var(--cs-primary); background: var(--cs-primary-soft); color: var(--cs-primary-dark); }
.cs-caseta-chip { min-height: 52px; padding: 0 1.1rem; border-radius: 16px; border: 2px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); font-weight: 800; font-size: 1rem; cursor: pointer; }
.cs-caseta-chip--sel { border-color: var(--cs-primary); background: var(--cs-primary); color: #fff; }
.cs-caseta-input-xl { min-height: 60px; font-size: 1.25rem; font-weight: 700; }
.cs-caseta-contador { display: flex; align-items: center; gap: .6rem; padding: .5rem .8rem; border-radius: 18px; background: var(--cs-surface); border: 2px solid var(--cs-line); font-weight: 700; }
.cs-caseta-contador > span { flex: 1; }
.cs-caseta-contador strong { min-width: 2.2rem; text-align: center; font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.cs-caseta-mas { width: 56px; height: 56px; font-size: 1.8rem; font-weight: 800; background: var(--cs-primary-soft); color: var(--cs-primary-dark); }
.cs-caseta-mas[disabled] { opacity: .35; }
.cs-caseta-pie {
    position: sticky; bottom: calc(5rem + var(--cs-safe-bottom)); z-index: 10; display: flex; gap: .6rem; padding: .7rem 0 .2rem; margin-top: auto;
    background: linear-gradient(to top, var(--cs-bg) 65%, transparent);
}
.cs-caseta-resumen-lista { margin: 0; display: grid; background: var(--cs-surface); border-radius: var(--cs-radius); padding: .4rem 1rem; box-shadow: var(--cs-shadow); }
.cs-caseta-resumen-lista > div { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid var(--cs-line); }
.cs-caseta-resumen-lista > div:last-child { border-bottom: 0; }
.cs-caseta-resumen-lista dt { color: var(--cs-muted); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; }
.cs-caseta-resumen-lista dd { margin: 0; font-weight: 800; text-align: right; color: var(--cs-ink); }

/* aviso de privacidad y fotos */
.cs-caseta-privacidad { display: flex; gap: .8rem; padding: .9rem 1rem; border-radius: 18px; background: var(--cs-info-bg); color: var(--cs-info); }
.cs-caseta-privacidad p { font-size: .88rem; font-weight: 500; color: var(--cs-text); margin-top: .15rem; }
.cs-caseta-check { display: flex; align-items: center; gap: .8rem; min-height: 56px; padding: .6rem 1rem; border-radius: 16px; border: 2px solid var(--cs-line); background: var(--cs-surface); font-weight: 700; cursor: pointer; }
.cs-caseta-check input { width: 28px; height: 28px; accent-color: var(--cs-primary); flex: none; }
.cs-caseta-foto { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 76px; padding: .7rem .9rem; border-radius: 20px; border: 2px dashed var(--cs-faint); background: var(--cs-surface); }
.cs-caseta-foto--lista { border: 2px solid var(--cs-ok); background: var(--cs-ok-bg); }
.cs-caseta-foto .cs-fila-cuerpo strong { font-size: 1rem; }
.cs-caseta-nota { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--cs-muted); font-weight: 600; }
.cs-caseta-nota--alerta { color: var(--cs-err); background: var(--cs-err-bg); border-radius: 12px; padding: .5rem .75rem; }

/* ---------------------------------------------------------------- Buscador de casa */
.cs-caseta-busca { display: flex; flex-direction: column; gap: .7rem; }
.cs-caseta-casas { display: flex; flex-direction: column; gap: .6rem; }
.cs-caseta-casa { background: var(--cs-surface); border: 2px solid var(--cs-line); border-radius: 20px; padding: .3rem .8rem .7rem; display: flex; flex-direction: column; gap: .35rem; }
.cs-caseta-casa--sel { border-color: var(--cs-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cs-primary) 20%, transparent); }
.cs-caseta-casa-elegir { display: flex; align-items: center; gap: .8rem; width: 100%; min-height: 60px; border: 0; background: transparent; text-align: left; cursor: pointer; color: inherit; padding: .3rem 0; }
.cs-caseta-casa-elegir strong { font-size: 1.2rem; }
.cs-caseta-casa-mark { color: var(--cs-primary); }
.cs-caseta-persona { display: flex; align-items: center; gap: .6rem; padding: .35rem .6rem; border-radius: 14px; background: var(--cs-surface-2); }
.cs-caseta-casa-sel { display: flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: 16px; background: var(--cs-primary-soft); color: var(--cs-primary-dark); }
.cs-caseta-casa-sel strong { flex: 1; font-size: 1.15rem; }

/* ---------------------------------------------------------------- Directorio de residentes (teléfono y panel de PC) */
.cs-dir { display: flex; flex-direction: column; gap: .7rem; }
.cs-dir-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .6rem; align-items: end; }
.cs-dir-filtros .cs-campo { margin: 0; }
.cs-dir-limpiar { justify-self: start; }
.cs-dir-cuenta { margin: 0; color: var(--cs-muted); font-size: .9rem; font-weight: 700; }
.cs-dir-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cs-dir-fila { display: grid; grid-template-columns: minmax(3.6rem, 6rem) 1fr auto; gap: .3rem .8rem; align-items: center; padding: .55rem .2rem; border-bottom: 1px solid var(--cs-line); }
.cs-dir-fila--nueva { border-top: 2px solid var(--cs-line); }
.cs-dir-unidad { font-weight: 900; font-size: 1.15rem; color: var(--cs-primary-dark); overflow-wrap: anywhere; }
.cs-dir-quien { display: flex; flex-direction: column; min-width: 0; }
.cs-dir-quien span { color: var(--cs-muted); font-size: .85rem; }
.cs-dir-llamar { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.cs-dir-llamar .cs-btn small { margin-left: .4rem; font-weight: 600; opacity: .85; }
.cs-dir-sintel { color: var(--cs-muted); font-size: .85rem; font-style: italic; }
@media (max-width: 560px) {
  .cs-dir-fila { grid-template-columns: 1fr auto; }
  .cs-dir-unidad { grid-column: 1 / -1; font-size: 1.05rem; }
  .cs-dir-llamar { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------------------------------------------------------------- Bitácora y listas */
.cs-caseta-filtros { display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .15rem; scrollbar-width: none; }
.cs-caseta-filtros::-webkit-scrollbar { display: none; }
.cs-caseta-filtro { flex: none; min-height: 46px; padding: 0 1rem; border-radius: 999px; border: 2px solid var(--cs-line); background: var(--cs-surface); color: var(--cs-text); font-weight: 800; cursor: pointer; }
.cs-caseta-filtro--sel { background: var(--cs-primary); border-color: var(--cs-primary); color: #fff; }
.cs-caseta-lista { display: flex; flex-direction: column; gap: .7rem; }
.cs-caseta-reg { background: var(--cs-surface); border-radius: var(--cs-radius); padding: .85rem 1rem; box-shadow: var(--cs-shadow); border-left: 7px solid var(--cs-primary); display: flex; flex-direction: column; gap: .5rem; }
.cs-caseta-reg--dentro { border-left-color: var(--cs-ok); }
.cs-caseta-reg--salio { border-left-color: var(--cs-faint); }
.cs-caseta-reg--rechazado { border-left-color: var(--cs-err); }
.cs-caseta-reg-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.cs-caseta-reg-nombre { font-size: 1.15rem; font-weight: 800; color: var(--cs-ink); }
.cs-caseta-reg-sub { color: var(--cs-muted); font-size: .88rem; font-weight: 600; }
.cs-caseta-reg-datos { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .85rem; color: var(--cs-text); font-weight: 600; }
.cs-caseta-reg-datos > span { display: inline-flex; align-items: center; gap: .3rem; }

/* ---------------------------------------------------------------- Alertas */
.cs-caseta-alerta { border-radius: var(--cs-radius); padding: 1rem; background: var(--cs-err-bg); border: 3px solid var(--cs-err); display: flex; flex-direction: column; gap: .6rem; animation: cs-caseta-pulso 1.3s ease-in-out infinite; }
.cs-caseta-alerta--atendida { background: var(--cs-surface); border: 1px solid var(--cs-line); animation: none; opacity: .85; }
.cs-caseta-alerta-top { display: flex; align-items: center; gap: .8rem; }
.cs-caseta-alerta-ico { width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: var(--cs-err); color: #fff; flex: none; }
.cs-caseta-alerta--atendida .cs-caseta-alerta-ico { background: var(--cs-faint); }
.cs-caseta-alerta-tipo { font-weight: 900; font-size: 1.15rem; letter-spacing: .03em; color: var(--cs-err); }
.cs-caseta-alerta--atendida .cs-caseta-alerta-tipo { color: var(--cs-muted); }
.cs-caseta-alerta-casa { font-weight: 800; font-size: 1.3rem; color: var(--cs-ink); }
.cs-caseta-alerta-hora { margin-left: auto; font-weight: 700; font-size: .85rem; color: var(--cs-muted); }
@keyframes cs-caseta-pulso { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cs-err) 0%, transparent); } 50% { box-shadow: 0 0 0 9px color-mix(in srgb, var(--cs-err) 28%, transparent); } }

/* aviso fijo en las pantallas de la caseta */
.cs-caseta-aviso {
    position: sticky; top: calc(4.3rem + var(--cs-safe-top)); z-index: 18; display: flex; align-items: center; gap: .7rem; padding: .75rem 1rem; border-radius: 18px;
    background: #B91C1C; color: #fff; font-weight: 800; box-shadow: 0 10px 28px rgba(185,28,28,.45); animation: cs-caseta-pulso 1.3s ease-in-out infinite;
}
.cs-caseta-aviso-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.15; }
.cs-caseta-aviso-txt small { font-weight: 600; opacity: .9; }
.cs-caseta-pendiente { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; border: 0; border-radius: 14px; background: var(--cs-warn-bg); color: var(--cs-warn); font-weight: 800; cursor: pointer; }
.cs-caseta-salir { margin-top: .8rem; }

/* ---------------------------------------------------------------- Cámara (JavaScript: escáner y captura de fotos) */
.cs-camara { position: fixed; inset: 0; z-index: 90; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; }
.cs-camara-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.cs-camara-marco { position: relative; width: min(72vw, 320px); aspect-ratio: 1; border: 4px solid #fff; border-radius: 28px; box-shadow: 0 0 0 100vmax rgba(0,0,0,.55); }
.cs-camara-txt { position: absolute; top: calc(1.4rem + var(--cs-safe-top)); left: 1rem; right: 1rem; text-align: center; font-weight: 800; font-size: 1.15rem; text-shadow: 0 2px 8px #000; }
.cs-camara-cancelar { position: absolute; bottom: calc(2rem + var(--cs-safe-bottom)); left: 50%; transform: translateX(-50%); min-width: 220px; min-height: 60px; font-size: 1.1rem; background: rgba(0,0,0,.6); color: #fff; }
.cs-camara .cs-btn--borde { color: #fff; box-shadow: inset 0 0 0 2px #fff; }
.cs-camara .cs-btn--suave { background: rgba(255,255,255,.22); color: #fff; }
.cs-camara--foto .cs-camara-video, .cs-camara-vista { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.cs-camara-enc { position: absolute; top: 0; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; gap: .2rem; padding: calc(.9rem + var(--cs-safe-top)) 1rem 1.6rem; background: linear-gradient(rgba(0,0,0,.8), transparent); font-size: 1.1rem; }
.cs-camara-enc small { font-size: .78rem; opacity: .85; line-height: 1.3; }
.cs-camara-estado { position: absolute; left: 1rem; right: 1rem; bottom: calc(8.5rem + var(--cs-safe-bottom)); z-index: 2; text-align: center; font-weight: 700; text-shadow: 0 2px 8px #000; }
.cs-camara-estado--error { color: #FCA5A5; }
.cs-camara-acciones { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; gap: .6rem; justify-content: center; align-items: center; padding: 1.6rem 1rem calc(1rem + var(--cs-safe-bottom)); background: linear-gradient(transparent, rgba(0,0,0,.85)); }
.cs-camara-acciones .cs-btn { min-height: 56px; }
.cs-camara-disparo { width: 78px; height: 78px; border-radius: 50%; border: 5px solid #fff; background: rgba(255,255,255,.3); cursor: pointer; }
.cs-camara-disparo:active { background: #fff; }

/* ---------------------------------------------------------------- Visor de fotos con marca de agua */
.cs-visor { position: relative; border-radius: 16px; overflow: hidden; background: #0B1220; min-height: 160px; display: grid; place-items: center; margin: .4rem 0 .8rem; }
.cs-visor img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; user-select: none; -webkit-user-drag: none; pointer-events: none; }
.cs-visor-estado { color: #CBD5E1; padding: 2rem 1rem; text-align: center; font-weight: 600; }
.cs-visor-marca { position: absolute; inset: -40%; display: grid; grid-template-columns: repeat(3, 1fr); align-content: space-around; transform: rotate(-24deg); pointer-events: none; user-select: none; }
.cs-visor-marca span { text-align: center; padding: 1.4rem .4rem; white-space: nowrap; font-weight: 800; font-size: .95rem; color: rgba(255,255,255,.4); text-shadow: 0 0 3px rgba(0,0,0,.7); }


/* =====================================================================================================================
   [COM] Comunicación en la caseta (instrucciones de residentes, mensajes, avisos de seguridad). Prefijo: cs-caseta-com-*
   Manos ocupadas: letra grande y botones de al menos 56 px.
   ===================================================================================================================== */
.cs-caseta-com-filtros { display: flex; flex-direction: column; gap: .6rem; }
.cs-caseta-com-buscar input { min-height: 52px; font-size: 1.05rem; }
.cs-caseta-com-chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.cs-caseta-com-chips .cs-chip { border: 0; cursor: pointer; min-height: 44px; padding: 0 1.1rem; font-size: .9rem; }
.cs-caseta-com-lista { display: flex; flex-direction: column; gap: .85rem; }

.cs-caseta-com-instr { display: flex; flex-direction: column; gap: .6rem; border-left: 6px solid var(--cs-warn); }
.cs-caseta-com-instr--vista { border-left-color: var(--cs-ok); opacity: .8; }
.cs-caseta-com-instr > header { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.cs-caseta-com-casa { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--cs-ink); }
.cs-caseta-com-texto { font-size: 1.15rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--cs-text); }
.cs-caseta-com-vig { display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--cs-muted); }
.cs-caseta-com-boton { min-height: 60px; font-size: 1.1rem; }

.cs-caseta-com-hilo { text-decoration: none; }
.cs-caseta-com-hilo--nuevo { background: var(--cs-warn-bg); }
.cs-caseta-com-hilo .cs-fila-ico { width: 56px; border-radius: 14px; font-size: .85rem; }

.cs-caseta-com-aviso { display: flex; flex-direction: column; gap: .5rem; border-left: 6px solid var(--cs-warn); }
.cs-caseta-com-aviso--urgente { border-left-color: var(--cs-err); }
.cs-caseta-com-aviso > header { display: flex; align-items: center; justify-content: space-between; color: var(--cs-muted); font-size: .8rem; }
.cs-caseta-com-aviso h2 { margin: 0; font-size: 1.2rem; }

/* ---- Escaneo de pase: identificación, fotos y folio interno ---- */
.cs-caseta-res-panel { background: rgba(0,0,0,.28); color: #fff; border-radius: 18px; padding: .9rem; text-align: left; display: grid; gap: .65rem; }
.cs-caseta-res-panel h3 { margin: 0; font-size: 1rem; color: #fff; }
.cs-caseta-res-panel .cs-caseta-check span, .cs-caseta-res-panel .cs-caseta-folio label { color: #fff; }
/* sobre el panel oscuro de la pantalla verde, la casilla (p. ej. el aviso de privacidad) no puede llevar fondo claro: con letra blanca el texto se perdía */
.cs-caseta-res-panel .cs-caseta-check { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.45); }
.cs-caseta-folio label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .25rem; }
.cs-caseta-folio-fila { display: flex; gap: .5rem; }
.cs-caseta-folio-fila .cs-input { flex: 1; min-width: 0; }
.cs-caseta-folio-nota { display: block; margin-top: .25rem; font-size: .76rem; color: rgba(255,255,255,.8); }
.cs-caseta-res-folio { margin: 0; padding: .55rem .8rem; border-radius: 14px; background: rgba(255,255,255,.22); font-weight: 800; font-size: 1.15rem; letter-spacing: .02em; }
.cs-caseta-folio-chip { font-weight: 700; }
.cs-caseta-modo-chip { font-weight: 800; }
.cs-caseta-folio-nota--oscuro { color: var(--cs-muted); }

/* ---------------------------------------------------------------- Panel de números (folio / gafete / ticket): tarjeta propia, se lee igual sobre fondo claro u oscuro */
.cs-folio-panel { display: flex; flex-direction: column; gap: .6rem; padding: .8rem; border-radius: var(--cs-radius); background: var(--cs-surface); color: var(--cs-text); border: 2px solid var(--cs-line); text-align: left; }
.cs-folio-cab { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.cs-folio-cab strong { font-size: 1rem; }
.cs-folio-sig { display: flex; align-items: center; justify-content: space-between; gap: .6rem; min-height: 60px; padding: 0 1rem; border-radius: 16px; border: 2px solid var(--cs-primary); background: var(--cs-primary-soft); color: var(--cs-primary-dark); font-weight: 800; font-size: 1rem; cursor: pointer; }
.cs-folio-sig strong { font-size: 1.9rem; font-variant-numeric: tabular-nums; }
.cs-folio-sig--sel { background: var(--cs-primary); color: #fff; }
.cs-folio-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: .45rem; max-height: 17rem; overflow-y: auto; padding: .15rem; }
@media (min-width: 560px) { .cs-folio-grid { grid-template-columns: repeat(8, 1fr); } }
.cs-folio-n { min-height: 52px; border-radius: 14px; border: 2px solid var(--cs-ok); background: var(--cs-ok-bg); color: var(--cs-ok); font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.cs-folio-n--ocupado, .cs-folio-n--ocupado[disabled] { border-color: var(--cs-err); background: var(--cs-err-bg); color: var(--cs-err); opacity: .75; cursor: not-allowed; text-decoration: line-through; }
.cs-folio-n--sel { border-color: var(--cs-info); background: var(--cs-info); color: #fff; box-shadow: 0 0 0 3px var(--cs-primary-ring); }
.cs-folio-nota { margin: 0; font-size: .78rem; color: var(--cs-muted); display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; }
.cs-folio-pt { display: inline-block; width: .75rem; height: .75rem; border-radius: 4px; border: 2px solid; margin-left: .4rem; }
.cs-folio-pt--libre { border-color: var(--cs-ok); background: var(--cs-ok-bg); margin-left: 0; }
.cs-folio-pt--ocupado { border-color: var(--cs-err); background: var(--cs-err-bg); }
.cs-folio-pt--sel { border-color: var(--cs-info); background: var(--cs-info); }
.cs-folio-manual label { display: block; font-weight: 700; font-size: .85rem; margin-bottom: .25rem; color: var(--cs-text); }
.cs-folio-asignado { margin: .35rem 0 0; font-size: .95rem; color: var(--cs-primary-dark); }

/* ---------------------------------------------------------------- Trabajo sin conexión */
.cs-caseta-offline { display: flex; flex-direction: column; gap: .25rem; padding: .75rem 1rem; border-radius: 16px; background: var(--cs-warn-bg); color: var(--cs-warn); font-size: .88rem; font-weight: 600; text-decoration: none; }
.cs-caseta-offline strong { display: flex; align-items: center; gap: .4rem; font-weight: 800; font-size: .95rem; }
.cs-caseta-offline--error { background: var(--cs-err-bg); color: var(--cs-err); }
.cs-caseta-offline--aviso { background: #FEF3C7; color: #78350F; }
.cs-caseta-offline .cs-btn { align-self: flex-start; margin-top: .3rem; }
.cs-caseta-pendiente:disabled { opacity: .75; cursor: default; }
.cs-caseta-sinqr { display: flex; flex-direction: column; gap: .7rem; padding: 1.2rem 1rem; border-radius: 20px; background: var(--cs-warn-bg); color: var(--cs-warn); text-align: center; align-items: center; }
.cs-caseta-sinqr h2 { margin: 0; font-size: 1.15rem; }
.cs-caseta-sinqr p { margin: 0; font-weight: 600; }
.cs-caseta-res-offline { margin: .3rem 0 0; font-weight: 700; font-size: .95rem; opacity: .95; }