/*
    Ancho completo y ventanas centradas (se carga después de apple.css).

    El contenido ya no se corta a media pantalla: ocupa lo que hay, con un
    límite cómodo de lectura solo en pantallas enormes. Los formularios largos
    mantienen su columna. Crear algo se hace en una ventana centrada.
*/

.contenido { max-width: 1320px; width: 100%; }
.formulario, .formulario--estrecho { max-width: 720px; }

dialog.ventana {
    width: min(760px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    padding: 0;
    border: 0;
    border-radius: 18px;
    background: var(--fondo-2);
    color: var(--texto);
    box-shadow: var(--sombra-alta);
    overflow: hidden;
}
dialog.ventana::backdrop { background: rgba(0, 0, 0, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
dialog.ventana[open] { animation: ventana-entra .22s cubic-bezier(.32, .72, 0, 1); }
@keyframes ventana-entra { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { dialog.ventana[open] { animation: none; } }

.ventana__cuerpo { max-height: calc(100vh - 48px); overflow-y: auto; padding: 30px 32px 28px; }
.ventana__cerrar {
    position: absolute; top: 14px; right: 14px; z-index: 2;
    width: 30px; height: 30px; padding: 0;
    border: 0; border-radius: 999px;
    background: var(--fondo-3); color: var(--texto-2);
    font-size: 19px; line-height: 1; cursor: pointer;
}
.ventana__cerrar:hover { background: var(--borde); color: var(--texto); }

.ventana .formulario, .ventana .formulario--estrecho { max-width: none; }
.ventana .cabecera { margin-bottom: 18px; padding-right: 34px; }
.ventana h1 { font-size: 24px; }

@media (max-width: 560px) {
    dialog.ventana { width: 100vw; max-width: 100vw; max-height: 94vh; margin: auto 0 0; border-radius: 18px 18px 0 0; }
    .ventana__cuerpo { padding: 24px 18px 22px; max-height: 94vh; }
}

/* ------------------------------------------------ El menú: siempre fijo, a la izquierda
   Una columna pegada al borde izquierdo que no se mueve al bajar por la página,
   ni en un portátil pequeño ni en una tablet. Solo en el móvil de verdad
   (menos de 641 px) pasa a ser el cajón que se abre con el botón. */
@media (min-width: 641px) {
    .marco { display: block; }
    .lateral {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        width: 236px;
        height: 100vh;
        transform: none;
        overflow-y: auto;
        z-index: 30;
    }
    .barra-movil, .velo { display: none !important; }
    .contenido { margin-left: 236px; width: auto; max-width: none; }
}

/* Barra de desplazamiento discreta, del color del tema. */
.lateral { scrollbar-width: thin; scrollbar-color: var(--borde-claro) transparent; }
.lateral::-webkit-scrollbar { width: 8px; }
.lateral::-webkit-scrollbar-thumb { background: var(--borde-claro); border-radius: 8px; }
.lateral::-webkit-scrollbar-track { background: transparent; }

/* ======================================================= Pestañas y secciones
   Las pestañas son un control segmentado (como el de iOS): una pastilla gris
   con la activa elevada. Ya no hay emojis, y la fila ocupa toda la anchura de
   la ficha en vez de colarse en una columna. */
.pestanas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    margin: 0 0 22px;
    padding: 3px;
    max-width: 100%;
    background: var(--fondo-3);
    border-radius: 11px;
}
.ficha-cliente > .pestanas { grid-column: 1 / -1; justify-self: start; }
.pestana {
    border: 0;
    border-radius: 8px;
    background: transparent;
    padding: 6px 15px;
    color: var(--texto-2);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.006em;
}
.pestana:hover { background: transparent; color: var(--texto); border: 0; opacity: 1; }
.pestana--activa, .pestana--activa:hover {
    background: var(--fondo-2);
    border: 0;
    color: var(--texto);
    font-weight: 600;
    box-shadow: 0 0 0 .5px rgba(0, 0, 0, .06), 0 1px 3px rgba(0, 0, 0, .14);
}
:root[data-tema="oscuro"] .pestana--activa, :root[data-tema="oscuro"] .pestana--activa:hover { background: rgba(235, 235, 245, .18); box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-tema="claro"]) .pestana--activa, :root:not([data-tema="claro"]) .pestana--activa:hover { background: rgba(235, 235, 245, .18); box-shadow: none; } }
.pestana__icono { display: none; }
.pestana__cuenta { min-width: 18px; padding: 0 6px; font-size: 11.5px; font-weight: 600; }

/* ------------------------------------------------------- Cabeceras y bloques */
.volver { margin-bottom: 10px; font-size: 13px; }
.volver a { color: var(--texto-2); }
.volver a:hover { color: var(--acento); opacity: 1; }
.cabecera h1 { margin-bottom: 6px; }
.cabecera--con-accion { align-items: center; }
.bloque { margin-top: 32px; }
.bloque > h2, .sub { margin: 0 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .01em; color: var(--texto-2); text-transform: none; }
.tarjeta > h2, .ficha h2, .ficha__cab h2 { font-size: 15.5px; font-weight: 650; letter-spacing: -0.015em; }
.tarjeta > h2:first-child { margin-bottom: 14px; }

/* Filas dentro de una tarjeta, como las listas de Ajustes de iOS. */
.fila-suave { padding: 10px 0; margin: 0; border-bottom: .5px solid var(--borde); align-items: center; }
.fila-suave strong { font-weight: 550; }
.numero-cliente { padding: 2px 9px; border: 0; border-radius: 999px; background: var(--fondo-3); color: var(--texto-2); font: inherit; font-size: 12px; cursor: pointer; }
.numero-cliente:hover { background: var(--borde); color: var(--texto); }
code { padding: 1px 6px; border-radius: 6px; background: var(--fondo-3); font-size: .88em; }

/* Cuadrícula de la ficha: las tarjetas se reparten el ancho sin dejar huecos raros. */
.ficha-cliente { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 18px; }
.fichas { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ficha, .tarjeta { padding: 22px 24px; }
.tarjeta--vacia { text-align: center; padding: 34px 24px; }
.tarjeta--vacia h2 { font-size: 16px; }

/* Cifras de la portada */
.cifras { gap: 14px; }
.cifra { padding: 18px 20px; }
.cifra__n { font-size: 30px; font-weight: 650; letter-spacing: -0.03em; }
.cifra__q { font-size: 13px; color: var(--texto-2); }

/* Tablas y listas */
.tabla-simple { width: 100%; }
.tabla-simple th { padding: 10px 12px; font-size: 11.5px; font-weight: 600; color: var(--texto-3); border-bottom: .5px solid var(--borde); text-align: left; }
.tabla-simple td { padding: 12px; border-bottom: .5px solid var(--borde); }
.tabla-simple--enlazada tbody tr:hover { background: var(--fondo-3); }
.lista-correos a { padding: 13px 14px; border-radius: 10px; }
.lista-correos li, .lista-correos li:first-child { border-color: transparent; }
.lista-correos li + li a { border-top: .5px solid var(--borde); border-radius: 0; }
.lista-correos a:hover { border-radius: 10px; }

/* Buscadores y barras de acciones */
.buscador { gap: 8px; margin-bottom: 18px; }
.acciones-cabecera, .acciones-fila, .form-acciones { gap: 10px; }
.cabecera__acciones { gap: 10px; }

/* Avisos de página */
.aviso { padding: 12px 16px; margin-bottom: 18px; }

/* Aire entre bloques consecutivos (tablas, cifras, tarjetas y formularios). */
.tabla-envoltorio, .cifras, .fichas, .rejilla-planes { margin-bottom: 22px; }
.tabla-envoltorio + p.apagado, .tabla-envoltorio + .apagado { margin-top: 14px; }
.contenido > .tarjeta + .tarjeta, .contenido > .ficha + .ficha { margin-top: 16px; }

/* Facturas y soporte del cliente: columnas alineadas fila a fila. */
@media (min-width: 721px) {
    .lista-correos--ancha a { grid-template-columns: 120px minmax(0, 1fr) auto; }
}