/* ================================================================
   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;
}

/* ── 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;
    grid-template-columns: max-content 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); }
.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; }

/* 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;
}

.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="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;
}

.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; }
}