/*
    Área privada de Andahost.

    Misma identidad que andahost.com pero con las prioridades de un panel: aquí
    se opera, no se lee. Tipos más pequeños, densidad alta y el estado —quién
    lleva qué— visible sin abrir nada.

    Hoja única y sin compilar a propósito: el portal no tiene build. Cambiar un
    color es editar este archivo, no montar una cadena de herramientas.
*/

:root {
    --cian: #12a4fa;
    --indigo: #5f45e6;
    --purpura: #7d2cc9;

    --fondo: #0b0e17;
    --fondo-2: #111624;
    --fondo-3: #182034;
    --borde: #232c44;
    --borde-claro: #2f3a56;

    --texto: #eef1f8;
    --texto-2: #a8b2ca;
    --texto-3: #6f7b96;

    --ok: #35c98a;
    --aviso: #f5a524;
    --mal: #f2555a;

    --r: 10px;
    --r-g: 14px;

    --tipo: Archivo, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font-family: var(--tipo);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--cian); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3 { margin: 0 0 8px; line-height: 1.2; font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 26px; }
h2 { font-size: 17px; }
p { margin: 0 0 12px; }

:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; border-radius: 4px; }

.apagado { color: var(--texto-3); font-size: 14px; }

.oculto {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ----------------------------------------------------- Pantallas sin sesión */

body.centrado {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 24px 16px;
    /* El degradado de marca, muy diluido: identidad sin ruido */
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(95, 69, 230, .22), transparent 70%),
        radial-gradient(700px 400px at 90% 110%, rgba(18, 164, 250, .12), transparent 70%),
        var(--fondo);
}

.entrada { width: 100%; max-width: 400px; }

.entrada__marca {
    display: block;
    margin-bottom: 22px;
    text-align: center;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--texto);
}
.entrada__marca:hover { text-decoration: none; }

.host {
    background: linear-gradient(90deg, var(--cian), var(--indigo), var(--purpura));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.entrada__pie {
    margin: 18px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--texto-3);
}
.entrada__pie a { color: var(--texto-2); }
.entrada__pie span { margin: 0 8px; }

.tarjeta {
    padding: 28px 26px 24px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}

.pie-tarjeta {
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
    font-size: 13px;
    color: var(--texto-3);
}

/* ------------------------------------------------------------- Formularios */

.campo { display: block; margin: 0 0 16px; }
.campo > span {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-2);
}
.campo small { display: block; margin-top: 6px; font-size: 12px; color: var(--texto-3); }

input[type="email"],
input[type="password"],
input[type="text"],
input[type="tel"],
select,
textarea {
    width: 100%;
    padding: 11px 13px;
    background: var(--fondo);
    border: 1px solid var(--borde-claro);
    border-radius: var(--r);
    color: var(--texto);
    font-family: inherit;
    font-size: 15px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--cian); outline: none; }

select {
    /* Sin la flecha nativa el desplegable se ve blanco sobre blanco en algunos
       navegadores; se dibuja aquí para que herede el tema oscuro. */
    appearance: none;
    padding-right: 34px;
    background-image: linear-gradient(45deg, transparent 50%, var(--texto-3) 50%),
                      linear-gradient(135deg, var(--texto-3) 50%, transparent 50%);
    background-position: calc(100% - 17px) 51%, calc(100% - 12px) 51%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    cursor: pointer;
}
select option { background: var(--fondo-2); color: var(--texto); }

.casilla {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 20px;
    font-size: 14px;
    color: var(--texto-2);
    cursor: pointer;
}
.casilla input { width: auto; margin: 0; accent-color: var(--indigo); }

.error {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-style: normal;
    color: var(--mal);
}

.btn {
    display: inline-block;
    width: 100%;
    padding: 12px 22px;
    background: linear-gradient(90deg, var(--indigo), var(--purpura));
    border: 0;
    border-radius: 999px;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}
.btn:hover { filter: brightness(1.12); text-decoration: none; }

.btn--fantasma {
    width: auto;
    padding: 9px 17px;
    background: transparent;
    border: 1px solid var(--borde-claro);
    color: var(--texto-2);
    font-size: 14px;
}
.btn--fantasma:hover { border-color: var(--cian); color: var(--texto); filter: none; }

.btn--texto {
    width: auto;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    color: var(--texto-3);
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
}
.btn--texto:hover { color: var(--mal); filter: none; }

.en-linea { display: inline-block; margin: 0; }

/* ---------------------------------------------------------- Marco del panel */

.marco { display: flex; min-height: 100vh; }

.lateral {
    display: flex;
    flex-direction: column;
    flex: 0 0 232px;
    padding: 20px 16px;
    background: var(--fondo-2);
    border-right: 1px solid var(--borde);
}

.lateral__marca {
    display: block;
    margin: 4px 8px 26px;
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--texto);
}
.lateral__marca:hover { text-decoration: none; }

.lateral__nav { display: flex; flex-direction: column; gap: 2px; }

.lateral__grupo {
    margin: 0 8px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--texto-3);
}

.lateral__nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: var(--r);
    color: var(--texto-2);
    font-size: 14.5px;
    font-weight: 500;
}
.lateral__nav a:hover { background: var(--fondo-3); color: var(--texto); text-decoration: none; }
.lateral__nav a.activo {
    background: var(--fondo-3);
    color: var(--texto);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--cian);
}

.lateral__pie {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--borde);
}
.lateral__quien { margin: 0 0 10px; padding: 0 8px; line-height: 1.35; }
.lateral__quien strong { display: block; font-size: 14px; }
.lateral__quien span { font-size: 12.5px; color: var(--texto-3); }

.enlace-salir {
    padding: 0 8px;
    background: none;
    border: 0;
    color: var(--texto-3);
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}
.enlace-salir:hover { color: var(--mal); }

.contenido {
    flex: 1 1 auto;
    min-width: 0;               /* sin esto una lista ancha desborda el flex */
    max-width: 940px;
    padding: 30px 34px 60px;
}

/* --------------------------------------------------------------- Contenido */

.cabecera { margin-bottom: 24px; }
.cabecera h1 { margin-bottom: 4px; }
.cabecera p { margin: 0; }

.cabecera--con-accion {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.aviso {
    margin: 0 0 20px;
    padding: 11px 15px;
    border-radius: var(--r);
    font-size: 14px;
}
.aviso--ok { background: rgba(53, 201, 138, .12); border: 1px solid rgba(53, 201, 138, .3); color: #7ee0b4; }
.aviso--error { background: rgba(242, 85, 90, .12); border: 1px solid rgba(242, 85, 90, .3); color: #ff9296; }

.bloque { margin-top: 34px; }
.bloque > h2 { margin-bottom: 12px; }

.vacio { color: var(--texto-3); }

.tarjeta--vacia { margin-bottom: 8px; }
.tarjeta--vacia p { color: var(--texto-3); }
.tarjeta--vacia .btn { width: auto; }

/* Cifras de cabecera */
.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 8px;
}
.cifra {
    display: block;
    padding: 16px 18px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
    color: var(--texto);
}
.cifra:hover { border-color: var(--borde-claro); text-decoration: none; }
.cifra--estatica:hover { border-color: var(--borde); }
.cifra__n {
    display: block;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.cifra__q { display: block; margin-top: 2px; font-size: 13.5px; color: var(--texto-3); }
.cifra--estatica .cifra__q { margin: 0 0 8px; font-size: 15px; color: var(--texto); font-weight: 600; }

/* Filtros del buzón */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--borde);
}
.filtros a {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border-radius: 999px;
    color: var(--texto-2);
    font-size: 14px;
    font-weight: 500;
}
.filtros a:hover { background: var(--fondo-2); color: var(--texto); text-decoration: none; }
.filtros a.activo { background: var(--fondo-3); color: var(--texto); font-weight: 600; }

.pastilla {
    display: inline-block;
    min-width: 20px;
    padding: 1px 7px;
    background: var(--indigo);
    border-radius: 999px;
    color: #fff;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.filtros a:not(.activo) .pastilla { background: var(--fondo-3); color: var(--texto-3); }

/* Lista de correos */
.lista-correos { margin: 0; padding: 0; list-style: none; }
.lista-correos li { border-bottom: 1px solid var(--borde); }
.lista-correos li:first-child { border-top: 1px solid var(--borde); }

.lista-correos a {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(0, 2.1fr) auto;
    align-items: baseline;
    gap: 16px;
    padding: 13px 10px;
    color: var(--texto-2);
}
.lista-correos a:hover { background: var(--fondo-2); text-decoration: none; }

.lista-correos .de {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
    font-size: 14px;
    color: var(--texto);
    overflow-wrap: anywhere;
}
.lista-correos .asunto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.lista-correos .meta { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.lista-correos .cuando { font-size: 12.5px; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* Sin asignar: se distingue por peso, no por color, para que siga leyéndose */
.lista-correos .sin-leer .asunto,
.lista-correos .sin-leer .de { font-weight: 600; color: var(--texto); }

@media (max-width: 720px) {
    .lista-correos a { grid-template-columns: 1fr; gap: 4px; }
    .lista-correos .asunto { white-space: normal; }
}

/* Etiquetas */
.etiqueta {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}
.etiqueta--persona { background: rgba(95, 69, 230, .2); color: #b6a6ff; border: 1px solid rgba(95, 69, 230, .45); }
.etiqueta--cliente { background: rgba(18, 164, 250, .14); color: #7fcbff; border: 1px solid rgba(18, 164, 250, .35); }
.etiqueta--libre   { background: transparent; color: var(--texto-3); border: 1px solid var(--borde-claro); }
.etiqueta--ok      { background: rgba(53, 201, 138, .15); color: #7ee0b4; border: 1px solid rgba(53, 201, 138, .35); }

/* Correo abierto */
.volver { margin-bottom: 14px; font-size: 14px; }
.volver a { color: var(--texto-3); }

.correo {
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
    overflow: hidden;
}
.correo__cab { padding: 22px 24px 16px; }
.correo__cab h1 { margin-bottom: 10px; font-size: 21px; overflow-wrap: anywhere; }
.correo__cab p { margin: 0 0 4px; font-size: 14px; }
.correo__de { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; overflow-wrap: anywhere; }

.correo__barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 24px;
    background: var(--fondo-3);
    border-top: 1px solid var(--borde);
    border-bottom: 1px solid var(--borde);
}
.correo__quien { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.correo__quien form { margin: 0; }
.correo__quien .btn { width: auto; padding: 8px 18px; font-size: 14px; }
.correo__barra select { width: auto; min-width: 170px; padding: 8px 34px 8px 12px; font-size: 14px; }

.correo__cuerpo { padding: 22px 24px; }
.correo__cuerpo pre {
    margin: 0;
    font-family: var(--tipo);
    font-size: 15px;
    line-height: 1.65;
    color: var(--texto);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.correo__responder {
    margin: 0;
    padding: 14px 24px;
    border-top: 1px solid var(--borde);
    font-size: 13.5px;
}

/* Notas internas */
.notas { margin: 0 0 18px; padding: 0; list-style: none; display: grid; gap: 10px; }
.notas li {
    padding: 13px 16px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-left: 3px solid var(--aviso);
    border-radius: var(--r);
}
.notas li p:last-child { margin: 0; }
.notas__quien { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; font-size: 13px; }

.form-nota .btn { width: auto; margin-top: 10px; }

/* Paginación */
.paginacion {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    font-size: 14px;
}
.paginacion a, .paginacion .inerte {
    padding: 7px 14px;
    border: 1px solid var(--borde-claro);
    border-radius: 999px;
    color: var(--texto-2);
}
.paginacion .inerte { color: var(--texto-3); border-color: var(--borde); }
.paginacion a:hover { border-color: var(--cian); color: var(--texto); text-decoration: none; }
.paginacion .cuenta { margin-left: auto; color: var(--texto-3); }

/* -------------------------------------------------------------------- Móvil */

@media (max-width: 860px) {
    .marco { flex-direction: column; }

    .lateral {
        flex: none;
        flex-direction: row;
        align-items: center;
        gap: 14px;
        padding: 12px 16px;
        border-right: 0;
        border-bottom: 1px solid var(--borde);
        overflow-x: auto;
    }
    .lateral__marca { margin: 0; font-size: 18px; white-space: nowrap; }
    .lateral__grupo { display: none; }
    .lateral__nav { flex-direction: row; gap: 4px; }
    .lateral__nav a { white-space: nowrap; padding: 7px 11px; }
    .lateral__nav a.activo { box-shadow: inset 0 -2px 0 var(--cian); }
    .lateral__pie {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 0 0 0 auto;
        padding: 0 0 0 14px;
        border-top: 0;
        border-left: 1px solid var(--borde);
    }
    .lateral__quien { margin: 0; padding: 0; white-space: nowrap; }
    .lateral__quien span { display: none; }

    .contenido { padding: 22px 18px 50px; }
    .correo__cab, .correo__barra, .correo__cuerpo, .correo__responder { padding-left: 16px; padding-right: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms; transition-duration: 0.01ms; }
}

/* ==========================================================================
   Segunda tanda: soporte, catálogo, facturación y ajustes.

   Se añade al final en vez de reescribir lo de arriba, para no romper lo que
   ya funcionaba. Todo cuelga de las mismas variables de color.
   ========================================================================== */

/* Referencias (AH-8F3K2, número de factura): son códigos, se leen mejor
   monoespaciados y con algo de aire entre letras. */
.referencia {
    display: inline-block;
    margin-right: 8px;
    font-family: ui-monospace, Consolas, "Liberation Mono", monospace;
    font-size: 12.5px;
    letter-spacing: 0.03em;
    color: var(--texto-3);
}
.lista-correos .sin-leer .referencia { color: var(--texto-2); }

.etiqueta--urgente { background: rgba(242, 85, 90, .14); color: #ff9296; border: 1px solid rgba(242, 85, 90, .38); }
.etiqueta--interno { background: rgba(245, 165, 36, .14); color: #f0b45c; border: 1px solid rgba(245, 165, 36, .38); }

.importe { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--texto); }

.acciones-cabecera { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.acciones-bloque { margin-top: 16px; }

.btn--compacto { width: auto; padding: 9px 18px; font-size: 14px; }

/* Entrar con Google. El logotipo no se trae de un CDN: una imagen que no carga
   deja el botón mudo, y aquí basta con la inicial sobre blanco. */
.btn--google {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 22px;
    background: var(--fondo);
    border: 1px solid var(--borde-claro);
    border-radius: 999px;
    color: var(--texto);
    font: inherit;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}
.btn--google:hover { border-color: var(--texto-3); text-decoration: none; filter: none; }
.btn__g {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #ffffff;
    color: #4285f4;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
}

.separador {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0 16px;
    color: var(--texto-3);
    font-size: 13px;
}
.separador::before, .separador::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--borde);
}
.apagado--centrado { text-align: center; font-size: 13px; margin-top: 10px; }

/* ------------------------------------------------------------- Formularios */

.formulario { max-width: 640px; }
.formulario fieldset { margin: 0 0 16px; padding: 0; border: 0; }
.formulario legend {
    padding: 0;
    margin-bottom: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-2);
}

.campos-en-fila { display: flex; flex-wrap: wrap; gap: 14px; }
.campos-en-fila > .campo { flex: 1 1 220px; min-width: 0; }
.campos-en-fila > .campo--corto { flex: 0 1 170px; }

.campo input:disabled {
    background: var(--fondo-2);
    color: var(--texto-3);
    cursor: not-allowed;
}

.casillas { display: grid; gap: 6px; }
.casillas .casilla { margin: 0; }

.form-acciones {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 16px;
}
.form-acciones .btn { width: auto; }
.form-acciones select { width: auto; min-width: 220px; }

.grupo-selects { display: flex; gap: 8px; }
.grupo-selects select { width: auto; min-width: 150px; padding: 8px 34px 8px 12px; font-size: 14px; }

.sub { margin: 30px 0 12px; font-size: 15px; color: var(--texto-2); }

/* ------------------------------------------------------------ Conversación */

.conversacion { display: grid; gap: 2px; }

.mensaje {
    padding: 16px 20px;
    background: var(--fondo-2);
    border-top: 1px solid var(--borde);
}
.correo .conversacion .mensaje:first-child { border-top: 0; }

/* El equipo a un lado, el cliente al otro. La diferencia va en el fondo y en
   un filo de color, no en la alineación: burbujas de chat en una bandeja de
   trabajo obligan a leer en zigzag. */
.mensaje--equipo { background: var(--fondo-3); box-shadow: inset 3px 0 0 var(--indigo); }
.mensaje--interno { background: rgba(245, 165, 36, .06); box-shadow: inset 3px 0 0 var(--aviso); }

.mensaje__quien {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 6px;
    font-size: 13.5px;
}
.mensaje pre {
    margin: 0;
    font-family: var(--tipo);
    font-size: 15px;
    line-height: 1.65;
    color: var(--texto);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------------- Catálogo */

.rejilla-planes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}

.plan {
    display: flex;
    flex-direction: column;
    padding: 20px 22px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}
.plan--oculto { opacity: .62; }

.plan__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.plan__cab h2 { margin: 0; font-size: 17px; }
.plan__marcas { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

.plan__precio {
    margin: 0 0 2px;
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.plan__periodo { font-size: 14px; font-weight: 500; color: var(--texto-3); letter-spacing: 0; }

.plan__resumen { margin: 10px 0 0; font-size: 14px; color: var(--texto-2); }

.plan__lista { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.plan__lista li {
    position: relative;
    padding-left: 18px;
    font-size: 14px;
    color: var(--texto-2);
}
.plan__lista li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--cian);
}
.plan__lista li.apagado::before { background: var(--texto-3); }

.plan__pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 18px;
}
.plan__pie .btn { width: auto; }

/* ------------------------------------------------------------------ Fichas */

.fichas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}

.ficha {
    padding: 20px 22px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}
.ficha__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.ficha__cab h2 { margin: 0 0 2px; font-size: 17px; }
.ficha__cab p { margin: 0; }
.ficha__pie { margin-top: 16px; }
.ficha__pie .btn { width: auto; }

.datos { display: grid; gap: 8px; margin: 0; }
.datos > div { display: flex; justify-content: space-between; gap: 14px; font-size: 14px; }
.datos dt { color: var(--texto-3); }
.datos dd { margin: 0; color: var(--texto); font-variant-numeric: tabular-nums; }
.datos dd.destacado { color: #f0b45c; font-weight: 600; }

/* --------------------------------------------------------------- Documento */

.documento {
    padding: 26px 28px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r-g);
}
.documento__cab {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 24px;
}
.documento__cab h1 { margin: 0 0 4px; font-size: 23px; }

.eyebrow, .etiqueta-campo {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--texto-3);
}

.documento__partes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 26px;
    font-size: 14px;
    line-height: 1.6;
}
.documento__partes p { margin: 0; color: var(--texto-2); }

.documento__pie {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--borde);
    font-size: 14px;
}
.documento__pie p { margin: 0; }

/* Una tabla ancha nunca empuja la página: se desplaza dentro de su caja. */
.tabla-envoltorio { overflow-x: auto; }

.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th, .tabla td { padding: 10px 12px; text-align: left; }
.tabla thead th {
    border-bottom: 1px solid var(--borde-claro);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--texto-3);
}
.tabla tbody td { border-bottom: 1px solid var(--borde); color: var(--texto-2); }
.tabla tbody td:first-child { color: var(--texto); }
.tabla .numero { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabla tfoot td { padding-top: 8px; padding-bottom: 4px; color: var(--texto-3); }
.tabla tfoot .total td {
    padding-top: 12px;
    border-top: 1px solid var(--borde-claro);
    font-size: 17px;
    font-weight: 800;
    color: var(--texto);
}

/* ----------------------------------------------------------------- Ajustes */

.tarjeta--ajuste { padding: 0; margin-bottom: 8px; }

.ajuste {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    padding: 20px 22px;
}
.ajuste__texto { flex: 1 1 320px; min-width: 0; }
.ajuste__texto h3 { margin: 0 0 6px; font-size: 16px; }
.ajuste__texto p { margin: 0 0 6px; font-size: 14px; color: var(--texto-2); }
.ajuste__texto p:last-child { margin-bottom: 0; }
.ajuste__accion { flex: 0 0 auto; }
.ajuste__accion .btn, .ajuste__accion .btn--google { width: auto; }

.lista-accesos { margin: 0 0 20px; padding: 0; list-style: none; display: grid; gap: 8px; }
.lista-accesos li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 13px 16px;
    background: var(--fondo-2);
    border: 1px solid var(--borde);
    border-radius: var(--r);
}
.lista-accesos li p { margin: 0; }
.lista-accesos__quien { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; font-size: 14px; }

@media (max-width: 720px) {
    .campos-en-fila { flex-direction: column; gap: 0; }
    .campos-en-fila > .campo, .campos-en-fila > .campo--corto { flex: none; }
    .form-acciones select, .form-acciones .btn { width: 100%; min-width: 0; }
    .documento { padding: 20px 16px; }
}

/* Listado a pantalla completa: el asunto se lleva el espacio sobrante, que es
   lo que de verdad se lee al recorrer una bandeja. */
.lista-correos--ancha a { grid-template-columns: minmax(150px, 0.9fr) minmax(0, 2.6fr) auto; }

/* ---------------- clientes del equipo, clave temporal e impresion ---------------- */
.tabla-envuelta { overflow-x: auto; }
.tabla-simple { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-simple th { padding: 6px 10px; font-size: 12px; text-align: left; color: var(--texto-3, #8b93a7); border-bottom: 1px solid var(--borde, #232839); }
.tabla-simple td { padding: 9px 10px; border-bottom: 1px solid var(--borde, #232839); }
.tabla-simple tr:last-child td { border-bottom: 0; }
.tabla-simple .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-simple--enlazada a { color: inherit; text-decoration: none; font-weight: 600; }
.tabla-simple--enlazada a:hover { text-decoration: underline; }

.ficha-cliente { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 16px; align-items: start; }
.fila-suave { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--borde, #232839); }
.fila-suave:last-child { border-bottom: 0; }
.fila-suave__cifra { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; }

/* La clave temporal: imposible no verla, imposible confundir un caracter. */
.aviso-clave {
    margin-bottom: 18px;
    padding: 16px 20px;
    border: 2px solid #35c98a;
    border-radius: 12px;
    background: rgba(53, 201, 138, .1);
}
.aviso-clave p { margin: 0 0 6px; }
.aviso-clave__clave {
    font-size: 30px;
    font-weight: 800;
    font-family: ui-monospace, monospace;
    letter-spacing: .12em;
    user-select: all;
}

.volver--con-accion { display: flex; justify-content: space-between; align-items: center; gap: 12px; }

/* Al imprimir una factura solo sale la factura: ni menu, ni botones, ni barra. */
@media print {
    .lateral, .barra-superior, .volver, .no-imprimir, nav, .aviso { display: none !important; }
    body { background: #fff; color: #000; }
    .documento { border: 0; box-shadow: none; }
}

.acciones-fila { display: flex; gap: 8px; margin-left: auto; }
.acciones-fila form { margin: 0; }

/* Lo que el cliente tiene contratado. */
.producto-contratado { margin-bottom: 18px; }
.producto-contratado h3.sub { margin: 0 0 8px; font-size: 14px; }
.pedir-cuenta { margin-top: 12px; padding: 12px 14px; background: var(--fondo-3, #1a1f2e); border-radius: 10px; }
.pedir-cuenta > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.pedir-cuenta[open] > summary { margin-bottom: 12px; }