/* Bot de códigos — © 2026 StreamNet. Todos los derechos reservados.
   Prohibida su copia, reventa o redistribución sin autorización de StreamNet. */

/* =====================================================================
   Hoja de estilos del bot (panel, portal del revendedor y página de códigos).
   Los colores y formas salen de la ficha de identidad (docs/identidad/ficha_identidad.md).
   El orden importa: las secciones de más abajo ajustan a las de más arriba.
   ===================================================================== */

/* ---------- Variables de la ficha ---------- */
:root {
    /* Acento azul (botones, enlaces, pestaña activa, foco) */
    --azul: #007bff;
    --azul-hover: #0069d9;
    --azul-oscuro: #0056b3;
    --azul-foco: #80bdff;
    --azul-anillo: rgba(0, 123, 255, 0.25);

    /* Panel: menú lateral y área de trabajo */
    --menu-fondo: #1e293b;
    --menu-texto: #e2e8f0;
    --menu-tenue: #94a3b8;
    --menu-linea: #334155;
    --area-fondo: #f1f5f9;

    /* Textos */
    --tinta: #333;
    --tinta-2: #555;
    --tinta-3: #666;
    --tinta-tenue: #6c757d;
    --tinta-oscura: #1e293b;

    /* Superficies, bordes y divisores */
    --blanco: #fff;
    --gris-claro: #f8f9fa;
    --gris-fila: #f9f9f9;
    --linea: #eee;
    --linea-2: #e9ecef;
    --linea-3: #e9e9e9;
    --borde-campo: #ccc;
    --borde-campo-2: #ced4da;

    /* Estados */
    --verde: #28a745;
    --verde-oscuro: #218838;
    --verde-aviso: #d4edda;
    --verde-texto: #155724;
    --rojo: #d9534f;
    --rojo-aviso: #f8d7da;
    --rojo-texto: #721c24;
    --rojo-borde: #f5c6cb;
    --gris-boton: #6c757d;
    --gris-boton-hover: #5a6268;
    --amarillo: #ffc107;

    /* Sombras de la ficha */
    --sombra-tarjeta: 0 2px 6px rgba(0, 0, 0, 0.08);
    --sombra-suave: 0 4px 12px rgba(0, 0, 0, 0.08);
}

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

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--tinta);
    background-color: #f4f7f6;
}

/* Formularios: cada campo con su etiqueta arriba */
.form-group { margin-bottom: 15px; } /* espacio entre un campo y el siguiente */
label { display: block; margin-bottom: 5px; font-size: 14px; font-weight: 500; }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
select,
textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--borde-campo);
    border-radius: 4px;
    transition: border-color 0.2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--azul); outline: none; }

/* Botón por defecto: azul, se oscurece al pasar el mouse */
button {
    padding: 10px 15px;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    color: var(--blanco);
    background-color: var(--azul);
    cursor: pointer; transition: background-color 0.2s;
}
button:hover { background-color: var(--azul-oscuro); }

/* Buscador de una línea (Gestionar Correos, Clientes…): campo y botón redondeados */
.search-input-group { display: flex; gap: 10px; margin-bottom: 15px; }
.search-input-group input[type="text"] { /* */
    flex-grow: 1;
    padding: 10px 15px;
    border: 1px solid #dcdcdc; border-radius: 20px;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
}
.search-input-group input[type="text"]:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-anillo); }
.search-input-group button { /* */
    flex-shrink: 0;
    padding: 10px 20px;
    border-radius: 20px;
    background-color: var(--azul);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.search-input-group button:hover { background-color: var(--azul-oscuro); box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15); }

/* ---------- Avisos de "listo" y de error (se desvanecen con .fade-out) ---------- */
.success, .error {
    max-width: 600px;
    margin: 0 auto 25px;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    font-weight: 500;
    text-align: center;
    visibility: visible;
    opacity: 1; transform: translateY(0); transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease;
}
.success { color: var(--verde-texto); background-color: var(--verde-aviso); border: 1px solid #c3e6cb; }
.error { color: var(--rojo-texto); background-color: var(--rojo-aviso); border: 1px solid var(--rojo-borde); }
.fade-out { visibility: hidden; opacity: 0; transform: translateY(-20px); }

pre { padding: 10px; border-radius: 4px; background-color: var(--linea); white-space: pre-wrap; word-wrap: break-word; }

/* Giro de la ruedita "Buscando…" */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ---------- Panel: menú lateral + área de trabajo ---------- */
.main-layout { height: 100vh; display: flex; } /* menú + área de trabajo, a pantalla completa */

.sidebar {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    width: 260px;
    padding: 20px;
    color: var(--menu-texto);
    background-color: var(--menu-fondo);
    border-right: 1px solid var(--menu-linea);
}
.sidebar-title { margin-bottom: 35px; font-size: 22px; font-weight: 600; color: var(--blanco); text-align: center; }
/* Quién está conectado y con qué rol (debajo del título) */
.sidebar-rol { margin: -27px 0 27px; font-size: 13px; color: var(--menu-tenue); text-align: center; overflow-wrap: anywhere; }
/* Historial de acciones: etiqueta del rol de quien hizo la acción */
.historial-rol { display: inline-block; margin-left: 4px; padding: 2px 10px; border-radius: 12px; font-size: 12px; font-weight: 500; color: var(--blanco); background: var(--gris-boton); white-space: nowrap; }
.historial-rol-superadmin { background: var(--tinta-oscura); }
.historial-rol-admin { background: var(--azul); }
/* Registros: búsqueda sin revendedor (tuya, de tus clientes o del público) */
.reg-sin-rev { color: var(--tinta-tenue); }
/* Registros: dispositivo (equipo en negrita; sistema y navegador debajo) y crédito de la base de conexiones */
.reg-dispositivo b { color: var(--tinta-oscura); font-weight: 600; }
.reg-detalle { display: block; font-size: 12px; color: var(--tinta-tenue); }
.reg-credito { margin: 10px 0 0; font-size: 12px; color: var(--tinta-tenue); text-align: right; }
.reg-credito a { color: inherit; }

/* Ítems del menú: ícono + texto; el activo es una píldora azul */
.sidebar-nav a,
.sidebar-footer a {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px 15px;
    border-radius: 8px;
    color: var(--menu-tenue);
    text-decoration: none; transition: background-color 0.2s, color 0.2s;
}
.sidebar-nav a:hover, .sidebar-footer a:hover { color: var(--blanco); background-color: var(--menu-linea); }
.sidebar-nav a.active { font-weight: 600; color: var(--blanco); background-color: var(--azul); }
.sidebar-nav a.active svg, .sidebar-footer a.active svg { color: var(--blanco); }
.sidebar-nav a svg, .sidebar-footer a svg { flex-shrink: 0; color: var(--menu-tenue); transition: color 0.2s; }
.sidebar-nav a:hover svg, .sidebar-footer a:hover svg { color: var(--blanco); }
.sidebar-footer { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--menu-linea); }
.sidebar-footer a { margin-bottom: 5px; font-size: 14px; }

.main-content { flex-grow: 1; padding: 30px; background-color: var(--area-fondo); overflow-y: auto; }
.content-header { margin-bottom: 20px; } /* título y frase de cada sección */
.content-header h2 { margin: 0 0 5px; font-size: 28px; }
.content-header p { margin: 0; font-size: 16px; color: var(--tinta-3); }

/* ---------- Gestionar Correos: dos columnas de tarjetas y listas de cuentas ---------- */
.accounts-layout { display: grid; grid-template-columns: 1fr 1.5fr; align-items: flex-start; gap: 30px; }
.add-account-card, .list-accounts-card {
    padding: 25px;
    border-radius: 8px;
    background-color: var(--blanco);
    box-shadow: var(--sombra-tarjeta);
}
.config-card h3 { margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; font-size: 20px; border-bottom: 1px solid var(--linea); }
.account-list { max-height: 350px; padding-right: 10px; overflow-y: auto; }
.account-item {
    display: flex;
    justify-content: space-between; align-items: center;
    padding: 12px;
    border-radius: 6px;
    border-bottom: 1px solid #f0f0f0; transition: background-color 0.2s;
}
.account-item:last-child { border-bottom: none; } /* la última fila sin línea */
.account-item:hover { background-color: var(--gris-fila); }
.account-info { display: flex; gap: 10px; align-items: center; }
.account-actions { display: flex; align-items: center; gap: 5px; }
.provider-badge { padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 500; color: #495057; background-color: var(--linea-2); }
.account-email { font-weight: 500; color: var(--tinta); }
.empty-state { padding: 40px; color: #777; text-align: center; }
.empty-state p { margin-bottom: 5px; font-size: 18px; }

/* ---------- Tarjeta blanca del panel y listas de plataformas/asuntos ---------- */
.config-card {
    padding: 25px 30px;
    border-radius: 8px;
    background-color: var(--blanco);
    box-shadow: var(--sombra-tarjeta);
}
.config-card hr { margin: 20px 0; border: 0; border-top: 1px solid var(--linea); }

/* Botón de ícono para borrar (papelera roja, fondo rosado al pasar el mouse) */
.delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px;
    border: none;
    border-radius: 50%;
    color: var(--rojo);
    background: none;
    cursor: pointer;
}
.delete-btn:hover { background-color: #f2dede; } /* fondo rosado */

.category-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px;
    max-height: none;
    padding-right: 0;
    overflow-y: visible;
}
.category-block {
    display: flex;
    flex-direction: column;
    justify-content: space-between; margin-top: 0;
    padding: 15px;
    border: 1px solid var(--linea-3);
    border-radius: 6px;
}
.category-block + .category-block { margin-top: 0; }

.subject-list { margin: 0; padding: 0; list-style: none; }
.subject-list li { display: flex; align-items: center; justify-content: space-between; padding: 8px; border-radius: 4px; }
.subject-list li:nth-child(odd) { background-color: var(--gris-fila); }
.delete-btn-small { border: none; font-size: 16px; font-weight: bold; color: #aaa; background: none; cursor: pointer; }
.delete-btn-small:hover { color: var(--rojo); }
.add-subject-form { display: flex; gap: 10px; margin-top: 15px; }
.add-subject-form input { flex-grow: 1; } /* el campo ocupa lo que sobra */
.add-subject-form button { flex-shrink: 0; } /* el botón no se achica */

/* ---------- Ventana de confirmación (borrar, regenerar…) ---------- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.modal-overlay.visible { opacity: 1; display: flex; }
.modal-content {
    width: 90%;
    max-width: 400px;
    padding: 30px;
    border-radius: 8px;
    background-color: var(--blanco);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}
.modal-overlay.visible .modal-content { transform: scale(1); } /* entra creciendo */
.modal-content h3 { font-size: 22px; margin-top: 0; }
.modal-content p { margin: 15px 0; font-size: 16px; color: var(--tinta-2); }
.modal-buttons { display: flex; justify-content: center; gap: 15px; margin-top: 25px; }
.modal-buttons button { font-weight: 500; padding: 10px 20px; border-radius: 5px; }
.modal-buttons .btn-danger { background-color: var(--rojo); }
.modal-buttons .btn-danger:hover { background-color: #c9302c; } /* rojo más oscuro */
#modal-btn-cancel { background-color: var(--gris-boton); }
#modal-btn-cancel:hover { background-color: var(--gris-boton-hover); }

/* ---------- Dashboard: tarjetas con números ---------- */
.stats-layout { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.stat-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 25px;
    border-radius: 12px;
    background-color: var(--blanco);
    box-shadow: var(--sombra-suave); transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stat-card:hover { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); transform: translateY(-5px); }
.stat-icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    color: var(--blanco);
}
/* Un color por tarjeta, en orden */
.stat-card:nth-child(1) .stat-icon { background-color: var(--azul); }
.stat-card:nth-child(2) .stat-icon { background-color: var(--verde); }
.stat-card:nth-child(3) .stat-icon { background-color: var(--amarillo); }
.stat-card:nth-child(4) .stat-icon { background-color: #6f42c1; }
.stat-icon svg { width: 28px; height: 28px; }
.stat-info h3 { margin: 0 0 5px; font-size: 18px; color: var(--tinta); }
.stat-info .stat-number { margin: 0; font-size: 36px; font-weight: 600; color: #000; }
.stat-info p { margin: 0; font-size: 14px; color: var(--tinta-3); }

/* Frase de ayuda centrada debajo de un título */
.form-description { margin-bottom: 20px; font-size: 15px; color: var(--tinta-2); text-align: center; }

/* ---------- Página de códigos (cliente): fondo con imagen y tarjeta clara ---------- */
.index-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: #444;
    background-color: #f0f2f5; background-image: url('img/fondo.jpg'); /* cada página pone su propia imagen (imagen_sitio) */
    background-position: center; background-size: cover; background-repeat: no-repeat; background-attachment: fixed;
}

.viewer-container {
    flex-grow: 1;
    width: 100%;
    max-width: 900px;
    margin: 30px auto;
    padding: 0 20px;
    overflow-x: hidden;
}
.viewer-main { width: 100%; }

/* Tarjeta del buscador (sale con una animación al buscar) */
.search-card {
    width: 100%;
    margin-bottom: 30px;
    padding: 30px;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.9); box-shadow: var(--sombra-suave); transition: transform 0.4s ease, opacity 0.4s ease, box-shadow 0.4s ease;
}
.search-card.hidden { opacity: 0; pointer-events: none; transform: scale(0.95); }
.search-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); transform: translateY(-5px); }
.card-logo { margin-bottom: 20px; text-align: center; }
.card-logo img { max-width: 150px; height: auto; }
.search-card h2 { margin: 0 0 10px; font-size: 22px; font-weight: 600; text-align: center; }
.search-card .form-description { margin-bottom: 25px; font-size: 15px; color: var(--tinta-3); text-align: center; }

#search-form .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 25px; }
#search-form .form-group label { margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--tinta); }
#search-form select,
#search-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--borde-campo-2);
    border-radius: 6px;
    font-family: 'Poppins', sans-serif; font-size: 15px;
    background-color: var(--gris-claro); transition: border-color 0.2s, box-shadow 0.2s;
}
#search-form select:focus,
#search-form input[type="email"]:focus {
    border-color: var(--azul-foco);
    outline: none;
    box-shadow: 0 0 0 0.2rem var(--azul-anillo);
}

/* ---------- Botones principal y secundario (Poppins) ---------- */
.form-actions { display: flex; justify-content: center; gap: 15px; margin-top: 10px; }
.btn-primary,
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: none;
    border-radius: 6px;
    font-family: 'Poppins', sans-serif; font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.btn-primary { color: var(--blanco); background-color: var(--azul); }
.btn-primary:hover { background-color: var(--azul-hover); transform: translateY(-1px); }
.btn-primary:active, .btn-secondary:active { transform: translateY(0) scale(0.98); }
.btn-secondary { margin-left: 10px; color: var(--blanco); background-color: var(--gris-boton); }
.btn-secondary:hover { background-color: var(--gris-boton-hover); }

/* Recuadro "Buscando…" con la ruedita */
#loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 15px;
    width: 100%;
    padding: 40px;
    border-radius: 12px; background-color: rgba(255, 255, 255, 0.9);
}
#loader .spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #f3f3f3; border-top: 4px solid var(--azul);
    border-radius: 50%; animation: spin 1s linear infinite;
}
#loader p { margin: 0; font-size: 16px; color: var(--tinta-2); }

/* Correo encontrado: tarjeta, cuerpo y marco con el correo */
.email-card {
    width: 100%;
    margin-top: 30px;
    margin-bottom: 30px;
    padding: 30px;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.9); box-shadow: var(--sombra-suave);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.email-card:hover { box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1); transform: translateY(-5px); }
.email-body { margin-top: 20px; padding: 20px; border: 1px solid var(--linea-2); border-radius: 8px; background-color: var(--gris-claro); }
.email-body h4 { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.email-iframe {
    width: 100%;
    height: 600px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--borde-campo-2);
    border-radius: 8px;
    overflow-x: auto;
}

/* Error de la búsqueda */
.error-card {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--rojo-borde);
    border-radius: 8px;
    color: var(--rojo-texto); background-color: rgba(248, 215, 218, 0.9);
}

/* Código destacado arriba del correo */
.codigo-card {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px solid #007bff;
    border-radius: 12px;
    padding: 24px 20px;
    margin-top: 30px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

.codigo-titulo {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 500;
    color: #555;
}

.codigo-numero {
    font-size: 44px;
    font-weight: 700;
    letter-spacing: 8px;
    color: #1e293b;
    font-variant-numeric: tabular-nums;
    margin: 4px 0 16px 0;
    overflow-wrap: anywhere;
}

.codigo-copiar {
    padding: 12px 28px;
    border-radius: 25px;
    font-weight: 500;
}

.codigo-nota {
    margin: 12px 0 0 0;
    font-size: 13px;
    color: #6c757d;
}

/* Resultado con otros correos recientes: columna a la izquierda que acompaña al bajar */
body.resultado-ancho .viewer-container {
    max-width: 1150px;
    overflow-x: clip; /* 'hidden' impediría que la columna quede fija al bajar */
}

.resultado-con-correos {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-top: 30px;
}

/* Las dos columnas empiezan a la misma altura: la primera caja de la derecha no suma su propio margen */
.resultado-con-correos .resultado-principal > :first-child {
    margin-top: 0;
}

.resultado-con-correos .resultado-principal {
    flex: 1 1 auto;
    min-width: 0;
}

.columna-correos {
    flex: 0 0 210px;
    position: sticky;
    top: 16px;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.columna-correos-titulo {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.correo-boton {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    margin: 0;
    background: none;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #334155;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.correo-boton:hover {
    background-color: #f1f5f9;
}

.correo-boton.activo {
    background-color: #e7f1ff;
    border-color: #007bff;
}

.correo-icono {
    font-size: 22px;
    line-height: 1;
    color: #007bff;
}

.correo-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.correo-etiqueta {
    font-size: 14px;
    font-weight: 600;
}

.correo-detalle {
    font-size: 12px;
    color: #64748b;
}

.correo-visto {
    margin: 0 0 -8px 0;
    font-size: 13px;
    color: #64748b;
}

/* Celular: columna angosta con el ícono arriba y "Ver correo" debajo */
@media (max-width: 700px) {
    .resultado-con-correos {
        gap: 8px;
    }
    .columna-correos {
        flex: 0 0 62px;
        top: 8px;
        padding: 6px 4px;
        gap: 4px;
    }
    .columna-correos-titulo,
    .correo-detalle {
        display: none;
    }
    .correo-boton {
        flex-direction: column;
        gap: 2px;
        padding: 6px 2px;
        text-align: center;
    }
    .correo-etiqueta {
        font-size: 11px;
        font-weight: 500;
        line-height: 1.2;
    }
    /* Menos relleno alrededor del correo para que conserve casi todo el ancho */
    .resultado-con-correos .email-card {
        padding: 10px;
    }
    .resultado-con-correos .email-body {
        padding: 6px;
    }
}

/* Panel: clientes y sus códigos de acceso */
.cliente-codigo-caja {
    margin-top: 12px;
    padding: 14px 18px;
    border: 2px solid #007bff;
    border-radius: 10px;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.cliente-codigo-grande {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: 4px;
    font-family: monospace;
    color: #1e293b;
}

.cliente-codigo-chico {
    margin-left: 8px;
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 1px;
}

.cliente-vencido {
    color: #b91c1c;
    font-weight: 600;
}

.cliente-copiar-solo {
    font-size: 13px;
}

/* Fechas de clientes: el panel oculta el calendario en todas las fechas (filtro de Registros); aquí se muestra */
.config-card input[type="date"].cliente-fecha {
    padding-right: 10px;
}

.config-card input[type="date"].cliente-fecha::-webkit-calendar-picker-indicator {
    display: block;
    -webkit-appearance: auto;
    cursor: pointer;
}

/* "Agregar accesos" de a varias filas */
.acceso-fila {
    position: relative;
    display: grid;
    grid-template-columns: minmax(220px, 1.2fr) 2fr minmax(190px, 1fr);
    gap: 14px;
    padding: 14px 40px 14px 14px;
    margin-bottom: 10px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fafbfc;
}

.acceso-fila label {
    font-weight: 500;
}

.acceso-fila select,
.acceso-fila input[type="text"],
.acceso-fila input[type="date"] {
    width: 100%;
    margin: 4px 0 0 0;
}

.acceso-plataforma {
    display: inline-block;
    margin: 4px 12px 4px 0;
    font-weight: normal !important;
}

.acceso-rapidos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.acceso-rapidos button {
    padding: 4px 10px;
    font-size: 13px;
}

.acceso-quitar {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    color: #b91c1c;
    font-size: 22px;
    line-height: 1;
    padding: 2px 8px;
}

.acceso-quitar:hover {
    background-color: #fee2e2;
}

.acceso-botones {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Filtros de la lista de accesos (cuenta, plataforma, estado) */
.accesos-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
}

.accesos-filtros input,
.accesos-filtros select {
    margin: 0;
    flex: 1 1 180px;
    max-width: 280px;
}

.accesos-contador {
    font-size: 13px;
    color: #6c757d;
    margin-left: auto;
}

.acceso-quitar-bloque:not(:disabled) {
    background-color: #b91c1c;
    border-color: #b91c1c;
    color: #ffffff;
}

.acceso-renovar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 12px;
}

@media (max-width: 800px) {
    .acceso-fila { grid-template-columns: 1fr; } /* una columna */
}

/* Aviso "modalidad desactivada" en Clientes: ventana centrada + franja fija */
.cliente-aviso-franja {
    background-color: #fff3cd;
    border: 1px solid #f2d36b;
    color: #7a5b00;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-weight: 500;
}

.cliente-aviso-franja a {
    margin-left: 8px;
    font-weight: 600;
}

.cliente-aviso-fondo {
    position: fixed;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 2000;
}

.cliente-aviso-ventana {
    background-color: #ffffff;
    border-radius: 14px;
    max-width: 520px;
    width: 100%;
    padding: 28px 26px;
    text-align: center;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    border-top: 6px solid #f0ad4e;
}

.cliente-aviso-ventana h3 {
    margin: 0 0 12px 0;
    color: #1e293b;
}

.cliente-aviso-ventana p {
    margin: 0 0 22px 0;
    font-size: 16px;
    line-height: 1.5;
    color: #333;
}

.cliente-aviso-botones {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
}

.cliente-aviso-botones a {
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 6px;
}

/* Página pública: vencimiento del acceso del cliente, junto al código */
.vence-aviso {
    margin: 12px 0 0 0;
    padding: 10px 14px;
    border-radius: 8px;
    text-align: center;
    font-size: 15px;
    background-color: rgba(255, 255, 255, 0.92);
    color: #334155;
    border: 1px solid #e0e0e0;
}

.vence-alerta {
    background-color: #fff4e5;
    color: #9a4d00;
    border: 1px solid #f5b971;
    font-weight: 600;
}

/* Página pública: casilla del código de cliente */
.codigo-cliente-input {
    text-align: center;
    font-size: 24px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-family: monospace;
}

.clientes-historial-busqueda {
    background-color: #fff8e1;
    border: 1px solid #f2d36b;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 14px;
    line-height: 1.8;
}

/* "Mis búsquedas" en el portal del revendedor */
.historial-card {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    padding: 20px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.historial-cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; gap: 10px;
    margin-bottom: 12px;
}

.historial-cabecera h3 {
    margin: 0;
    font-size: 18px;
    color: #1e293b;
}

.historial-cabecera input {
    max-width: 260px;
    margin: 0;
}

.historial-tabla-contenedor {
    overflow-x: auto;
}

.historial-tabla {
    width: 100%;
    border-collapse: collapse; font-size: 14px;
}

.historial-tabla th,
.historial-tabla td {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 1px solid var(--linea-2);
    white-space: nowrap;
}

.historial-tabla th {
    color: #6c757d;
    font-weight: 500;
}

.historial-tabla td.historial-cuenta {
    white-space: normal;
    overflow-wrap: anywhere;
}

.historial-ok { color: #15803d; }
.historial-no { color: #6c757d; }

.historial-paginas {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 14px;
    font-size: 14px;
}

.historial-paginas button:disabled {
    opacity: 0.5;
    cursor: default;
}

/* "Esperando código": la búsqueda se repite sola mientras se muestra este recuadro */
.espera-card {
    width: 100%;
    background-color: rgba(255, 255, 255, 0.95);
    border: 2px dashed #007bff;
    border-radius: 12px;
    padding: 24px 20px;
    margin-top: 30px;
    text-align: center;
}

.espera-titulo {
    margin: 0 0 10px 0;
    font-size: 19px;
    font-weight: 600;
    color: #1e293b;
}

.espera-texto {
    margin: 0 0 8px 0;
    font-size: 15px;
    color: #444;
}

.espera-aviso {
    margin: 0 0 14px 0;
    font-size: 14px;
    font-weight: 500;
    color: #b45309;
}

.espera-estado {
    margin: 0 0 16px 0;
    font-size: 13px;
    color: #6c757d;
    font-variant-numeric: tabular-nums;
}

.espera-cancelar {
    background-color: var(--gris-boton);
    padding: 10px 22px;
    border-radius: 25px;
}

.espera-cancelar:hover {
    background-color: var(--gris-boton-hover);
}

@media (max-width: 480px) {
    .codigo-numero {
        font-size: 34px;
        letter-spacing: 5px;
    }
}

/* Franja al pie de la página de códigos */
.promo-footer {
    padding: 20px;
    color: #ecf0f1;
    background-color: rgba(44, 62, 80, 0.95); box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.2);
    text-align: center;
}
.promo-footer p { margin: 0; font-size: 17px; font-weight: 400; }
.promo-footer a {
    display: inline-block;
    margin-left: 15px;
    padding: 8px 18px;
    border-radius: 25px;
    font-weight: 500;
    color: var(--blanco);
    background-color: #25D366; text-decoration: none; transition: background-color 0.2s, transform 0.2s;
}
.promo-footer a:hover { background-color: #1DAE54; transform: scale(1.05); }

/* Aparición suave (resultados, pestañas) */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.fade-in { animation: fadeIn 0.5s ease-out forwards; }

/* ---------- Login, recuperar y cerrar sesión: tarjeta centrada ---------- */
.login-container { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; }
.login-card {
    width: 100%;
    max-width: 420px;
    padding: 40px;
    border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px;
    background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); text-align: center;
}
.login-card h2 { margin-top: 0; margin-bottom: 25px; font-size: 24px; font-weight: 600; }
.login-card .form-group { margin-bottom: 20px; text-align: left; }
.login-card .form-group label { margin-bottom: 8px; font-size: 14px; font-weight: 500; color: var(--tinta); }
.login-card input {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--borde-campo-2);
    border-radius: 6px;
    font-family: 'Poppins', sans-serif; font-size: 15px;
    background-color: var(--gris-claro); transition: border-color 0.2s, box-shadow 0.2s;
}
.login-card input:focus { border-color: var(--azul-foco); outline: none; box-shadow: 0 0 0 0.2rem var(--azul-anillo); }
.login-card .btn-primary { width: 100%; margin-top: 10px; padding: 12px; }
.login-card .error { margin-bottom: 20px; text-align: center; }

/* ---------- Configuración → Diseño: vistas previas de las imágenes ---------- */
.image-preview { margin-top: 15px; padding: 15px; border: 1px solid var(--linea-2); border-radius: 6px; background-color: var(--gris-claro); }
.image-preview p { margin: 0 0 10px; font-size: 14px; font-weight: 500; }
.image-preview img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
.design-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: flex-start; }
.design-layout .config-card { margin-bottom: 0; }
.design-layout .image-preview img { max-width: 200px; margin-top: 10px; padding: 5px; border: 1px solid #ddd; border-radius: 4px; }

/* ---------- Registros: tabla de búsquedas ---------- */
.logs-table-container { border-radius: 8px; background-color: var(--blanco); box-shadow: var(--sombra-tarjeta); overflow: hidden; }
.logs-table { width: 100%; border-collapse: collapse; }
.logs-table th, .logs-table td { padding: 15px; border-bottom: 1px solid var(--linea-3); text-align: left; }
.logs-table thead { background-color: #f7f7f7; }
.logs-table th { font-size: 14px; font-weight: 600; color: var(--tinta); }
.logs-table tbody tr:hover { background-color: var(--gris-fila); }
/* Resultado de cada búsqueda: píldora verde o roja */
.status-success, .status-error { padding: 5px 10px; border-radius: 15px; font-size: 12px; font-weight: 500; }
.status-success { color: var(--verde-texto); background-color: var(--verde-aviso); }
.status-error { color: var(--rojo-texto); background-color: var(--rojo-aviso); }

/* ---------- Plataformas: activa / inactiva ---------- */
.category-block.is-inactive { opacity: 0.7; background-color: var(--gris-fila); }
.category-title { display: flex; align-items: center; gap: 12px; }
.category-actions { display: flex; align-items: center; }

/* Insignia de estado: verde "Activa", gris "Inactiva" */
.status-badge { padding: 4px 8px; border-radius: 12px; font-size: 12px; font-weight: 500; color: var(--blanco); }
.is-active .status-badge { background-color: var(--verde); }
.is-inactive .status-badge { background-color: var(--gris-boton); }

/* Botón Activar / Desactivar (amarillo si está activa, verde si no) */
.btn-toggle-status { padding: 6px 12px; border: 1px solid; border-radius: 5px; font-size: 13px; font-weight: 500; cursor: pointer; }
.is-active .btn-toggle-status { color: #212529; background-color: var(--amarillo); border-color: var(--amarillo); }
.is-active .btn-toggle-status:hover { background-color: #e0a800; }
.is-inactive .btn-toggle-status { color: var(--blanco); background-color: var(--verde); border-color: var(--verde); }
.is-inactive .btn-toggle-status:hover { background-color: var(--verde-oscuro); }

/* Editar el nombre de una plataforma */
.edit-category-form { display: flex; align-items: center; gap: 5px; }
.edit-category-input { padding: 5px 8px; border: 1px solid var(--borde-campo); border-radius: 4px; font-size: 16px; }
.btn-save-edit { padding: 6px 12px; border-radius: 5px; font-size: 13px; font-weight: 500; color: var(--blanco); background-color: var(--verde); }
.btn-save-edit:hover { background-color: var(--verde-oscuro); }
.btn-edit-category,
.btn-cancel-edit {
    margin-right: 8px;
    padding: 6px 12px;
    border: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    color: var(--blanco);
    background-color: var(--azul);
    cursor: pointer;
}
.btn-edit-category:hover, .btn-cancel-edit:hover { background-color: var(--azul-oscuro); }
.btn-cancel-edit { background-color: var(--gris-boton); }
.btn-cancel-edit:hover { background-color: var(--gris-boton-hover); }

/* ---------- Configuración → SEO: fila con interruptor ---------- */
.form-group-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between; padding: 20px;
    border: 1px solid var(--linea-2);
    border-radius: 8px;
    background-color: var(--gris-claro);
}
.form-group-toggle .toggle-label { flex-grow: 1; margin-bottom: 0; font-weight: 600; color: #343a40; }
.form-group-toggle small { flex-basis: 100%; margin-top: 10px; font-size: 13px; color: var(--tinta-tenue); }

/* Interruptor (casilla escondida + riel + perilla) */
.switch { position: relative; display: inline-block; width: 56px; height: 30px; }
.switch input { width: 0; height: 0; opacity: 0; }
.slider {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: var(--borde-campo);
    cursor: pointer;
    transition: .4s;
}
.slider:before {
    content: "";
    position: absolute;
    bottom: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
    background-color: var(--blanco);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    transition: .4s;
}
input:checked + .slider { background-color: var(--verde); }
input:focus + .slider { box-shadow: 0 0 1px var(--verde); }
input:checked + .slider:before { transform: translateX(26px); }
.slider.round { border-radius: 34px; }
.slider.round:before { border-radius: 50%; }

#meta_description { min-height: 120px; font-family: inherit; font-size: 14px; resize: vertical; }

/* Ayuda chica debajo de un campo */
.form-group small { display: block; margin-top: 8px; font-size: 13px; color: var(--tinta-tenue); }

/* SEO más angosto y centrado */
.view-seo .config-card, .view-seo .form-actions { max-width: 800px; margin-right: auto; margin-left: auto; }
.view-seo .form-actions { padding-right: 0; }

/* ---------- Pestañas de Configuración ---------- */
.tabs-container { width: 100%; }
.tab-buttons { display: flex; margin-bottom: 20px; border-bottom: 2px solid #dee2e6; }
.tab-button {
    margin-bottom: -2px; /* la línea de la pestaña tapa la línea de la fila */
    padding: 12px 20px;
    border: none;
    border-bottom: 2px solid transparent; font-size: 16px;
    font-weight: 500;
    color: #495057;
    background-color: transparent; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
/* (el fondo va explícito: el botón general se pone azul oscuro al pasar el mouse) */
.tab-button:hover { color: var(--azul-oscuro); background-color: #eef4ff; }
.tab-button.active, .tab-button.active:hover { color: var(--azul); background-color: transparent; border-color: var(--azul); }
.tab-button:focus-visible { outline: 3px solid var(--azul-foco); outline-offset: -3px; }

/* Barra "Guardar cambios" fija abajo mientras se recorre una pestaña larga */
.barra-guardar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 10px 14px;
    margin-top: 20px;
    padding: 12px 18px;
    border-top: 1px solid #dbe3ee;
    border-radius: 10px 10px 0 0;
    background: var(--blanco);
    box-shadow: 0 -6px 18px rgba(15, 23, 42, .08);
}
.barra-guardar small { margin-right: auto; color: #64748b; }
.config-intro { margin: 20px 0 0; text-align: left; }

/* Solo se ve la pestaña elegida */
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeIn 0.5s; }

/* Cuenta o correo desactivado: más claro y tachado */
.account-item.is-inactive { opacity: 0.6; background-color: var(--gris-claro); }
.account-item.is-inactive .account-email { text-decoration: line-through; }

/* Botón ☰ que abre el menú en celular (oculto en computadora) */
.sidebar-toggle-btn {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1010;
    display: none;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid #ddd;
    border-radius: 50%;
    color: var(--tinta);
    background-color: rgba(255, 255, 255, 0.9); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: pointer; transition: background-color 0.2s;
}
.sidebar-toggle-btn:hover { background-color: var(--blanco); }

/* ---------- Celular y tablet (hasta 768 px) ---------- */
@media screen and (max-width: 768px) {
    /* Página de códigos */
    .viewer-container { margin: 15px auto; padding: 0 15px; }
    .search-card { padding: 20px; }
    #search-form .form-row { grid-template-columns: 1fr; gap: 20px; }
    .form-actions { flex-direction: column; }
    .form-actions button { width: 100%; margin-left: 0; }
    .promo-footer p { font-size: 16px; }
    .promo-footer a { display: block; margin-top: 15px; margin-left: 0; }

    /* Panel: el menú se esconde a la izquierda y lo abre el botón ☰ */
    .sidebar-toggle-btn { display: flex; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1000;
        height: 100%;
        border-right: 1px solid var(--menu-linea); transform: translateX(-100%); transition: transform 0.3s ease-in-out;
    }
    .main-layout.sidebar-open .sidebar { box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); transform: translateX(0); }
    .main-content { width: 100%; padding: 15px; padding-top: 60px; /* lugar para el botón ☰ */ }

    /* Las grillas pasan a una sola columna */
    .design-layout, .stats-layout, .filter-grid, .category-list { grid-template-columns: 1fr; }
    .accounts-layout { display: block; }
    .add-account-card { margin-bottom: 25px; }

    /* Filas de cuentas: datos arriba, botones abajo */
    .account-item { flex-direction: column; align-items: flex-start; gap: 10px; }
    .account-actions, .category-actions { justify-content: flex-start; width: 100%; margin-top: 10px; }
    .config-card { padding: 20px; }
    .filter-actions { flex-direction: column; gap: 15px; }
    .filter-actions .btn-secondary { margin-left: 0; }

    /* Pestañas y tabla se deslizan de costado */
    .tab-buttons { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .logs-table-container { overflow-x: auto; }
    .logs-table { min-width: 600px; }
}

/* Portal del revendedor: "Mis clientes" */
.portal-enlaces {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
}

.rc-card {
    margin-top: 0;
    margin-bottom: 20px;
}

.rc-card h3 {
    margin-top: 0;
    font-size: 18px;
    color: #1e293b;
}

.rc-buscar input {
    max-width: 280px;
    margin: 0;
}

.rc-volver a {
    color: #ffffff; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

.rc-plataformas small {
    color: #64748b;
}

/* Panel: aviso cuando una cuenta IMAP no funciona (franja) y estado de cada cuenta (Dashboard) */
.imap-falla-franja {
    background-color: #fdecea;
    border: 1px solid #f5c2c0;
    color: #8a1c14;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 18px;
    font-weight: 500;
}

.imap-falla-franja a {
    margin-left: 8px;
    font-weight: 600;
    color: #8a1c14;
}

.imap-estado-lista {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.imap-estado {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid var(--linea-2);
}

.imap-estado-ok {
    background-color: #f0fbf3;
    border-color: #c8ebd2;
}

.imap-estado-falla {
    background-color: #fdecea;
    border-color: #f5c2c0;
}

.imap-estado-inactiva {
    opacity: 0.7;
}

.imap-estado-icono {
    font-size: 18px;
    line-height: 1.3;
}

.imap-estado-texto {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
    overflow-wrap: anywhere;
}

.imap-estado-error {
    color: #8a1c14;
}

/* =====================================================================
   Correcciones visuales (revisión de pantallas, 2026-10-10)
   ===================================================================== */

/* (1) Separación pareja entre cajas apiladas del panel (no en las grillas de dos columnas) */
.main-content .config-card ~ .config-card,
.main-content .accounts-layout ~ .config-card {
    margin-top: 25px;
}
.main-content .accounts-layout .config-card,
.main-content .design-layout .config-card {
    margin-top: 0;
}

/* (2) Etiqueta de estado legible: verde = activo; gris = inactivo o suspendido */
.status-badge {
    background-color: var(--verde);
}
.is-inactive .status-badge,
.status-badge.status-off {
    background-color: var(--gris-boton);
}

/* (3) Dentro de las cajas del panel y del portal, las ayudas van alineadas a la izquierda como el resto */
.config-card .form-description,
.rc-card .form-description {
    text-align: left;
}

/* (4) Dashboard: color del ícono de la 5ª tarjeta ("Consultas") */
.stat-card:nth-child(5) .stat-icon { background-color: #17a2b8; } /* celeste */

/* (5) Plataformas: botones de cada tarjeta dentro de su borde */
.category-header {
    flex-wrap: wrap;
    gap: 8px;
}
.category-title {
    gap: 8px;
    min-width: 0;
}
.category-actions {
    flex-wrap: wrap;
    gap: 6px;
}
.category-actions form {
    margin-right: 0 !important;
}
.category-actions .btn-edit-category {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
}

/* (6) "Probar Conexión" del mismo tamaño que los demás botones de la fila */
.account-actions .btn-test-connection {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 5px;
}

/* (8) Registros: la hora no se parte en dos renglones */
.logs-table time.fecha-local {
    white-space: nowrap;
}

/* (10) Texto de los botones principales siempre centrado (también a ancho completo en celular) */
.btn-primary,
.btn-secondary {
    justify-content: center;
}

/* (11) Registros: si la tabla no entra, se desliza de costado (antes se cortaba) */
.logs-table-container {
    overflow-x: auto;
}

/* (7) y (9) Celular: la información de cada fila baja de renglón en vez de salirse por la derecha */
@media screen and (max-width: 768px) {
    .account-info {
        flex-wrap: wrap;
        row-gap: 4px;
        column-gap: 8px;
        width: 100%;
        min-width: 0;
    }
    .account-info > * {
        max-width: 100%;
    }
    .account-info small,
    .account-info a {
        margin-left: 0 !important;
    }
    .account-email {
        overflow-wrap: anywhere;
    }
    .cliente-codigo-chico {
        white-space: nowrap;
    }
    .account-actions {
        flex-wrap: wrap;
        gap: 6px;
    }
    .rc-buscar {
        flex: 1 1 100%;
    }
    .rc-buscar input {
        max-width: none;
        width: 100%;
    }
}

/* =====================================================================
   Reordenamiento de pantallas (2026-10-10): lo diario arriba, lo de una sola vez desplegable
   ===================================================================== */

/* Botón que despliega un formulario de alta ("+ Nuevo cliente", "+ Agregar cuenta IMAP", "Filtros") */
.alta-desplegable,
.filtros-desplegable {
    margin-bottom: 15px;
}
.alta-desplegable > summary.btn-alta,
.filtros-desplegable > summary.btn-alta {
    display: inline-flex;
    align-items: center;
    list-style: none;
    cursor: pointer;
    background-color: var(--azul);
    color: #fff;
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    user-select: none;
}
.alta-desplegable > summary::-webkit-details-marker,
.filtros-desplegable > summary::-webkit-details-marker {
    display: none;
}
.alta-desplegable[open] > summary.btn-alta {
    background-color: var(--gris-boton);
}
.alta-formulario {
    margin-top: 14px;
    padding: 16px;
    background-color: var(--gris-claro);
    border: 1px solid var(--linea-2);
    border-radius: 8px;
    text-align: left;
}

/* Gestionar Correos: las filas de cuentas IMAP en la columna izquierda bajan de renglón si no entran */
.accounts-layout .account-item {
    flex-wrap: wrap;
    gap: 8px;
}

/* Registros: filtros compactos (en computadora el botón "Filtros" no hace falta) */
.filtros-desplegable .filter-form {
    padding: 14px 16px;
}
.filtros-desplegable .filter-grid {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}
.filtros-desplegable .filter-actions {
    margin-top: 12px;
}
@media (min-width: 769px) {
    .filtros-desplegable > summary.btn-alta {
        display: none;
    }
}
@media screen and (max-width: 768px) {
    .filtros-desplegable[open] > summary.btn-alta {
        margin-bottom: 12px;
    }
}

/* Dashboard: contadores más compactos (el estado de las cuentas IMAP va primero) */
.stats-layout {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
}
.stat-card {
    padding: 16px 18px;
    gap: 14px;
}
.stat-icon {
    width: 44px;
    height: 44px;
}
.stat-icon svg {
    width: 22px;
    height: 22px;
}
.stat-info h3 {
    font-size: 15px;
}
.stat-info .stat-number { /* */
    font-size: 28px;
}
.stat-info p {
    font-size: 12px;
}

/* Plataformas: "Nueva Plataforma" en una sola fila */
.alta-linea {
    display: flex;
    gap: 10px;
    align-items: center;
}
.alta-linea input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
}
.alta-linea button {
    flex: 0 0 auto;
}

/* Dashboard: "Por vencer" */
.por-vencer-rango {
    font-size: 13px;
    font-weight: 400;
    color: #64748b;
    margin-left: 6px;
}
.por-vencer-grupo {
    margin: 14px 0 6px 0;
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}
.por-vencer-grupo.pv-urgente {
    color: #b45309;
}
.por-vencer-grupo.pv-vencido {
    color: #6c757d;
}
.por-vencer-lista {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.por-vencer-fila {
    display: flex;
    justify-content: space-between; align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1px solid var(--linea-2);
    border-radius: 8px;
}
.por-vencer-fila.pv-urgente {
    background-color: #fff8e6;
    border-color: #f6d58a;
}
.por-vencer-fila.pv-vencido {
    background-color: var(--gris-claro);
    opacity: 0.85;
}
.por-vencer-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    min-width: 0;
}
.por-vencer-info small {
    flex-basis: 100%;
    color: #475569;
    overflow-wrap: anywhere;
}
.por-vencer-fila .btn-toggle-status {
    flex: 0 0 auto;
    text-decoration: none;
}
@media screen and (max-width: 768px) {
    .por-vencer-fila {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===== Página del cliente (index.php): tarjeta clara, tour guiado con "gota" y franja de cookies =====
 * Hallmark · redesign · macrostructure: Workbench (tool card) · tone: utilitarian
 * theme: custom (vibe: "claro, cálido, a prueba de dudas" · paper oklch(98% 0.006 255) · accent oklch(55% 0.19 258) · Poppins)
 * Solo aplica con body.pagina-cliente: el portal del revendedor, el login y el panel no cambian.
 * La tarjeta es neutra para combinar con el logo y el fondo que cada dueño carga desde el panel.
 */
.pagina-cliente {
    --pc-paper:       oklch(98% 0.006 255);
    --pc-paper-2:     oklch(95% 0.01 255);
    --pc-ink:         oklch(24% 0.02 260);
    --pc-ink-2:       oklch(45% 0.02 260);
    --pc-rule:        oklch(88% 0.012 255);
    --pc-accent:      oklch(55% 0.19 258);
    --pc-accent-2:    oklch(48% 0.19 258);
    --pc-accent-ink:  oklch(99% 0.005 258);
    --pc-focus:       oklch(62% 0.2 258);
    --pc-gota-suave:  oklch(62% 0.2 258 / 0.35);
    --pc-scrim:       oklch(18% 0.02 260 / 0.6);
    --pc-sombra:      oklch(18% 0.02 260 / 0.35);
    --pc-ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
    --pc-radio:       12px;
    overflow-x: clip;
}
html:has(> body.pagina-cliente) { overflow-x: clip; }

.pagina-cliente .viewer-container { margin-top: 24px; }
.pagina-cliente .search-card {
    position: relative;
    max-width: 30rem;
    margin: 0 auto 30px;
    background-color: var(--pc-paper);
    color: var(--pc-ink);
    border-radius: 18px;
    padding: 28px 24px;
    box-shadow: 0 10px 40px var(--pc-sombra);
}
/* Sin "salto" al pasar el mouse: además deja al tour resaltar los campos por encima del velo */
.pagina-cliente .search-card:hover { transform: none; box-shadow: 0 10px 40px var(--pc-sombra); }
.pagina-cliente .card-logo { margin-bottom: 14px; }
.pagina-cliente .card-logo img { max-width: 160px; max-height: 96px; width: auto; object-fit: contain; }
.pagina-cliente .search-card h2 { font-size: clamp(1.45rem, 1.2rem + 1.2vw, 1.8rem); font-weight: 700; color: var(--pc-ink); margin-bottom: 8px; overflow-wrap: anywhere; }
.pagina-cliente .search-card .form-description { color: var(--pc-ink-2); font-size: 1.0625rem; line-height: 1.45; margin-bottom: 22px; }
.pagina-cliente .search-card .form-description strong { color: var(--pc-ink); font-weight: 600; }

/* Salir (cliente con código) y "?" (ver la guía otra vez) */
.pagina-cliente .tarjeta-acciones { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.pagina-cliente .tarjeta-acciones > * { pointer-events: auto; }
.pagina-cliente .tarjeta-salir { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px 0 10px; border: 2px solid var(--pc-rule); border-radius: 999px; background: var(--pc-paper); color: var(--pc-ink); font-size: 0.9375rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pagina-cliente .tarjeta-salir svg { flex: none; }
.pagina-cliente .aviso-panel { max-width: 30rem; margin: 0 auto 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 14px; border-radius: 12px; background: oklch(96% 0.06 90); color: oklch(30% 0.06 70); border: 1px solid oklch(85% 0.1 85); font-size: 0.9375rem; line-height: 1.35; }
.pagina-cliente .aviso-panel span { flex: 1 1 12rem; }
.pagina-cliente .aviso-panel-btn { flex: none; padding: 6px 12px; border-radius: 999px; background: oklch(30% 0.06 70); color: oklch(98% 0.02 90); font-weight: 600; text-decoration: none; white-space: nowrap; }
.pagina-cliente .aviso-panel-btn:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
.pagina-cliente .tarjeta-salir:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
.pagina-cliente .ver-guia { margin-left: auto; width: 36px; height: 36px; border-radius: 50%; border: 2px solid var(--pc-rule); background: var(--pc-paper); color: var(--pc-ink-2); font-family: inherit; font-weight: 700; font-size: 1.0625rem; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pagina-cliente .ver-guia:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) {
    .pagina-cliente .tarjeta-salir:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
    .pagina-cliente .ver-guia:hover { border-color: var(--pc-accent); color: var(--pc-accent); }
}

/* Campos grandes, uno debajo del otro */
.pagina-cliente #search-form .form-row { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 20px; }
.pagina-cliente .search-card label,
.pagina-cliente #search-form .form-group label { display: block; font-weight: 600; font-size: 1.0625rem; color: var(--pc-ink); margin-bottom: 8px; }
.pagina-cliente #search-form select,
.pagina-cliente #search-form input[type="email"],
.pagina-cliente .codigo-cliente-input {
    width: 100%; min-height: 54px; padding: 0.85rem 1rem; font-family: inherit; font-size: 1.0625rem;
    color: var(--pc-ink); background-color: var(--pc-paper); border: 2px solid var(--pc-rule); border-radius: var(--pc-radio);
}
.pagina-cliente #search-form input::placeholder,
.pagina-cliente .codigo-cliente-input::placeholder { color: var(--pc-ink-2); opacity: 0.8; }
.pagina-cliente #search-form select:focus-visible,
.pagina-cliente #search-form input[type="email"]:focus-visible,
.pagina-cliente .codigo-cliente-input:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 1px; border-color: var(--pc-accent); box-shadow: none; }

/* Botón principal a todo el ancho */
.pagina-cliente .search-card .form-actions { margin-top: 4px; }
.pagina-cliente .search-card .btn-primary {
    width: 100%; min-height: 56px; justify-content: center; border-radius: var(--pc-radio);
    background-color: var(--pc-accent); color: var(--pc-accent-ink); font-size: 1.25rem; font-weight: 600; white-space: nowrap;
    transition: background-color 160ms var(--pc-ease-out);
}
.pagina-cliente .search-card .btn-primary svg { width: 20px; height: 20px; }
.pagina-cliente .search-card .btn-primary:hover { transform: none; }
@media (hover: hover) and (pointer: fine) { .pagina-cliente .search-card .btn-primary:hover { background-color: var(--pc-accent-2); } }
.pagina-cliente .search-card .btn-primary:active { transform: translateY(1px); }
.pagina-cliente .search-card .btn-primary:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 3px; }
.pagina-cliente .search-card .btn-primary:disabled { opacity: 0.6; cursor: wait; }

/* ===== Tour guiado ===== */
.tour-velo { position: fixed; inset: 0; background: var(--pc-scrim, rgba(20, 24, 33, 0.6)); z-index: 2000; }
.tour-foco { position: relative; z-index: 2001; box-shadow: 0 0 0 4px var(--pc-focus, #3b82f6), 0 0 0 10px var(--pc-gota-suave, rgba(59, 130, 246, 0.35)) !important; }
.tour-foco:not(button) { background-color: var(--pc-paper, #fff) !important; }
.tour-gota { position: fixed; z-index: 2003; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; background: var(--pc-focus, #3b82f6); pointer-events: none; }
.tour-gota::before, .tour-gota::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 3px solid var(--pc-focus, #3b82f6); animation: tour-gota 1.6s var(--pc-ease-out, ease-out) infinite; }
.tour-gota::after { animation-delay: 0.8s; }
@keyframes tour-gota { from { transform: scale(1); opacity: 0.9; } to { transform: scale(3.2); opacity: 0; } }
.tour-oculto { display: none !important; }
.tour-globo {
    position: fixed; z-index: 2004; width: min(20rem, calc(100vw - 2rem)); box-sizing: border-box;
    background: var(--pc-paper, #fff); color: var(--pc-ink, #1e293b); border-radius: 14px; padding: 16px;
    box-shadow: 0 12px 32px var(--pc-sombra, rgba(0, 0, 0, 0.3)); font-family: 'Poppins', sans-serif;
}
.tour-globo::before { content: ""; position: absolute; left: var(--flecha, 50%); width: 16px; height: 16px; background: inherit; transform: translateX(-50%) rotate(45deg); }
.tour-globo[data-lado="abajo"]::before { top: -8px; }
.tour-globo[data-lado="arriba"]::before { bottom: -8px; }
.tour-globo[data-lado="centro"]::before { display: none; }
.tour-texto { margin: 0 0 14px; font-size: 1.0625rem; line-height: 1.4; font-weight: 500; text-align: left; }
.tour-pie { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tour-cuenta { font-size: 0.8125rem; color: var(--pc-ink-2, #64748b); white-space: nowrap; }
.tour-botones { display: flex; gap: 6px; }
.tour-botones button { font-family: inherit; font-size: 0.9375rem; border-radius: 999px; padding: 0.45rem 0.9rem; cursor: pointer; white-space: nowrap; }
.tour-saltar { background: transparent; border: 0; color: var(--pc-ink-2, #64748b); }
.tour-sig { background: var(--pc-accent, #2563eb); color: var(--pc-accent-ink, #fff); border: 0; font-weight: 600; }
.tour-botones button:focus-visible { outline: 3px solid var(--pc-focus, #3b82f6); outline-offset: 2px; }

/* Cookies: franja chica abajo que no tapa la página */
.cookie-franja {
    position: static; max-width: 30rem; margin: -14px auto 24px; z-index: auto;
    display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 12px;
    background: var(--pc-ink, #1e293b); color: var(--pc-paper, #fff); font-size: 0.8125rem;
}
.cookie-franja[hidden] { display: none; }
.cookie-franja p { margin: 0; flex: 1; color: inherit; }
.cookie-franja button { flex: none; border: 0; border-radius: 999px; padding: 0.45rem 0.9rem; background: var(--pc-paper, #fff); color: var(--pc-ink, #1e293b); font-family: inherit; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cookie-franja button:focus-visible { outline: 3px solid var(--pc-focus, #3b82f6); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .tour-gota::before { animation: none; transform: scale(2); opacity: 0.6; }
    .tour-gota::after { animation: none; display: none; }
    .pagina-cliente .search-card .btn-primary { transition: none; }
}

/* Botón de ayuda por WhatsApp (Configuración → Página del cliente; apagado por defecto) */
.pagina-cliente .boton-ayuda {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    margin: 16px auto 0; padding-top: 14px; border-top: 1px solid var(--pc-rule);
    color: var(--pc-ink); font-size: 1.0625rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.pagina-cliente .boton-ayuda svg { flex: none; color: oklch(52% 0.13 150); }
.pagina-cliente .boton-ayuda:focus-visible { outline: 3px solid var(--pc-focus); outline-offset: 3px; border-radius: 8px; }
@media (hover: hover) and (pointer: fine) { .pagina-cliente .boton-ayuda:hover { color: var(--pc-accent); } }
/* Debajo del resultado: va sobre el fondo, como botón */
.pagina-cliente .clear-action .boton-ayuda {
    width: fit-content; max-width: 100%; margin-top: 14px; padding: 10px 18px; border: 0; border-radius: 999px;
    background: var(--pc-paper); box-shadow: 0 4px 16px var(--pc-sombra);
}

/* ===== Tanda 3: logos de plataformas ===== */
/* Panel → Plataformas en tarjetas */
.plat-grilla { grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 14px; }
.plat-tarjeta { gap: 12px; justify-content: flex-start; border-radius: 14px; background: #fff; }
.plat-tarjeta.is-inactive { opacity: 0.65; }
.plat-cabecera { display: flex; gap: 12px; align-items: center; min-width: 0; }
.plat-tarjeta .plat-icono {
    width: 56px; height: 56px; flex: none; border-radius: 12px; overflow: hidden;
    display: grid; place-items: center; background: #eef1f6; color: #1e293b; font-weight: 700; font-size: 1.4rem;
}
.plat-tarjeta .plat-icono img { width: 100%; height: 100%; object-fit: contain; }
.plat-datos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.plat-datos strong { overflow-wrap: anywhere; }
.plat-acciones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.plat-acciones form { margin: 0; }
.plat-mini {
    position: relative; display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid #d6dbe3; border-radius: 8px;
    background: #fff; color: #1e293b; font-size: 13px; font-family: inherit; cursor: pointer; white-space: nowrap; line-height: 1.4;
}
.plat-mini:hover { border-color: #007bff; color: #007bff; }
.plat-mini.plat-peligro { color: #c0392b; }
.plat-mini.plat-peligro:hover { border-color: #c0392b; }
.plat-mini:focus-within, .plat-mini:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }
.plat-archivo { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.plat-tarjeta .plat-acciones .btn-edit-category { padding: 6px 12px; font-size: 13px; }
.plat-sin-asuntos { color: #64748b; font-size: 0.875rem; background: none !important; padding-left: 0 !important; }
.plat-tarjeta .add-subject-form { margin-top: 0; }
.plat-tarjeta .add-subject-form input { min-width: 0; }
.plat-pie { margin-top: auto; padding-top: 10px; border-top: 1px solid #e9e9e9; justify-content: space-between; width: 100%; }

/* Página del cliente: cuadritos de plataforma (la última fila incompleta queda centrada) */
.pagina-cliente .plataformas { border: 0; margin: 0 0 4px; padding: 0; min-width: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.pagina-cliente .plataformas legend { width: 100%; padding: 0; margin: 0 0 8px; font-weight: 600; font-size: 1.0625rem; color: var(--pc-ink); }
.pagina-cliente .plat { --ancho: calc((100% - 10px) / 2); flex: 0 0 var(--ancho); max-width: var(--ancho); position: relative; }
@media (min-width: 22rem) { .pagina-cliente .plat { --ancho: calc((100% - 20px) / 3); } }
@media (min-width: 30rem) { .pagina-cliente .plat { --ancho: calc((100% - 30px) / 4); } }
.pagina-cliente .plat input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.pagina-cliente .plat label {
    display: grid; justify-items: center; gap: 8px; height: 100%; margin: 0; padding: 12px 4px 10px; cursor: pointer;
    border: 2px solid var(--pc-rule); border-radius: 14px; background: var(--pc-paper);
    transition: border-color 160ms var(--pc-ease-out), background-color 160ms var(--pc-ease-out);
}
.pagina-cliente .plat .plat-icono {
    width: 56px; height: 56px; border-radius: 12px; overflow: hidden; display: grid; place-items: center;
    background: var(--pc-paper-2); color: var(--pc-ink); font-weight: 700; font-size: 1.4rem;
}
.pagina-cliente .plat .plat-icono img { width: 100%; height: 100%; object-fit: contain; }
.pagina-cliente .plat .plat-nombre { font-size: 0.8125rem; font-weight: 500; line-height: 1.2; text-align: center; overflow-wrap: anywhere; color: var(--pc-ink); }
.pagina-cliente .plat .plat-tilde { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; background: var(--pc-accent); display: none; place-items: center; pointer-events: none; }
.pagina-cliente .plat .plat-tilde svg { width: 14px; height: 14px; stroke: var(--pc-accent-ink); }
.pagina-cliente .plat input:checked + label { border-color: var(--pc-accent); background: oklch(94% 0.04 258); }
.pagina-cliente .plat input:checked + label .plat-tilde { display: grid; }
.pagina-cliente .plat input:focus-visible + label { outline: 3px solid var(--pc-focus); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .pagina-cliente .plat label:hover { border-color: var(--pc-accent); } }
.pagina-cliente .plataformas-aviso { width: 100%; margin: 0; padding: 14px; text-align: center; color: var(--pc-ink-2); font-size: 0.9375rem; border: 2px dashed var(--pc-rule); border-radius: 14px; }
@media (max-width: 25rem) { .pagina-cliente .search-card { padding: 24px 18px; } }
@media (prefers-reduced-motion: reduce) { .pagina-cliente .plat label { transition: none; } }
/* Tarjetas de plataformas: la lista de asuntos se ve completa (sin la caja con desplazamiento del panel viejo) */
.plat-tarjeta .subject-list { max-height: none; overflow: visible; border: 0; padding: 0; margin-top: 0; display: grid; gap: 6px; }
.plat-tarjeta .subject-list li { gap: 8px; background-color: #f4f6f9; border-radius: 8px; font-size: 0.875rem; }
.plat-tarjeta .subject-list li.plat-sin-asuntos { background: none; }
/* Guía: al resaltar los cuadritos, el recuadro deja aire alrededor del título "Plataforma" */
.pagina-cliente .plataformas.tour-foco { padding: 10px; border-radius: 16px; }
.pagina-cliente .plataformas legend { float: left; } /* el título queda dentro del grupo, no sobre su borde */
/* Plataforma desactivada por el administrador: en gris y sin poder tocarla */
.pagina-cliente .plat.plat-off label { cursor: not-allowed; background: var(--pc-paper-2); border-style: dashed; }
.pagina-cliente .plat.plat-off input { cursor: not-allowed; }
.pagina-cliente .plat.plat-off .plat-icono { filter: grayscale(1); opacity: 0.5; }
.pagina-cliente .plat.plat-off .plat-nombre { color: var(--pc-ink-2); }
.pagina-cliente .plat-nodisp { font-size: 0.6875rem; font-weight: 600; color: var(--pc-ink-2); background: var(--pc-rule); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .pagina-cliente .plat.plat-off label:hover { border-color: var(--pc-rule); } }
.pagina-cliente .search-card .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===== Tanda 4: guía "Pon en marcha el bot en 3 pasos" (Gestionar Correos) ===== */
.guia-pasos-card { background: #fff; border: 1px solid oklch(90% 0.01 255); border-radius: 12px; padding: 18px 20px; margin-bottom: 20px; }
.guia-pasos-card.guia-oculta { display: none; }
.guia-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.guia-cab h3 { margin: 0; font-size: 1.05rem; border: 0; padding: 0; }
.guia-cab span { color: oklch(48% 0.02 260); font-size: 0.875rem; }
.guia-pasos { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 52rem) { .guia-pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.guia-paso { border: 2px solid oklch(90% 0.01 255); border-radius: 12px; padding: 14px; display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: 4px 12px; align-content: start; }
.guia-num { grid-row: span 3; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #e3e7ee; color: oklch(48% 0.02 260); }
.guia-paso h4 { margin: 0; font-size: 1rem; }
.guia-paso p { margin: 0; color: oklch(48% 0.02 260); font-size: 0.875rem; line-height: 1.4; }
.guia-estado { font-size: 0.8125rem; font-weight: 700; margin-top: 4px; color: oklch(48% 0.02 260); }
.guia-ir { grid-column: 2; justify-self: start; margin-top: 8px; font: inherit; font-size: 0.875rem; font-weight: 700; border: 0; border-radius: 8px; padding: 7px 12px; background: #007bff; color: #fff; cursor: pointer; white-space: nowrap; }
.guia-ir:hover { background: #0069d9; }
.guia-ir:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }
.guia-paso.hecho { border-color: oklch(85% 0.06 150); background: oklch(95% 0.04 150); }
.guia-paso.hecho .guia-num { background: oklch(55% 0.14 150); color: #fff; }
.guia-paso.hecho .guia-estado { color: oklch(45% 0.13 150); }
.guia-paso.actual { border-color: #007bff; background: oklch(95% 0.03 258); }
.guia-paso.actual .guia-num { background: #007bff; color: #fff; }
.guia-paso.actual .guia-estado { color: #0056b3; }
.guia-paso.bloqueado { opacity: 0.6; }
.guia-listo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: oklch(95% 0.04 150); border: 1px solid oklch(85% 0.06 150); border-radius: 12px; padding: 12px 16px; margin-bottom: 20px; }
.guia-listo-tilde { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: oklch(55% 0.14 150); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.guia-listo strong { color: oklch(45% 0.13 150); }
.guia-listo-acciones { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.guia-listo-acciones a, .guia-listo-acciones button { font: inherit; font-size: 0.875rem; font-weight: 700; color: #007bff; background: none; border: 0; cursor: pointer; text-decoration: underline; padding: 4px; white-space: nowrap; }
.guia-etq { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-right: 10px; border-radius: 50%; font-size: 0.8125rem; font-weight: 700; background: #e3e7ee; color: oklch(48% 0.02 260); vertical-align: middle; flex: none; }
.guia-etq.ok { background: oklch(55% 0.14 150); color: #fff; }
.guia-resaltada { outline: 3px solid #007bff; outline-offset: 4px; }

/* ===== "Primeros pasos" en el Dashboard ===== */
.pp-card { background: #fff; border-radius: 10px; padding: 20px 24px; margin-bottom: 25px; box-shadow: 0 2px 8px oklch(20% 0.02 260 / 0.06); }
.pp-card.pp-oculta { display: none; }
.pp-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pp-cab h3 { margin: 0; border: 0; padding: 0; }
.pp-cuenta { color: oklch(48% 0.02 260); font-size: 0.875rem; font-weight: 700; }
.pp-barra { height: 8px; border-radius: 999px; background: #e3e7ee; margin: 12px 0 16px; overflow: hidden; }
.pp-barra span { display: block; height: 100%; background: oklch(55% 0.14 150); border-radius: 999px; }
.pp-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pp-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 4px 12px; align-items: center; padding: 12px 14px; border: 1px solid oklch(90% 0.01 255); border-radius: 10px; }
.pp-num { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; background: #e3e7ee; color: oklch(48% 0.02 260); grid-row: span 2; align-self: start; }
.pp-item h4 { margin: 0; font-size: 1rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pp-opc { font-size: 0.6875rem; font-weight: 700; color: oklch(48% 0.02 260); background: #e3e7ee; border-radius: 999px; padding: 1px 8px; }
.pp-item p { margin: 0; grid-column: 2; color: oklch(48% 0.02 260); font-size: 0.875rem; line-height: 1.4; }
.pp-estado { font-weight: 700; }
.pp-alerta { display: block; margin-top: 4px; color: oklch(50% 0.13 70); font-weight: 700; font-size: 0.8125rem; }
.pp-acc { grid-column: 3; grid-row: 1 / span 2; display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.pp-acc form { margin: 0; }
.pp-ir, .pp-sec { font: inherit; font-size: 0.8125rem; font-weight: 700; border-radius: 8px; padding: 7px 12px; white-space: nowrap; cursor: pointer; text-decoration: none; display: inline-block; }
.pp-ir { background: #007bff; color: #fff; border: 1px solid #007bff; }
.pp-ir:hover { background: #0069d9; color: #fff; }
.pp-sec { background: #fff; color: #007bff; border: 1px solid oklch(90% 0.01 255); }
.pp-ir:focus-visible, .pp-sec:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }
.pp-item.hecho { background: oklch(95% 0.04 150); border-color: oklch(85% 0.06 150); }
.pp-item.hecho .pp-num { background: oklch(55% 0.14 150); color: #fff; }
.pp-item.hecho .pp-estado { color: oklch(45% 0.13 150); }
.pp-item.hecho .pp-ir { background: #fff; color: #007bff; border-color: oklch(90% 0.01 255); }
.pp-item.actual { background: oklch(95% 0.03 258); border-color: #007bff; }
.pp-item.actual .pp-num { background: #007bff; color: #fff; }
.pp-item.actual .pp-estado { color: #0056b3; }
@media (max-width: 40rem) {
    .pp-item { grid-template-columns: 2rem minmax(0, 1fr); }
    .pp-acc { grid-column: 2; grid-row: auto; justify-content: flex-start; margin-top: 6px; }
}
.pp-listo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: oklch(95% 0.04 150); border: 1px solid oklch(85% 0.06 150); border-radius: 12px; padding: 12px 16px; margin-bottom: 25px; }
.pp-listo-tilde { width: 1.75rem; height: 1.75rem; border-radius: 50%; background: oklch(55% 0.14 150); color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; }
.pp-listo strong { color: oklch(45% 0.13 150); }
.pp-listo button { margin-left: auto; font: inherit; font-size: 0.875rem; font-weight: 700; color: #007bff; background: none; border: 0; cursor: pointer; text-decoration: underline; }
.pp-listo-alerta { flex-basis: 100%; order: 3; color: oklch(50% 0.13 70); font-weight: 700; font-size: 0.875rem; }
.pp-listo-alerta a { color: #007bff; }
/* "Primeros pasos" minimizado: una pastilla chica que se despliega al tocarla */
.pp-form { margin: 0; display: inline; }
.pp-cab-der { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pp-minimizar { font: inherit; font-size: 0.8125rem; font-weight: 700; color: #007bff; background: none; border: 1px solid oklch(90% 0.01 255); border-radius: 999px; padding: 4px 12px; cursor: pointer; white-space: nowrap; }
.pp-minimizar:hover { border-color: #007bff; }
.pp-pastilla-fila { margin-bottom: 18px; }
.pp-pastilla { font: inherit; font-size: 0.8125rem; font-weight: 700; color: oklch(40% 0.02 260); background: #fff; border: 1px solid oklch(90% 0.01 255); border-radius: 999px; padding: 5px 14px; cursor: pointer; box-shadow: 0 1px 4px oklch(20% 0.02 260 / 0.06); }
.pp-pastilla:hover { border-color: #007bff; color: #007bff; }
.pp-pastilla-ok { color: oklch(42% 0.13 150); }
.pp-pastilla-alerta { color: oklch(50% 0.13 70); }
.pp-pastilla-flecha { font-size: 0.75rem; }
.pp-minimizar:focus-visible, .pp-pastilla:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }

/* Plataforma activa sin asuntos: aviso ámbar (el bot no puede encontrar sus códigos) */
.plat-aviso-resumen { margin: 0 0 14px; padding: 12px 16px; border-radius: 10px; background: oklch(96% 0.05 85); border: 1px solid oklch(85% 0.1 85); color: oklch(38% 0.08 70); font-size: 0.9375rem; line-height: 1.45; }
.plat-aviso-resumen strong { color: oklch(40% 0.1 65); }
.plat-tarjeta.plat-sin-asuntos-alerta { border: 2px solid oklch(78% 0.13 80); }
.plat-tarjeta .subject-list li.plat-aviso-tarjeta { background: oklch(96% 0.05 85) !important; color: oklch(40% 0.1 65); font-weight: 700; padding: 8px 10px !important; border-radius: 8px; }
.plat-tarjeta.plat-sin-asuntos-alerta .add-subject-form input { border-color: oklch(70% 0.14 75); box-shadow: 0 0 0 3px oklch(90% 0.08 85); }

/* Listas de clientes: código copiable y botón "Copiar mensaje" */
.cliente-codigo-chico.cli-copiar { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border: 1px dashed oklch(80% 0.02 255); border-radius: 6px; background: oklch(98% 0.005 255); color: #1e293b; cursor: pointer; line-height: 1.4; min-height: 26px; }
.cliente-codigo-chico.cli-copiar:hover { border-color: #007bff; color: #007bff; }
.cli-copiar-icono { flex: none; opacity: 0.7; }
.cliente-codigo-chico.cli-copiar.copiado { border-style: solid; border-color: oklch(62% 0.15 150); background: oklch(96% 0.05 150); color: oklch(40% 0.12 150); font-family: inherit; letter-spacing: 0; }
.account-item .cli-copiar-mensaje { margin-right: 8px; background: #fff; border-color: #007bff; color: #007bff; font-family: inherit; }
.account-item .cli-copiar-mensaje:hover { background: oklch(95% 0.03 255); color: #0062cc; }
.account-item .cli-copiar-mensaje.copiado, .account-item .cli-copiar-mensaje.copiado:hover { background: oklch(62% 0.15 150); border-color: oklch(62% 0.15 150); color: #fff; }
.cli-copiar:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }

/* Panel del revendedor (menú lateral, como el del administrador) */
.panel-revendedor .rp-contenedor { max-width: 1000px; margin: 0 auto; padding: 0; overflow-x: visible; }
body.panel-revendedor.resultado-ancho .rp-contenedor { max-width: 1150px; }
.panel-revendedor .rp-titulo { margin: 0 0 4px; font-size: 24px; color: #1e293b; overflow-wrap: anywhere; }
.panel-revendedor .rp-sub { margin: 0 0 20px; color: #64748b; }
.panel-revendedor .rp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin-bottom: 20px; }
.panel-revendedor .rp-stat { display: block; background: #fff; border-radius: 12px; padding: 18px 20px; box-shadow: 0 2px 8px rgba(0,0,0,0.06); color: inherit; text-decoration: none; border: 1px solid transparent; }
.panel-revendedor a.rp-stat:hover { border-color: #007bff; }
.panel-revendedor .rp-stat span { display: block; font-size: 13px; color: #64748b; font-weight: 600; }
.panel-revendedor .rp-stat strong { display: block; font-size: 30px; color: #0f172a; margin-top: 4px; line-height: 1.2; }
.panel-revendedor .rp-stat small { color: #64748b; }
.panel-revendedor .rp-stat.alerta strong { color: oklch(55% 0.15 60); }
.panel-revendedor .rp-acciones { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.panel-revendedor .rp-btn { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none; font-size: 14px; border: 1px solid #007bff; }
.panel-revendedor .rp-btn.pri { background: #007bff; color: #fff; }
.panel-revendedor .rp-btn.pri:hover { background: #0062cc; }
.panel-revendedor .rp-btn.sec { background: #fff; color: #007bff; }
.panel-revendedor .rp-btn.sec:hover { background: oklch(95% 0.03 255); }
.panel-revendedor .config-card + .config-card { margin-top: 20px; }
.panel-revendedor .config-card .form-description.rp-ayuda,
.panel-revendedor .config-card .form-description.rp-vacio { text-align: left; margin: 0 0 14px; }
.panel-revendedor .rp-lista { list-style: none; margin: 0; padding: 0; }
.panel-revendedor .rp-lista li { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.panel-revendedor .rp-lista li:last-child { border-bottom: 0; }
.panel-revendedor .rp-lista li > span:first-child { overflow-wrap: anywhere; }
.panel-revendedor .rp-chip { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; white-space: nowrap; }
.panel-revendedor .rp-chip.ok { background: oklch(95% 0.05 150); color: oklch(40% 0.12 150); }
.panel-revendedor .rp-chip.pronto { background: oklch(95% 0.06 85); color: oklch(42% 0.1 65); }
.panel-revendedor .rp-chip.vencida { background: oklch(94% 0.04 25); color: oklch(45% 0.15 25); }
.panel-revendedor .rp-chip.pausada { background: #f1f5f9; color: #64748b; }
.panel-revendedor .rp-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.panel-revendedor .rp-tabla th { text-align: left; color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 8px; border-bottom: 1px solid #e2e8f0; }
.panel-revendedor .rp-tabla td { padding: 10px 8px; border-bottom: 1px solid #f1f5f9; }
.panel-revendedor .rp-cuenta { overflow-wrap: anywhere; }
.panel-revendedor .search-card { background: #fff; }
.panel-revendedor .search-card:hover { transform: none; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); }
.panel-revendedor .historial-card { margin-top: 0; background: #fff; }
.panel-revendedor .rp-historial-filtros { display: flex; gap: 8px; flex-wrap: wrap; }
.panel-revendedor .rp-historial-filtros select { width: auto; margin: 0; }
.panel-revendedor .historial-quien-cliente { color: oklch(45% 0.12 250); font-weight: 600; }
.panel-revendedor .rc-main .success, .panel-revendedor .rc-main .error { margin-top: 0; }
@media screen and (max-width: 768px) {
    .panel-revendedor .rp-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
    .panel-revendedor .rp-stat { padding: 14px; }
    .panel-revendedor .rp-stat strong { font-size: 24px; }
    .panel-revendedor .rp-tabla thead { display: none; }
    .panel-revendedor .rp-tabla tr { display: block; border-bottom: 1px solid #e2e8f0; padding: 8px 0; }
    .panel-revendedor .rp-tabla td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 4px 0; text-align: right; }
    .panel-revendedor .rp-tabla td::before { content: attr(data-et); color: #64748b; font-size: 12px; text-align: left; flex: none; }
    .panel-revendedor .rp-historial-filtros, .panel-revendedor .rp-historial-filtros select, .panel-revendedor .rp-historial-filtros input { width: 100%; max-width: none; }
}
@media (max-width: 360px) { .panel-revendedor .rp-stats { grid-template-columns: 1fr; } }
.panel-revendedor .rc-volver { margin: 0 0 12px; }
.panel-revendedor .rc-volver a { color: #007bff; text-shadow: none; font-weight: 600; text-decoration: none; }
.panel-revendedor .rc-volver a:hover { text-decoration: underline; }
.panel-revendedor .config-card .btn-secondary { margin-left: 0; }
.panel-revendedor .rp-variables { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.panel-revendedor .rp-var { font-family: monospace; font-size: 13px; background: #eef2ff; color: #3730a3; border: 1px solid #c7d2fe; border-radius: 6px; padding: 4px 10px; cursor: pointer; min-height: 32px; }
.panel-revendedor .rp-var:hover { background: #e0e7ff; }
.panel-revendedor .rp-var:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }
.panel-revendedor #rp-mensaje { width: 100%; box-sizing: border-box; font: inherit; line-height: 1.45; resize: vertical; }
.panel-revendedor .rp-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.panel-revendedor .rp-previa-titulo { margin: 4px 0 6px; font-weight: 600; font-size: 14px; }
.panel-revendedor .rp-vista-previa { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; white-space: pre-line; font-size: 14px; overflow-wrap: anywhere; }
.panel-revendedor .rp-vista-previa.sin-codigo { border-color: oklch(70% 0.15 25); background: oklch(97% 0.02 25); }
.panel-revendedor .rp-mensaje-botones { margin-top: 12px; display: flex; gap: 10px; flex-wrap: wrap; }
.panel-revendedor .rp-mensaje-botones button { width: auto; margin: 0; }
/* Tanda C: avisos de límite, actividad del cliente, "+1 mes", cuadros de plataformas y descarga */
.panel-revendedor .rp-alerta { display: flex; gap: 10px; align-items: flex-start; background: oklch(96% 0.05 85); border: 1px solid oklch(85% 0.1 85); color: oklch(38% 0.08 70); padding: 12px 16px; border-radius: 10px; margin-bottom: 14px; font-size: 14px; line-height: 1.45; }
.panel-revendedor .rp-alerta a { color: oklch(40% 0.12 250); font-weight: 600; }
.panel-revendedor .rp-venc-der { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-revendedor .rp-renovar { margin: 0; display: inline; }
.panel-revendedor .rp-renovar-btn { font: inherit; font-size: 13px; font-weight: 600; padding: 4px 12px; min-height: 32px; border-radius: 6px; border: 1px solid #007bff; background: #fff; color: #007bff; cursor: pointer; width: auto; margin: 0; }
.panel-revendedor .rp-renovar-btn:hover { background: oklch(95% 0.03 255); }
.panel-revendedor .rp-llena { color: oklch(45% 0.15 25); font-weight: 700; }
.panel-revendedor .rp-plataformas { margin: 4px 0 16px; overflow-x: visible; }
.panel-revendedor .rc-descargar { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 12px 10px; padding: 8px 14px; border: 1px solid #007bff; border-radius: 8px; color: #007bff; background: #fff; font-weight: 600; font-size: 14px; text-decoration: none; vertical-align: top; }
.panel-revendedor .rc-descargar:hover { background: oklch(95% 0.03 255); }
.panel-revendedor .alta-desplegable { display: inline-block; vertical-align: top; }
.panel-revendedor .alta-desplegable[open] { display: block; }
.panel-revendedor .alta-desplegable[open] + .rc-descargar { margin-left: 0; }
.panel-revendedor .rc-ultimo-uso { margin-left: 8px; color: #64748b; }
.aviso-limite { margin: 0 0 14px; padding: 12px 14px; border-radius: 10px; font-size: 15px; line-height: 1.45; text-align: left; background: oklch(96% 0.05 85); border: 1px solid oklch(85% 0.1 85); color: oklch(38% 0.08 70); }
.limite-chip { background: oklch(95% 0.06 85); color: oklch(42% 0.1 65); font-weight: 700; padding: 2px 10px; border-radius: 99px; font-size: 12px; white-space: nowrap; }
.limite-lista { list-style: none; margin: 0; padding: 0; }
.limite-lista li { display: flex; justify-content: space-between; align-items: center; gap: 8px 12px; flex-wrap: wrap; padding: 10px 0; border-bottom: 1px solid #f1f5f9; font-size: 14px; }
.limite-lista li:last-child { border-bottom: 0; }
.limite-lista-der { display: inline-flex; gap: 10px; align-items: center; }
.actividad-resumen { display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; font-size: 14px; color: #475569; }
.actividad-resumen b { color: #0f172a; }
.actividad-vacio { color: #64748b; font-size: 14px; margin: 0; }
.actividad-tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.actividad-tabla th { text-align: left; color: #64748b; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; padding: 8px; border-bottom: 1px solid #e2e8f0; }
.actividad-tabla td { padding: 8px; border-bottom: 1px solid #f1f5f9; }
.actividad-cuenta { overflow-wrap: anywhere; }
.actividad-pie { margin: 10px 0 0; font-size: 14px; color: #64748b; }
@media screen and (max-width: 768px) {
    .actividad-tabla thead { display: none; }
    .actividad-tabla tr { display: block; border-bottom: 1px solid #e2e8f0; padding: 6px 0; }
    .actividad-tabla td { display: flex; justify-content: space-between; gap: 12px; border: 0; padding: 3px 0; text-align: right; }
    .actividad-tabla td::before { content: attr(data-et); color: #64748b; font-size: 12px; text-align: left; flex: none; }
    .panel-revendedor .rc-descargar { margin-left: 0; }
    .panel-revendedor .alta-desplegable { display: block; }
}
.rev-ultimo-ingreso { display: block; width: 100%; margin-top: 4px; color: #475569; }
.rev-ultimo-ingreso b { color: #0f172a; }
/* Revendedores (panel del administrador): fecha del cambio de contraseña hecho por el revendedor */
.rev-clave-cambiada { display: block; width: 100%; margin-top: 4px; color: oklch(45% 0.12 250); }

/* Celular: franja fija detrás del botón del menú; el contenido pasa por debajo en vez de chocar con el botón */
@media screen and (max-width: 768px) {
    .main-layout::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 64px; background: #f1f5f9; border-bottom: 1px solid #e2e8f0; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06); z-index: 999; }
    .main-content { padding-top: 80px; }
    .sidebar .sidebar-title { margin-top: 52px; }
    .sidebar { overflow-y: auto; } /* en pantallas bajas se puede bajar hasta Cerrar Sesión */
}

/* Buscador de plataformas (aparece cuando una lista tiene muchas) */
.buscador-plataformas { width: 100%; margin: 0 0 10px; }
.buscador-plataformas input[type="search"] { width: 100%; max-width: 320px; box-sizing: border-box; margin: 0; padding: 8px 12px; border: 1px solid #cbd5e1; border-radius: 8px; font: inherit; font-size: 14px; background: #fff; }
.buscador-plataformas input[type="search"]:focus-visible { outline: 3px solid #80bdff; outline-offset: 1px; }
.buscador-vacio { margin: 8px 0 0; font-size: 14px; color: #64748b; }
.buscador-oculto { display: none !important; }
.pagina-cliente .buscador-plataformas input[type="search"] { max-width: none; font-size: 1rem; padding: 10px 14px; border-radius: 12px; }
.pagina-cliente .buscador-vacio { text-align: center; }

/* Pasos guiados arriba de las fichas del cliente y del revendedor */
.pasos-ficha { margin: 0 0 20px; }
.pasos-ficha ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pasos-ficha li { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 14px; font-size: 14px; line-height: 1.35; }
.pasos-ficha .pf-num { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: #e2e8f0; color: #475569; }
.pasos-ficha li.hecho .pf-num { background: oklch(62% 0.15 150); color: #fff; }
.pasos-ficha li.actual { border-color: #007bff; box-shadow: 0 0 0 3px oklch(92% 0.04 255); }
.pasos-ficha li.actual .pf-num { background: #007bff; color: #fff; }
.pasos-ficha li.alerta { border-color: oklch(78% 0.13 80); background: oklch(98% 0.03 85); }
.pasos-ficha li.alerta .pf-num { background: oklch(70% 0.14 75); color: #fff; }
.pasos-ficha b { display: block; color: #0f172a; }
.pasos-ficha small { display: block; color: #64748b; margin-top: 2px; }
.pasos-ficha .pf-accion { display: inline-block; margin: 6px 0 0; font: inherit; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px; border: 1px solid #007bff; background: #fff; color: #007bff; cursor: pointer; text-decoration: none; width: auto; min-height: 30px; }
.pasos-ficha .pf-accion.pri { background: #007bff; color: #fff; }
.pasos-ficha .pf-accion.copiado { background: oklch(62% 0.15 150); border-color: oklch(62% 0.15 150); }
.pasos-ficha .pf-accion:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }
/* Destinos de los pasos: quedan visibles bajo la franja del celular y se resaltan al llegar */
#cd-copiar-mensaje, #cd-filas, #cd-accesos { scroll-margin-top: 90px; }
#cd-copiar-mensaje:target, #cd-filas:target, #cd-accesos:target { animation: pf-resaltar 2.2s ease-out; }
@keyframes pf-resaltar { 0%, 40% { box-shadow: 0 0 0 4px oklch(75% 0.15 255); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { #cd-copiar-mensaje:target, #cd-filas:target, #cd-accesos:target { animation: none; outline: 3px solid oklch(75% 0.15 255); } }
/* Celular: versión compacta (una línea con los pasos; se despliega solo el que falta) */
@media screen and (max-width: 768px) {
    .pasos-ficha ol { display: flex; flex-wrap: wrap; gap: 6px; }
    .pasos-ficha li { padding: 5px 10px 5px 6px; border-radius: 999px; font-size: 13px; align-items: center; }
    .pasos-ficha li .pf-num { width: 22px; height: 22px; font-size: 12px; }
    .pasos-ficha li small, .pasos-ficha li .pf-accion { display: none; }
    .pasos-ficha li.actual, .pasos-ficha li.alerta { flex-basis: 100%; border-radius: 12px; padding: 12px 14px; align-items: flex-start; font-size: 14px; }
    .pasos-ficha li.actual small, .pasos-ficha li.alerta small { display: block; }
    .pasos-ficha li.actual .pf-accion, .pasos-ficha li.alerta .pf-accion { display: inline-block; }
}

/* Código de autenticador (panel): tipo de acceso en Plataformas y clave por cuenta en Gestionar Correos */
.plat-tipo { margin: 10px 0 0; font-size: 13px; color: #475569; }
.plat-tipo label { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 600; margin: 0; }
.plat-tipo select { width: auto; margin: 0; padding: 4px 8px; font-size: 13px; }
.plat-totp-nota { font-size: 13px; color: #64748b; margin: 12px 0; }
.totp-linea { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; margin-top: 8px; font-size: 13px; color: #475569; }
.totp-linea b { color: #0f172a; }
.totp-linea form { margin: 0; display: inline; }
.totp-mini { font: inherit; font-size: 12px; font-weight: 600; padding: 3px 10px; min-height: 28px; border-radius: 6px; border: 1px solid #94a3b8; background: #fff; color: #334155; cursor: pointer; width: auto; margin: 0; }
.totp-mini:hover { border-color: #007bff; color: #007bff; }
.totp-panel { width: 100%; margin-top: 10px; border: 1px solid #c7d2fe; background: #f8faff; border-radius: 10px; padding: 14px; box-sizing: border-box; }
.totp-panel[hidden] { display: none; }
.totp-panel h4 { margin: 0 0 8px; font-size: 15px; }
.totp-panel .form-group { margin-bottom: 10px; }
.totp-panel input[type="text"], .totp-panel select { width: 100%; box-sizing: border-box; font-family: monospace; }
.totp-panel select { font-family: inherit; }
.totp-ayuda { font-size: 13px; color: #64748b; margin: 8px 0 0; }

/* Código de autenticador (página del cliente): aviso con cuenta regresiva y los 2 códigos */
.plat-chip-totp { display: block; margin-top: 2px; font-size: 0.6875rem; font-weight: 700; color: oklch(45% 0.15 300); }
.totp-extra { margin-top: 10px; width: 100%; }
.totp-extra[hidden] { display: none; }
body.totp-abierto { overflow: hidden; }
.totp-velo { position: fixed; inset: 0; background: oklch(18% 0.02 260 / 0.6); display: grid; place-items: center; padding: 16px; z-index: 2000; }
.totp-aviso { width: 100%; max-width: 420px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; background: #fff; border-radius: 16px; padding: 22px 20px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35); text-align: center; }
.totp-aviso h3 { margin: 0 0 6px; font-size: 1.25rem; color: oklch(24% 0.02 260); }
.totp-aviso [hidden] { display: none !important; }
.totp-cuenta { font: 700 3.25rem/1 system-ui, sans-serif; color: oklch(55% 0.19 258); margin: 10px 0 2px; font-variant-numeric: tabular-nums; }
.totp-cuenta-txt { color: oklch(45% 0.02 260); font-size: .95rem; margin: 0 0 14px; }
.totp-reglas { text-align: left; background: oklch(96% 0.05 85); border: 1px solid oklch(85% 0.1 85); color: oklch(38% 0.08 70); border-radius: 10px; padding: 10px 12px; font-size: .95rem; line-height: 1.45; margin: 0 0 14px; }
.totp-pregunta { font-weight: 700; margin: 0 0 12px; color: oklch(24% 0.02 260); }
.totp-botones { display: flex; gap: 10px; }
.totp-botones button { flex: 1; min-height: 48px; border-radius: 12px; font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; border: 2px solid oklch(55% 0.19 258); width: auto; margin: 0; }
.totp-si { background: oklch(55% 0.19 258); color: #fff; }
.totp-no { background: #fff; color: oklch(45% 0.12 258); }
.totp-botones button:focus-visible { outline: 3px solid oklch(62% 0.2 258); outline-offset: 2px; }
.totp-cierre { margin: 12px 0 0; font-size: .85rem; color: oklch(45% 0.02 260); }
.totp-barra { height: 4px; background: oklch(92% 0.01 255); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.totp-barra i { display: block; height: 100%; width: 100%; background: oklch(70% 0.14 75); transition: width .2s linear; }
.totp-barra-codigo i { background: oklch(55% 0.19 258); }
.totp-paso { font-size: .85rem; font-weight: 700; color: oklch(55% 0.19 258); text-transform: uppercase; letter-spacing: .5px; }
.totp-codigo { font: 700 2.75rem/1.1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 6px; color: oklch(24% 0.02 260); margin: 6px 0 10px; user-select: all; }
.totp-fin { margin-top: 18px; background: #fff; border-radius: 16px; padding: 18px 20px; text-align: center; color: oklch(40% 0.13 25); border: 2px solid oklch(85% 0.08 25); font-size: 1.05rem; line-height: 1.45; }
.totp-fin-aviso { color: oklch(38% 0.08 70); border-color: oklch(85% 0.1 85); }
@media (prefers-reduced-motion: reduce) { .totp-barra i { transition: none; } }
/* Botón largo ("Obtener código de autenticador"): en pantallas angostas pasa a dos líneas en vez de cortarse */
.pagina-cliente .search-card .btn-primary { white-space: normal; text-wrap: balance; line-height: 1.2; }

/* Código de autenticador (panel): estado de cada acceso, Reactivar y registro */
.totp-estado { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; width: 100%; margin-top: 8px; font-size: 13px; color: #334155; }
.totp-chip { font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 99px; }
.totp-chip.ok { background: oklch(95% 0.05 150); color: oklch(40% 0.12 150); }
.totp-chip.usado { background: oklch(94% 0.04 25); color: oklch(45% 0.15 25); }
.totp-reactivar-form { margin: 0; display: inline; }
.totp-reactivar { font: inherit; font-size: 13px; font-weight: 700; padding: 5px 12px; min-height: 30px; border-radius: 6px; border: 1px solid oklch(55% 0.15 150); background: oklch(55% 0.15 150); color: #fff; cursor: pointer; width: auto; margin: 0; }
.totp-reactivar:hover { background: oklch(48% 0.15 150); }
.totp-reactivar:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }
.totp-nota { color: #64748b; }
.totp-desde { color: #64748b; }
.totp-ev { font-weight: 700; }
.totp-ev-revelado { color: oklch(45% 0.12 250); }
.totp-ev-cancelado, .totp-ev-aviso_vencido { color: #64748b; }
.totp-ev-sin_acceso { color: oklch(45% 0.15 25); }
.totp-ev-reactivado { color: oklch(40% 0.12 150); }
/* Código de autenticador: botón "Copiar código" (copia los 6 dígitos sin el espacio) */
.totp-copiar { display: inline-flex; align-items: center; justify-content: center; margin: 0 0 12px; min-height: 44px; padding: 8px 22px; border-radius: 12px; border: 2px solid oklch(55% 0.19 258); background: #fff; color: oklch(45% 0.12 258); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer; width: auto; }
.totp-copiar:hover { background: oklch(96% 0.03 258); }
.totp-copiar.copiado { background: oklch(55% 0.15 150); border-color: oklch(55% 0.15 150); color: #fff; }
.totp-copiar:focus-visible { outline: 3px solid oklch(62% 0.2 258); outline-offset: 2px; }

/* ===== "¿Olvidaste tu contraseña?" (login.php, recuperar.php, Perfil, panel del revendedor, Configuración) ===== */
.recup-olvide { display: inline-block; margin-top: 16px; font-size: 14px; color: #007bff; text-decoration: underline; }
.recup-olvide:focus-visible, .recup-volver:focus-visible, .recup-pestanas a:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; border-radius: 4px; }
.recup-card { max-width: 440px; }
.recup-card .error { text-align: left; }
.recup-ayuda { display: block; margin-top: 6px; font-size: 12.5px; color: #555; }
.recup-texto { font-size: 14px; color: #444; text-align: left; margin: 0 0 16px; line-height: 1.5; }
.recup-volver { display: inline-block; margin-top: 14px; font-size: 14px; color: #555; }
.recup-pestanas { display: flex; gap: 6px; margin: 0 0 18px; background: #eef1f6; padding: 4px; border-radius: 8px; }
.recup-pestanas a { flex: 1; padding: 8px 6px; border-radius: 6px; font-size: 13.5px; font-weight: 500; color: #555; text-decoration: none; line-height: 1.3; }
.recup-pestanas a.activa { background: #fff; color: #007bff; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.recup-aviso { text-align: left; font-size: 13.5px; line-height: 1.5; background: #fff7e0; border: 1px solid #f0c36d; color: #6b4e00; border-radius: 8px; padding: 12px 14px; margin: 0 0 18px; }
.recup-ok { text-align: left; font-size: 14px; line-height: 1.5; background: #e8f6ec; border: 1px solid #9fd5ae; color: #1d5f30; border-radius: 8px; padding: 4px 14px; }
.recup-ok p { margin: 10px 0; }
.recup-ok .recup-nota { font-size: 13px; color: #35573f; }
.recup-ok a { color: #1d5f30; font-weight: 600; }
.recup-boton { display: block; text-decoration: none; box-sizing: border-box; width: 100%; margin-top: 10px; text-align: center; }
.recup-boton.recup-deshabilitado { opacity: .55; cursor: not-allowed; }
.recup-codigo { font: 600 22px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: 2px; background: #f1f5f9; border: 2px dashed #94a3b8; border-radius: 8px; padding: 14px 8px; margin: 10px 0; color: #0f172a; text-align: center; overflow-wrap: anywhere; }
.recup-copiar { background: #fff; border: 1px solid #007bff; color: #007bff; border-radius: 6px; padding: 8px 14px; font: 500 14px 'Poppins', sans-serif; cursor: pointer; }
.recup-copiar:hover, .recup-copiar:active { background: #eef5ff; color: #0056b3; }
.recup-copiar.copiado, .recup-copiar.copiado:hover { background: #e8f6ec; border-color: #1d7a3a; color: #1d7a3a; }
.recup-copiar:focus-visible { outline: 3px solid #80bdff; outline-offset: 2px; }
.recup-check { display: flex; gap: 8px; align-items: center; justify-content: center; font-size: 14px; margin: 14px 0 4px; cursor: pointer; }
.login-card .recup-check input { width: auto; }
/* Tarjeta "Recuperación de la cuenta" */
.recup-tarjeta { margin-top: 20px; }
.recup-tarjeta .recup-nuevo { background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; padding: 12px 14px 16px; margin-bottom: 16px; text-align: center; }
.recup-tarjeta .recup-nuevo p { text-align: left; margin-top: 0; font-size: 14px; line-height: 1.5; }
.recup-tarjeta .recup-recordatorio { margin-bottom: 14px; }
.recup-estado { font-size: 14px; color: #1d5f30; margin: 0 0 14px; }
.recup-botones { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.recup-botones .btn-secondary { margin-left: 0; }
.recup-botones button[disabled] { opacity: .55; cursor: not-allowed; }
.recup-remitente-aviso { margin-top: 8px; font-size: 13.5px; line-height: 1.5; overflow-wrap: anywhere; }
.recup-casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; cursor: pointer; }
.recup-casilla input { width: auto; margin-top: 5px; flex: none; }
.recup-casilla small { display: block; margin-top: 2px; }
/* Aviso de falla del envío (solo administrador) */
.recup-falla { border: 1px solid #f5b5ad; background: #fffafa; font-size: 14px; line-height: 1.55; color: #3b1a15; margin: 20px 0; }
.recup-falla h3 { color: #8a1f12; font-size: 17px; }
.recup-falla .recup-falla-detalle { background: #fdecea; border-radius: 6px; padding: 8px 10px; font-size: 13px; overflow-wrap: anywhere; }
.recup-falla ol { padding-left: 20px; margin: 6px 0 12px; }
.recup-falla li { margin-bottom: 6px; }
.recup-falla code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 12.5px; }
.recup-falla .recup-vps { background: #eef4ff; border: 1px solid #b6cdf5; color: #1e3a6b; border-radius: 8px; padding: 10px 12px; }
.recup-falla .recup-falla-pie { margin-bottom: 0; font-size: 13px; }
/* Revendedores (panel del administrador): su correo de recuperación */
.rev-correo { display: block; width: 100%; margin-top: 4px; color: #475569; overflow-wrap: anywhere; }
@media (max-width: 500px) {
    .recup-codigo { font-size: 19px; letter-spacing: 1px; }
}

/* ===== Ajustes del autenticador (Configuración, Plataformas y ventana "Sin límite") ===== */
.totp-opciones > label:first-child { display: block; margin-bottom: 6px; }
.totp-opcion { display: flex; gap: 8px; align-items: flex-start; font-weight: normal; margin-bottom: 6px; cursor: pointer; }
.totp-opcion input { width: auto; margin: 4px 0 0; flex: none; }
.totp-opciones small { display: block; }
.plat-libre-nota { display: block; margin-top: 6px; font-weight: normal; color: oklch(45% 0.12 70); line-height: 1.45; }
.totp-cerrar { margin: 12px 0 0; width: auto; }

/* ===== Aviso de reglas para el cliente con código (aviso_cliente.js) ===== */
body.aviso-abierto { overflow: hidden; }
.aviso-velo { position: fixed; inset: 0; background: rgba(10, 14, 30, .72); display: grid; place-items: center; padding: 16px; z-index: 3000; }
.aviso-caja { width: 100%; max-width: 470px; max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box; background: #fff; border-radius: 18px; padding: 26px 24px 20px; box-shadow: 0 24px 60px rgba(0, 0, 0, .45); text-align: left; }
.aviso-caja h2 { margin: 0 0 16px; font-size: 1.35rem; line-height: 1.3; color: #b45309; text-align: center; }
.aviso-lista { margin: 0; padding: 0; list-style: none; counter-reset: aviso; }
.aviso-lista li { counter-increment: aviso; position: relative; padding: 10px 12px 10px 46px; margin-bottom: 10px; background: #fff8e6; border: 1px solid #f6d58a; border-radius: 10px; font-size: .98rem; line-height: 1.45; color: #3b2a06; }
.aviso-lista li::before { content: counter(aviso); position: absolute; left: 12px; top: 10px; width: 24px; height: 24px; border-radius: 50%; background: #d97706; color: #fff; font-weight: 700; font-size: .85rem; display: grid; place-items: center; }
.aviso-boton { display: block; width: 100%; margin: 16px 0 8px; padding: 13px; border: 0; border-radius: 10px; background: #1a73e8; color: #fff; font: 600 1.05rem 'Poppins', sans-serif; cursor: pointer; }
.aviso-boton:hover { background: #1557b0; }
.aviso-boton:focus-visible { outline: 3px solid #80bdff; outline-offset: 3px; }
.aviso-pie { text-align: center; font-size: .85rem; color: #64748b; margin: 0; }
.aviso-barra { height: 4px; background: #e5e7eb; border-radius: 99px; overflow: hidden; margin-top: 8px; }
.aviso-barra i { display: block; height: 100%; width: 100%; background: #d97706; transition: width .2s linear; }
@media (prefers-reduced-motion: reduce) { .aviso-barra i { transition: none; } }

/* Configuración → Diseño: "Volver a la original" debajo de la vista previa */
.image-preview .restaurar-imagen { display: block; margin: 12px 0 0; padding: 8px 14px; font-size: 14px; }

/* ---------- Panel del administrador: paginación, lista de asuntos y filtros de Registros ----------
   Solo dentro de body.panel-admin. :where() no suma prioridad, así cualquier otra regla puede ajustarlas. */
:where(.panel-admin) .pagination-container { display: flex; justify-content: center; margin-top: 20px; }
:where(.panel-admin) .pagination { display: inline-block; }
:where(.panel-admin) .pagination a {
    float: left;
    margin: 0 4px;
    padding: 8px 16px;
    border: 1px solid #ddd;
    color: #000;
    text-decoration: none; transition: background-color .3s;
}
:where(.panel-admin) .pagination a.active { color: var(--blanco); background-color: var(--azul); border: 1px solid var(--azul); }
:where(.panel-admin) .pagination a:hover:not(.active) { background-color: #ddd; }

/* Asuntos de una plataforma: caja con desplazamiento propio */
:where(.panel-admin) .subject-list {
    max-height: 180px;
    margin-top: 10px;
    padding: 15px;
    padding-left: 30px;
    border: 1px solid var(--linea);
    border-radius: 4px;
    overflow-y: auto;
}

/* Filtros de Registros */
:where(.panel-admin) .filter-form { margin-bottom: 20px; padding: 20px; border: 1px solid #dee2e6; border-radius: 8px; background-color: var(--gris-claro); }
:where(.panel-admin) .filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: flex-end; gap: 18px; }
:where(.panel-admin) .filter-actions { display: flex; gap: 10px; margin-top: 20px; }
:where(.panel-admin) .filter-grid .form-group input,
:where(.panel-admin) .filter-grid .form-group select { width: 100%; height: 40px; }

/* Fechas: ícono propio de calendario a la derecha (se oculta el del navegador) */
:where(.panel-admin) .date-input-wrapper { position: relative; }
:where(.panel-admin) .date-input-wrapper .date-icon {
    position: absolute;
    top: 50%;
    right: 12px;
    color: var(--tinta-tenue);
    pointer-events: none; transform: translateY(-50%);
}
:where(.panel-admin) input[type="date"]::-webkit-calendar-picker-indicator { display: none; -webkit-appearance: none; }
:where(.panel-admin) input[type="date"] { padding-right: 35px; }

/* Globos de ayuda "?" del panel (admin/panel.js): flotan encima de todo, sin mover la página */
button.ayuda-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; padding: 0; margin-left: 4px; vertical-align: middle;
    border: 1px solid #007bff; border-radius: 50%; background: #fff; color: #007bff;
    font-size: 12px; font-weight: 700; line-height: 1; cursor: help;
}
button.ayuda-btn:hover, button.ayuda-btn[aria-expanded="true"] { background: #007bff; color: #fff; }
button.ayuda-btn:focus-visible { outline: 2px solid #80bdff; outline-offset: 2px; }
.ayuda-globo {
    position: fixed; z-index: 10000; width: max-content; max-width: min(360px, calc(100vw - 16px));
    padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18); color: #1e293b; font-size: 13px; line-height: 1.5; text-align: left;
}
.ayuda-globo[hidden] { display: none; }
/* Flechita hacia el "?" (abajo del globo; si el globo sale abajo, arriba) */
.ayuda-globo::after {
    content: ""; position: absolute; left: var(--flecha-x, 50%); bottom: -7px; width: 12px; height: 12px;
    margin-left: -6px; background: #fff; border-right: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; transform: rotate(45deg);
}
.ayuda-globo.abajo::after { bottom: auto; top: -7px; transform: rotate(225deg); }
.ayuda-globo p { margin: 0 0 6px; }
.ayuda-globo p:last-child { margin-bottom: 0; }
.ayuda-globo ol, .ayuda-globo ul { margin: 0 0 6px; padding-left: 20px; }
.ayuda-globo li { margin-bottom: 3px; }
.ayuda-globo a { color: #007bff; word-break: break-word; }

/* =====================================================================
   Ajustes de la revisión de diseño (paso 3b, aprobados por el dueño 12/10/2026)
   Ver docs/identidad/auditoria_hallmark_bot.md y el boceto en docs/identidad/boceto_mejoras/.
   ===================================================================== */
/* C2: el correo encontrado va en un solo marco (sin la caja gris intermedia) */
.email-body { padding: 0; border: 0; background: none; }
/* M2: la tarjeta del buscador y la del correo no se mueven al pasar el mouse */
.search-card:hover, .email-card:hover { transform: none; box-shadow: var(--sombra-suave); }
/* M3: anillo azul suave en el campo donde se escribe (visible también con teclado) */
input:focus, select:focus, textarea:focus { box-shadow: 0 0 0 0.2rem var(--azul-anillo); }
/* M7: cifras alineadas en columna (Registros, Dashboard, historial del revendedor) */
.logs-table, .stat-number, .historial-tabla { font-variant-numeric: tabular-nums; }
/* M1: los botones animan solo el color y el pequeño movimiento */
.btn-primary, .btn-secondary { transition: background-color 0.2s, transform 0.2s; }
/* C1: sin negro puro en los números */
.stat-info .stat-number, :where(.panel-admin) .pagination a { color: var(--tinta-oscura); }
/* M5: tarjeta de ingreso sólida, sin efecto vidrio */
.login-card {
    border-color: transparent;
    background-color: var(--blanco);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
}
/* M9: el buscador de una línea con el mismo redondeo que el resto de los botones y campos */
.search-input-group input[type="text"], .search-input-group button { border-radius: 6px; }

/* Íconos de línea dentro del texto, en lugar de emojis (icono_texto() en admin/partials/iconos.php) */
.icono-texto { flex-shrink: 0; width: 1.05em; height: 1.05em; vertical-align: -0.15em; }
.icono-texto.ok { color: var(--verde); }
.icono-texto.mal { color: var(--rojo); }
/* Botones de quitar (cruz): un poco más chica que la letra */
.acceso-quitar .icono-texto, .delete-btn-small .icono-texto { width: 0.8em; height: 0.8em; vertical-align: -0.1em; }