:root {
    --color-primario: #2b5797;
    --color-primario-oscuro: #1d3d6b;
    --color-exito: #1e7e34;
    --color-error: #b02a2a;
    --color-fondo: #f4f6f9;
    --color-tarjeta: #ffffff;
    --color-texto: #22262b;
    --radio: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Segoe UI', Roboto, Arial, sans-serif;
    background: var(--color-fondo);
    color: var(--color-texto);
    line-height: 1.5;
}

.cabecera-app {
    background: var(--color-primario);
    color: #fff;
    padding: 14px 16px;
}
.cabecera-contenido { max-width: 960px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.cabecera-titulo { font-size: 1.2rem; font-weight: 600; }
.cabecera-logo { height: 42px; width: auto; border-radius: 6px; background: #fff; padding: 2px; }

.contenedor-principal {
    max-width: 960px;
    margin: 0 auto;
    padding: 16px;
}

.pagina-simple { display: flex; justify-content: center; align-items: flex-start; min-height: 100vh; padding: 24px 12px; }

.contenedor-card,
.tarjeta {
    background: var(--color-tarjeta);
    border-radius: var(--radio);
    padding: 24px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    max-width: 520px;
    width: 100%;
    margin: 0 auto 16px auto;
}

.tarjeta-ancha { max-width: 100%; }

h1 { font-size: 1.4rem; margin-top: 0; }
h2 { font-size: 1.15rem; }

.campo { margin-bottom: 16px; display: flex; flex-direction: column; gap: 6px; }
label { font-weight: 600; font-size: 0.92rem; }

input[type="text"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="file"],
input[type="datetime-local"],
textarea,
select {
    padding: 12px;
    font-size: 1rem;
    border: 1px solid #c7ccd3;
    border-radius: 8px;
    width: 100%;
    font-family: inherit;
}

textarea { resize: vertical; min-height: 90px; }

input:focus, textarea:focus, select:focus, button:focus, a.boton:focus {
    outline: 3px solid #8ab4f8;
    outline-offset: 1px;
}

.boton {
    display: inline-block;
    background: var(--color-primario);
    color: #fff;
    border: none;
    padding: 13px 20px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}
.boton:hover { background: var(--color-primario-oscuro); }
.boton-secundario { background: #6c757d; }
.boton-secundario:hover { background: #565e64; }
.boton-exito { background: var(--color-exito); }
.boton-peligro { background: var(--color-error); }
.boton-ancho { width: 100%; }
.boton-bloque { display: block; }

.grupo-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }

.captcha-caja {
    background: #f0f2f5;
    padding: 12px;
    border-radius: 8px;
}

.alerta { padding: 12px 14px; border-radius: 8px; margin-bottom: 14px; list-style: none; }
.alerta-ok { background: #e6f4ea; color: #1e7e34; border: 1px solid #b9dfc4; }
.alerta-error { background: #fbe7e7; color: #b02a2a; border: 1px solid #f0bcbc; }
.alerta-info { background: #e8f0fe; color: #1c4e9c; border: 1px solid #c3d7f7; }

table.tabla-datos {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    font-size: 0.92rem;
}
table.tabla-datos th, table.tabla-datos td {
    padding: 10px 8px;
    border-bottom: 1px solid #e6e8eb;
    text-align: left;
}
table.tabla-datos th { background: #f0f2f5; }
.tabla-scroll { overflow-x: auto; }

.badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; }
.badge-confirmado { background: #e6f4ea; color: #1e7e34; }
.badge-pendiente { background: #fff4e5; color: #a15c00; }
.badge-ingreso { background: #e8f0fe; color: #1c4e9c; }

.pie-app { text-align: center; padding: 20px; color: #6c757d; font-size: 0.85rem; }

.menu-admin { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.menu-admin a {
    padding: 9px 14px;
    background: #eef1f5;
    border-radius: 8px;
    text-decoration: none;
    color: var(--color-texto);
    font-size: 0.9rem;
}
.menu-admin a.activo, .menu-admin a:hover { background: var(--color-primario); color: #fff; }

.qr-imagen { display: block; margin: 16px auto; max-width: 260px; width: 100%; border: 8px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.lector-video { width: 100%; max-width: 480px; margin: 0 auto; border-radius: var(--radio); overflow: hidden; }

.resultado-lectura {
    text-align: center;
    padding: 24px;
    border-radius: var(--radio);
    font-size: 1.3rem;
    font-weight: 700;
}
.resultado-ok { background: #e6f4ea; color: #1e7e34; }
.resultado-mal { background: #fbe7e7; color: #b02a2a; }

.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.stat-caja { background: #fff; border-radius: var(--radio); padding: 16px; text-align: center; box-shadow: 0 1px 6px rgba(0,0,0,0.06); }
.stat-numero { font-size: 1.6rem; font-weight: 700; color: var(--color-primario); }
.stat-etiqueta { font-size: 0.82rem; color: #6c757d; }

/* Móvil */
@media (max-width: 600px) {
    .contenedor-card, .tarjeta { padding: 18px; border-radius: 8px; }
    .grupo-botones { flex-direction: column; }
    .grupo-botones .boton { width: 100%; }
}

@media print {
    .no-imprimir { display: none !important; }
    body { background: #fff; }
}