/* =====================================================================
   Entradas Radio La Discusión — estilos (mobile-first, sobre Bootstrap 5)
   Cambia los colores de marca en :root
   ===================================================================== */
:root {
    /* Rojo del logo (#FF0000) para bordes y acentos; para botones y textos se usa
       un rojo apenas más oscuro que cumple contraste AA con texto blanco. */
    --ld-rojo-marca: #ff0000;
    --ld-rojo: #e00000;
    --ld-rojo-oscuro: #b80000;
    --ld-tinta: #111827;
    --ld-gris: #6b7280;
    --ld-fondo: #f4f4f2;
    --ld-borde: #e5e7eb;
    --ld-radio: 14px;
    --bs-primary: #e00000;
    --bs-primary-rgb: 224, 0, 0;
    --bs-link-color: #e00000;
    --bs-link-color-rgb: 224, 0, 0;
    --bs-link-hover-color: #b80000;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body {
    background: var(--ld-fondo);
    color: var(--ld-tinta);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main { flex: 1; }

.btn-primary {
    --bs-btn-bg: var(--ld-rojo);
    --bs-btn-border-color: var(--ld-rojo);
    --bs-btn-hover-bg: var(--ld-rojo-oscuro);
    --bs-btn-hover-border-color: var(--ld-rojo-oscuro);
    --bs-btn-active-bg: var(--ld-rojo-oscuro);
    --bs-btn-active-border-color: var(--ld-rojo-oscuro);
    --bs-btn-disabled-bg: #e8a3a3;
    --bs-btn-disabled-border-color: #e8a3a3;
}
.btn-outline-primary {
    --bs-btn-color: var(--ld-rojo);
    --bs-btn-border-color: var(--ld-rojo);
    --bs-btn-hover-bg: var(--ld-rojo);
    --bs-btn-hover-border-color: var(--ld-rojo);
    --bs-btn-active-bg: var(--ld-rojo-oscuro);
}
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: #ff8080;
    box-shadow: 0 0 0 .2rem rgba(224, 0, 0, .15);
}
.form-check-input:checked { background-color: var(--ld-rojo); border-color: var(--ld-rojo); }

/* --- Cabecera y pie -------------------------------------------------- */
/* Cabecera blanca: el logo oficial tiene texto negro y rojo sobre fondo claro */
.site-header {
    background: #fff;
    color: var(--ld-tinta);
    border-bottom: 4px solid var(--ld-rojo-marca);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.site-header .brand { color: var(--ld-tinta); text-decoration: none; display: inline-flex; align-items: center; gap: .75rem; }
/* El PNG mide 264×76: a 44 px de alto queda a ~1,7× (nítido). Para pantallas 3× conviene un SVG oficial. */
.logo { display: block; height: 44px; width: auto; }
.brand-sub {
    font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ld-gris); border-left: 1px solid var(--ld-borde); padding-left: .75rem;
}
.site-footer { color: var(--ld-gris); font-size: .875rem; }
.site-footer a { color: inherit; }

/* --- Evento ---------------------------------------------------------- */
.evento-hero {
    border-radius: var(--ld-radio);
    overflow: hidden;
    background: var(--ld-tinta);
    aspect-ratio: 16 / 7;
}
.evento-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Imagen pequeña o no apaisada (p. ej. un logo): completa, centrada y sin agrandarla de más */
.evento-hero--logo {
    background: #fff;
    border: 1px solid var(--ld-borde);
    border-bottom: 5px solid var(--ld-rojo-marca);
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
}
.evento-hero--logo img { width: auto; height: auto; max-width: min(100%, 420px); max-height: 100%; object-fit: contain; }
.evento-titulo { font-family: Georgia, "Times New Roman", serif; font-weight: 700; line-height: 1.15; }
.dato-evento { display: flex; gap: .75rem; align-items: flex-start; }
.dato-evento .icono {
    flex: 0 0 40px; height: 40px; border-radius: 10px;
    background: #ffe5e5; color: var(--ld-rojo);
    display: grid; place-items: center; font-size: 1.1rem;
}
.dato-evento small { color: var(--ld-gris); display: block; text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; }

.tarjeta {
    background: #fff;
    border: 1px solid var(--ld-borde);
    border-radius: var(--ld-radio);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.cupos-barra { height: 8px; border-radius: 99px; background: #eee; overflow: hidden; }
.cupos-barra > span { display: block; height: 100%; background: var(--ld-rojo); }


.aviso-privacidad {
    background: #f9fafb; border: 1px solid var(--ld-borde); border-radius: 10px;
    font-size: .82rem; color: #374151; padding: .75rem .9rem;
}

/* Honeypot: fuera de pantalla, invisible para humanos */
.campo-trampa { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* --- Ticket digital --------------------------------------------------- */
.ticket {
    max-width: 440px; margin: 0 auto; background: #fff;
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(17, 24, 39, .12);
}
.ticket-cabecera { background: #fff; color: var(--ld-gris); padding: 1rem 1.25rem; border-bottom: 5px solid var(--ld-rojo-marca); }
.ticket-cabecera .logo { height: 40px; }
.ticket-cuerpo { padding: 1.25rem; }
.ticket-evento { font-family: Georgia, serif; font-weight: 700; font-size: 1.35rem; line-height: 1.2; }
.ticket-corte {
    position: relative; border-top: 2px dashed var(--ld-borde); margin: 1rem -1.25rem;
}
.ticket-corte::before, .ticket-corte::after {
    content: ""; position: absolute; top: -13px; width: 24px; height: 24px; border-radius: 50%; background: var(--ld-fondo);
}
.ticket-corte::before { left: -12px; }
.ticket-corte::after { right: -12px; }
.ticket-qr { display: block; width: 100%; max-width: 320px; margin: 0 auto; image-rendering: pixelated; }
.ticket-codigo { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.6rem; font-weight: 700; letter-spacing: .08em; }
.ticket-estado { padding: .6rem; text-align: center; font-weight: 700; color: #fff; }
.ticket-estado.usado { background: #d97706; }
.ticket-estado.anulado { background: #b91c1c; }
.ticket-anulado .ticket-qr { opacity: .15; filter: grayscale(1); }

/* --- Verificador ------------------------------------------------------ */
.verificador-body { background: #0b0f17; color: #e5e7eb; }
.verificador-body .tarjeta { background: #151b26; border-color: #273142; color: #e5e7eb; }
/* Sin overflow:hidden ni border-radius sobre el video: en Safari (iOS) esa combinación puede dejarlo en negro */
#lector { width: 100%; background: #000; min-height: 260px; position: relative; }
#lector video { display: block; width: 100% !important; height: auto; }
.resultado {
    position: fixed; inset: 0; z-index: 2000; display: none;
    flex-direction: column; justify-content: center; align-items: center;
    padding: 1.5rem; text-align: center; color: #fff;
}
.resultado.visible { display: flex; animation: aparecer .18s ease-out; }
.resultado.valido { background: #15803d; }
.resultado.usado { background: #d97706; }
.resultado.invalido, .resultado.otro_evento, .resultado.anulado, .resultado.error { background: #b91c1c; }
.resultado.confirmado { background: #166534; }
.resultado .icono-grande { font-size: 5rem; line-height: 1; }
.resultado h2 { font-size: 2.2rem; font-weight: 800; letter-spacing: .02em; }
.resultado .detalle { font-size: 1.15rem; max-width: 520px; }
.resultado .detalle strong { font-size: 1.5rem; display: block; }
.resultado .btn { min-width: 240px; font-size: 1.2rem; padding: .9rem 1.5rem; border-radius: 14px; font-weight: 700; }
@keyframes aparecer { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }

/* --- Admin ------------------------------------------------------------ */
.admin-nav .nav-link { color: #4b5563; }
.admin-nav .nav-link.active, .admin-nav .nav-link:hover { color: var(--ld-rojo); }
.admin-nav .logo { height: 36px; }
.verificador-header .logo { height: 30px; }
.kpi { padding: 1rem 1.1rem; }
.kpi .valor { font-size: 1.9rem; font-weight: 800; line-height: 1.1; }
.kpi .etiqueta { color: var(--ld-gris); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
.table-tickets td { vertical-align: middle; }
.badge-estado-emitido { background: #2563eb; }
.badge-estado-usado { background: #16a34a; }
.badge-estado-anulado { background: #6b7280; }
.barra-horas { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.barra-horas div { flex: 1; background: var(--ld-rojo); border-radius: 4px 4px 0 0; min-height: 2px; position: relative; }
.barra-horas div span { position: absolute; top: -1.2rem; left: 0; right: 0; font-size: .7rem; text-align: center; color: var(--ld-gris); }

/* --- Impresión / PDF -------------------------------------------------- */
@media print {
    body { background: #fff; }
    .no-print, .site-header, .site-footer { display: none !important; }
    .ticket { box-shadow: none; border: 1px solid #ccc; }
    .ticket-corte::before, .ticket-corte::after { background: #fff; }
}

/* Celulares muy angostos: el logo "Radio La Discusión" ocupa casi todo el ancho */
@media (max-width: 359px) {
    .site-header .logo { height: 36px; }
    .brand-sub { display: none; }
}

@media (min-width: 768px) {
    .evento-hero { aspect-ratio: 16 / 6; }
}