:root {
    --azul: #1e5fa8;
    --azul-osc: #16487f;
    --gris: #f4f6f9;
    --gris-borde: #d5dbe3;
    --texto: #22303f;
    --verde: #2e8b57;
    --rojo: #c0392b;
    --amarillo: #f6c343;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    color: var(--texto);
    background: var(--gris);
}

.oculto { display: none !important; }

/* ── Cabecera ── */
#cabecera {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--azul);
    color: #fff;
    padding: 10px 20px;
}
#cabecera .marca { font-size: 20px; font-weight: 700; letter-spacing: .5px; }
#cabecera .usuario { display: flex; align-items: center; gap: 12px; }

/* ── Layout ── */
main {
    max-width: 960px;
    margin: 22px auto;
    padding: 0 16px;
}

.tarjeta {
    background: #fff;
    border: 1px solid var(--gris-borde);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

h1 { font-size: 22px; margin: 0 0 16px; }
h2 { font-size: 18px; margin: 0 0 14px; }
h3 { font-size: 15px; margin: 0 0 8px; }

/* ── Formularios ── */
label { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
input[type=text], input[type=password], input[type=number], textarea, select {
    width: 100%;
    padding: 9px 10px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
}
textarea { min-height: 60px; resize: vertical; }
.fila { display: flex; gap: 14px; flex-wrap: wrap; }
.fila > div { flex: 1; min-width: 140px; }
.check { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.check input { width: auto; }
.check label { margin: 0; }

/* ── Botones ── */
.btn {
    display: inline-block;
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 9px 16px;
    font-size: 14px;
    cursor: pointer;
}
.btn:hover { background: var(--azul-osc); }
.btn-sec { background: #6b7a8d; }
.btn-sec:hover { background: #566373; }
.btn-peligro { background: var(--rojo); }
.btn-peligro:hover { background: #a5322395; }
.btn-mini { padding: 5px 10px; font-size: 12px; }
.acciones { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }

/* ── Pestañas ── */
.tabs { display: flex; gap: 6px; margin-bottom: 16px; border-bottom: 2px solid var(--gris-borde); }
.tab {
    padding: 10px 18px;
    cursor: pointer;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    color: #6b7a8d;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.tab.activa { color: var(--azul); border-bottom-color: var(--azul); }

/* ── Tablas / listas ── */
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--gris-borde); font-size: 14px; }
th { background: var(--gris); font-size: 12px; text-transform: uppercase; color: #6b7a8d; }
tr:hover td { background: #fafbfc; }

.lista-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    margin-bottom: 8px;
    background: #fff;
}
.lista-item .info h3 { margin: 0 0 3px; }
.lista-item .info small { color: #6b7a8d; }

/* ── Preguntas ── */
.pregunta {
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    padding: 14px;
    margin-bottom: 12px;
    background: #fff;
}
.pregunta .enunciado { font-weight: 600; margin-bottom: 10px; }
.respuesta {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--gris-borde);
    border-radius: 6px;
    margin-bottom: 6px;
    cursor: pointer;
}
.respuesta:hover { background: #f0f6ff; }
.respuesta.sel { border-color: var(--azul); background: #eaf2fd; }
.respuesta.correcta { border-color: var(--verde); background: #eafaf0; }
.respuesta.fallo { border-color: var(--rojo); background: #fdecea; }
.respuesta input { width: auto; }

/* ── Cronómetro ── */
.crono {
    position: sticky;
    top: 0;
    background: var(--azul);
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 14px;
}
.crono.alerta { background: var(--rojo); }

/* ── Resultado ── */
.nota-grande { font-size: 42px; font-weight: 800; text-align: center; }
.nota-ok { color: var(--verde); }
.nota-ko { color: var(--rojo); }

/* ── Avisos ── */
.aviso {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: var(--texto);
    color: #fff;
    padding: 12px 18px;
    border-radius: 6px;
    box-shadow: 0 3px 12px rgba(0,0,0,.25);
    z-index: 100;
    max-width: 340px;
}
.aviso.error { background: var(--rojo); }
.aviso.ok { background: var(--verde); }

/* ── Login ── */
.login-caja { max-width: 380px; margin: 60px auto; }
.badge { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--gris); color: #6b7a8d; }
.badge.si { background: #eafaf0; color: var(--verde); }
.badge.no { background: #fdecea; color: var(--rojo); }
.vacio { text-align: center; color: #6b7a8d; padding: 24px; }