/* CarnetQR — estilos */
:root {
    --fondo: #f4f5f7;
    --blanco: #ffffff;
    --tinta: #1c2330;
    --gris: #6b7280;
    --borde: #d7dbe2;
    --acento: #1a56db;
    --verde: #15803d;
    --rojo: #b91c1c;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
    background: var(--fondo);
    color: var(--tinta);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- barra superior ---------- */
.barra {
    background: var(--tinta);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 20px;
    height: 52px;
}
.barra .logo {
    font-weight: 700;
    font-size: 18px;
    color: #fff;
    text-decoration: none;
    letter-spacing: .5px;
}
.barra nav { display: flex; gap: 4px; }
.barra nav a {
    color: #c9d0dc;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 14px;
}
.barra nav a.on, .barra nav a:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}

main {
    flex: 1;
    width: 100%;
    max-width: 860px;
    margin: 0 auto;
    padding: 24px 16px 48px;
}

footer {
    text-align: center;
    font-size: 12px;
    color: var(--gris);
    padding: 12px;
}

/* ---------- tabla lista ---------- */
h1 { font-size: 22px; margin: 0 0 16px; }
.acciones { margin-bottom: 16px; }

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 10px;
    overflow: hidden;
}
th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde);
    font-size: 14px;
}
th { background: #eef0f4; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; color: var(--gris); }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #f8fafc; }

.pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
}
.pill.activo { background: #dcfce7; color: var(--verde); }
.pill.inactivo { background: #fee2e2; color: var(--rojo); }

/* ---------- botones ---------- */
.btn {
    display: inline-block;
    background: var(--blanco);
    border: 1px solid var(--borde);
    color: var(--tinta);
    padding: 7px 14px;
    border-radius: 7px;
    font-size: 13px;
    cursor: pointer;
    text-decoration: none;
}
.btn:hover { background: #f1f3f7; }
.btn.primario { background: var(--acento); border-color: var(--acento); color: #fff; }
.btn.primario:hover { background: #1648b8; }
.btn.peligro { color: var(--rojo); border-color: #e5b4b4; }
.btn.peligro:hover { background: #fef2f2; }
.btn.chico { padding: 4px 10px; font-size: 12px; }
a.btn { line-height: 1.4; }

/* ---------- formulario ---------- */
form.fila {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 10px;
    padding: 20px;
    max-width: 480px;
}
form.fila label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin: 14px 0 4px;
}
form.fila input[type=text], form.fila input[type=date] {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font-size: 14px;
}
form.fila input[type=checkbox] { width: 18px; height: 18px; }
.form-línea { display: flex; gap: 10px; margin-top: 18px; }
.checkbox-línea { display: flex; align-items: center; gap: 8px; margin: 16px 0; font-size: 14px; }

/* ---------- carnet (impresión) ---------- */
.tarjeta-zona { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 14px;
    width: 360px;
    min-height: 220px;
    padding: 24px;
    display: flex;
    gap: 18px;
    box-shadow: 0 1px 4px rgba(0,0,0,.08);
    align-items: center;
}
.tarjeta .datos { flex: 1; }
.tarjeta .empresa { font-size: 13px; font-weight: 700; color: var(--acento); text-transform: uppercase; letter-spacing: 1px; }
.tarjeta .nombre { font-size: 20px; font-weight: 700; margin: 10px 0 2px; }
.tarjeta .apellido { font-size: 16px; color: var(--gris); }
.tarjeta .dni { margin-top: 14px; font-size: 13px; color: var(--gris); }
.tarjeta .dni b { color: var(--tinta); font-size: 14px; letter-spacing: 1px; }
.tarjeta .qr { width: 120px; height: 120px; flex-shrink: 0; }
.tarjeta .qr svg { width: 100%; height: 100%; display: block; }
.estado-carnet { font-size: 13px; font-weight: 600; }
.estado-carnet.inactivo { color: var(--rojo); }

/* ---------- verificación ---------- */
.veredicto {
    border-radius: 12px;
    padding: 28px;
    text-align: center;
    background: var(--blanco);
    border: 1px solid var(--borde);
    max-width: 460px;
    margin: 40px auto 0;
}
.veredicto h1 { font-size: 26px; margin: 10px 0 6px; }
.veredicto .icono { font-size: 48px; line-height: 1; }
.veredicto.ok { border-color: #86efac; background: #f0fdf4; }
.veredicto.ok h1 { color: var(--verde); }
.veredicto.mal { border-color: #fca5a5; background: #fef2f2; }
.veredicto.mal h1 { color: var(--rojo); }
.veredicto .datos-tabla { margin-top: 18px; font-size: 15px; }
.veredicto .datos-tabla div { padding: 4px 0; }
.veredicto .datos-tabla b { font-weight: 600; }

/* ---------- vacíos / avisos ---------- */
.vacio {
    text-align: center;
    color: var(--gris);
    padding: 40px 0;
    font-size: 15px;
}
.aviso {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    margin-bottom: 16px;
}

/* ---------- impresión ---------- */
@media print {
    .barra, footer, .acciones, .btn, .no-imprimir { display: none !important; }
    body { background: #fff; }
    main { padding: 0; max-width: none; }
    .tarjeta { box-shadow: none; border: 2px solid var(--tinta); }
}