/* ==========================================================
   Estilos del sistema de tarjetas NFC + QR
   Pensado primero para el celular: el comercio va a configurar
   su tarjeta desde el teléfono, parado detrás del mostrador.
   ========================================================== */

:root {
    --fondo: #f6f7f9;
    --papel: #ffffff;
    --tinta: #16181d;
    --tinta-suave: #5c6472;
    --borde: #e2e5ea;
    --acento: #1f6feb;
    --acento-oscuro: #1a5ac4;
    --ok: #17794a;
    --ok-fondo: #e7f6ee;
    --error: #b42318;
    --error-fondo: #fde8e6;
    --aviso: #8a5a00;
    --aviso-fondo: #fdf3e2;
    --radio: 12px;
    --sombra: 0 1px 3px rgba(16, 24, 40, .06), 0 8px 24px rgba(16, 24, 40, .06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #0f1115;
        --papel: #171a21;
        --tinta: #e8eaee;
        --tinta-suave: #9aa3b2;
        --borde: #2a2f3a;
        --acento: #4b8ef7;
        --acento-oscuro: #3a7ae0;
        --ok: #4ade80;
        --ok-fondo: #12301f;
        --error: #f87171;
        --error-fondo: #331716;
        --aviso: #fbbf24;
        --aviso-fondo: #33270d;
        --sombra: 0 1px 3px rgba(0, 0, 0, .4);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

main {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

body.angosto main { max-width: 520px; }

/* ---- Barra superior ---- */
.barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
}

.marca {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--tinta);
    text-decoration: none;
    letter-spacing: -.01em;
}

.barra nav { display: flex; gap: 18px; }

.barra nav a {
    color: var(--tinta-suave);
    text-decoration: none;
    font-size: .93rem;
}

.barra nav a:hover { color: var(--acento); }

/* ---- Bloques ---- */
.tarjeta {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 24px;
    margin-bottom: 20px;
    box-shadow: var(--sombra);
}

.centro { text-align: center; }

h1 { font-size: 1.5rem; margin: 0 0 12px; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 28px 0 12px; letter-spacing: -.01em; }
h3 { font-size: 1rem; margin: 20px 0 8px; }

p { margin: 0 0 14px; }
.chico { font-size: .85rem; color: var(--tinta-suave); }
.apagado { color: var(--tinta-suave); }

/* ---- Formularios ---- */
label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    margin: 16px 0 6px;
}

input[type=text], input[type=email], input[type=password],
input[type=url], input[type=number], input[type=date], textarea, select {
    width: 100%;
    padding: 11px 13px;
    font-size: 16px; /* menos de 16px hace que el iPhone haga zoom al tocar */
    font-family: inherit;
    color: var(--tinta);
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: 9px;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
    border-color: var(--acento);
}

.codigo-grande {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1.5rem;
    letter-spacing: .28em;
    text-align: center;
    text-transform: uppercase;
}

.ayuda { font-size: .84rem; color: var(--tinta-suave); margin-top: 6px; }

/* ---- Botones ---- */
.boton, button {
    display: inline-block;
    padding: 12px 20px;
    font-size: .97rem;
    font-weight: 600;
    font-family: inherit;
    color: #fff;
    background: var(--acento);
    border: 0;
    border-radius: 9px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
}

.boton:hover, button:hover { background: var(--acento-oscuro); }
.ancho-total { width: 100%; }

.boton.secundario, button.secundario {
    background: transparent;
    color: var(--tinta);
    border: 1px solid var(--borde);
}

.boton.secundario:hover, button.secundario:hover { border-color: var(--acento); color: var(--acento); }

.boton.peligro, button.peligro { background: var(--error); }

/* ---- Mensajes ---- */
.mensaje {
    padding: 12px 14px;
    border-radius: 9px;
    margin-bottom: 18px;
    font-size: .93rem;
    border: 1px solid transparent;
}

.mensaje.ok    { background: var(--ok-fondo);    color: var(--ok);    border-color: currentColor; }
.mensaje.error { background: var(--error-fondo); color: var(--error); border-color: currentColor; }
.mensaje.aviso { background: var(--aviso-fondo); color: var(--aviso); border-color: currentColor; }

/* ---- Estados ---- */
.pastilla {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.pastilla.activa    { background: var(--ok-fondo);    color: var(--ok); }
.pastilla.stock     { background: var(--borde);       color: var(--tinta-suave); }
.pastilla.pausada   { background: var(--aviso-fondo); color: var(--aviso); }
.pastilla.bloqueada { background: var(--error-fondo); color: var(--error); }

/* ---- Tablas ---- */
.tabla-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table {
    width: 100%;
    border-collapse: collapse;
    font-size: .9rem;
}

th, td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--borde);
    white-space: nowrap;
}

th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--tinta-suave); }
tbody tr:hover { background: var(--fondo); }
td.envolver { white-space: normal; max-width: 320px; word-break: break-word; }

code, .mono {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: .92em;
}

/* ---- Números destacados ---- */
.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}

.numero {
    background: var(--papel);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px;
}

.numero .valor { font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.numero .rotulo { font-size: .8rem; color: var(--tinta-suave); text-transform: uppercase; letter-spacing: .04em; }

/* ---- Pie ---- */
footer {
    max-width: 960px;
    margin: 0 auto;
    padding: 24px 16px 40px;
    border-top: 1px solid var(--borde);
    color: var(--tinta-suave);
    font-size: .88rem;
    text-align: center;
}

footer a { color: var(--acento); }

/* ---- Utilidades ---- */
.fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.separador { height: 1px; background: var(--borde); margin: 24px 0; border: 0; }
.qr-vista { max-width: 220px; width: 100%; height: auto; background: #fff; padding: 8px; border-radius: 8px; }