/* =====================================================================
   App Pollería - Estilos
   Archivo:   public/css/app.css
   Autor:     Antonio Jesús Pérez Llorca · info@iceonline.es · www.iceonline.es
   Última modificación: 04/11/2026 20:40

   Pensado para tablet en mostrador: botones grandes, texto legible,
   tarjetas iguales y alineadas, textos a la izquierda.
   ===================================================================== */

/* ---------- BLOQUE 1: Colores y base ---------- */
:root {
    --fondo: #f6f3ee;
    --tarjeta: #ffffff;
    --texto: #1f2328;
    --suave: #6b6f76;
    --borde: #e3ddd3;
    --principal: #c2410c;          /* Naranja tostado */
    --principal-oscuro: #9a3412;
    --cabecera: #2b2118;
    --ok: #15803d;
    --error: #b91c1c;
    --aviso: #a16207;
    --radio: 12px;
    --sombra: 0 1px 3px rgba(0, 0, 0, .08);
}

* { box-sizing: border-box; }

html { font-size: 17px; }

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

h1 { font-size: 1.6rem; margin: 0 0 1rem; }
h2 { font-size: 1.2rem; margin: 0 0 .8rem; }
a  { color: var(--principal); }
code { background: #f1ece4; padding: .1rem .35rem; border-radius: 4px; }

.suave   { color: var(--suave); }
.pequeno { font-size: .85rem; }

/* ---------- BLOQUE 2: Cabecera y menú ---------- */
.cabecera {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: .6rem 1rem;
    background: var(--cabecera);
    color: #fff;
}
.cabecera a { color: #fff; text-decoration: none; }
.marca { font-weight: 700; font-size: 1.1rem; margin-right: .5rem; }

.menu, .usuario { display: flex; gap: .35rem; flex-wrap: wrap; }
.menu { flex: 1; }
.menu a, .usuario a {
    padding: .55rem .9rem;
    border-radius: 8px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.menu a:hover, .usuario a:hover { background: rgba(255, 255, 255, .1); }
.menu a.activo, .usuario a.activo { background: var(--principal); }
.usuario .salir { opacity: .8; }

/* ---------- BLOQUE 3: Contenido, tarjetas y rejillas ---------- */
.contenido {
    flex: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.25rem 1rem 2rem;
}

.tarjeta {
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
}
.tarjeta-estrecha { max-width: 440px; margin: 2rem auto; }

/* Rejillas de tarjetas del mismo alto */
.rejilla {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    grid-auto-rows: 1fr;
    gap: 1rem;
}
.rejilla-2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); grid-auto-rows: auto; align-items: start; }

.acceso {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    text-decoration: none;
    color: var(--texto);
    min-height: 110px;
    border-left: 5px solid var(--principal);
}
.acceso strong { font-size: 1.2rem; }
.acceso:hover { border-color: var(--principal-oscuro); }

/* ---------- BLOQUE 4: Formularios y botones ---------- */
form label {
    display: block;
    margin-bottom: .9rem;
    font-weight: 600;
}
input[type=text], input[type=password], input[type=tel], input[type=number],
input[type=time], input[type=date], select, textarea {
    display: block;
    width: 100%;
    margin-top: .3rem;
    padding: .7rem .8rem;
    font-size: 1rem;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    min-height: 48px;
}
input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--principal);
    border-color: var(--principal);
}
.casilla { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.casilla input { width: 22px; height: 22px; margin-top: .1rem; }
.campo-codigo { font-size: 1.5rem; letter-spacing: .3rem; font-family: ui-monospace, monospace; }

.boton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .6rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: #fff;
    color: var(--texto);
    text-decoration: none;
    cursor: pointer;
}
.boton-principal { background: var(--principal); border-color: var(--principal); color: #fff; }
.boton-principal:hover { background: var(--principal-oscuro); }
.boton-peligro { background: #fff; border-color: var(--error); color: var(--error); }
.boton-ancho { width: 100%; }
.botonera { display: flex; gap: .6rem; flex-wrap: wrap; }
.botonera .boton { flex: 1; }

/* ---------- BLOQUE 5: Avisos y estados ---------- */
.aviso {
    padding: .8rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
    border-left: 5px solid;
    background: #fff;
}
.aviso-ok    { border-color: var(--ok);    background: #f0fdf4; }
.aviso-error { border-color: var(--error); background: #fef2f2; }
.aviso-aviso { border-color: var(--aviso); background: #fefce8; }

.estado-ok { color: var(--ok);    font-weight: 700; }
.estado-no { color: var(--error); font-weight: 700; }

/* ---------- BLOQUE 6: 2FA ---------- */
.qr { width: 220px; height: 220px; margin: .5rem 0 1rem; }
.qr svg { width: 100%; height: 100%; }
.codigos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: .5rem;
    margin-bottom: 1rem;
}
.codigos code { font-size: 1.05rem; padding: .5rem; text-align: center; }
.pasos { padding-left: 1.2rem; margin: 0 0 .5rem; }

/* ---------- BLOQUE 7: Login y pie ---------- */
.sin-sesion .contenido { display: flex; align-items: center; }
.login h1 { color: var(--principal); }

.pie {
    padding: 1rem;
    text-align: center;
    font-size: .8rem;
    color: var(--suave);
}
.pie a { color: var(--suave); }

/* ---------- BLOQUE 8: Pantallas pequeñas (móvil) ---------- */
@media (max-width: 640px) {
    .cabecera { gap: .4rem; }
    .menu { order: 3; width: 100%; }
    .menu a { flex: 1; justify-content: center; padding: .5rem; font-size: .9rem; }
}