/*
 * Estilos de las tres pantallas públicas de solicitud de factura.
 *
 * Sustituyen a bootstrap.min.css (144 KB) y signin.css. Esta web no se ve en una página propia:
 * se pinta dentro de un iframe en el sitio de cada restaurante, 32 identidades distintas. Su
 * trabajo es no tener aspecto propio, así que aquí no hay ningún color de marca.
 *
 * Decisiones y sus motivos:
 *
 *   - FONDO TRANSPARENTE. El body no pinta nada, de modo que se ve el de la página anfitriona y
 *     no aparece el recorte blanco del iframe sobre un fondo con color.
 *   - SIN ALTURA FORZADA. signin.css ponía «html, body { height: 100% }», que estiraba el
 *     documento aunque el contenido ocupara un tercio. El alto lo marca ahora el contenido, para
 *     que el anfitrión pueda ajustar el iframe.
 *   - TIPOGRAFÍA DEL SISTEMA. Dentro de un iframe el CSS no hereda nada del documento padre, así
 *     que no se puede adoptar la fuente del cliente. La del sistema es la que menos desentona y
 *     no cuesta ninguna descarga.
 *   - COLOR CASI NEGRO en el botón. El azul de Bootstrap es un color con opinión, y la opinión no
 *     es la del restaurante.
 *   - ETIQUETAS VISIBLES. Antes el único rótulo era el placeholder, que desaparece al escribir.
 *
 * Se mantiene deliberadamente en el rango claro: el iframe no puede saber si la página que lo
 * embebe es clara u oscura —prefers-color-scheme reflejaría el sistema del visitante, no el sitio
 * del restaurante—, y casi todas las secciones de contenido donde se inserta son claras.
 */

:root {
    --tinta: #18181b;
    --tinta-suave: #3f3f46;
    --apagado: #71717a;
    --borde: #d4d4d8;
    --borde-fuerte: #a1a1aa;
    --campo: #ffffff;
    --error: #9f1239;
    --error-fondo: #fff1f2;
    --error-borde: #fecdd3;
    --aviso: #854d0e;
    --aviso-fondo: #fefce8;
    --aviso-borde: #fde68a;
    --info: #1e40af;
    --info-fondo: #eff6ff;
    --info-borde: #bfdbfe;
    --exito: #166534;
    --exito-fondo: #f0fdf4;
    --exito-borde: #bbf7d0;
    --radio: 10px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 32px 20px 40px;
    background: transparent;
    color: var(--tinta);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/*
 * El body es transparente para que el margen exterior tome el fondo del anfitrión, pero la hoja
 * SÍ pinta el suyo. Con todo transparente, sobre una sección oscura el título, las etiquetas y las
 * pistas —tinta casi negra— quedan ilegibles. Comprobado sobre fondo oscuro antes de publicar.
 *
 * Es un blanco liso, sin sombra ni borde: sobre las secciones claras, que es donde va embebido
 * casi siempre, no se distingue del fondo; sobre una oscura se convierte en una tarjeta limpia y
 * legible. Se prefiere que se note un poco antes que arriesgarse a que no se lea.
 */
.hoja {
    width: 100%;
    max-width: 380px;
    margin: 0 auto;
    padding: 26px 24px 28px;
    background: #ffffff;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* El logo del local, cuando lo tiene y ha pedido enseñarlo. */
.hoja__logo {
    display: block;
    margin: 0 auto 4px;
    max-width: 240px;
    max-height: 88px;
    height: auto;
}

.hoja__titulo {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -0.01em;
    text-align: center;
    text-wrap: balance;
    color: var(--tinta);
}

.campo {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.campo__etiqueta {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--apagado);
}

.campo__control {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px; /* 16px evita que Safari en iOS haga zoom al enfocar. */
    line-height: 1.4;
    color: var(--tinta);
    background: var(--campo);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo__control::placeholder {
    color: var(--apagado);
    opacity: 1;
}

.campo__control:hover {
    border-color: var(--borde-fuerte);
}

.campo__control:focus {
    outline: none;
    border-color: var(--tinta);
    box-shadow: 0 0 0 3px rgba(24, 24, 27, 0.12);
}

/* Los grupos de campos van juntos pero separados entre sí, no pegados como en el v1. */
.grupo {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.boton {
    display: block;
    width: 100%;
    padding: 13px 18px;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-align: center;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--radio);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.boton--principal {
    color: #ffffff;
    background: var(--tinta);
}

.boton--principal:hover {
    background: #27272a;
}

.boton--secundario {
    color: var(--tinta-suave);
    background: transparent;
    border-color: var(--borde);
}

.boton--secundario:hover {
    border-color: var(--borde-fuerte);
    color: var(--tinta);
}

.boton:focus-visible {
    outline: 2px solid var(--tinta);
    outline-offset: 2px;
}

.acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 2px;
}

.aviso {
    margin: 0;
    padding: 12px 14px;
    font-size: 14.5px;
    line-height: 1.5;
    border: 1px solid transparent;
    border-radius: var(--radio);
    text-align: left;
}

.aviso--error {
    color: var(--error);
    background: var(--error-fondo);
    border-color: var(--error-borde);
}

.aviso--advertencia {
    color: var(--aviso);
    background: var(--aviso-fondo);
    border-color: var(--aviso-borde);
}

.aviso--info {
    color: var(--info);
    background: var(--info-fondo);
    border-color: var(--info-borde);
}

.aviso--exito {
    color: var(--exito);
    background: var(--exito-fondo);
    border-color: var(--exito-borde);
}

.aviso > div + div {
    margin-top: 4px;
}

.pista {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--apagado);
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}