/*
    Á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 */

/* La barra de arriba solo existe en movil: en el ordenador el lateral ya esta
   siempre a la vista y un boton de menu ahi no significa nada. */
.barra-movil {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--borde);
    background: var(--fondo-2);
}

.barra-movil__marca {
    color: var(--texto);
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
}

.barra-movil__menu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44 pixeles: es el minimo con el que un pulgar acierta a la primera. */
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--borde);
    border-radius: var(--r);
    background: var(--fondo-3);
    color: var(--texto);
    cursor: pointer;
}

.barra-movil__rayas,
.barra-movil__rayas::before,
.barra-movil__rayas::after {
    display: block;
    width: 18px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.barra-movil__rayas { position: relative; }
.barra-movil__rayas::before,
.barra-movil__rayas::after { content: ""; position: absolute; left: 0; }
.barra-movil__rayas::before { top: -6px; }
.barra-movil__rayas::after  { top: 6px; }

/* Abierto, las rayas se cruzan: el mismo boton abre y cierra, y tiene que
   decir cual de las dos cosas hace ahora. */
[aria-expanded="true"] .barra-movil__rayas { background: transparent; }
[aria-expanded="true"] .barra-movil__rayas::before { top: 0; transform: rotate(45deg); }
[aria-expanded="true"] .barra-movil__rayas::after  { top: 0; transform: rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
    .lateral { transition: none; }
}

/* ─────────────────────────────────────── el lateral en movil: un cajon

   Antes esto convertia el lateral en una fila que se deslizaba a lo ancho.
   Ocupaba alto siempre, no dejaba ver lo que quedaba fuera de pantalla, y
   obligaba a esconder los titulos de grupo. Ahora el lateral entero sale desde
   la izquierda y por dentro se ve igual que en el ordenador.
   ----------------------------------------------------------------------- */
@media (max-width: 860px) {
    .marco { flex-direction: column; }

    .barra-movil { display: flex; }

    .lateral {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 60;
        width: min(84vw, 320px);
        border-right: 1px solid var(--borde);
        transform: translateX(-101%);
        transition: transform .22s var(--suave, ease);
        will-change: transform;
    }

    .lateral--abierto { transform: none; }

    /* El velo apaga lo de detras y recoge el toque para cerrar. */
    .velo {
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(4, 6, 12, .6);
        border: 0;
        padding: 0;
    }

    /* Con el cajon abierto, el fondo no se desplaza: si lo hace, al cerrar
       apareces en otro punto de la pagina y parece que se ha movido sola. */
    body.con-cajon { overflow: hidden; }

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

/* Ni verde ni rojo: «esto está esperando a que alguien lo mire». Lo usa el bar
   que se ha instalado y se ha presentado solo, que ni está mal —sirve en su
   local— ni está bien —todavía no es cliente—. El mismo ámbar que `--interno`,
   con su propio nombre: dos cosas distintas que hoy se parecen se separan mal
   el día que una de las dos cambie de color. */
.etiqueta--aviso   { background: rgba(245, 165, 36, .14); color: #f0b45c; border: 1px solid rgba(245, 165, 36, .38); }
.cifra--aviso .cifra__n { color: #f0b45c; }

.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, .tabla-envuelta { 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 ---------------- */
/* Mismo trabajo que .tabla-envoltorio; se dejan las dos apuntando a la misma
   regla en vez de repetirla, que es como se acaba teniendo seis definiciones de
   lo mismo. */
.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; }


/* ════════════════════════════════════════════════════════ SELECTOR DE BUZON */

.buzones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
}

.buzones__uno {
    display: grid;
    gap: 1px;
    padding: 9px 14px;
    background: var(--fondo-2);
    border: 1px solid var(--borde-claro);
    border-radius: 12px;
    color: var(--texto-2);
    text-decoration: none;
}
.buzones__uno:hover { border-color: var(--cian); color: var(--texto); text-decoration: none; }

.buzones__uno strong { font-size: 14px; font-weight: 600; }
.buzones__uno span { font-size: 12px; color: var(--texto-3); }

.buzones__uno.activo {
    border-color: var(--cian);
    background: color-mix(in srgb, var(--cian) 10%, var(--fondo-2));
    color: var(--texto);
}
.buzones__uno.activo span { color: var(--texto-2); }

/* En movil, en fila y con desplazamiento: cuatro buzones apilados se comen la
   pantalla antes de llegar a un solo correo. */
@media (max-width: 700px) {
    .buzones {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 4px;
        scrollbar-width: none;
    }
    .buzones::-webkit-scrollbar { display: none; }
    .buzones__uno { flex: none; }
}


/* ══════════════════════════════ EL LATERAL SE QUEDA, AUNQUE BAJE EL CONTENIDO

   El marco es un flex y el lateral crecia con la pagina: al bajar por una lista
   larga, el pie con el nombre y «Cerrar sesion» se iba hacia arriba y habia que
   volver al principio para cambiar de seccion.

   Se queda pegado y con su propio desplazamiento: si algun dia hay mas
   secciones de las que caben en la pantalla, se desplazan DENTRO del lateral y
   no arrastran la pagina. `align-self` es necesario porque en un flex el hijo
   se estira a la altura del contenedor y `height: 100dvh` solo no basta.
   ------------------------------------------------------------------------- */
@media (min-width: 1001px) {
    .lateral {
        position: sticky;
        top: 0;
        align-self: flex-start;
        height: 100dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}


/* ═══════════════════════════════════ SELECTOR DE BUZON (version definitiva) */

.buzones {
    display: flex;
    gap: 8px;
    margin: 0 0 18px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
}
.buzones::-webkit-scrollbar { display: none; }

.buzones__uno {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    padding: 9px 14px 9px 11px;
    background: var(--fondo-2);
    border: 1px solid var(--borde-claro);
    border-radius: 12px;
    color: var(--texto-2);
    text-decoration: none;
    transition: border-color 120ms ease, background-color 120ms ease;
}
.buzones__uno:hover {
    border-color: var(--cian);
    color: var(--texto);
    text-decoration: none;
}

.buzones__icono {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: 9px;
    background: var(--fondo-3);
    color: var(--texto-3);
}
.buzones__icono svg { width: 17px; height: 17px; }

.buzones__texto { display: grid; gap: 1px; line-height: 1.25; }
.buzones__texto strong { font-size: 13.5px; font-weight: 600; }
.buzones__texto span { font-size: 11.5px; color: var(--texto-3); }

/* El numero de sin asignar: es lo que hace que se pueda elegir buzon sabiendo
   donde hay trabajo, en vez de ir abriendolos uno a uno. */
.buzones__cuenta {
    min-width: 21px;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--cian);
    color: #04121a;
    font-size: 11.5px;
    font-weight: 700;
    text-align: center;
}

.buzones__uno.activo {
    border-color: var(--cian);
    background: color-mix(in srgb, var(--cian) 12%, var(--fondo-2));
    color: var(--texto);
}
.buzones__uno.activo .buzones__icono {
    background: color-mix(in srgb, var(--cian) 22%, transparent);
    color: var(--texto);
}
.buzones__uno.activo .buzones__texto span { color: var(--texto-2); }

/* Los botones de la cabecera, en linea y sin estirarse. */
.cabecera__acciones { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.cabecera__acciones form { margin: 0; }
.cabecera__acciones .btn { width: auto; }

/* ──────────────────────────────────────────────────── redactar un correo */

.redactar { display: grid; gap: 14px; padding: 20px; }
.redactar textarea { width: 100%; padding: 11px 13px; font: inherit; line-height: 1.55; resize: vertical; }
.redactar__pie { display: flex; flex-wrap: wrap; gap: 10px; }
.redactar__pie .btn { width: auto; }

/* ─────────────────────────────────────── Las tablas anchas, en el movil

   Por debajo de 720px la tabla deja de ser tabla: cada fila es una ficha y
   cada celda lleva delante el nombre de su columna. La de bares tiene ocho
   columnas y en un telefono solo se podia leer arrastrando de lado, que es
   justo lo que no se hace con el pulgar.

   El nombre sale de `data-etiqueta` con `content: attr(...)`: ni se repite el
   texto en el HTML ni hace falta JavaScript. */
@media (max-width: 720px) {
    /* Fuera de la vista pero NO para un lector de pantalla: `display: none`
       la borraria tambien para quien navega escuchando. */
    .tabla-simple thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .tabla-simple,
    .tabla-simple tbody,
    .tabla-simple tr,
    .tabla-simple td { display: block; width: auto; }

    .tabla-simple tr {
        margin-bottom: 10px;
        padding: 12px 14px;
        background: var(--fondo-2);
        border: 1px solid var(--borde);
        border-radius: var(--r, 10px);
    }

    .tabla-simple td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 5px 0;
        border: 0;
        text-align: right;
    }

    .tabla-simple td::before {
        content: attr(data-etiqueta);
        flex: none;
        color: var(--texto-3);
        font-size: 13px;
        text-align: left;
    }

    /* La primera celda es el nombre y hace de titulo de la ficha: sin rotulo
       delante, a la izquierda y mas marcada. */
    .tabla-simple td:first-child {
        margin-bottom: 4px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--borde);
        font-weight: 600;
        text-align: left;
    }
    .tabla-simple td:first-child::before { content: none; }
}

/* ───────────────────────────────── Piezas que se usaban sin existir

   Estas clases estaban en las plantillas y no tenian una sola regla: el
   navegador las ignoraba y el bloque salia con lo que heredara. Por eso
   «Empresa» se veia con las tarjetas enormes y pegadas. Una clase inventada no
   da error, solo se ve raro. */

/* Una tarjeta con el contenido a la izquierda y la accion a la derecha. En
   pantalla estrecha se apila: el boton debajo, a lo ancho, que es donde llega
   el pulgar. */
.tarjeta--fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 16px 18px;
}
.tarjeta--fila > div { flex: 1 1 min(320px, 100%); min-width: 0; }

/* EL BOTON DE LA DERECHA SE MIDE POR SU TEXTO.
   `.btn` nace a lo ancho porque casi siempre va al pie de un formulario. Suelto
   dentro de un flex, ese 100% le hace pedir la fila entera y se cae debajo,
   estirado de lado a lado. Solo se veia en la plataforma que se abre con un
   enlace normal: las que se abren con vale llevan el boton dentro de un <form>,
   y el <form> si se encoge a su contenido. */
.tarjeta--fila > .btn { width: auto; flex: 0 0 auto; }
.tarjeta--fila h3 { margin: 0 0 3px; font-size: 15.5px; }
.tarjeta--fila p { margin: 0; font-size: 14px; }

@media (max-width: 620px) {
    .tarjeta--fila { align-items: stretch; }
    .tarjeta--fila form { width: 100%; }
    .tarjeta--fila form .btn { width: 100%; }
    .tarjeta--fila > .btn { width: 100%; }
}

/* Un formulario que cabe en una linea: un desplegable y su boton al lado. */
.formulario--en-linea {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}
.formulario--en-linea .campo { margin: 0; }

/* La casilla y su texto, uno al lado del otro y no uno debajo del otro. */
.campo--casilla {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.campo--casilla input { width: auto; margin: 0; }
.campo--casilla span { font-size: 14px; color: var(--texto-2); }

/* La explicacion pequena que va debajo de un titulo o de un campo. */
.ficha__pista {
    display: block;
    margin: 0 0 14px;
    font-size: 13.5px;
    line-height: 1.5;
}

/* Avisos de resultado. --bien y --mal son los nombres que se usaron en las
   plantillas nuevas; apuntan a los mismos colores que --ok y --error. */
.aviso--bien { background: color-mix(in srgb, var(--ok) 10%, var(--fondo-2)); color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 30%, transparent); }
.aviso--mal,
.aviso--atencion { border-width: 1px; border-style: solid; }
.aviso--mal { background: color-mix(in srgb, var(--mal) 8%, var(--fondo-2)); color: var(--mal); border-color: color-mix(in srgb, var(--mal) 30%, transparent); }
.aviso--atencion { background: color-mix(in srgb, var(--aviso) 10%, var(--fondo-2)); color: var(--aviso); border-color: color-mix(in srgb, var(--aviso) 30%, transparent); }

/* La rejilla de plataformas de «Empresa»: en cuanto caben dos, dos. Una sola
   columna con tarjetas a pantalla completa era lo que hacia que se vieran
   enormes. */
.cifras { gap: 14px; }

/* Un formulario que no debe estirarse a lo ancho de un monitor: leer un campo
   de 1400 px de ancho es incomodo y ademas parece que falta algo al lado. */
.formulario--estrecho { max-width: 460px; }

/* Un boton mas callado que el principal, para acciones secundarias que no
   deben competir con la que de verdad se quiere pulsar. */
.btn--suave {
    background: transparent;
    border: 1px solid var(--borde);
    color: var(--texto-2);
    box-shadow: none;
}
.btn--suave:hover { background: var(--fondo-3); color: var(--texto); }

/* La caja de buscar de las pantallas con lista. */
.buscador { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; }
.buscador input { flex: 1 1 auto; }

/* EL NUMERO DE CLIENTE.
   Se enseña como un boton porque se puede pulsar para copiarlo, pero no tiene
   que gritar: en la ficha es un dato mas, aunque sea el que hay que teclear en
   el bar. Monoespaciado para que no se confundan el uno y la ele. */
.numero-cliente {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12.5px;
    font-weight: 600;
    padding: 2px 8px;
    color: var(--texto-2);
    background: var(--fondo-3);
    border: 1px solid var(--borde-claro);
    border-radius: 999px;
    cursor: pointer;
}
.numero-cliente:hover { color: var(--texto); border-color: var(--cian); }

/* ══════════════════════════════════════════════════════ pestañas de apartado

   Las de la pantalla de Configuración del inventario, que es la referencia que
   se pidió. Píldoras, no la clásica fila con subrayado: en el móvil se pueden
   envolver en dos líneas sin que parezca un error, y ahí es donde más se usa
   esto.

   La encendida se invierte —fondo claro, letra oscura— en vez de llevar solo un
   color de acento. En un panel oscuro el acento sobre oscuro se pierde a un
   metro de la pantalla; el contraste invertido no.
   ------------------------------------------------------------------------- */

.pestanas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 24px;
}

.pestana {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border: 1px solid var(--borde);
    border-radius: var(--r);
    background: var(--fondo-2);
    color: var(--texto-2);
    font-size: .9rem;
    font-weight: 550;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.pestana:hover {
    background: var(--fondo-3);
    border-color: var(--borde-claro);
    color: var(--texto);
}

.pestana--activa,
.pestana--activa:hover {
    background: var(--texto);
    border-color: var(--texto);
    color: var(--fondo);
}

.pestana__icono { font-size: 1rem; line-height: 1; }

/* El contador hereda el color de la pestaña: sobre la encendida tiene que
   leerse en oscuro, y con un color fijo se volvía invisible justo ahí. */
.pestana__cuenta {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 999px;
    background: color-mix(in srgb, currentColor 16%, transparent);
    font-size: .78rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

/* En un móvil estrecho las pestañas ocupan la fila entera y se reparten: dos
   por linea se leen, cinco apretujadas no. */
@media (max-width: 560px) {
    .pestanas { gap: 5px; }
    .pestana { flex: 1 1 auto; justify-content: center; padding: 9px 10px; }
}


/* ════════════════════════════════════ el guardar, pegado abajo en formularios

   Para los formularios largos —la apariencia de la web son ciento ochenta
   lineas— el boton estaba al final del todo. En el movil eso son varias
   pantallas de distancia desde el campo que acabas de escribir, y la duda de
   «¿se ha guardado?» sale de ahi.

   Se queda pegado al borde inferior mientras haya formulario por delante.
   ------------------------------------------------------------------------- */

.guardar-pegado {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin: 24px -4px -4px;
    padding: 14px 4px;
    border-top: 1px solid var(--borde);
    /* Opaco a proposito: si se transparenta, el texto del formulario pasa por
       debajo y el boton deja de leerse justo cuando hace falta. */
    background: var(--fondo);
}

.guardar-pegado .btn { width: auto; }

/* Un separador entre los bloques del formulario, para que se vea donde acaba
   uno y empieza el siguiente. Sin esto son tres cosas seguidas sin respiro. */
.formulario h2 + .ficha__pista { margin-top: 2px; }

.formulario h2:not(:first-of-type) {
    margin-top: 34px;
    padding-top: 26px;
    border-top: 1px solid var(--borde);
}

/*
    LAS VERSIONES.

    Cada version es una nota de entrega, no una fila de tabla. El «que trae» lo
    escribe una persona para que otra lo lea antes de soltar la version a todos
    los bares; en una celda entre otras cuatro columnas sale a una palabra por
    linea y la fila mide media pantalla.

    Aqui el numero, el estado y el boton van arriba en una linea, y el texto
    debajo a lo ancho, cortado a 80 caracteres para que el ojo no se pierda al
    volver al principio del renglon.
*/
.versiones { display: grid; gap: 10px; margin: 4px 0 0; padding: 0; list-style: none; }

.version {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 16px;
    padding: 14px 16px;
    background: var(--fondo-3);
    border: 1px solid var(--borde);
    border-radius: var(--r);
}
.version form { margin: 0; }

.version__que { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; min-width: 0; }
.version__n { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--texto); }
.version__bares { font-size: 12.5px; color: var(--texto-3); }

.version__notas {
    grid-column: 1 / -1;
    max-width: 80ch;
    margin: 8px 0 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: var(--texto-2);
}

/* Estrecho: el boton debajo y a lo ancho, que es donde llega el pulgar. */
@media (max-width: 620px) {
    .version { grid-template-columns: 1fr; }
    .version form { margin-top: 10px; }
    .version .btn { width: 100%; }
}

/* Un formulario dentro de una tarjeta ancha no tiene por que medir lo que la
   tarjeta: un campo de texto de 1000 px es peor de leer que uno de 520. */
.formulario--ancho { max-width: 520px; }

/* Una tarjeta que va sola despues de una rejilla: le hace falta el mismo hueco
   que hay entre las tarjetas de la rejilla. */
.tarjeta--suelta { margin-top: 16px; }