/* ================================================================
   Panel de MexMail — componentes propios.
   ----------------------------------------------------------------
   Los TOKENS y los temas viven en sistema-diseno.css, el MISMO
   archivo del sistema de diseño de MexCloud (que a su vez heredó la
   identidad de MexMail). Aquí solo hay componentes del panel,
   escritos contra esos tokens: cambiar de tema no toca este archivo.
   ================================================================ */

/* Colores de las gráficas — paleta VALIDADA (contraste y daltonismo)
   en claro y en oscuro. El color sigue a la ENTIDAD en todas las
   gráficas: recibidos azul, enviados violeta, spam ámbar, virus rojo,
   bloqueos naranja; el anillo neutro toma la superficie secundaria
   del tema. En la leyenda de la semana el ORDEN (bloqueos, recibidos,
   spam, enviados, virus) separa los pares que se confunden. */
:root {
    --graf-recibidos: #2a78d6;
    --graf-enviados: #4a3aa7;
    --graf-spam: #eda100;
    --graf-virus: #d03b3b;
    --graf-bloqueos: #ec835a;
    --graf-espacio: #1baf7a;
    --graf-neutro: var(--color-surface-2);
}

[data-theme="oscuro"],
[data-theme="madrugada"] {
    --graf-recibidos: #3987e5;
    --graf-enviados: #9085e9;
    --graf-spam: #c98500;
    --graf-virus: #e66767;
    --graf-bloqueos: #d95926;
    --graf-espacio: #199e70;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --graf-recibidos: #3987e5;
        --graf-enviados: #9085e9;
        --graf-spam: #c98500;
        --graf-virus: #e66767;
        --graf-bloqueos: #d95926;
        --graf-espacio: #199e70;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--font-size);
    line-height: var(--line-height);
}

h1 { font-family: var(--font-title); font-size: 1.5rem; }
h2 { font-family: var(--font-title); }

/* Antes de que Alpine arranque, lo que dependa de él no parpadea. */
[x-cloak] { display: none !important; }

/* ── Cabecera del panel ── */

.cabecera-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 1rem;
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.cabecera-panel .marca { font-weight: 600; }

.nav-panel {
    display: flex;
    gap: 1rem;
    /* que en pantallas angostas la tira se desplace en vez de crecer */
    overflow-x: auto;
    min-width: 0;
}

.nav-panel a {
    color: var(--color-text-2);
    text-decoration: none;
    padding: 0.2rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.nav-panel a:hover { color: var(--color-text); }

.nav-panel a.actual {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.cabecera-panel .quien {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--color-text-2);
}

.cabecera-panel form { display: inline; margin: 0; }

.tema-selector {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--color-text-muted);
}

.tema-selector select {
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.35rem;
}

button.liga {
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-primary);
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
}

/* ── Contenido ── */

.contenido-panel {
    max-width: 60rem;
    margin: 0 auto;
    padding: 1.5rem 1rem;
}

/* Los LISTADOS piden más ancho que el resto: son tablas, y una tabla de siete
   columnas no cabía en 60rem — se desplazaba de lado teniendo media pantalla
   libre al lado (2026-08-20, con captura de Jore).

   ⚠️ NO SE ENSANCHA `.contenido-panel`. Las FICHAS y los formularios siguen a
   60rem: ahí lo que se lee son renglones de texto, y un renglón muy largo se
   lee peor, no mejor. Lo pide cada página (`$anchoAmplio`), no la sección — la
   ficha de una cuenta comparte sección con su listado.

   96rem sale de la captura: la tarjeta medía ~904px y la columna «Rol» quedaba
   cortada a media palabra, así que a la tabla le faltaban ~140px (~65rem en
   total). 96rem deja margen de sobra sin comerse la pantalla entera, que en un
   monitor ancho tampoco es cómodo de leer. Sigue siendo un TOPE: en pantallas
   menores no cambia nada, y el desplazamiento de lado se conserva como red por
   si aun así no cabe. */
.contenido-amplio { max-width: 96rem; }

/* ── Tarjeta de entrada (y de error) ── */

.tarjeta-entrar {
    max-width: 22rem;
    margin: 12vh auto 0;
    padding: 2rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.tarjeta-entrar h1 {
    margin: 0;
    text-align: center;
}

.tarjeta-entrar .subtitulo {
    margin: 0.25rem 0 1.25rem;
    text-align: center;
    color: var(--color-text-muted);
}

.tarjeta-entrar label {
    display: block;
    margin-bottom: 0.9rem;
    font-size: 0.9rem;
    color: var(--color-text-2);
}

.tarjeta-entrar input {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.55rem 0.7rem;
    font: inherit;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.tarjeta-entrar input:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
    border-color: var(--color-primary);
}

.tarjeta-entrar button[type="submit"] {
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.6rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-primary-fg);
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.tarjeta-entrar button[type="submit"]:hover { background: var(--color-primary-h); }

.aviso-error {
    padding: 0.6rem 0.8rem;
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    color: var(--color-danger);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

/* ── Inicio ── */

.panel-inicio h1 { margin-top: 0; }

.ficha {
    display: grid;
    /* La etiqueta puede encogerse y el valor tiene un mínimo: con
       `max-content 1fr`, una etiqueta larga («Servicios de nube…») se llevaba
       TODO el ancho y al valor le quedaba un carácter, así que se partía en
       vertical, letra por letra. */
    grid-template-columns: minmax(0, max-content) minmax(7rem, 1fr);
    gap: 0.35rem 1.25rem;
    margin: 0 0 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.ficha dt { color: var(--color-text-2); overflow-wrap: anywhere; }
.ficha dd { margin: 0; min-width: 0; }

/* Rutas y direcciones largas: que partan DENTRO de la tarjeta en vez de
   desbordarla. `anywhere` y no `break-word` porque una ruta no tiene
   espacios donde cortar. */
.ficha dd code,
.ficha dd { overflow-wrap: anywhere; }

/* En el teléfono, TODA ficha se apila: dos columnas en 360 px dejan al valor
   sin sitio, y un dato partido en vertical no se lee. */
@media (max-width: 640px) {
    .ficha { grid-template-columns: 1fr; gap: 0 0; }
    .ficha dt { margin-top: 0.6rem; }
    .ficha dt:first-child { margin-top: 0; }
    .ficha dd { font-weight: 500; }
}

/* Cuando el valor es largo (una ruta), la etiqueta va encima y el valor
   dispone del ancho entero: al lado quedaría partido en tres renglones. */
.ficha-apilada {
    grid-template-columns: 1fr;
    gap: 0.15rem;
}

.ficha-apilada dd { margin-bottom: 0.6rem; }

.lista-dominios {
    margin: 0;
    padding-left: 1.25rem;
    columns: 2;
}

/* Alias y reenvíos de una cuenta: una dirección por renglón. */
.lista-correos {
    margin: 0;
    padding-left: 1.25rem;
}

.lista-correos li { margin-bottom: 0.25rem; }

/* ── Listados en tabla ── */

.cuenta-total {
    color: var(--color-text-muted);
    font-weight: normal;
    font-size: 1rem;
}

.tabla-envoltura {
    overflow-x: auto;
    min-width: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.tabla-lista {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tabla-lista th,
.tabla-lista td {
    padding: 0.55rem 0.9rem;
    text-align: right;
    white-space: nowrap;
}

.tabla-lista th:first-child,
.tabla-lista td:first-child { text-align: left; }

.tabla-lista thead th {
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-2);
    font-weight: 600;
}

.tabla-lista tbody tr:nth-child(even) { background: var(--color-surface-2); }

.tabla-lista a { color: var(--color-primary); text-decoration: none; }
.tabla-lista a:hover { text-decoration: underline; }

.tabla-lista td.celda-nombre { text-align: left; }

/* Tablas de puro texto (Administradores): todo alineado a la izquierda. */
.tabla-texto th,
.tabla-texto td { text-align: left; }

/* Encabezados ordenables (los engancha el componente `tabla` de panel.js). */
.tabla-lista th.ordenable { cursor: pointer; user-select: none; }
.tabla-lista th.ordenable:hover { color: var(--color-text); }
.tabla-lista th.orden-asc::after { content: ' ↑'; color: var(--color-primary); }
.tabla-lista th.orden-desc::after { content: ' ↓'; color: var(--color-primary); }

/* ── Controles de listado: buscar y paginar ── */

.controles-tabla {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

.controles-tabla .buscador {
    flex: 1;
    min-width: 12rem;
    max-width: 20rem;
    padding: 0.45rem 0.7rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.controles-tabla .resumen {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.paginador {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}

.paginador button {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-primary);
    font: inherit;
    border-radius: var(--radius-sm);
    padding: 0.2rem 0.6rem;
    cursor: pointer;
}

.paginador button:disabled {
    color: var(--color-text-muted);
    cursor: default;
    opacity: 0.5;
}

.paginador .pagina-de {
    color: var(--color-text-muted);
    font-size: 0.9rem;
    white-space: nowrap;
}

/* ── Insignias ── */

.insignia {
    display: inline-block;
    /* «Sí»/«No» partidos en dos renglones se leen como otra cosa: en una
       columna estrecha la insignia se encoge, no se rompe. */
    white-space: nowrap;
    padding: 0.1rem 0.5rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    vertical-align: middle;
}

.insignia-ok {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
}

.insignia-mal {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    color: var(--color-danger);
}

.insignia-neutra {
    background: var(--color-surface-2);
    color: var(--color-text-2);
    border: 1px solid var(--color-border);
}

/* Queda poco espacio: el resalte del panel de siempre. */
td.poco-espacio {
    background: color-mix(in srgb, var(--color-warning) 16%, transparent);
    color: var(--color-warning);
}

.pista { color: var(--color-text-muted); font-size: 0.85rem; }

/* ── Ficha de dominio / cuenta ── */

.panel-dominio h1,
.panel-cuenta h1 { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

.panel-dominio > p a,
.panel-cuenta > p a { color: var(--color-primary); text-decoration: none; }

.rejilla-ficha {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: 1rem;
}

/* La sección a la que se acaba de volver tras guardar: un destello corto para
   ubicar la vista, y espacio arriba para que no quede pegada al encabezado. */
.tarjeta-seccion:target {
    scroll-margin-top: 1rem;
    animation: seccion-vuelta 1.4s ease-out 1;
}

@keyframes seccion-vuelta {
    from { box-shadow: 0 0 0 2px var(--color-primary); }
    to   { box-shadow: 0 0 0 2px transparent; }
}

/* Quien prefiere no ver movimiento tampoco ve el destello. */
@media (prefers-reduced-motion: reduce) {
    .tarjeta-seccion:target { animation: none; }
}

.tarjeta-seccion {
    padding: 1rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.tarjeta-seccion h2 {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    color: var(--color-text-2);
}

.tarjeta-seccion .ficha {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
}

.tarjeta-seccion p { margin: 0.75rem 0 0; }
.tarjeta-seccion p a { color: var(--color-primary); text-decoration: none; }

/* ── Aviso tras guardar (redirect-después-de-POST) ── */

.aviso-flash {
    margin: 0 0 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
    font-size: 0.95rem;
}

.aviso-flash-ok {
    background: color-mix(in srgb, var(--color-success) 15%, transparent);
    color: var(--color-success);
}

.aviso-flash-error {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
    color: var(--color-danger);
}

/* ── Formularios dentro de las fichas ── */

.forma-ficha label {
    display: block;
    margin-bottom: 0.7rem;
    font-size: 0.9rem;
    color: var(--color-text-2);
}

.forma-ficha input[type="number"],
.forma-ficha input[type="text"],
.forma-ficha input[type="tel"],
.forma-ficha input[type="email"],
.forma-ficha input[type="date"],
.forma-ficha textarea,
.forma-ficha select {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.4rem 0.6rem;
    font: inherit;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.forma-ficha .casilla {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--color-text);
    margin-bottom: 0.45rem;
}

.boton {
    margin-top: 0.5rem;
    padding: 0.45rem 0.9rem;
    font: inherit;
    font-weight: 600;
    color: var(--color-primary-fg);
    background: var(--color-primary);
    border: 0;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.boton:hover { background: var(--color-primary-h); }

/* Los dos momentos del alta de un dominio: validar (falta camino, rojo)
   e instalar (todo listo, verde). Solo cambian el fondo del botón base. */
.boton-peligro { background: var(--color-danger); }
.boton-peligro:hover { background: color-mix(in srgb, var(--color-danger) 85%, black); }
.boton-exito { background: var(--color-success); }
.boton-exito:hover { background: color-mix(in srgb, var(--color-success) 85%, black); }

/* Un enlace con pinta de botón. El selector lleva `a` a propósito: el estilo
   del navegador para `a:any-link` es una PSEUDO-CLASE y gana a `.boton` a
   secas, así que el texto salía azul sobre fondo azul — es decir, invisible. */
a.boton {
    display: inline-block;
    color: var(--color-primary-fg);
    text-decoration: none;
}

/* Secundario: el mismo tamaño, sin gritar. */
.boton-suave {
    color: var(--color-text);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
}
.boton-suave:hover { background: var(--color-surface); }
a.boton-suave { color: var(--color-text); }

.acciones-dns {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

/* El registro DNS no cabe en una columna de la rejilla: se lee en diálogo. */
.dialogo-dns {
    width: min(92vw, 60rem);
    max-height: 85vh;
    overflow: auto;
    padding: 1.25rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.dialogo-dns::backdrop { background: rgb(0 0 0 / 0.5); }

.dialogo-dns h2 { margin-top: 0; }

.dialogo-dns label { display: block; margin: 1rem 0 0.5rem; }

.dialogo-dns input[type="text"] {
    display: block;
    width: 100%;
    margin-top: 0.35rem;
    padding: 0.5rem 0.7rem;
    font: inherit;
    color: var(--color-text);
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.fallo-tarea summary {
    cursor: pointer;
    margin: 0.5rem 0;
    color: var(--color-danger);
}

.registro-dns summary { cursor: pointer; font-weight: 600; margin: 0.5rem 0; }

.registro-bind {
    overflow-x: auto;
    padding: 0.6rem;
    font-size: 0.78rem;
    line-height: 1.5;
    background: var(--color-surface-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    white-space: pre;
}

.forma-inline {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.75rem;
    /* Al FONDO, no estirados: cuando el campo lleva su etiqueta encima —como en
       los avisos por WhatsApp— el botón medía lo mismo que etiqueta + campo
       juntos y quedaba desfasado hacia arriba. Así se alinea con el campo, que
       es con lo que tiene que ver. */
    align-items: flex-end;
    flex-wrap: wrap;
}

/* El campo con su etiqueta ocupa el ancho; el botón, lo suyo. */
.forma-inline label {
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.forma-inline label input[type="text"],
.forma-inline label input[type="email"] {
    flex: none;
    width: 100%;
    box-sizing: border-box;
}

.forma-inline input[type="text"],
.forma-inline input[type="email"] {
    flex: 1;
    min-width: 0;
    padding: 0.4rem 0.6rem;
    font: inherit;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

.forma-inline .boton { margin-top: 0; }

/* La ubicación de los buzones es una RUTA y va en su propio renglón: en la
   misma línea que el dominio se cortaba a media palabra. */
/* Contraseña con «Sugerir» y «Copiar»: los botones debajo del campo, que en
   una tarjeta estrecha al lado no caben. La contraseña se enseña en claro a
   propósito — quien la crea tiene que poder respaldarla antes de entregarla. */
.campo-clave input {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.acciones-clave {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.4rem 0 0.2rem;
}

.acciones-clave .boton { margin-top: 0; padding: 0.3rem 0.7rem; font-size: 0.85rem; }

/* La clave recién generada: se enseña una sola vez, así que tiene que
   saltar a la vista. */
.aviso-clave-nueva {
    padding: 0.8rem 1rem;
    margin: 0.5rem 0 1rem;
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
}

.aviso-clave-nueva p { margin: 0 0 0.5rem; }
.aviso-clave-nueva input { width: 100%; padding: 0.45rem 0.6rem; font-family: ui-monospace, monospace; color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); }

.campo-bloque {
    display: block;
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: var(--color-text-2);
}

.campo-bloque .campo-montaje {
    display: block;
    width: 100%;
    margin-top: 0.25rem;
    padding: 0.4rem 0.6rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.85rem;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.forma-quitar { display: inline; margin-left: 0.4rem; }

.boton-quitar {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 0.8rem;
    color: var(--color-danger);
    cursor: pointer;
    text-decoration: underline;
}

/* ── Gráficas de las fichas ── */

.tarjeta-ancha { grid-column: 1 / -1; }

.tarjeta-dona { text-align: center; }

.tarjeta-dona h2 { text-align: left; }

.dona {
    width: 8.5rem;
    height: 8.5rem;
    margin: 0.25rem auto;
    display: block;
}

.grafica-semana {
    width: 100%;
    height: auto;
    display: block;
}

.grafica-semana .rejilla {
    stroke: var(--color-border);
    stroke-width: 1;
}

.grafica-semana .cifra {
    fill: var(--color-text-muted);
    font-size: 11px;
    font-family: var(--font-sans);
}

.grafica-semana .punto {
    stroke: var(--color-surface);
    stroke-width: 2;
}

.grafica-leyenda {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
    font-size: 0.85rem;
    color: var(--color-text-2);
    text-align: left;
}

.grafica-leyenda li { margin-bottom: 0.2rem; }

.grafica-leyenda strong { color: var(--color-text); font-weight: 600; }

.grafica-leyenda-fila {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.25rem;
}

.chip {
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    border-radius: 2px;
    margin-right: 0.4em;
    vertical-align: baseline;
}

.numeros-semana { margin-top: 0.75rem; }

.numeros-semana summary {
    cursor: pointer;
    color: var(--color-primary);
    font-size: 0.9rem;
}

.numeros-semana .tabla-envoltura { margin-top: 0.5rem; }

/* ── Enrolamiento 2FA ── */

.dosfa-enrolar { margin-top: 0.75rem; }

/* El QR siempre sobre blanco: en tema oscuro un QR invertido no se escanea. */
.dosfa-qr {
    width: 12rem;
    max-width: 100%;
    margin: 0.5rem 0;
    padding: 0.5rem;
    background: #ffffff;
    border-radius: var(--radius-md);
}

.dosfa-qr svg { display: block; width: 100%; height: auto; }

.clave-dosfa code {
    font-family: var(--font-mono);
    word-break: break-all;
    background: var(--color-surface-2);
    padding: 0.1rem 0.35rem;
    border-radius: var(--radius-sm);
}

/* ── Alta plegada bajo los listados ── */

.alta-panel {
    max-width: 28rem;
    margin-top: 1rem;
    padding: 0.75rem 1.25rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.alta-panel summary {
    cursor: pointer;
    color: var(--color-primary);
    font-weight: 600;
}

.alta-panel form { margin-top: 0.75rem; }

@media (max-width: 40rem) {
    .lista-dominios { columns: 1; }
    .tarjeta-entrar { margin-top: 6vh; }
    .cabecera-panel { flex-wrap: wrap; }
}

/* Una cuenta que se ve en el directorio pero NO se administra: su titular es
   de rango igual o mayor (la cascada de roles). Se distingue de un enlace sin
   dar un espectáculo — el título del elemento explica por qué. */
.sin-mando {
  color: var(--color-text-muted);
  cursor: not-allowed;
  border-bottom: 1px dashed currentColor;
}

/* ── Listados en el teléfono: cada fila, una tarjeta ────────────────────
   Solo cuando la tabla está etiquetada (`.tabla-tarjetas`, que lo pone el
   guion): sin él se queda la tabla de siempre con su desplazamiento, en vez de
   un montón de celdas sin cabecera que no se sabría qué son. */
@media (max-width: 40rem) {
    .tabla-tarjetas thead { display: none; }
    .tabla-tarjetas,
    .tabla-tarjetas tbody,
    .tabla-tarjetas tr,
    .tabla-tarjetas td { display: block; width: auto; }
    .tabla-tarjetas tr {
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        padding: 0.6rem 0.8rem;
        margin-bottom: 0.6rem;
        background: var(--color-surface);
    }
    /* El rayado alterno no aporta cuando cada fila ya es una tarjeta. */
    .tabla-tarjetas tbody tr:nth-child(even) { background: var(--color-surface); }
    .tabla-tarjetas td {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: 0.25rem 0;
        border: 0;
        text-align: right;
    }
    /* La etiqueta de la columna, a la izquierda de su dato. */
    .tabla-tarjetas td[data-col]::before {
        content: attr(data-col);
        color: var(--color-text-muted);
        font-size: 0.85rem;
        text-align: left;
        flex: 0 0 auto;
    }
    /* La PRIMERA celda es de qué va el renglón: se destaca y va sola arriba. */
    .tabla-tarjetas td:first-child {
        display: block;
        text-align: left;
        font-weight: 600;
        padding-bottom: 0.4rem;
        margin-bottom: 0.3rem;
        border-bottom: 1px solid var(--color-border);
    }
    .tabla-tarjetas td:first-child::before { content: none; }
    /* La envoltura ya no necesita desplazarse: nada se sale. */
    .tabla-tarjetas { min-width: 0; }
}

/* ── Relays por remitente: cada uno se edita en su sitio ────────────────
   Con una tabla, cambiar un usuario obligaba a reescribir la cuenta entera en
   el formulario de abajo y confiar en que coincidiera. */
.relay-lista { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.75rem 0 1.5rem; }
.relay-item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    padding: 0.75rem 1rem;
}
.relay-item > summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.relay-item[open] > summary {
    margin-bottom: 0.75rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--color-border);
}
.relay-cuenta { font-weight: 600; }
/* El relay puede ser largo: que se parta en vez de estirar el renglón. */
.relay-item summary code { word-break: break-all; }

/* ── Inicio: las cifras ─────────────────────────────────────────────────
   Tarjetas anchas y pocas, no una rejilla de muchas: son cuatro números como
   mucho y lo que importa es que se lean de un vistazo al entrar. */
.inicio-cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0 2rem;
}
.inicio-cifra {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 1rem 1.1rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    color: inherit;
    text-decoration: none;
}
a.inicio-cifra:hover { border-color: var(--color-primary); }
.inicio-cifra strong {
    font-size: 2rem;
    line-height: 1;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}
.inicio-cifra span { color: var(--color-text-muted); font-size: 0.9rem; }
/* La de «Contratar» es una ACCIÓN, no una cifra: se distingue sin gritar. */
.inicio-cifra-accion { border-style: dashed; }
.inicio-cifra-accion strong { font-size: 1.6rem; }

/* ── Pestañas de una ficha ──────────────────────────────────────────────
   La barra manda: una cosa a la vez. En el teléfono se desplaza de lado en vez
   de crecer —`min-width: 0` es lo que lo hace de verdad, no el overflow— y las
   cuatro etiquetas son cortas justo para que quepan. */
.pestanas {
    display: flex;
    gap: 0.25rem;
    margin: 1rem 0 1.25rem;
    border-bottom: 1px solid var(--color-border);
    overflow-x: auto;
    min-width: 0;
    /* Sin esto la barra de desplazamiento tapa la línea de la pestaña activa. */
    scrollbar-width: none;
}
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font: inherit;
    font-weight: 600;
    /* 0.75rem arriba y abajo: el área de toque llega a los 40px sin agrandar
       la letra, que en una barra de navegación se ve mal. */
    padding: 0.75rem 1.1rem;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;   /* la línea de la pestaña pisa la del borde */
}
.pestana:hover { color: var(--color-text); }
.pestana.actual {
    color: var(--color-text);
    border-bottom-color: var(--color-primary);
}
/* ⚠️ AQUÍ NO SE USA `x-cloak`. Esconder los grupos hasta que Alpine arranque
   evitaría el parpadeo inicial, pero si el guion no carga la página se queda
   EN BLANCO — y la promesa era justo la contraria: sin JavaScript se ven las
   cuatro secciones seguidas, que es la página de antes. Se prefiere el
   parpadeo, que dura lo que tarda un guion local en arrancar. */

/* ── Campos numéricos con − y + ─────────────────────────────────────────
   Las flechitas nativas no existen en el teléfono y en el escritorio miden un
   píxel: se esconden y se ponen botones de verdad, del tamaño de un dedo. */
.numero-con-botones {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
    max-width: 100%;
}
.numero-con-botones input[type="number"] {
    border: 0;
    border-radius: 0;
    background: transparent;
    text-align: center;
    width: 4.5rem;
    min-width: 0;
    /* `font-variant-numeric` para que el número no baile de ancho al cambiar. */
    font-variant-numeric: tabular-nums;
}
.numero-con-botones input[type="number"]:focus { outline: none; }
.numero-con-botones:focus-within { border-color: var(--color-primary); }
/* Fuera las flechitas nativas: ya no hacen falta y descolocan el centrado. */
.numero-con-botones input[type="number"]::-webkit-outer-spin-button,
.numero-con-botones input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.numero-con-botones input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.numero-boton {
    border: 0;
    background: var(--color-surface-2);
    color: var(--color-text);
    font-size: 1.1rem;
    line-height: 1;
    /* 2.5rem de lado: lo mínimo para acertar con el dedo sin apuntar. */
    min-width: 2.5rem;
    padding: 0 0.6rem;
    cursor: pointer;
}
.numero-boton:hover { background: var(--color-primary); color: #fff; }
.numero-boton:active { transform: translateY(1px); }

/* ── Contratar cuentas ──────────────────────────────────────────────────
   Cada tipo es un renglón de tres partes: nombre, cuántas e importe. La
   REJILLA es lo que las alinea entre renglones —con una tabla, el campo
   quedaba flotando en medio de su celda y el precio pegado al otro extremo, y
   cada renglón se leía en dos sitios lejanos—. */
.contratar-tipos {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin: 0.5rem 0 0.25rem;
}
.contratar-tipo {
    display: grid;
    /* El nombre manda, y las otras dos columnas son fijas: así los campos y los
       importes quedan en la MISMA vertical en los cuatro renglones. */
    grid-template-columns: minmax(0, 1fr) 8rem 9rem;
    align-items: center;
    gap: 1rem;
    padding: 0.6rem 0.9rem;
    border-radius: var(--radius-md);
}
/* Renglones alternos, como en los listados: con cuatro seguidos ayuda a no
   perder la línea al pasar del nombre al importe. */
.contratar-tipo:nth-child(odd) { background: var(--color-surface-2); }
.contratar-nombre { font-weight: 600; }
.contratar-campo { display: flex; flex-direction: column; gap: 0.15rem; margin: 0; }
.contratar-campo > span,
.contratar-etiqueta {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}
.contratar-campo .numero-con-botones { width: 100%; }
.contratar-importe { display: flex; flex-direction: column; gap: 0.15rem; text-align: right; }
.contratar-importe strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
/* El precio unitario, en pequeño: es lo que explica el importe de al lado. */
.contratar-cada { font-size: 0.78rem; color: var(--color-text-muted); }

.contratar-total {
    text-align: right;
    font-size: 1.05rem;
    margin: 0.4rem 0 1rem;
    padding-top: 0.6rem;
    border-top: 1px solid var(--color-border);
}
.contratar-total strong { font-size: 1.35rem; font-variant-numeric: tabular-nums; }

/* En el teléfono se apila: tres columnas de 9rem no caben, y forzarlas es lo
   que saca el formulario de la pantalla. */
@media (max-width: 34rem) {
    .contratar-tipo {
        grid-template-columns: 1fr auto;
        gap: 0.4rem 0.8rem;
    }
    .contratar-nombre { grid-column: 1 / -1; }
    .contratar-importe { text-align: right; }
}

/* Cuenta sin usuario de panel: recibe correo y nadie entra con ella. Se dice,
   en vez de dejar la celda vacía — una celda en blanco se lee como un fallo del
   listado, no como una ausencia deliberada. */
.rol-ninguno {
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Salto rápido entre secciones de la ficha ────────────────────────────
   En la CABECERA, a la izquierda del todo: flotando sobre el contenido
   estorbaba en pantalla grande. La lista cuelga hacia abajo, como cualquier
   menú de barra. */
.salto-secciones { position: relative; flex: none; }
.salto-boton {
    display: flex; align-items: center; justify-content: center;
    width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer;
    background: none; color: var(--color-text);
    border: 1px solid transparent; border-radius: var(--radius-sm);
}
.salto-boton:hover, .salto-secciones.abierto .salto-boton {
    background: var(--color-surface); border-color: var(--color-border); color: var(--color-primary);
}
/* Las tres rayas, con bordes: sin SVG ni fuente de iconos. */
.salto-rayas, .salto-rayas::before, .salto-rayas::after {
    display: block; width: 1.05rem; height: 2px; background: currentColor; border-radius: 2px;
}
.salto-rayas { position: relative; }
.salto-rayas::before, .salto-rayas::after { content: ''; position: absolute; left: 0; }
.salto-rayas::before { top: -6px; }
.salto-rayas::after { top: 6px; }

.salto-lista {
    position: absolute; left: 0; top: calc(100% + 0.4rem);
    margin: 0; padding: 0.4rem; list-style: none;
    min-width: 13rem; max-height: 70vh; overflow-y: auto;
    background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); box-shadow: 0 4px 18px var(--color-shadow);
    z-index: 40;
}
.salto-lista a {
    display: block; padding: 0.45rem 0.6rem; border-radius: var(--radius-sm);
    color: var(--color-text); text-decoration: none; white-space: nowrap;
}
.salto-lista a:hover, .salto-lista a:focus { background: var(--color-bg); color: var(--color-primary); }

/* El logotipo, justo antes del nombre. `alt` vacío: el nombre va al lado y
   repetirlo solo estorba a quien usa lector de pantalla. */
.marca-logo { flex: none; display: block; width: 1.75rem; height: 1.75rem; }

@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}
/* Menú, logotipo y nombre van juntos a la izquierda; la cabecera reparte
   con `space-between`, así que sin agruparlos se separarían entre sí. */
.cabecera-izq { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.cabecera-izq .marca { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 720px) {
    /* En pantalla estrecha manda el nombre: el logotipo se va antes que él. */
    .cabecera-izq .marca-logo { display: none; }
}