/* wwwroot/css/componentes.css — los botones y los campos del diseño del dueño.

   Estaban copiados, regla por regla y con los mismos valores, entre `bienvenida.css`,
   `landing.css` y `resumen.css`. Aquí viven UNA vez.

   **Sólo lo que era idéntico.** Seis reglas de ese grupo difieren entre hojas —a una le falta un
   `text-decoration`, a otra un `display: block`— y esas se quedan donde estaban: una diferencia real
   entre dos pantallas es una decisión de diseño, y esconderla dentro de una regla compartida la
   convierte en un cambio visual que nadie pidió. Quedan visibles en su hoja, que es donde alguien
   puede mirarlas y decidir.

   No va en theme.css a propósito, aunque theme.css sea global y ahorrara un <link>: ahí `.btn`
   chocaría con el `.btn` de Bootstrap en las pantallas que todavía lo usan —Analíticas, Cuentas,
   Menús, QR imprimir— y eso no es un riesgo teórico, es su geometría contra la nuestra en el mismo
   selector. Esta hoja la enlaza sólo quien la necesita.

   Lo vigila ComponentesUnicosTests. */

/* LA BASE VA PRIMERO, y no es estilo: es corrección. Los modificadores de abajo afinan el borde con
   `border-color`, y esta regla lo fija con el atajo `border`. Si la base cargara DESPUÉS —por
   ejemplo quedándose en la hoja de cada página, que se enlaza detrás de ésta— el atajo pisaría el
   `border-color` del modificador y `.btn--linea-roja` perdería su borde rosa sin que nada fallara.
   Pasó exactamente así, y sólo se vio mirando un botón. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--fuente-titulo);
    font-size: 13.5px;
    font-weight: 500;
    padding: 11px 20px;
    border-radius: var(--radio-sm);
    border: 1px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* El boton deshabilitado. Estaba solo en bienvenida.css, asi que el mismo boton se atenuaba en el
   asistente y no en el resto del panel. Aqui vale en todas partes; el editor lo pisa con el suyo
   -mas fuerte, con pointer-events- porque editor.css baja despues. */
.btn:disabled {
    opacity: .6;
    cursor: default;
}

/* El icono dentro de un boton. Estaba IDENTICO en resumen.css y en bienvenida.css. */
.btn svg {
    display: block;
    width: 16px;
    height: 16px;
    flex: none;
}

/* La insignia del plan. Estaba IDENTICA en resumen.css y en cuenta.css. */
.etiqueta-plan {
    font-family: var(--fuente-texto);
    font-size: 12px;
    font-weight: 500;
    color: var(--rojo);
    background: #FBE0DB;
    border-radius: 999px;
    padding: 3px 12px;
}

/* antes en: landing, resumen */
.btn--blanco {
    background: #fff;
    color: var(--tinta);
    border-color: var(--linea);
    box-shadow: var(--sombra-sm);
}

/* antes en: landing, resumen */
.btn--blanco:hover {
    border-color: #cfc8c4;
}

/* antes en: bienvenida, landing, resumen */
.btn--flecha svg {
    transition: transform .15s ease;
}

/* antes en: bienvenida, landing, resumen */
.btn--flecha:hover svg {
    transform: translateX(3px);
}

/* antes en: bienvenida, landing */
.btn--lg {
    padding: 14px 26px;
    font-size: 14.5px;
    border-radius: 10px;
}

/* antes en: bienvenida, landing */
.btn--linea {
    background: #fff;
    color: var(--tinta);
    border-color: var(--linea);
}

/* antes en: landing, resumen */
.btn--linea-roja {
    background: #fff;
    color: var(--rojo);
    border-color: #F6C3BD;
}

/* antes en: landing, resumen */
.btn--linea-roja:hover {
    background: #FFF6F5;
}

/* antes en: bienvenida, landing */
.btn--linea:hover {
    border-color: #b9b1ad;
}

/* antes en: bienvenida, landing */
.btn--rojo {
    background: var(--rojo);
    color: #fff;
}

/* antes en: bienvenida, landing */
.campo {
    margin-bottom: 16px;
}

/* antes en: bienvenida, landing */
.campo__caja {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: #fff;
    padding: 0 12px;
    height: 44px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

/* antes en: bienvenida, landing */
.campo__caja:focus-within {
    border-color: var(--rojo);
    box-shadow: 0 0 0 3px rgba(240,48,31,.12);
}

/* antes en: bienvenida, landing */
.campo__input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: var(--fuente-texto);
    font-size: 13.5px;
    color: var(--tinta);
    height: 100%;
}

/* antes en: bienvenida, landing */
.campo__input::placeholder {
    color: #A9A9A9;
}

/* antes en: bienvenida, landing */
.campo__label {
    display: block;
    font-family: var(--fuente-titulo);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: 7px;
}

/* ── Estado vacío a pantalla completa ────────────────────
   El bloque de «aquí no hay nada que enseñarte todavía»: icono, titular, una línea de explicación y
   una salida. Lo piden ya cinco pantallas —analíticas sin plan, analíticas sin escaneos, acceso
   denegado, el panel de plataforma y el código que no se encuentra— y todas decían lo mismo con el
   `card` + `card-body text-center p-5` de Bootstrap.

   Una sola forma a propósito: son todos el mismo momento para quien lo lee, y distinguirlos
   visualmente sería ruido. */

.estado-vacio {
    background: var(--blanco);
    border: 1px solid var(--linea-suave);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    padding: 52px 32px 56px;
    text-align: center;
}

.estado-vacio__ico {
    display: block;
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    color: var(--rojo);
}

.estado-vacio__titulo {
    font-family: var(--fuente-titulo);
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -.015em;
    color: var(--tinta);
    margin: 0 0 8px;
}

.estado-vacio__texto {
    margin: 0 auto 22px;
    max-width: 46ch;
    color: var(--texto);
    font-size: 14px;
    line-height: 1.6;
}

/* Texto que sólo existe para quien usa un lector de pantalla. Lo pedían ya tres hojas por separado
   —editor.css y menus.css la tenían cada una— y es una utilidad, no diseño de una pantalla. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Cabecera de una pantalla del panel ──────────────────
   El <h1> y su línea de apoyo. Los tenía cada pantalla por su cuenta y habían derivado: tres
   tamaños (27, 31 y 33px), dos grosores (600 y 700), dos interletrados, y el subtítulo de «Mis
   códigos QR» en rojo mientras los otros siete eran grises. Nada de eso era una decisión — ocho
   copias de la misma regla escritas en ocho momentos distintos.

   La base son los valores de /panel, que es la primera pantalla que ve un dueño al entrar.

   El margen inferior del subtítulo es uniforme y no hace daño donde el contenido de abajo ya trae
   el suyo: `.lienzo` es un bloque normal, así que dos márgenes adyacentes COLAPSAN al mayor en vez
   de sumarse. En un contenedor flex esto habría que mirarlo pantalla por pantalla. */

.panel-titulo {
    font-family: var(--fuente-titulo);
    font-size: 31px;
    font-weight: 600;
    letter-spacing: -.02em;
    color: var(--tinta);
    margin: 0;
    line-height: 1.2;
}

.panel-sub {
    margin: 6px 0 24px;
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--texto-suave);
}

/* En pantalla estrecha el titular baja. Cinco de las seis hojas ya lo hacían con 26px y la sexta
   con 25 — la diferencia de un píxel es de las que nadie decidió. */
@media (max-width: 620px) {
    .panel-titulo {
        font-size: 26px;
    }
}

/* La referencia de soporte de la pantalla de error. Va debajo del boton y en pequeño: no es lo que
   la persona viene a leer, pero es lo unico que permite encontrar el fallo en el registro. */
.error__referencia {
    margin: 20px 0 0;
    font-size: 12.5px;
    color: var(--texto-suave);
}

    .error__referencia code {
        font-family: ui-monospace, 'Roboto Mono', monospace;
        font-size: 12px;
        background: rgba(0, 0, 0, .05);
        padding: 2px 6px;
        border-radius: 4px;
        user-select: all;
    }

/* ── Tarjeta del panel ───────────────────────────────────
   El cuerpo que comparten las tarjetas de las pantallas del panel: fondo blanco, línea suave, radio
   grande y la sombra corta.

   El relleno son 22/24/24 porque es en lo que ya coinciden dos de las cuatro que existían
   —.tarjeta-analitica y .bloque-negocio—; .tarjeta-cuenta usa 26/28/28 y .admin-tarjeta 24/26/26.
   Esas dos NO se pliegan aquí todavía: hacerlo les cambia el relleno, y son pantallas que hay que
   mirar antes de moverlas. Queda anotado para cuando alguien pueda verlas. */

.tarjeta-panel {
    display: flex;
    flex-direction: column;
    background: var(--blanco);
    border: 1px solid var(--linea-suave);
    border-radius: var(--radio-lg);
    box-shadow: var(--sombra-sm);
    padding: 22px 24px 24px;
    min-width: 0;
}

.tarjeta-panel__titulo {
    font-family: var(--fuente-titulo);
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-suave);
    margin: 0 0 10px;
}

.tarjeta-panel__dato {
    margin: 0;
    font-family: var(--fuente-titulo);
    font-size: 17px;
    font-weight: 600;
    color: var(--tinta);
}

.tarjeta-panel__nota {
    margin: 6px 0 0;
    font-size: 12.5px;
    color: var(--texto-suave);
}

/* Toda la tarjeta es el enlace, no sólo el texto. Reemplaza al `stretched-link` de Bootstrap, que
   hacía exactamente esto: un pseudo-elemento que cubre el ancestro posicionado más cercano. Sin
   esto la tarjeta se ve pulsable y no lo es, que es peor que no parecerlo. */
.tarjeta-panel--enlace {
    position: relative;
}

.tarjeta-panel__enlace {
    margin-top: auto;
    padding-top: 10px;
    font-family: var(--fuente-titulo);
    font-size: 13px;
    font-weight: 500;
    color: var(--rojo);
    text-decoration: none;
}

    .tarjeta-panel__enlace::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
    }

    .tarjeta-panel--enlace:hover .tarjeta-panel__enlace {
        color: var(--rojo-oscuro);
        text-decoration: underline;
    }