/* Panel de bots EMT. Pensado para el móvil primero. */

:root {
    --fondo: #f4f5f7;
    --tarjeta: #ffffff;
    --texto: #1b1d20;
    --suave: #646b74;
    --borde: #d8dce1;
    --azul: #1f5fd0;
    --azul-txt: #ffffff;
    --ok-f: #e4f6ea;    --ok-b: #1d7a40;
    --err-f: #fdeaea;   --err-b: #b3261e;
    --avi-f: #fff5e0;   --avi-b: #8a5a00;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #15171a;
        --tarjeta: #1e2125;
        --texto: #e9eaec;
        --suave: #9aa1aa;
        --borde: #343a41;
        --azul: #5b92ef;
        --azul-txt: #0d1117;
        --ok-f: #16301f;    --ok-b: #6ddc96;
        --err-f: #341a19;   --err-b: #f1948e;
        --avi-f: #332813;   --avi-b: #f0c060;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    padding: 0 16px 48px;
    background: var(--fondo);
    color: var(--texto);
    font: 16px/1.5 -apple-system, "Segoe UI", Roboto, system-ui, sans-serif;
    -webkit-text-size-adjust: 100%;
}

.envoltorio { max-width: 640px; margin: 0 auto; }

header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 20px 0 12px;
    border-bottom: 1px solid var(--borde);
    margin-bottom: 20px;
}
header h1 { font-size: 20px; margin: 0; letter-spacing: -0.01em; }
header .quien { font-size: 14px; color: var(--suave); }
header a { color: var(--azul); text-decoration: none; }

nav { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px;
      margin: -8px 0 20px; }
nav a { color: var(--azul); text-decoration: none; }
nav a:hover { text-decoration: underline; }

h2 { font-size: 16px; margin: 28px 0 10px; }

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}
.tarjeta.destacada { border-color: var(--azul); border-width: 2px; }

label { display: block; font-size: 14px; font-weight: 600; margin: 14px 0 4px; }
label:first-child { margin-top: 0; }
.pista { font-weight: 400; color: var(--suave); font-size: 13px;
         display: block; margin-top: 2px; }

input[type=text], input[type=password], input[type=number], select {
    width: 100%;
    padding: 11px 12px;
    font-size: 16px;            /* 16px evita que iOS haga zoom al tocar */
    color: var(--texto);
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 8px;
}
input:focus, select:focus { outline: 2px solid var(--azul); outline-offset: 1px; }

.fila-check { display: flex; align-items: center; gap: 8px; margin: 16px 0; }
.fila-check input { width: 20px; height: 20px; }
.fila-check label { margin: 0; }

button, .boton {
    display: inline-block;
    width: 100%;
    margin-top: 18px;
    padding: 13px 16px;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    color: var(--azul-txt);
    background: var(--azul);
    border: 0;
    border-radius: 8px;
    cursor: pointer;
}
button.secundario, .boton.secundario {
    color: var(--texto);
    background: transparent;
    border: 1px solid var(--borde);
}
button.peligro { background: var(--err-b); color: #fff; }

.avisos { margin-bottom: 18px; }
.aviso {
    padding: 11px 14px;
    border-left: 4px solid;
    border-radius: 6px;
    margin-bottom: 8px;
    font-size: 15px;
}
.aviso.ok    { background: var(--ok-f);  border-color: var(--ok-b);  color: var(--ok-b); }
.aviso.error { background: var(--err-f); border-color: var(--err-b); color: var(--err-b); }
.aviso.aviso-aviso { background: var(--avi-f); border-color: var(--avi-b); color: var(--avi-b); }

dl.datos { margin: 0; display: grid; grid-template-columns: auto 1fr;
           gap: 6px 14px; font-size: 15px; }
dl.datos dt { color: var(--suave); }
dl.datos dd { margin: 0; font-variant-numeric: tabular-nums; }

.lista { list-style: none; margin: 0; padding: 0; }
.lista li {
    padding: 10px 0;
    border-bottom: 1px solid var(--borde);
    font-size: 15px;
    display: flex; justify-content: space-between; gap: 12px;
}
.lista li:last-child { border-bottom: 0; }

.etiqueta {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; padding: 3px 8px; border-radius: 999px;
    white-space: nowrap;
}
.etiqueta.ok        { background: var(--ok-f);  color: var(--ok-b); }
.etiqueta.fallo,
.etiqueta.error     { background: var(--err-f); color: var(--err-b); }
.etiqueta.simulacro { background: var(--avi-f); color: var(--avi-b); }

pre.detalle {
    margin: 8px 0 0; padding: 10px; overflow-x: auto;
    font: 12px/1.45 ui-monospace, Consolas, monospace;
    color: var(--suave); background: var(--fondo);
    border-radius: 6px; white-space: pre-wrap; word-break: break-word;
}

.vacio { color: var(--suave); font-size: 15px; margin: 0; }
.nota { color: var(--suave); font-size: 13px; margin: 10px 0 0; }