/*
 * Las páginas de la nube. Los colores son los de docs/identidad-de-marca.md § 4, y la letra es
 * Inter, la de la caja (§ 5), servida desde esta misma nube: aquí se escribe una contraseña, y
 * nada se le pide a un tercero —ni fuentes ni scripts de otro dominio—.
 */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
    --indigo: #4F46E5;
    --indigo-oscuro: #3B34C4;
    --tinta: #1B1836;
    --tenue: #6E6A85;
    --papel: #F5F4F9;
    --borde: #E0DEE9;
    --rojo: #C0392B;
    --verde: #1A7F4B;
    --blanco: #FFFFFF;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font: 16px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.marca {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 32px 0 20px;
    color: var(--tinta);
    text-decoration: none;
    font-size: 24px;
}
.marca svg { width: 30px; height: 30px; }
.marca .mas { font-weight: 500; }
.marca .control { font-weight: 700; }

main {
    max-width: 440px;
    margin: 0 auto 48px;
    padding: 0 16px;
}

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

h1 { font-size: 22px; line-height: 1.3; margin: 0 0 12px; }
h2 { font-size: 18px; margin: 0 0 8px; }
p { margin: 0 0 12px; }
.tenue { color: var(--tenue); }

label { display: block; font-weight: 600; margin: 12px 0 4px; }
/* Todos los campos donde se escribe, no solo tres: un número, una fecha o una búsqueda que se quedan
   con el estilo del navegador se leen como una página a medio hacer. */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=search], input:not([type]), select, textarea {
    width: 100%;
    padding: 10px 12px;
    font: inherit;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--blanco);
    color: var(--tinta);
}
input:focus, select:focus, button:focus { outline: 2px solid var(--indigo); outline-offset: 1px; }

button, .boton {
    display: inline-block;
    width: 100%;
    margin-top: 16px;
    padding: 12px 16px;
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    border: 0;
    border-radius: 8px;
    background: var(--indigo);
    color: var(--blanco);
    cursor: pointer;
}
button:hover, .boton:hover { background: var(--indigo-oscuro); }
button.secundario, .boton.secundario {
    background: var(--blanco);
    color: var(--tinta);
    border: 1px solid var(--borde);
}
button.secundario:hover, .boton.secundario:hover { background: var(--papel); }

a { color: var(--indigo); }

.error, .advertencia {
    color: var(--rojo);
    border: 1px solid var(--rojo);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 12px 0;
}
.campo-error { color: var(--rojo); font-size: 14px; margin-top: 4px; }
.aviso {
    color: var(--verde);
    border: 1px solid var(--verde);
    border-radius: 8px;
    padding: 10px 12px;
    margin: 12px 0;
}

.codigo {
    font: 600 28px/1.2 ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: 2px;
    text-align: center;
}

.qr svg { display: block; margin: 12px auto; max-width: 200px; height: auto; }
ul.codigos { font-family: ui-monospace, Consolas, monospace; columns: 2; }

/* El QR de la licencia, a lo ancho y sobre blanco: lo lee una cámara web desde la pantalla del
   celular, y un fondo gris o un borde de color le quitan contraste. */
.qr-licencia { background: var(--blanco); margin: 12px 0; }
.qr-licencia svg { display: block; width: 100%; height: auto; }

/* Estados: verde cuadra, ámbar está pendiente, rojo es un problema; lo demás, neutro. Nace en el
   panel de operación (operacion.css) y se usa igual aquí, en /inicio: un mismo vocabulario de
   color para «conectada», «detenida» o «pendiente» en las dos caras de la nube. */
.etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 500; line-height: 1.6; white-space: nowrap; }
.tono-verde { background: #E3F3EA; color: var(--verde); }
.tono-ambar { background: #FBF0DD; color: #8A5A12; }
.tono-rojo { background: #FBE7E4; color: var(--rojo); }
.tono-neutro { background: var(--papel); color: var(--tenue); }

/* Lo que está esperando al dueño: ámbar, el color de «pendiente» (docs/identidad-de-marca.md § 4). */
.pendiente {
    display: block; margin: 12px 0; padding: 10px 12px; border-radius: 8px; text-decoration: none;
    background: #FBF0DD; color: #8A5A12; border: 1px solid #EBCB94;
}
ol.pasos { padding-left: 20px; margin: 12px 0 16px; }
ol.pasos li { margin-bottom: 8px; }
.codigo-a-mano { border-top: 1px solid var(--borde); padding-top: 12px; margin-top: 8px; }
.codigo-a-mano label { font-weight: 500; font-size: 14px; color: var(--tenue); }
.computadora { border-top: 1px solid var(--borde); padding: 12px 0; }
.computadora p { margin: 4px 0; }
.computadora-cabeza { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
details.tarjeta > summary { cursor: pointer; font-weight: 600; }
.enlaces { display: flex; flex-direction: column; gap: 10px; }
.enlaces a { text-decoration: none; }

/* El menú del dueño (docs/spec-web-del-dueno.md § 5): solo con la cuenta completa. */
.menu-dueno { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; margin: -8px auto 20px; max-width: 440px; padding: 0 16px; }
.menu-dueno a { padding: 6px 10px; border-radius: 8px; color: var(--tinta); text-decoration: none; font-size: 15px; }
.menu-dueno a.activo { background: var(--blanco); border: 1px solid var(--borde); font-weight: 600; }
.menu-dueno form { margin: 0; }
.menu-dueno button { width: auto; margin: 0; padding: 6px 10px; font-size: 15px; font-weight: 400; background: transparent; color: var(--tenue); }
.menu-dueno button:hover { background: transparent; color: var(--tinta); }