/* =====================================================================
   RebootStream Pro - Estilos globales
   Sistema de temas claro/oscuro con variables CSS
   Mobile-first responsive
   ===================================================================== */

/* ---------------------------------------------------------------------
   VARIABLES DE TEMA
   --------------------------------------------------------------------- */
:root {
    /* Acentos (no cambian entre temas) */
    --accent: #6366f1;
    --accent-hover: #4f46e5;
    --accent-light: rgba(99, 102, 241, 0.12);
    --accent-rgb: 99, 102, 241;

    /* Estados */
    --success: #10b981;
    --success-bg: rgba(16, 185, 129, 0.12);
    --danger: #ef4444;
    --danger-bg: rgba(239, 68, 68, 0.12);
    --warning: #f59e0b;
    --warning-bg: rgba(245, 158, 11, 0.12);
    --info: #3b82f6;
    --info-bg: rgba(59, 130, 246, 0.12);

    /* Sombras */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* Radios */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;

    /* Layout */
    --sidebar-w: 260px;
    --sidebar-w-collapsed: 72px;
    --navbar-h: 64px;
    --transition: 0.2s ease-in-out;

    /* Tipografía */
    --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Tema CLARO */
:root[data-mode="light"] {
    --bg: #f8fafc;
    --bg-card: #ffffff;
    --bg-elevated: #ffffff;
    --bg-hover: #f1f5f9;
    --text: #1e293b;
    --text-muted: #64748b;
    --text-soft: #94a3b8;
    --border: #e2e8f0;
    --border-strong: #cbd5e1;
    --sidebar-bg: #ffffff;
    --navbar-bg: #ffffff;
    --input-bg: #ffffff;
    --overlay: rgba(15, 23, 42, 0.5);
    --purple: #a855f7;
    --pink:   #ec4899;
    --heading-color: var(--text);
    --text-accent: var(--accent);
}

/* Tema OSCURO (default) */
:root[data-mode="dark"],
:root:not([data-mode]),
[data-theme="clasico"] {
    --bg: #0f172a;
    --bg-card: #1e293b;
    --bg-elevated: #273449;
    --bg-hover: #273449;
    --text: #e2e8f0;
    --text-muted: #a9b8cc;
    --text-soft: #8fa0b8;
    --border: #334155;
    --border-strong: #475569;
    --sidebar-bg: #1e293b;
    --navbar-bg: #1e293b;
    --input-bg: #0f172a;
    --overlay: rgba(0, 0, 0, 0.7);
    --purple: #a855f7;
    --pink:   #ec4899;
    --heading-color: var(--text);
    --text-accent: var(--accent);
}

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

/* Un <button> no hereda color ni fuente: el navegador lo pinta en negro, y
   en tema oscuro cualquier botón con clase propia que no fije su color
   quedaba ilegible. Toda clase que defina su color sigue ganando. */
button { color: inherit; font-family: inherit; }

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

body {
    margin: 0;
    padding: 0;
    font-family: var(--font);
    font-size: var(--font-size-base, 14px);
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 12px; line-height: 1.25; font-weight: 600; }
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }

p { margin: 0 0 12px; }

a { color: var(--accent); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; height: auto; display: block; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ---------------------------------------------------------------------
   LAYOUT GENERAL (App con sidebar + navbar + main)
   --------------------------------------------------------------------- */
.app {
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
}

/* SIDEBAR ----------------------------------------------------------- */
.sidebar {
    width: var(--sidebar-w);
    background: var(--sidebar-bg);
    border-right: 1px solid var(--border);
    position: fixed;
    top: 0; left: 0; bottom: 0;
    z-index: 100;
    overflow-y: auto;
    transition: transform var(--transition);
    display: flex;
    flex-direction: column;
}

.sidebar-header {
    padding: 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    gap: 12px;
}

.sidebar-header img {
    width: 40px; height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.sidebar-header h2 {
    margin: 0;
    font-size: 1.125rem;
    color: var(--text);
}

.sidebar-nav { padding: 16px 12px; flex: 1; }

.sidebar-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 4px;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    font-weight: 500;
    transition: all var(--transition);
}

.sidebar-nav a i { width: 18px; text-align: center; }

.sidebar-nav a:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.sidebar-nav a.active {
    background: var(--accent-light);
    color: var(--accent);
}

.sidebar-nav .nav-section {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-soft);
    padding: 16px 14px 8px;
    letter-spacing: 0.05em;
}

/* Overlay para sidebar móvil */
.sidebar-overlay {
    display: none;
    position: fixed; inset: 0;
    background: var(--overlay);
    z-index: 99;
}
.sidebar-overlay.active { display: block; }

/* MAIN CONTENT ------------------------------------------------------ */
.main {
    flex: 1;
    /* Permite que el área principal se encoja por debajo del ancho intrínseco
       de su contenido (p. ej. una tabla ancha). Sin esto, min-width:auto de
       los items flex hace que la tabla empuje el layout y desborde el viewport. */
    min-width: 0;
    max-width: 100%;
    margin-left: var(--sidebar-w);
    display: flex;
    flex-direction: column;
    /* min-height con unidades dinámicas (dvh, con fallback vh): el viewport
       real en móvil/PWA cambia con las barras del navegador; con solo vh el
       footer queda "a media página" porque 100vh no cubre la altura visible. */
    min-height: 100vh;
    min-height: 100dvh;
    transition: margin-left var(--transition);
}

.content {
    padding: 24px;
    flex: 1;
    /* Igual que .main: evita que hijos anchos (tablas) fuercen el ancho. */
    min-width: 0;
    max-width: 100%;
}

/* NAVBAR ------------------------------------------------------------ */
.navbar {
    height: var(--navbar-h);
    background: var(--navbar-bg);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    position: sticky;
    top: 0;
    z-index: 50;
}

.navbar-left { display: flex; align-items: center; gap: 16px; }

.btn-menu {
    display: none;
    background: transparent;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 6px;
}

.navbar-title { font-size: 1.125rem; font-weight: 600; }

.navbar-right { display: flex; align-items: center; gap: 12px; }

/* Botón de tema */
.theme-toggle {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.theme-toggle:hover { background: var(--bg-hover); border-color: var(--accent); }

/* Campana de notificaciones */
.notif-bell {
    position: relative;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    width: 38px; height: 38px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
}
.notif-bell:hover { background: var(--bg-hover); border-color: var(--accent); }

.notif-badge {
    position: absolute;
    top: -6px; right: -6px;
    background: var(--danger);
    color: white;
    font-size: 0.625rem;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    border-radius: 9px;
    display: flex; align-items: center; justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--navbar-bg);
}
.notif-badge.hidden { display: none; }

/* Avatar / menú usuario */
.user-menu { position: relative; }

.user-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 12px 4px 4px;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    cursor: pointer;
    transition: all var(--transition);
}
.user-btn:hover { background: var(--bg-hover); }

.avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}
.avatar img {
    width: 100%;
    height: 100%;
    border-radius: inherit;
    object-fit: cover;
    display: block;
}
.user-name { font-size: 0.875rem; font-weight: 500; }

.dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition);
    z-index: 200;
}
.dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); }

.dropdown a, .dropdown button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.875rem;
    text-align: left;
}
.dropdown a:hover, .dropdown button:hover { background: var(--bg-hover); color: var(--accent); }

.dropdown hr { border: none; border-top: 1px solid var(--border); margin: 6px 0; }

/* ---------------------------------------------------------------------
   COMPONENTES: TARJETAS
   --------------------------------------------------------------------- */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border);
}

.card-header h3 { margin: 0; }

.card-body { color: var(--text); }

/* Stat cards (dashboards) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 16px;
}

.stat-icon {
    width: 48px; height: 48px;
    border-radius: var(--radius-md);
    background: var(--accent-light);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
}

.stat-info { flex: 1; min-width: 0; }
.stat-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.stat-trend { font-size: 0.75rem; color: var(--text-muted); }
.stat-trend.up   { color: var(--success); }
.stat-trend.down { color: var(--danger); }

.stat-card.danger  .stat-icon { background: var(--danger-bg);  color: var(--danger);  }
.stat-card.success .stat-icon { background: var(--success-bg); color: var(--success); }
.stat-card.warning .stat-icon { background: var(--warning-bg); color: var(--warning); }
.stat-card.info    .stat-icon { background: var(--info-bg);    color: var(--info);    }

/* ---------------------------------------------------------------------
   BOTONES
   --------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 16px;
    /* Radio unico para todos los botones: antes --radius-sm (6px) aqui y
       10px en el bloque legado, lo que hacia que el mismo boton cambiara
       de aspecto segun el tema. position/overflow alimentan el ripple. */
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    font-family: var(--font);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.25;
    cursor: pointer;
    transition: all var(--transition-smooth);
    text-decoration: none;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }

.btn-primary {
    background: var(--gradient-accent);
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), 0.38);
}
.btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, var(--accent-hover) 0%, var(--accent-hover) 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-accent);
}
.btn-primary:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(var(--accent-rgb), 0.3);
}

/* Fondo tenue en vez de solo borde: un borde claro sobre tarjeta blanca
   (modo claro) casi no se ve, y los botones de acción (compartir, editar...)
   quedaban sin contorno visible. Con el fondo, siempre se distingue el
   área clickeable sin depender del contraste del borde. */
.btn-secondary { background: var(--bg-hover); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover:not(:disabled) { background: var(--accent-light); color: var(--accent); border-color: var(--accent); }

/* Mismo tratamiento que .btn-primary (gradiente + sombra + elevación): los
   botones de peligro y confirmación son igual de accionados en la UI, así que
   se ven igual de pulsables. Sin esto quedaban planos frente al primario. */
.btn-danger {
    background: var(--gradient-danger);
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(239, 68, 68, 0.3);
}
.btn-danger:hover:not(:disabled) {
    background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-danger);
}
.btn-danger:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(239, 68, 68, 0.28);
}

.btn-success {
    background: var(--gradient-success);
    color: white;
    border: none;
    box-shadow: 0 2px 10px rgba(16, 185, 129, 0.3);
}
.btn-success:hover:not(:disabled) {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-success);
}
.btn-success:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: 0 1px 6px rgba(16, 185, 129, 0.28);
}

/* Solo existían en su versión .btn-icon: un .btn-warning/.btn-info normal
   (la campana de aviso en Ventas) quedaba con el fondo blanco del navegador. */
.btn-warning { background: var(--warning-bg); color: var(--warning); border-color: rgba(245, 158, 11, 0.35); }
.btn-warning:hover:not(:disabled) { background: var(--warning); color: #fff; border-color: var(--warning); }
.btn-info { background: var(--info-bg); color: var(--info); border-color: rgba(59, 130, 246, 0.35); }
.btn-info:hover:not(:disabled) { background: var(--info); color: #fff; border-color: var(--info); }

.btn-ghost { background: transparent; color: var(--text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); }

/* Hereda el radio unico de .btn (--radius-md): antes los botones de icono
   quedaban en --radius-sm (6px) y se veian mas "cuadrados" que los de texto
   dentro de la misma fila de acciones. */
.btn-icon {
    width: 36px; height: 36px;
    padding: 0;
    border-radius: var(--radius-md);
}

/* Botones de ícono "encerrados": chip de color tenue en vez de ícono
   suelto, para que las acciones de una fila (ver/editar/eliminar) se
   lean como botones y no como texto plano. */
.btn.btn-icon.btn-ghost     { background: var(--bg-hover); color: var(--text-muted); border-color: transparent; }
.btn.btn-icon.btn-ghost:hover:not(:disabled)     { background: var(--accent-light); color: var(--accent); }
.btn.btn-icon.btn-secondary { background: var(--bg-hover); color: var(--text); border-color: transparent; }
.btn.btn-icon.btn-secondary:hover:not(:disabled) { background: var(--accent-light); color: var(--accent); border-color: transparent; }
.btn.btn-icon.btn-primary   { background: var(--accent-light); color: var(--accent); }
.btn.btn-icon.btn-danger    { background: var(--danger-bg);  color: var(--danger);  }
.btn.btn-icon.btn-danger:hover:not(:disabled)    { background: var(--danger);  color: #fff; }
.btn.btn-icon.btn-success   { background: var(--success-bg); color: var(--success); }
.btn.btn-icon.btn-success:hover:not(:disabled)   { background: var(--success); color: #fff; }
.btn.btn-icon.btn-warning   { background: var(--warning-bg); color: var(--warning); }
.btn.btn-icon.btn-warning:hover:not(:disabled)   { background: var(--warning); color: #fff; }
.btn.btn-icon.btn-info      { background: var(--info-bg);    color: var(--info);    }
.btn.btn-icon.btn-info:hover:not(:disabled)      { background: var(--info);    color: #fff; }

.btn-sm { padding: 7px 13px; font-size: 0.85rem; }
.btn-lg { padding: 12px 24px; font-size: 1rem; }
.btn-block { width: 100%; }

/* Estado de carga: cualquier .btn puede recibir .loading (lo aplica el
   guard global anti-doble-envio en main.js) para dar feedback visual claro
   mientras el formulario viaja, en vez de solo quedar deshabilitado sin
   ningun indicio de que algo esta pasando. */
@keyframes spin { to { transform: rotate(360deg); } }
.btn.loading { pointer-events: none; opacity: 0.8; }
.btn.loading::before {
    content: '';
    width: 14px; height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   FORMULARIOS
   --------------------------------------------------------------------- */
.form-group { margin-bottom: 16px; }

.form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
}
.form-label .req { color: var(--danger); }

.form-control, .form-select, textarea.form-control {
    display: block;
    width: 100%;
    padding: 10px 14px;
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-family: var(--font);
    font-size: 0.875rem;
    transition: all var(--transition);
}
.form-control.is-readonly {
    background: var(--bg-hover);
    color: var(--text-muted);
    cursor: not-allowed;
}
/* Autofill del navegador (ej. el nombre de un cliente ya escrito antes):
   Chrome/Edge/Safari fuerzan su propio fondo claro pero heredan el color de
   texto claro del tema oscuro, dejando las letras invisibles. Se anula el
   fondo nativo con un box-shadow inset gigante y se fuerza el color de texto
   del tema. */
.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.form-select:-webkit-autofill,
textarea.form-control:-webkit-autofill {
    -webkit-text-fill-color: var(--text);
    -webkit-box-shadow: 0 0 0 1000px var(--input-bg) inset;
    box-shadow: 0 0 0 1000px var(--input-bg) inset;
    caret-color: var(--text);
    transition: background-color 9999s ease-in-out 0s;
}
.form-control:autofill,
.form-select:autofill,
textarea.form-control:autofill {
    -webkit-text-fill-color: var(--text);
    box-shadow: 0 0 0 1000px var(--input-bg) inset;
    caret-color: var(--text);
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
}
.form-control[disabled], .form-control[readonly] { background: var(--bg-hover); cursor: not-allowed; }

textarea.form-control { resize: vertical; min-height: 90px; }

.form-help { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }
.form-error { font-size: 0.75rem; color: var(--danger); margin-top: 4px; }

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 16px;
}
/* Sin esto, un hijo ancho (un canvas de Chart.js nace con 300px) estira la
   columna por encima de la pantalla en un móvil. */
.form-row > * { min-width: 0; }

/* Vigencia (includes/_campo_vigencia.php): inicio, duración y vencimiento */
.vig { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 0 16px; }
.vig-inicio, .vig-duracion { display: flex; gap: 8px; }
.vig-inicio .form-control { flex: 1; min-width: 0; }
.vig-duracion .form-control { flex: 0 0 84px; min-width: 0; }
.vig-duracion .form-select { flex: 1; min-width: 0; }
.vig-vence {
    grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
    padding: 10px 12px; border-radius: var(--radius-sm); background: var(--bg-hover);
    border-left: 3px solid var(--accent); font-size: .875rem;
}
.vig-vence i { color: var(--accent); }

.input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}
.input-group .form-control, .input-group .form-select {
    flex: 1;
}
.input-group .form-select {
    flex: 0.6;
}

/* Input con botón "ojo" para password */
.input-password { position: relative; }
.input-password input { padding-right: 40px; }
.input-password .toggle-eye {
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 6px;
}

/* Input con botón copiar */
.input-copy { position: relative; }
.input-copy input { padding-right: 90px; }
.input-copy .btn-copy {
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    font-size: 0.75rem;
}

/* Input password CON botón copiar: el ojo se ubica a la izquierda del Copiar */
.input-password--copy input { padding-right: 116px; }
.input-password--copy .toggle-eye { right: 84px; }
.input-password--copy .btn-copy {
    position: absolute;
    right: 4px; top: 50%;
    transform: translateY(-50%);
    padding: 5px 10px;
    font-size: 0.75rem;
}

/* Checkbox custom */
.form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    cursor: pointer;
}
.form-check input[type="checkbox"] { accent-color: var(--accent); width: 16px; height: 16px; }

/* ---------------------------------------------------------------------
   TABLAS
   --------------------------------------------------------------------- */
/* Contenedor de scroll horizontal para tablas anchas. El scroll queda
   DENTRO de la tarjeta: la tabla nunca deforma ni desborda el layout. */
.table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-card);
}

.table th, .table td {
    padding: 12px 14px;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.table th {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--bg);
}

.table tbody tr { transition: background var(--transition); }
.table tbody tr:hover { background: var(--bg-hover); }

.table .actions { display: flex; gap: 6px; }

/* Paneles admin y revendedor (D11a): tablas con forma cuadriculada (líneas
   divisorias verticales además de las horizontales existentes). En móvil,
   .sheet-table-cards las quita (ver "Ajustes de accesibilidad y de tarjetas"). */
body.panel-admin .table th,
body.panel-admin .table td,
body.panel-reseller .table th,
body.panel-reseller .table td {
    border-right: 1px solid var(--border);
}
body.panel-admin .table th:last-child,
body.panel-admin .table td:last-child,
body.panel-reseller .table th:last-child,
body.panel-reseller .table td:last-child {
    border-right: none;
}

/* ---------------------------------------------------------------------
   BADGES
   --------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
}
.badge-primary { background: var(--accent-light); color: var(--accent); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-info    { background: var(--info-bg);    color: var(--info);    }
.badge-muted   { background: var(--bg-hover);   color: var(--text-muted); }

/* Indicadores de vencimiento */
.vencido  { color: var(--danger);  font-weight: 600; }
.urgente  { color: var(--danger);  }
.pronto   { color: var(--warning); }

/* ---------------------------------------------------------------------
   MODALES
   --------------------------------------------------------------------- */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition);
    padding: 16px;
}
.modal-backdrop.active { opacity: 1; visibility: visible; }

/* Las confirmaciones spConfirm se crean al vuelo y quedan por encima de
   cualquier otro modal (compartir/QR usan 1300) para poder abrirse desde
   dentro de uno sin quedar ocultas. */
.sp-confirm-backdrop { z-index: 1400; }

.modal {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    width: 100%;
    max-width: 560px;
    max-height: calc(100vh - 32px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform var(--transition);
}
.modal-backdrop.active .modal { transform: translateY(0); }

.modal-lg { max-width: 800px; }
.modal-sm { max-width: 400px; }

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}
.modal-title { margin: 0; font-size: 1.125rem; }

.btn-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    width: 32px; height: 32px;
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
}
.btn-close:hover { background: var(--bg-hover); color: var(--text); }

.modal-body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
    /* Los items flex valen min-height:auto por defecto, lo que les impide
       encogerse por debajo de su contenido y anula el overflow-y de arriba. */
    min-height: 0;
}

/* 37 modales del panel envuelven el cuerpo y el pie en un <form>. Sin estas
   reglas ese form queda como un bloque normal entre .modal y .modal-body: la
   cadena flex se corta, .modal-body nunca recibe una altura que limitar, crece
   con su contenido, y .modal lo recorta con su overflow:hidden. El resultado
   es un modal alto sin scroll y con el pie fuera de la pantalla. */
.modal > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 16px 24px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* ---------------------------------------------------------------------
   TOASTS
   --------------------------------------------------------------------- */
.toast-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 360px;
    /* El contenedor flotan sobre los modales pero no debe robarle clics al
       modal que tengas debajo (por ejemplo la X de la cabecera). */
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 14px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    opacity: 0;
    transform: translateX(100%);
    transition: all var(--transition);
}
.toast.show { opacity: 1; transform: translateX(0); }

.toast.success { border-left-color: var(--success); }
.toast.error   { border-left-color: var(--danger);  }
.toast.warning { border-left-color: var(--warning); }
.toast.info    { border-left-color: var(--info);    }

.toast-icon { font-size: 1.125rem; flex-shrink: 0; padding-top: 2px; }
.toast.success .toast-icon { color: var(--success); }
.toast.error   .toast-icon { color: var(--danger);  }
.toast.warning .toast-icon { color: var(--warning); }
.toast.info    .toast-icon { color: var(--info);    }

.toast-content { flex: 1; }
.toast-title   { font-weight: 600; margin-bottom: 2px; }
.toast-message { font-size: 0.875rem; color: var(--text-muted); }

.toast-close {
    background: transparent;
    border: none;
    color: var(--text-soft);
    cursor: pointer;
    font-size: 1rem;
}

/* ---------------------------------------------------------------------
   ALERTS (inline)
   --------------------------------------------------------------------- */
.alert {
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.alert-danger  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger);  }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.alert-info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info);    }

/* Aviso de duplicados en altas (Fase E8) */
.dup-aviso { display: block; margin-top: 12px; }
.dup-aviso[hidden] { display: none; }
.dup-aviso .dup-lista,
.dup-aprobar .dup-lista { margin: 6px 0 0; padding-left: 18px; }
.dup-aviso a { color: inherit; text-decoration: underline; }

/* ---------------------------------------------------------------------
   SKELETON LOADERS
   --------------------------------------------------------------------- */
.skeleton {
    background: linear-gradient(90deg,
        var(--bg-hover) 0%,
        var(--border) 50%,
        var(--bg-hover) 100%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.skeleton-line   { height: 16px; margin-bottom: 8px; }
.skeleton-line.w-50  { width: 50%; }
.skeleton-line.w-75  { width: 75%; }
.skeleton-line.w-100 { width: 100%; }
.skeleton-card   { height: 120px; }

@keyframes skeleton-shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ---------------------------------------------------------------------
   PAGINACIÓN
   --------------------------------------------------------------------- */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-top: 24px;
    flex-wrap: wrap;
}
.pagination a, .pagination span {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.875rem;
    background: var(--bg-card);
}
.pagination a:hover { border-color: var(--accent); color: var(--accent); }
.pagination .current { background: var(--accent); color: white; border-color: var(--accent); }
.pagination .disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------------------------------------------------------------------
   PANELES DE NOTIFICACIONES (dropdown desde la campana)
   --------------------------------------------------------------------- */
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-width: calc(100vw - 32px);
    max-height: 480px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all var(--transition);
    z-index: 200;
    display: flex;
    flex-direction: column;
}
.notif-panel.active { opacity: 1; visibility: visible; transform: translateY(0); }

.notif-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
}

.notif-panel-actions { display: flex; align-items: center; gap: 4px; }

.notif-list { flex: 1; overflow-y: auto; }

.notif-item {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background var(--transition);
}
.notif-item:hover { background: var(--bg-hover); }
.notif-item.unread { background: var(--accent-light); }

.notif-item-icon {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--accent-light);
    color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}

.notif-item-icon.notif-ic--success { background: var(--success-bg); color: var(--success); }
.notif-item-icon.notif-ic--danger  { background: var(--danger-bg);  color: var(--danger); }
.notif-item-icon.notif-ic--warning { background: var(--warning-bg); color: var(--warning); }
.notif-item-icon.notif-ic--info    { background: var(--info-bg);    color: var(--info); }

.notif-item-content { flex: 1; min-width: 0; }
.notif-item-title { font-weight: 600; font-size: 0.875rem; margin-bottom: 2px; }
.notif-item-msg   { font-size: 0.8125rem; color: var(--text-muted); }
.notif-item-time  { font-size: 0.6875rem; color: var(--text-soft); margin-top: 4px; }

.notif-item-delete {
    flex-shrink: 0;
    align-self: flex-start;
    width: 26px; height: 26px;
    border: none;
    background: transparent;
    color: var(--text-soft);
    border-radius: 6px;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    transition: opacity var(--transition), background var(--transition), color var(--transition);
}
.notif-item:hover .notif-item-delete,
.notif-item:focus-within .notif-item-delete { opacity: 1; }
.notif-item-delete:hover { background: var(--danger-light, rgba(239,68,68,0.12)); color: var(--danger, #ef4444); }

/* En dispositivos táctiles (sin hover) el botón eliminar es siempre visible */
@media (hover: none), (pointer: coarse) {
    .notif-item-delete { opacity: 1; }
}

.notif-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--text-muted);
}

.notif-panel-footer {
    flex-shrink: 0;
    text-align: center;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
}
.notif-panel-footer a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--accent);
}
.notif-panel-footer a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------
   GRIDS DE PRODUCTOS (tienda revendedor)
   --------------------------------------------------------------------- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 16px;
}

.product-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all var(--transition);
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.product-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--accent);
}

.product-image {
    aspect-ratio: 16/10;
    background: var(--bg-hover);
    overflow: hidden;
    position: relative;
}
.product-image img { width: 100%; height: 100%; object-fit: cover; }

.product-body { padding: 14px; }
.product-title { font-weight: 600; margin-bottom: 4px; }
.product-meta  { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 10px; }

.product-price {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--accent);
}
.product-price small { font-size: 0.6875rem; font-weight: 400; color: var(--text-muted); }

/* ===== Combos y promociones (tienda revendedor) ===== */
.combo-showcase { border: 1px solid rgba(239,68,68,.35); }
.combo-card {
    background: var(--bg-card);
    border: 1px solid rgba(239,68,68,.35);
    border-radius: var(--radius-md);
    padding: 16px;
    display: flex;
    flex-direction: column;
    transition: all var(--transition);
    cursor: pointer;
}
.combo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(239,68,68,.15);
    border-color: rgba(239,68,68,.6);
}
.combo-items { display: flex; flex-wrap: wrap; gap: 6px; }
/* Banner de codigo promocional (tienda admin y revendedor): cupon con el % como protagonista. */
.cupon-banner { display: flex; align-items: stretch; gap: 16px; margin-bottom: 20px; overflow: hidden; border-radius: var(--radius-lg);
    border: 1px solid rgba(var(--accent-rgb), .4); background: linear-gradient(100deg, rgba(var(--accent-rgb), .22), rgba(var(--accent-rgb), .05) 60%, transparent); }
.cupon-pct { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 96px; padding: 14px 18px;
    background: linear-gradient(160deg, var(--accent), var(--accent-hover)); color: #fff; line-height: 1; border-right: 2px dashed rgba(255,255,255,.45); }
.cupon-pct strong { font-size: 1.9rem; font-weight: 800; letter-spacing: -.02em; }
.cupon-pct span { margin-top: 4px; font-size: .6875rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.cupon-info { flex: 1; min-width: 0; align-self: center; padding: 10px 0; }
.cupon-titulo { font-weight: 700; font-size: 1rem; }
.cupon-vigencia { margin-top: 3px; font-size: .8125rem; color: var(--text-muted); }
.cupon-codigo { align-self: center; margin-right: 16px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 16px;
    border: 2px dashed rgba(var(--accent-rgb), .7); border-radius: var(--radius-md); background: var(--bg-card); color: inherit; cursor: pointer;
    transition: transform var(--transition), box-shadow var(--transition); }
.cupon-codigo:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(var(--accent-rgb), .3); }
.cupon-codigo-txt { font-family: ui-monospace, Consolas, monospace; font-size: 1.125rem; font-weight: 800; letter-spacing: .08em; }
.cupon-copiar { font-size: .6875rem; font-weight: 600; color: var(--accent); }
@media (max-width: 640px) {
    .cupon-banner { flex-wrap: wrap; gap: 0; }
    .cupon-pct { flex-direction: row; gap: 6px; align-items: baseline; min-width: 0; width: 100%; padding: 10px; border-right: 0; border-bottom: 2px dashed rgba(255,255,255,.45); }
    .cupon-info { padding: 12px 16px 4px; width: 100%; }
    .cupon-codigo { width: calc(100% - 32px); margin: 8px 16px 14px; }
}
.combo-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.combo-logo { width: 52px; height: 52px; border-radius: 14px; object-fit: cover; background: var(--bg-hover); box-shadow: 0 2px 8px rgba(0,0,0,.35); }

/* Bloque de cuenta individual dentro del modal de éxito de combo */
.combo-cuenta-block {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px;
    margin-bottom: 14px;
}
.combo-cuenta-block:last-child { margin-bottom: 0; }
.combo-cuenta-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    margin-bottom: 10px;
}

/* Lista de plataformas dentro del modal de detalle del combo */
.combo-detalle-items { display: flex; flex-direction: column; gap: 8px; }
.combo-detalle-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-hover);
}
.combo-detalle-item img { width: 32px; height: 32px; border-radius: 6px; object-fit: cover; }
.combo-detalle-item i { width: 32px; text-align: center; font-size: 1.25rem; color: var(--accent); }

/* ===== Tarjeta de producto estilo tienda (rediseño) ===== */
.pcard { text-align: center; }

.pcard-head {
    position: relative;
    height: 136px;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Deja libre la franja de abajo, donde va la etiqueta de stock. */
    padding-bottom: 26px;
    background:
        radial-gradient(125% 110% at 50% -10%,
            hsl(var(--ph, 234) 72% 58%),
            hsl(var(--ph, 234) 60% 30%));
    overflow: hidden;
}
.pcard-head::before {
    /* brillo superior sutil */
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.18), transparent 70%);
}
.pcard-head::after {
    /* degradado inferior para separar del cuerpo */
    content: '';
    position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,.28));
}
.pcard-logo {
    position: relative;
    z-index: 1;
    height: 92px;
    width: auto;
    max-width: 72%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,.35));
}
.pcard-head-icon {
    position: relative;
    z-index: 1;
    font-size: 2.4rem;
    color: rgba(255,255,255,.92);
    filter: drop-shadow(0 6px 12px rgba(0,0,0,.3));
}
.pcard-tag {
    position: absolute;
    z-index: 2;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.55);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 999px;
    white-space: nowrap;
    backdrop-filter: blur(4px);
}

/* Badge de promoción activa (esquina superior) */
.pcard-promo-badge {
    position: absolute;
    z-index: 3;
    top: 10px;
    left: 10px;
    background: linear-gradient(135deg, #f97316, #ef4444);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow: 0 2px 10px rgba(239,68,68,.5);
    animation: pcardPromoPulse 2s ease-in-out infinite;
}
@keyframes pcardPromoPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}
/* Variante para "esta cuenta es parte de un combo" (sin rebaja individual) */
.pcard-promo-badge--combo {
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    box-shadow: 0 2px 10px rgba(var(--accent-rgb), .5);
    animation: none;
}
.pcard-alt--combo { background: rgba(var(--accent-rgb), .12); }
.pcard-alt--combo i { color: #818cf8; }

/* Badge distintivo para subcuentas provenientes de una Cuenta Madre */
.pcard-tag--madre {
    background: linear-gradient(135deg, var(--accent-hover), var(--accent-hover));
    color: #fff;
    box-shadow: 0 2px 10px rgba(124,58,237,.45);
}

/* Botón extra pequeño para acciones en tablas */
.btn-xs { padding:5px 10px; font-size:.8rem; }

/* Chips de enlaces (columna URLs de Plataformas) */
.url-chips { display:flex; flex-wrap:wrap; gap:6px; }
.url-chip {
    display:inline-flex; align-items:center; gap:5px;
    font-size:.72rem; font-weight:600; line-height:1;
    padding:5px 10px; border-radius:999px;
    background:var(--bg-hover); border:1px solid var(--border); color:var(--text);
    text-decoration:none; transition:all .15s;
}
.url-chip:hover { background:var(--accent); border-color:var(--accent); color:#fff; }
.url-chip i { font-size:.7rem; opacity:.85; }

/* Credenciales en tablas (correo/contraseña con copiar / mostrar) */
.rs-cred-wrap { display:flex; align-items:center; gap:4px; }
.rs-cred-val  { font-size:.78rem; background:var(--bg-card,#1a1a2e); padding:2px 6px; border-radius:4px; border:1px solid var(--border); letter-spacing:.02em; white-space:nowrap; }
.btn-copy-cred { background:none; border:none; cursor:pointer; color:var(--text-muted); padding:2px 4px; border-radius:4px; transition:color .15s; line-height:1; }
.btn-copy-cred:hover { color:var(--accent); }
.btn-copy-cred.copied { color:#22c55e; }

.pcard-body {
    padding: 12px 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 7px;
    flex: 1;
}
.pcard-title {
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1.25;
    margin: 0;
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pcard-buy-amount {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.1;
}
.pcard-buy-amount span { font-size: 0.7rem; font-weight: 600; color: var(--text-muted); }
.pcard-buy-amount del  { font-size: 0.8rem; font-weight: 500; color: var(--text-muted); margin-left: 6px; }
.pcard-buy-label {
    font-size: 0.68rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Precio de revendedor como meta: se ve, pero no es lo que se cobra hoy. */
.pcard-buy-ref { margin-top: 4px; font-size: 0.72rem; color: var(--text-muted); }
.pcard-buy-ref strong { color: var(--text); }
.pcard-suggest {
    border: 1px solid var(--accent);
    border-radius: 10px;
    background: var(--accent-light);
    padding: 6px 8px;
}
.pcard-suggest-label {
    font-size: 0.62rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pcard-suggest-amount {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--accent);
}
.pcard-guide {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.74rem;
    color: var(--text-muted);
}
.pcard-guide i { color: var(--accent); }
.pcard-cta {
    margin-top: 0;
    width: 100%;
    border: none;
    cursor: pointer;
    background: var(--gradient-success);
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 9px 12px;
    border-radius: var(--radius-md);
    box-shadow: 0 3px 12px rgba(16, 185, 129, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter var(--transition), transform var(--transition), box-shadow var(--transition);
}
.pcard-cta:hover { filter: brightness(1.06); box-shadow: var(--shadow-success); }
.product-card:hover .pcard-cta { transform: translateY(-1px); }

/* ===== Carrito de compras: selector de cantidad en la tarjeta ===== */
.pcard-cart-row { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pcard-qty { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; flex-shrink: 0; }
.pcard-qty-btn { width: 30px; height: 34px; border: none; background: var(--bg-hover); color: var(--text); font-size: 1rem; font-weight: 700; cursor: pointer; }
.pcard-qty-btn:hover { background: var(--accent-light); color: var(--accent); }
.pcard-qty-input { width: 32px; height: 34px; border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border); background: var(--bg-card); color: var(--text); text-align: center; font-weight: 700; font-size: 0.85rem; -moz-appearance: textfield; }
.pcard-qty-input::-webkit-outer-spin-button, .pcard-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pcard-cart-add {
    flex: 1; height: 34px; border: 1px solid var(--accent); border-radius: 10px; background: var(--accent-light); color: var(--accent);
    font-weight: 700; font-size: 0.82rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    transition: background var(--transition), color var(--transition);
}
.pcard-cart-add:hover { background: var(--accent); color: #fff; }
.pcard-cart-add.added { background: var(--success); border-color: var(--success); color: #fff; }

/* ===== Botón flotante + panel del carrito ===== */
.carrito-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 380;
    width: 56px; height: 56px; border-radius: 50%; border: none;
    background: var(--accent); color: #fff; font-size: 1.25rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), .45);
    transition: transform var(--transition);
}
.carrito-fab:hover { transform: translateY(-2px); }
.carrito-badge {
    position: absolute; top: -4px; right: -4px; min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 999px; background: var(--danger); color: #fff; font-size: 0.7rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center; border: 2px solid var(--bg-card);
}
.cart-panel {
    position: fixed; top: 0; right: 0; bottom: 0; margin: 0;
    width: 380px; max-width: 92vw; height: 100vh; max-height: 100vh;
    border-radius: 0; display: flex; flex-direction: column;
    animation: cartSlideIn .22s ease-out;
}
@keyframes cartSlideIn { from { transform: translateX(24px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.cart-panel .modal-body { flex: 1; overflow-y: auto; }
.cart-panel-footer { flex-direction: column; align-items: stretch; gap: 8px; }
.cart-total { text-align: right; font-size: 0.9rem; color: var(--text-muted); }
.cart-total strong { color: var(--accent); font-size: 1.1rem; }
.cart-line { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.cart-line:last-child { border-bottom: none; }
.cart-line-logo { width: 38px; height: 38px; border-radius: 9px; object-fit: cover; flex-shrink: 0; }
.cart-line-info { flex: 1; min-width: 0; }
.cart-line-plat { font-size: 0.85rem; font-weight: 700; }
.cart-line-sub { font-size: 0.72rem; color: var(--text-muted); }
.cart-line-qty { display: flex; align-items: center; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.cart-line-qty button { width: 24px; height: 26px; border: none; background: var(--bg-hover); color: var(--text); cursor: pointer; font-weight: 700; }
.cart-line-qty span { width: 26px; text-align: center; font-size: 0.78rem; font-weight: 700; }
.cart-line-del { background: none; border: none; color: var(--danger); cursor: pointer; font-size: 0.9rem; flex-shrink: 0; }
.cart-cupon { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }

/* Oculta el botón "Filtrar" desde el CSS sólo en las barras .filters sin
   campo de texto (las que se envían solas al cambiar un select), evitando
   el parpadeo antes de que cargue el JS. Donde hay buscador el botón se
   queda visible: es la única forma de enviar con el ratón (D-7). Misma
   condición que usa initAutoFiltros() (oculta cuando !textos.length), con
   input[name="q"] incluido en ambos lados para que no se desalineen. */
.filters:not(:has(input[type="text"], input[type="search"], input[name="q"])) .form-group:has(> [type="submit"]) { display: none; }

/* ===== Facturación repetible (form de producto) ===== */
.factu-sep { margin: 18px 0 12px; border: none; border-top: 1px dashed var(--border); }
.factu-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.factu-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.factu-row {
    display: grid;
    grid-template-columns: 1fr 0.85fr 1.2fr auto;
    gap: 8px;
    align-items: center;
}
.factu-del { color: var(--text-muted); }
.factu-del:hover { color: var(--danger, #ef4444); }
@media (max-width: 640px) {
    .factu-row { grid-template-columns: 1fr 1fr; }
}

.denom-row {
    display: grid;
    grid-template-columns: 0.8fr 1fr 1fr 1fr auto;
    gap: 8px;
    align-items: center;
}
@media (max-width: 640px) {
    .denom-row { grid-template-columns: 1fr 1fr; }
}

/* ===== Selector de categoría con alta rápida (modal de plataforma) ===== */
.plat-cat-row { display: flex; gap: 8px; align-items: center; }
.plat-cat-row .form-select { flex: 1; }
.plat-cat-nueva { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.plat-periodo { display: flex; gap: 6px; align-items: center; min-width: 150px; }
.plat-periodo .form-control { width: 70px; flex: none; }
.plat-periodo .form-select { flex: 1; }
.plat-cat-nueva .form-control { flex: 1; }

/* ===== Modal de guía de producto ===== */
.guia-logo-wrap { text-align: center; margin-bottom: 18px; }
.guia-logo { max-width: 160px; max-height: 160px; object-fit: contain; filter: drop-shadow(0 6px 14px rgba(0,0,0,.2)); }
#modalGuia h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 8px; font-size: 0.95rem; }
#modalGuia h4 i { color: var(--accent); }
.guia-text { line-height: 1.65; color: var(--text); margin-bottom: 18px; }
.guia-reglas {
    background: var(--accent-light);
    border-left: 3px solid var(--accent);
    padding: 12px 14px;
    border-radius: 8px;
}

/* ===== Tarjeta: línea de opción alterna (o por perfil / N disponibles) ===== */
.pcard-alt {
    font-size: 0.74rem;
    color: var(--text-muted);
    background: var(--bg-hover);
    border-radius: 8px;
    padding: 7px 10px;
}
.pcard-alt i { color: var(--accent); margin-right: 4px; }
.pcard-alt strong { color: var(--text); }

/* ===== Tarjeta: badges de beneficios (4K, N perfiles, Garantía, stock) ===== */
.pcard-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px;
}
.pcard-badge {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    background: var(--accent-light);
    border: 1px solid rgba(var(--accent-rgb), 0.3);
    border-radius: 999px;
    padding: 4px 10px;
    white-space: nowrap;
}
.pcard-badge--stock {
    color: var(--success);
    border-color: rgba(16, 185, 129, 0.3);
    background: var(--success-bg);
}
.pcard-badge--stock i { margin-right: 3px; }

/* ===== Botón de guía del producto en la tarjeta ===== */
.pcard-guide {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 16px;
    padding: 10px 14px;
    background: var(--accent-light);
    color: var(--accent);
    border: 1px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.pcard-guide i {
    font-size: 1.1rem;
}
.pcard-guide:hover {
    background: rgba(var(--accent-rgb), 0.2);
    border-color: rgba(var(--accent-rgb), 0.4);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
}

/* ===== Modal de compra (rediseño premium) ===== */
.buy-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 28px;
    align-items: stretch;
}
.buy-media {
    border-radius: 16px;
    /* Cuadrado y fijo arriba: antes se estiraba a todo el alto del formulario
       y el logo quedaba chico, perdido en medio de un panel vacío. */
    aspect-ratio: 1 / 1;
    align-self: start;
    position: sticky;
    top: 0;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, var(--bg-hover), var(--bg-card));
    border: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 20px rgba(0,0,0,0.1), 0 8px 24px rgba(0,0,0,0.15);
    overflow: hidden;
    padding: 24px;
    position: relative;
}
.buy-media::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.15) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0.8;
}
.buy-media img {
    /* Se agranda aunque el archivo sea chico: ocupa el panel. */
    width: 78%;
    height: 78%;
    object-fit: contain;
    border-radius: 18%;
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.4));
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    position: relative;
    z-index: 1;
}
.buy-media:hover img {
    transform: scale(1.08) rotate(-1deg);
}
.buy-plat { margin: 0 0 6px; font-size: 1.4rem; font-weight: 800; letter-spacing: -0.01em; color: var(--text); }
#dMeta { font-size: 0.85rem; font-weight: 500; }

.buy-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 20px; }
.buy-opt {
    text-align: left;
    /* Es un <button>: sin esto toma el color del navegador (negro) y en
       tema oscuro "Cliente", "Revendedor", "Un perfil"... no se leían. */
    color: var(--text);
    font-family: inherit;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.buy-opt::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 14px;
    border: 2px solid var(--accent);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
}
.buy-opt:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}
.buy-opt.active {
    background: linear-gradient(135deg, var(--accent-light), transparent);
    border-color: transparent;
}
.buy-opt.active::after { opacity: 1; }
.buy-opt-top { font-weight: 700; font-size: 0.85rem; display: flex; align-items: center; gap: 8px; }
.buy-opt-top i { color: var(--accent); font-size: 1rem; }
.buy-opt-price { font-size: 1.15rem; font-weight: 800; color: var(--text); margin: 6px 0 2px; }
.buy-opt-sub { font-size: 0.72rem; color: var(--text-muted); font-weight: 500; }

.buy-price-box {
    background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.08), rgba(var(--accent-rgb), 0.01));
    border-left: 4px solid var(--accent);
    border-radius: 12px;
    padding: 16px 20px;
    margin-top: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    position: relative;
    overflow: hidden;
}
.buy-price-box::before {
    content: '';
    position: absolute;
    top: -20px; right: -20px; width: 60px; height: 60px;
    background: radial-gradient(circle, var(--accent-light) 0%, transparent 70%);
    opacity: 0.5;
}
.buy-price { font-size: 1.8rem; font-weight: 900; color: var(--accent); letter-spacing: -0.03em; margin: 4px 0 2px; }

.buy-dates { display: flex; gap: 32px; margin-top: 20px; padding: 12px 16px; background: var(--bg-hover); border-radius: 10px; }
.buy-dates > div { display: flex; flex-direction: column; gap: 4px; }
.buy-dates .fs-xs { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; }

.buy-caract { margin-top: 24px; border-top: 1px dashed var(--border); padding-top: 20px; }
.buy-caract h4 { margin: 0 0 10px; font-size: 1.1rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.buy-caract h4::before { content: '\f05a'; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--accent); }
#dDescripcion { line-height: 1.6; font-size: 0.95rem; }

#dUrls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}
.url-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}
.url-btn i {
    color: var(--accent);
}
.url-btn:hover {
    background: var(--accent-light);
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.buy-modal .modal-footer {
    border-top: none;
    background: linear-gradient(to top, var(--bg-card), transparent);
    padding: 20px 24px 24px;
    gap: 12px;
}
/* Solo el tamano: el radio y la transicion los hereda de .btn (--radius-md
   y --transition-smooth) para que no cambien de aspecto dentro de un modal. */
.buy-modal .btn {
    padding: 12px 24px;
    font-size: 0.95rem;
    font-weight: 700;
}
.buy-modal .btn-secondary {
    background: var(--bg-hover);
    border: 1px solid var(--border);
    color: var(--text-muted);
}
.buy-modal .btn-secondary:hover:not(:disabled) {
    background: var(--border);
    color: var(--text);
    transform: translateY(-2px);
}
.buy-modal .btn-success {
    background: linear-gradient(135deg, #10b981, #059669);
    border: none;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.3);
}
.buy-modal .btn-success:hover:not(:disabled) {
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
    transform: translateY(-2px) scale(1.02);
    filter: brightness(1.1);
}

@media (max-width: 768px) {
    .buy-grid { grid-template-columns: 1fr; gap: 16px; }
    /* En el teléfono va arriba del formulario: una franja, no un cuadrado. */
    .buy-media { aspect-ratio: auto; height: 190px; position: static; padding: 16px; }
    .buy-media img { width: auto; height: 100%; max-width: 70%; }
    .buy-options { grid-template-columns: 1fr; }
}

/* ===== Modal de éxito de compra ===== */
.success-creds-box {
    background: linear-gradient(145deg, var(--bg-hover), var(--bg-card));
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 0 16px;
    margin-bottom: 20px;
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.05);
}
.cred-row {
    display: grid;
    grid-template-columns: 140px 1fr;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px dashed var(--border);
    gap: 12px;
}
.cred-row-last { border-bottom: none; }
.cred-label { color: var(--text-muted); font-size: 0.85rem; font-weight: 500; }
.cred-value { color: var(--text); font-size: 0.95rem; font-weight: 700; text-align: left; }

.success-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}
.success-actions .btn-primary {
    border-radius: var(--radius-md);
    padding: 10px 24px;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    border: none;
    font-weight: 600;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
    transition: var(--transition-smooth);
}
.success-actions .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--accent-rgb), 0.4);
}
.share-btns {
    display: flex;
    gap: 12px;
}
.share-btns .btn {
    border-radius: var(--radius-md);
    width: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    transition: var(--transition-smooth);
    border: none;
}
.share-btns .btn:hover:not(:disabled) {
    transform: translateY(-2px); 
    filter: brightness(1.1);
}

.success-balance {
    background: var(--bg-hover);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.95rem;
    color: var(--text-muted);
}
.success-balance strong { color: var(--info); font-size: 1.05rem; }

/* ---------------------------------------------------------------------
   BANCO DE LOGOS (alta de plataforma)
   --------------------------------------------------------------------- */
.logo-panel.is-oculto { display: none; }

.logo-banco-buscar { margin-bottom: 10px; }

.logo-banco-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 8px;
    max-height: 230px;
    overflow-y: auto;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
}

.logo-banco-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 8px 4px;
    border: 2px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: transparent;
    color: var(--text-muted);
    font-family: inherit;
    font-size: 0.6875rem;
    line-height: 1.2;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.logo-banco-item img { width: 38px; height: 38px; border-radius: 9px; }
.logo-banco-item span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.logo-banco-item:hover { background: var(--bg-hover); }
.logo-banco-item.is-elegido { border-color: var(--accent); background: var(--accent-light); color: var(--text); }
.logo-banco-item.is-oculto { display: none; }

/* Filtros de tienda */
.filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    align-items: end;
}
.filters .form-group { margin: 0; min-width: 160px; flex: 1; }
/* El campo de búsqueda libre necesita más aire que un select. */
.filters .form-group.filtro-busqueda { flex: 2; min-width: 220px; }

/* Grupo del botón de envío. En las barras con campo de texto (D-7) el botón
   debe seguir visible como única forma de buscar con el ratón; eso lo decide
   el CSS de arriba (:not(:has(...))) y, desde D-7, initAutoFiltros() lo
   refuerza poniendo display: '' por JS cuando detecta texto, para no
   depender sólo del CSS. Aquí sólo se evita que ese botón se estire como un
   select. El selector de clase cubre las pantallas que ya traían
   *-filtro-btn en el marcado; el :has() es el respaldo para las que no la
   traen (el wrapper se detecta por contener el botón de submit). Donde el
   navegador no soporte :has(), esa mitad no aplica: el botón vuelve a
   estirarse sólo en la pantalla sin *-filtro-btn ni flex:0 en línea,
   admin/productos.php (el .form-group del botón no tiene clase);
   reseller/guias.php usa rgu-filtro-btn desde D11e (antes
   guia-filtro-submit); el resto no se ve afectado. */
.filters .form-group[class*="-filtro-btn"],
.filters .form-group:has([type="submit"]) { flex: 0 0 auto; min-width: 0; }

/* Botón que pliega la barra de filtros. Lo inyecta initFiltrosColapsables(),
   así que vale para todas las páginas sin tocarlas una por una.
   La barra arranca plegada en todos lados (no solo en móvil):
   ocupa bastante alto y la mayoría de las veces se entra a la página a mirar
   la lista, no a filtrar. El contador avisa si hay algo aplicado. */
.filtros-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm, 8px);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.filtros-toggle:hover { border-color: var(--accent); }
.filtros-toggle-label { display: inline-flex; align-items: center; gap: 8px; }
.filtros-toggle-chevron { transition: transform var(--transition); font-size: 0.75rem; }
.filtros-toggle.is-abierto .filtros-toggle-chevron { transform: rotate(180deg); }
.filtros-toggle.is-abierto { margin-bottom: 14px; }
.filters.is-colapsado { display: none; }

.filtros-toggle-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: 4px;
    border-radius: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

/* Reportes: detalle y listado compartidos por admin/reseller */
.report-detail-card {
    position: relative;
    overflow: hidden;
    border-color: color-mix(in srgb, var(--border), var(--accent) 20%);
    background:
        radial-gradient(circle at top left, color-mix(in srgb, var(--accent), transparent 84%), transparent 30%),
        linear-gradient(180deg, color-mix(in srgb, var(--bg-card), var(--bg-hover) 34%), var(--bg-card));
}

.report-detail-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--warning), var(--accent), var(--success), var(--info));
}

.report-case-header {
    position: relative;
    align-items: flex-start;
    padding-top: 4px;
}

.report-case-header h3 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 1.35rem;
}

.report-case-header h3 i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent), var(--info));
    box-shadow: 0 12px 28px color-mix(in srgb, var(--accent), transparent 70%);
}

.report-detail-grid {
    display: grid;
    grid-template-columns: minmax(420px, .95fr) minmax(480px, 1.05fr);
    gap: 22px;
    align-items: start;
}

.report-detail-grid > div {
    min-width: 0;
}

.report-detail-grid > div:first-child {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    background: color-mix(in srgb, var(--bg-card), var(--bg-hover) 38%);
}

.report-detail-grid h4 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 0;
}

.report-facts-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.report-facts-list li {
    position: relative;
    min-height: 52px;
    padding: 10px 12px 10px 46px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg);
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.report-facts-list li i {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 24px !important;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 7px;
    background: var(--bg-hover);
}

.report-facts-list li strong {
    display: block;
    margin-bottom: 2px;
    color: var(--text-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.report-note {
    min-height: 66px;
    border: 1px solid var(--border) !important;
    border-radius: 8px !important;
    background:
        linear-gradient(180deg, color-mix(in srgb, var(--bg), var(--bg-hover) 32%), var(--bg)) !important;
    color: var(--text);
    padding: 16px !important;
    margin-top: 10px !important;
    line-height: 1.65;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}

.report-evidence-column {
    display: contents;
}

.report-block-shot {
    grid-column: 1;
    grid-row: 2;
}

.report-block-notes {
    grid-column: 2;
    grid-row: 1;
}

.report-evidence-column .report-replacement {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0 !important;
}

.report-evidence-column > .alert {
    grid-column: 2;
    margin-top: 0 !important;
}

.report-block {
    margin-top: 0 !important;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    background: color-mix(in srgb, var(--bg-card), var(--bg-hover) 38%);
}

.report-block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: var(--heading-color);
    font-size: .92rem;
}

.report-block-title i {
    width: 28px !important;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: color-mix(in srgb, currentColor, transparent 86%);
}

.report-shot-frame {
    position: relative;
    width: 100%;
    max-width: 100%;
    padding: 10px;
    border: 1px solid color-mix(in srgb, var(--border), var(--accent) 25%);
    border-radius: 8px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.06), transparent),
        #070b16;
    box-shadow: 0 20px 42px rgba(0, 0, 0, .24);
    overflow: hidden;
}

.report-shot {
    display: block;
    width: 100%;
    max-height: 330px !important;
    object-fit: contain;
    background: #070b16;
    border-radius: 7px !important;
    border: 1px solid rgba(255,255,255,.12) !important;
    box-shadow: none;
    transition: transform var(--transition), filter var(--transition);
}

.report-shot-frame:hover .report-shot {
    transform: scale(1.01);
    filter: brightness(1.06);
}

.report-shot-hint {
    position: absolute;
    right: 18px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border-radius: 8px;
    background: rgba(7, 11, 22, .82);
    color: #fff;
    border: 1px solid rgba(255,255,255,.16);
    font-size: .72rem;
    font-weight: 700;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity var(--transition), transform var(--transition);
}

.report-shot-frame:hover .report-shot-hint {
    opacity: 1;
    transform: translateY(0);
}

.report-empty-shot {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 92px;
    padding: 16px;
    border: 1px dashed color-mix(in srgb, var(--border), var(--text-muted) 30%);
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg), var(--bg-hover) 40%);
    color: var(--text-muted);
    font-size: .84rem;
}

.report-empty-shot i {
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--bg-hover);
    color: var(--accent);
    font-size: 1.1rem;
}

.report-replacement {
    border-radius: 8px !important;
    border-color: color-mix(in srgb, var(--info), var(--border) 18%) !important;
    background:
        radial-gradient(circle at top right, color-mix(in srgb, var(--success), transparent 78%), transparent 38%),
        linear-gradient(135deg, color-mix(in srgb, var(--info), transparent 82%), color-mix(in srgb, var(--accent), transparent 90%)) !important;
    padding: 18px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}

.report-replacement h5 {
    font-size: 1rem !important;
    margin-bottom: 14px !important;
    color: #6aa7ff !important;
}

.report-replacement ul {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    line-height: 1.45 !important;
}

.report-replacement li {
    position: relative;
    min-width: 0;
    min-height: 62px;
    padding: 12px 12px 12px 46px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 8px;
    background: rgba(8, 13, 28, .2);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.report-replacement li i {
    position: absolute;
    left: 12px;
    top: 14px;
    width: 24px !important;
    text-align: center;
}

.report-replacement li strong {
    display: block;
    margin-bottom: 6px;
    color: color-mix(in srgb, var(--text-muted), #fff 10%) !important;
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.report-replacement li span {
    color: var(--text) !important;
    overflow-wrap: anywhere;
}

.report-list-card {
    overflow: hidden;
}

.report-list-card > h3 {
    margin-top: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.report-list-card .table-wrap {
    border: 1px solid var(--border);
    border-radius: 8px;
    overflow: auto;
}

.report-list-card .table {
    min-width: 860px;
}

.report-list-card .table tbody tr {
    transition: background var(--transition), transform var(--transition);
}

.report-list-card .table tbody tr:hover {
    background: color-mix(in srgb, var(--accent), transparent 93%);
}

.report-list-card img {
    border: 1px solid var(--border);
}

/* ===================================================================
   MODAL DE DETALLE DE REPORTE (rpm-*) — compartido entre admin y reseller
   =================================================================== */
.rpm-modal { max-width: 1060px; background: var(--bg-card); padding: 0; overflow: hidden; }
/* Modal de detalle compacto: para fichas de un solo registro sin listas
   anexas (ej. detalle de venta), donde el ancho completo de .rpm-modal
   deja demasiado aire vacío entre columnas cortas. */
.rpm-modal-sm { max-width: 620px; }
/* Un modal de detalle (ficha de cliente/reporte/cuenta madre/proveedor/
   plataforma) puede tener sus propios sub-modales (editar, reemplazar...).
   Todos los .modal-backdrop comparten el mismo z-index base, así que sin
   esto el que quedara arriba dependía del orden en el HTML — a veces el
   sub-modal terminaba abriendo detrás. Bajar el z-index del contenedor
   de detalle un nivel garantiza que cualquier otro modal quede siempre
   encima, sin importar el orden en que aparezcan en el documento. */
.rpm-detail-backdrop { z-index: 999; }

/* Fila de acciones del header de un modal de detalle: separa cada botón
   (antes quedaban pegados) y aísla el cierre (X) con una línea divisoria. */
.rpm-header-actions { display: flex; align-items: center; gap: 8px; }
.rpm-header-actions .btn-close { margin-left: 6px; }
.cli-avatar {
    width: 46px; height: 46px; border-radius: 50%; flex-shrink: 0;
    background: var(--accent-light); color: var(--accent);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 1.2rem;
}
.cli-modal .rpm-header-title { gap: 8px; }
.cli-modal-body { grid-template-columns: 1fr !important; }
.rpm-header {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
    padding: 20px 24px; border-bottom: 1px solid var(--border);
}
.rpm-header-title { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; }
.rpm-header-title i { color: var(--accent); }
.rpm-header-sub { margin-top: 6px; font-size: 0.8rem; color: var(--text-muted); }
.rpm-header .btn-close { flex-shrink: 0; }

.rpm-body {
    display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
    padding: 20px 24px; max-height: 65vh; overflow-y: auto; overflow-x: hidden;
    overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
/* Una columna 1fr no se encoge por debajo de su contenido más ancho: una
   tabla dentro de la ficha (p.ej. "Cuentas de esta plataforma") ensanchaba
   todo el cuerpo y en el teléfono no había forma de ver ni desplazar el
   resto. Con min-width:0 la tabla se desplaza dentro de su .table-wrap. */
.rpm-body > *, .rpm-grid2 > *, .rpm-sub > div:last-child { min-width: 0; }
.rpm-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.rpm-card { background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.rpm-card-accent { border-color: rgba(var(--accent-rgb), 0.35); background: rgba(var(--accent-rgb), 0.06); }
.rpm-card-title { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; margin-bottom: 12px; }
.rpm-card-title i { color: var(--accent); }

.rpm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.rpm-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.rpm-box-wide { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.rpm-box-title { font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }

.rpm-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 10px; }
.rpm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.rpm-sub { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.rpm-sub-icon {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px;
    display: grid; place-items: center; font-size: 0.85rem; color: #fff;
}
.rpm-ic-a { background: linear-gradient(135deg, #ef4444, #b91c1c); }
.rpm-ic-b { background: linear-gradient(135deg, #3b82f6, #1d4ed8); }
.rpm-ic-c { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.rpm-ic-d { background: linear-gradient(135deg, #8b5cf6, #6d28d9); }
.rpm-ic-e { background: linear-gradient(135deg, #10b981, #047857); }
.rpm-ic-f { background: linear-gradient(135deg, #f59e0b, #b45309); }
.rpm-ic-danger { background: linear-gradient(135deg, #ef4444, #b91c1c); }

.rpm-sub-k { font-size: 0.68rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }
.rpm-sub-v { font-size: 0.85rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.rpm-sub-sub { font-size: 0.72rem; color: var(--text-muted); }

/* Datos que se copian de a uno (correo, token de afiliado). El min-width:0
   deja que el token largo se corte en vez de estirar la celda. */
.rpm-sub-body { min-width: 0; }
.rpm-sub-copiable { display: flex; align-items: center; gap: 6px; }
.rpm-sub-copiable > span,
.rpm-sub-copiable > code { min-width: 0; overflow-wrap: anywhere; }
.rpm-copy {
    flex-shrink: 0;
    width: 24px; height: 24px;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 0.72rem;
    cursor: pointer;
    transition: color var(--transition), border-color var(--transition);
}
.rpm-copy:hover { color: var(--accent); border-color: var(--accent); }

/* Credenciales (correo/contraseña) dentro de un .rpm-sub-v: siempre en
   texto plano (nunca oculto con puntos) + botón de copiar. */
.rpm-copy-row { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; }
.rpm-copy-btn {
    flex-shrink: 0; width: 24px; height: 24px; border: none; border-radius: 6px;
    background: var(--bg-hover); color: var(--text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; font-size: 0.68rem;
}
.rpm-copy-btn:hover { background: var(--accent-light); color: var(--accent); }

.rpm-shot { position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); }
.rpm-shot img { display: block; width: 100%; max-height: 260px; object-fit: cover; cursor: zoom-in; }
.rpm-shot-btn {
    position: absolute; right: 10px; bottom: 10px; border: none; border-radius: 8px;
    padding: 6px 12px; font-size: 0.78rem; font-weight: 600; cursor: pointer;
    background: rgba(15, 23, 42, 0.75); color: #fff; backdrop-filter: blur(4px);
}
.rpm-empty { padding: 20px; text-align: center; color: var(--text-muted); font-size: 0.85rem; }

/* Barra de formato para textareas (negrita/cursiva/tachado/código/enlace/
   lista/cita) — compartida, ver initMdToolbars() en main.js. */
.md-toolbar, .rpm-obs-toolbar { display: flex; gap: 4px; margin-bottom: 8px; }
.md-toolbar button, .rpm-obs-toolbar button {
    width: 28px; height: 28px; border: 1px solid var(--border); background: var(--bg-card);
    border-radius: 6px; color: var(--text-muted); font-size: 0.78rem; font-weight: 700; cursor: pointer;
}
.md-toolbar button:hover, .rpm-obs-toolbar button:hover { background: var(--bg-hover); color: var(--text); }
.rpm-obs-textarea {
    width: 100%; min-height: 140px; resize: vertical; background: var(--bg-card);
    border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
    color: var(--text); font-size: 0.85rem; font-family: inherit; line-height: 1.5;
}
.rpm-obs-static {
    white-space: pre-line; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 10px 12px; font-size: 0.85rem; line-height: 1.5; color: var(--text);
    min-height: 60px;
}

.rpm-history summary { cursor: pointer; list-style: none; }
.rpm-history summary::-webkit-details-marker { display: none; }

.rpm-secondary-actions { display: flex; gap: 8px; flex-wrap: wrap; padding: 0 24px 12px; }

.rpm-footer {
    display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
    padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-card);
}

@media (max-width: 760px) {
    .rpm-body { grid-template-columns: 1fr; max-height: none; }
    .rpm-row, .rpm-grid4, .rpm-grid2 { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .rpm-header { padding: 14px 16px; }
    .rpm-header-title { font-size: 1rem; flex-wrap: wrap; }
    .rpm-header-sub { font-size: 0.75rem; }
    .rpm-header-actions { gap: 6px; }
    .rpm-header-actions .btn-icon { width: 32px; height: 32px; }
    .rpm-body { padding: 14px 16px; gap: 12px; max-height: calc(100dvh - 150px); }
    .rpm-card { padding: 12px; }
    .rpm-secondary-actions { padding: 0 16px 10px; }
    .rpm-footer { padding: 12px 16px; flex-wrap: wrap; }
    .rpm-footer .btn { flex: 1 1 auto; }
}

/* Fila de tabla clickeable: abre el detalle al hacer clic en cualquier
   parte que no sea un botón/link/form — ver initRowClickable() en main.js */
.rp-row-clickable { cursor: pointer; }
.rp-row-clickable:hover { background: var(--bg-hover); }

/* =====================================================================
   SELECTOR "REEMPLAZAR CUENTA" — buscador de cuenta/perfil disponible,
   con logo, agrupado por plataforma. Componente único reusado en
   reportes, clientes, ventas y revendedores (antes cada página traía su
   propia copia del buscador, sin logos y con pequeñas diferencias entre
   sí). Ver rpkPicker() en includes/functions.php y initReemplazoPickers()
   en main.js. Todos los colores salen de variables de tema a propósito:
   nunca un color fijo, para que se lea igual en claro/oscuro/cyber/matrix.
   ===================================================================== */
.rpk-controls { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.rpk-controls .form-group { flex: 1; min-width: 140px; margin-bottom: 0; }
.rpk-selected {
    display: flex; align-items: center; gap: 8px;
    background: var(--accent-light); border: 1px solid var(--accent);
    border-radius: 8px; padding: 8px 10px; font-size: .8rem; margin-bottom: 10px; color: var(--text);
}
.rpk-selected[hidden] { display: none; }   /* su display:flex le ganaba al atributo hidden */
.rpk-selected i { color: var(--accent); }
.rpk-list { max-height: 260px; overflow-y: auto; border: 1px solid var(--border); border-radius: 8px; }
.rpk-group {
    position: sticky; top: 0; background: var(--bg-hover); font-size: .68rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 5px 10px;
}
.rpk-item {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    background: none; border: none; border-bottom: 1px solid var(--border);
    padding: 8px 10px; cursor: pointer; color: var(--text);
}
.rpk-item:hover { background: var(--bg-hover); }
.rpk-item.active { background: var(--accent-light); }
.rpk-logo {
    flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; object-fit: cover;
    display: grid; place-items: center; font-size: .8rem; font-weight: 700; color: #fff;
}
.rpk-logo-ph { background: hsl(var(--ph, 234) 60% 40%); }
.rpk-item-body { flex: 1; min-width: 0; }
.rpk-item-main { font-size: .82rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.rpk-item-sub { font-size: .68rem; color: var(--text-muted); }
.rpk-pin { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-weight: 700; color: var(--text); }
.rpk-id { display: inline-block; font-size: .68rem; font-weight: 700; color: var(--accent); background: var(--bg-hover); padding: 0 5px; border-radius: 4px; }
.rpk-item-price { flex-shrink: 0; font-size: .78rem; font-weight: 700; color: var(--accent); white-space: nowrap; }
.rpk-item-check { flex-shrink: 0; color: var(--accent); }
.rpk-empty { padding: 14px; text-align: center; color: var(--text-muted); font-size: .8rem; }

@media (max-width: 640px) {
    .rpk-controls { flex-direction: column; }
}

/* Buscador con autocompletado (selector de cuenta/perfil) — compartido */
.vm-selected { background:var(--accent-light); border:1px solid var(--accent); border-radius:8px; padding:8px 10px; font-size:.8rem; margin-bottom:10px; }
.vm-list { max-height:220px; overflow-y:auto; border:1px solid var(--border); border-radius:8px; }
.vm-group { position:sticky; top:0; background:var(--bg-hover); font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); padding:5px 10px; }
.vm-item { display:flex; flex-direction:column; gap:1px; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid var(--border); padding:7px 10px; cursor:pointer; }
.vm-item:hover { background:var(--bg-hover); }
.vm-item.active { background:var(--accent-light); }
.vm-item-main { font-size:.82rem; font-weight:600; }
.vm-item-sub { font-size:.68rem; color:var(--text-muted); }
.vm-empty { padding:14px; text-align:center; color:var(--text-muted); font-size:.8rem; }

@media (max-width: 920px) {
    .report-detail-grid,
    .report-facts-list,
    .report-replacement ul {
        grid-template-columns: 1fr;
    }

    .report-block-shot,
    .report-block-notes,
    .report-evidence-column .report-replacement {
        grid-column: auto;
        grid-row: auto;
    }

    .report-case-header {
        align-items: stretch;
    }
}

/* Filtros de la tienda del revendedor: siempre visibles al hacer scroll,
   justo debajo del navbar sticky. */
.tienda-filtros-sticky {
    position: sticky;
    top: var(--navbar-h);
    z-index: 40;
}

/* ---------------------------------------------------------------------
   PÁGINAS DE AUTENTICACIÓN (login / register)
   --------------------------------------------------------------------- */
.auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, var(--bg) 0%, var(--bg-card) 100%);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 32px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 24px;
}
.auth-logo img { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: var(--radius-md); }
.auth-logo h1 { margin: 0 0 4px; font-size: 1.5rem; }
.auth-logo p  { margin: 0; color: var(--text-muted); font-size: 0.875rem; }

.auth-footer-link {
    text-align: center;
    margin-top: 16px;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   FOOTER DOBLE (toda la web)
   --------------------------------------------------------------------- */
.app-footer {
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    padding: 16px 24px;
    margin-top: auto;
}

/* El footer supo tener dos filas: el negocio arriba y el crédito abajo,
   separados por una línea punteada. Quedó una sola fila, así que .footer-business
   ya no lo usa nadie y el borde de .footer-creator era una raya suelta que
   además empujaba el texto hacia abajo y lo dejaba descentrado en la banda. */
.footer-creator {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.75rem;
}
.footer-creator strong { color: var(--accent); }

/* ---------------------------------------------------------------------
   UTILIDADES
   --------------------------------------------------------------------- */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--text-muted) !important; }
.text-success { color: var(--success); }
.text-danger  { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-accent  { color: var(--accent); }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fs-sm  { font-size: 0.8125rem; }
.fs-xs  { font-size: 0.75rem; }

.d-flex { display: flex; }
.d-grid { display: grid; }
.d-none { display: none !important; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; }

.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mb-0 { margin-bottom: 0; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }

.w-100 { width: 100%; }

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}
.page-header h1 { margin: 0; }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted);
}
.empty-state i { font-size: 3rem; opacity: 0.4; margin-bottom: 12px; }

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 992px) {
    .sidebar {
        transform: translateX(-100%);
        box-shadow: var(--shadow-lg);
    }
    .sidebar.active { transform: translateX(0); }

    .main { margin-left: 0; }

    .btn-menu { display: flex; }

    .user-name { display: none; }
}

@media (max-width: 640px) {
    .content { padding: 16px; }
    .navbar  { padding: 0 16px; }

    .stats-grid { grid-template-columns: 1fr 1fr; }

    .form-row { grid-template-columns: 1fr; }

    .modal { max-height: 100vh; border-radius: 0; }

    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .product-image { aspect-ratio: 1; }

    .toast-container { left: 16px; right: 16px; max-width: none; }
    .toast { transform: translateY(-100%); }
    .toast.show { transform: translateY(0); }

    /* El panel cuelga de .user-menu con right:0, y como la campana está a
       unos 100px del borde, un panel de casi el ancho de la pantalla se salía
       por la izquierda. Acá se despega de la campana y ocupa el ancho entero.

       Ojo con el "fixed": .navbar tiene backdrop-filter, y eso la convierte en
       el bloque contenedor de sus descendientes fijos. O sea que estas medidas
       se cuentan desde la navbar, no desde el viewport. Da igual porque la
       navbar es sticky, arranca en top:0 y ocupa todo el ancho: las dos
       lecturas caen en el mismo lugar. Las alturas van en dvh justamente para
       no depender de eso. */
    .notif-panel {
        position: fixed;
        top: calc(var(--navbar-h) + 8px);
        left: 16px;
        right: 16px;
        width: auto;
        max-width: none;
        max-height: calc(100dvh - var(--navbar-h) - 32px);
    }

    /* Cada notificación era una fila horizontal con la columna de botones
       fija: en móvil el texto quedaba aplastado en una tira de pocos píxeles
       y caía una palabra por renglón. Acá se apila. */
    .notif-fila { flex-wrap: wrap; align-items: flex-start; }
    /* base 0 (no auto): así el texto se encoge al lado del icono en vez de
       empujarlo a un renglón propio. */
    .notif-fila > .flex-1 { flex: 1 1 0; min-width: 0; }
    /* width:100% obliga a los botones a bajar a su propio renglón, en vez de
       robarle ancho al texto. */
    .notif-fila-acciones { width: 100%; justify-content: flex-end; }

    /* La barra no cabe entera en un móvil: el acceso externo queda en solo
       icono (el texto sigue en el title) y el título se recorta. */
    .navbar-left  { gap: 10px; min-width: 0; }
    .navbar-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .navbar-right { gap: 8px; flex-shrink: 0; }
    .navbar-ext-texto { display: none; }
    .navbar-ext { width: 38px; height: 38px; padding: 0; justify-content: center; }
}

@media (max-width: 420px) {
    .stats-grid   { grid-template-columns: 1fr; }
    .product-grid { grid-template-columns: 1fr; }
    h1 { font-size: 1.5rem; }
}

/* ---------------------------------------------------------------------
   PRINT
   --------------------------------------------------------------------- */
@media print {
    .sidebar, .navbar, .app-footer, .btn, .actions { display: none !important; }
    .main { margin-left: 0; }
    body { background: white; color: black; }
}

/* =====================================================================
   UI ENHANCEMENTS — Capa de diseño premium
   Mejoras visuales progresivas sobre el sistema base.
   Retrocompatible: solo agrega / sobreescribe por cascada.
   ===================================================================== */

/* ----- Variables adicionales ----- */
:root {
    --gradient-accent:  linear-gradient(135deg, var(--accent) 0%, #8b5cf6 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    --gradient-danger:  linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    --gradient-info:    linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    --shadow-accent:    0 6px 24px rgba(var(--accent-rgb), 0.4);
    --shadow-success:   0 6px 24px rgba(16,  185, 129, 0.35);
    --shadow-danger:    0 6px 24px rgba(239,  68,  68, 0.35);
    --shadow-warning:   0 6px 24px rgba(245, 158,  11, 0.35);
    --shadow-info:      0 6px 24px rgba( 59, 130, 246, 0.35);
    --transition-smooth: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================
   SIDEBAR PREMIUM
   ============================================================ */
.sidebar {
    background: linear-gradient(180deg, #0d1526 0%, #111827 45%, #0f172a 100%);
    border-right: 1px solid rgba(var(--accent-rgb), 0.12);
    box-shadow: 4px 0 32px rgba(0, 0, 0, 0.4);
}

[data-mode="light"] .sidebar {
    background: linear-gradient(180deg, #1e293b 0%, #1a2234 55%, #111827 100%);
    border-right-color: rgba(var(--accent-rgb), 0.18);
}

/* Header del sidebar */
.sidebar-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(var(--accent-rgb), 0.07);
    padding: 22px 20px;
    position: relative;
    overflow: hidden;
}

.sidebar-header::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: radial-gradient(circle, rgba(var(--accent-rgb), 0.22) 0%, transparent 65%);
    pointer-events: none;
}

.sidebar-header h2 {
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    margin: 0;
}

/* Secciones nav */
.sidebar-nav .nav-section {
    color: rgba(255, 255, 255, 0.52);
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    padding: 20px 16px 6px;
    text-transform: uppercase;
}

/* Ítems de nav */
.sidebar-nav a {
    color: rgba(255, 255, 255, 0.58);
    border-radius: 10px;
    padding: 10px 14px;
    gap: 12px;
    position: relative;
    overflow: hidden;
    transition: all var(--transition-smooth);
}

.sidebar-nav a i {
    width: 20px;
    text-align: center;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.sidebar-nav a:hover {
    background: rgba(255, 255, 255, 0.07);
    color: #fff;
    transform: translateX(3px);
}

.sidebar-nav a:hover i {
    transform: scale(1.15);
    color: var(--accent);
}

/* Estado activo con barra izquierda animada */
.sidebar-nav a.active {
    background: linear-gradient(90deg,
        rgba(var(--accent-rgb), 0.28) 0%,
        rgba(var(--accent-rgb), 0.06) 100%);
    color: #fff;
    font-weight: 600;
}

.sidebar-nav a.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 60%;
    background: var(--gradient-accent);
    border-radius: 0 4px 4px 0;
    box-shadow: 2px 0 8px rgba(var(--accent-rgb), 0.5);
}

.sidebar-nav a.active i {
    color: var(--accent);
}

/* Widget de saldo en sidebar reseller — mismo look que las demás tarjetas
   (fondo sólido del tema, texto var(--text)/var(--text-muted)), en vez del
   degradado con texto blanco fijo que se volvía ilegible en modo claro. */
.saldo-widget {
    margin: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
}

.saldo-widget-icon {
    flex-shrink: 0;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: var(--accent-light);
    color: var(--accent);
    font-size: 1.05rem;
}

.saldo-widget-body { min-width: 0; flex: 1; }
.saldo-widget-monto { font-size: 1.35rem; line-height: 1.2; }

/* ============================================================
   NAVBAR GLASSMORPHISM
   ============================================================ */
.navbar {
    backdrop-filter: blur(16px) saturate(160%);
    -webkit-backdrop-filter: blur(16px) saturate(160%);
}

[data-mode="dark"] .navbar,
:root:not([data-mode]) .navbar {
    background: rgba(15, 23, 42, 0.72);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 6px 24px rgba(0,0,0,0.25);
}

[data-mode="light"] .navbar {
    background: rgba(255, 255, 255, 0.82);
    border-bottom: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 1px 0 rgba(0,0,0,0.04), 0 4px 16px rgba(0,0,0,0.06);
}

/* ============================================================
   STAT CARDS ELEVADAS
   ============================================================ */
.stat-card {
    border-radius: 18px;
    padding: 22px;
    position: relative;
    overflow: hidden;
    transition: transform var(--transition-smooth), box-shadow var(--transition-smooth);
}

/* Borde superior de acento */
.stat-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    transition: opacity 0.3s ease;
}

.stat-card:hover {
    transform: translateY(-4px);
}

/* Sombras de color por tipo */
.stat-card.success { box-shadow: 0 2px 12px rgba(16, 185, 129, 0.10); }
.stat-card.danger  { box-shadow: 0 2px 12px rgba(239,  68,  68, 0.10); }
.stat-card.warning { box-shadow: 0 2px 12px rgba(245, 158,  11, 0.10); }
.stat-card.info    { box-shadow: 0 2px 12px rgba( 59, 130, 246, 0.10); }

.stat-card.success:hover { box-shadow: var(--shadow-success); }
.stat-card.danger:hover  { box-shadow: var(--shadow-danger); }
.stat-card.warning:hover { box-shadow: var(--shadow-warning); }
.stat-card.info:hover    { box-shadow: var(--shadow-info); }

.stat-card.success::after { background: var(--gradient-success); }
.stat-card.danger::after  { background: var(--gradient-danger); }
.stat-card.warning::after { background: var(--gradient-warning); }
.stat-card.info::after    { background: var(--gradient-info); }

/* Íconos con gradiente */
.stat-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    font-size: 1.3rem;
    transition: transform 0.2s ease;
}

.stat-card:hover .stat-icon { transform: scale(1.08); }

.stat-card.success .stat-icon { background: var(--gradient-success); color: #fff; box-shadow: 0 4px 12px rgba(16,185,129,0.35); }
.stat-card.danger  .stat-icon { background: var(--gradient-danger);  color: #fff; box-shadow: 0 4px 12px rgba(239,68,68,0.35); }
.stat-card.warning .stat-icon { background: var(--gradient-warning); color: #fff; box-shadow: 0 4px 12px rgba(245,158,11,0.35); }
.stat-card.info    .stat-icon { background: var(--gradient-info);    color: #fff; box-shadow: 0 4px 12px rgba(59,130,246,0.35); }

/* Número de stat más prominente */
.stat-value {
    font-size: 1.8rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1;
    margin: 8px 0 4px;
}

/* Animación de entrada en cascada */
@keyframes stat-fade-up {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

.stats-grid .stat-card {
    animation: stat-fade-up 0.5s ease backwards;
}
.stats-grid .stat-card:nth-child(1) { animation-delay: 0.04s; }
.stats-grid .stat-card:nth-child(2) { animation-delay: 0.10s; }
.stats-grid .stat-card:nth-child(3) { animation-delay: 0.16s; }
.stats-grid .stat-card:nth-child(4) { animation-delay: 0.22s; }

/* ============================================================
   RIPPLE DE BOTONES
   ============================================================ */
.btn-ripple-el {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.38);
    transform: scale(0);
    pointer-events: none;
    animation: btn-ripple 0.55s linear forwards;
}

@keyframes btn-ripple {
    to { transform: scale(4); opacity: 0; }
}

/* ============================================================
   TARJETAS MEJORADAS
   ============================================================ */
.card {
    border-radius: 16px;
    transition: box-shadow var(--transition-smooth), border-color var(--transition-smooth);
}
.card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--border-strong);
}

/* ============================================================
   TABLAS MEJORADAS
   ============================================================ */
.table tbody tr {
    transition: background var(--transition), box-shadow 0.15s ease;
    position: relative;
}
.table tbody tr:nth-child(even) {
    background: rgba(var(--accent-rgb), 0.025);
}
.table tbody tr:hover {
    background: var(--bg-hover);
    box-shadow: inset 3px 0 0 var(--accent);
}

/* ============================================================
   BADGES CON PULSO para alertas críticas
   ============================================================ */
@keyframes badge-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5); }
    50%      { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}
.badge-danger.pulse {
    animation: badge-pulse 2s ease-in-out infinite;
}

@keyframes badge-pop {
    0%   { transform: scale(0.4); }
    70%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.notif-badge:not(.hidden) {
    animation: badge-pop 0.35s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

/* ============================================================
   TOASTS CON BARRA DE PROGRESO
   ============================================================ */
.toast {
    border-radius: 14px;
    border-left: none;
    border-top: 3px solid var(--accent);
    overflow: hidden;
    position: relative;
}
.toast.success { border-top-color: var(--success); }
.toast.error   { border-top-color: var(--danger); }
.toast.warning { border-top-color: var(--warning); }
.toast.info    { border-top-color: var(--info); }

.toast-progress {
    position: absolute;
    bottom: 0; left: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    animation: toast-progress-anim linear forwards;
}
.toast.success .toast-progress { background: var(--success); opacity: 0.55; }
.toast.error   .toast-progress { background: var(--danger);  opacity: 0.55; }
.toast.warning .toast-progress { background: var(--warning); opacity: 0.55; }
.toast.info    .toast-progress { background: var(--info);    opacity: 0.55; }

@keyframes toast-progress-anim {
    from { width: 100%; }
    to   { width: 0%;   }
}

/* ============================================================
   LOGIN PAGE ANIMADO
   ============================================================ */
.auth-page {
    background: var(--bg);
    position: relative;
    overflow: hidden;
}

/* Fondo con blobs animados */
.auth-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.auth-bg::before {
    content: '';
    position: absolute;
    top: -35%; left: -15%;
    width: 65%; height: 65%;
    background: radial-gradient(circle,
        rgba(var(--accent-rgb), 0.20) 0%,
        rgba(139, 92, 246, 0.08) 40%,
        transparent 65%);
    animation: blob-drift-1 9s ease-in-out infinite alternate;
}

.auth-bg::after {
    content: '';
    position: absolute;
    bottom: -30%; right: -10%;
    width: 60%; height: 60%;
    background: radial-gradient(circle,
        rgba(139,  92, 246, 0.16) 0%,
        rgba( 59, 130, 246, 0.08) 40%,
        transparent 65%);
    animation: blob-drift-2 12s ease-in-out infinite alternate;
}

@keyframes blob-drift-1 {
    from { transform: translate(0,   0  ) scale(1);    }
    to   { transform: translate(7%,  5% ) scale(1.14); }
}
@keyframes blob-drift-2 {
    from { transform: translate(0,   0  ) scale(1);    }
    to   { transform: translate(-5%, -7%) scale(1.10); }
}

/* Auth card con glassmorphism */
.auth-card {
    position: relative;
    z-index: 1;
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border-radius: 22px;
    padding: 38px;
    box-shadow: 0 8px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255,255,255,0.05);
}

[data-mode="dark"] .auth-card,
:root:not([data-mode]) .auth-card {
    background: rgba(30, 41, 59, 0.88);
    border-color: rgba(255, 255, 255, 0.07);
}

[data-mode="light"] .auth-card {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 8px 48px rgba(0,0,0,0.12), 0 0 0 1px rgba(0,0,0,0.05);
}

/* El footer de login/registro va en flujo normal (no fijo) para que el card
   no se solape con él: layout en columna y card centrado con margin auto. */
.auth-page {
    flex-direction: column;
}
.auth-card {
    margin: auto;
}
.auth-page .app-footer {
    position: static !important;   /* anula el position:fixed inline */
    align-self: stretch;
    z-index: 1;
}

/* Título con gradiente */
.auth-logo h1 {
    font-size: 1.65rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin: 0 0 6px;
}

/* ============================================================
   INPUTS MEJORADOS
   ============================================================ */
.form-control, .form-select, textarea.form-control {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-control:focus, .form-select:focus, textarea.form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.18), 0 1px 4px rgba(0,0,0,0.08);
}

/* ============================================================
   MODALES MEJORADOS
   ============================================================ */
.modal {
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}
[data-mode="dark"] .modal,
:root:not([data-mode]) .modal {
    box-shadow: 0 24px 64px rgba(0,0,0,0.70),
                0 0 0 1px rgba(255,255,255,0.04);
}

/* ============================================================
   AVATAR CON GRADIENTE
   ============================================================ */
.avatar {
    background: var(--gradient-accent);
}

/* ============================================================
   PAGE HEADER MEJORADO
   ============================================================ */
.page-header h1 {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.025em;
}

/* ============================================================
   SCROLLBAR REFINADA
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--border-strong);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   PRODUCT CARD hover mejorado
   ============================================================ */
.product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.2), var(--shadow-accent);
    border-color: rgba(var(--accent-rgb), 0.5);
}

/* ============================================================
   ESTADO DEL SISTEMA (admin/sistema.php)
   ============================================================ */
.sys-mb { margin-bottom: 20px; }
.sys-mt { margin-top: 20px; }

.sys-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    align-items: start;
    gap: 20px;
}

/* Respaldos */
.sys-backup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
    gap: 16px;
}
.sys-backup-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-hover);
}
.sys-backup-head { display: flex; align-items: center; gap: 12px; }
.sys-backup-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    font-size: 1.1rem;
}
.sys-icon-db  { background: var(--accent-light); color: var(--accent); }
.sys-icon-zip { background: var(--info-bg);      color: var(--info);   }
.sys-backup-btn { width: 100%; }

/* Diagnóstico */
.sys-check-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.sys-check-row:last-child { border-bottom: 0; }
.sys-ok  { color: var(--success); }
.sys-err { color: var(--danger); }
.sys-check-label { flex: 1; }
.sys-check-detail {
    color: var(--text-muted);
    font-size: 0.8125rem;
    max-width: 55%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: right;
}

/* Info rows (PHP / tablas) */
.sys-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
}
.sys-info-row:last-child { border-bottom: 0; }
.sys-info-label { color: var(--text-muted); }
.sys-info-value { font-weight: 600; }
.sys-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.sys-table-meta { display: inline-flex; align-items: center; gap: 8px; }

/* Ficha de instalación (Main / git) */
.lic-card { padding: 20px; }
.lic-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
.lic-id { display: flex; align-items: flex-start; gap: 14px; }
.lic-avatar {
    flex: 0 0 auto;
    width: 46px; height: 46px;
    display: grid; place-items: center;
    border-radius: var(--radius-md);
    background: var(--accent-light);
    color: var(--accent);
    font-size: 1.2rem;
}
.lic-badges { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-wrap: wrap; }
.lic-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.lic-chip--on { background: var(--success-bg); color: var(--success); }
.lic-chip--plan { background: var(--bg-hover); color: var(--text-muted); }
.lic-dot {
    width: 6px; height: 6px;
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 6px var(--success);
}
.lic-client { font-weight: 700; color: var(--text); }
.lic-domain { font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }
.lic-venc { text-align: right; }
.lic-venc-lbl { display: block; font-size: 0.72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .4px; }
.lic-venc-main { display: block; font-weight: 700; color: var(--success); font-size: 1rem; margin-top: 2px; }
.lic-venc-sub { display: block; font-size: 0.75rem; color: var(--text-muted); }
.lic-foot {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}
.lic-item { display: flex; flex-direction: column; gap: 3px; }
.lic-k { font-size: 0.75rem; color: var(--text-muted); }
.lic-v { font-weight: 600; color: var(--text); }
.lic-mono { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }

/* Limpieza de BD */
.sys-clean-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.sys-clean-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.sys-clean-item:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.sys-clean-item input { accent-color: var(--danger); }
.sys-clean-actions { display: flex; justify-content: flex-end; }

/* Buscador de plataformas/perfiles en el modal de promociones */
.promo-buscador { position: relative; margin-bottom: 10px; }
.promo-buscador i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--text-muted); pointer-events: none;
}
.promo-buscador .form-control { padding-left: 36px; }
.promo-item.is-oculto { display: none; }

/* ===== RANKING DE REVENDEDORES ===== */
.rk-pos,
.rk-medal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 34px;
    height: 28px;
    padding: 0 9px;
    border-radius: 999px;
    font-weight: 700;
    font-size: .82rem;
    line-height: 1;
}
.rk-pos {
    background: var(--bg-hover);
    color: var(--text-muted);
}
.rk-medal { color: #1b1b1b; }
.rk-medal-1 { background: linear-gradient(135deg, #ffd76e, #e8a800); }
.rk-medal-2 { background: linear-gradient(135deg, #e2e6ea, #a9b1b8); }
.rk-medal-3 { background: linear-gradient(135deg, #e8b083, #b9702f); color: #fff; }

/* =====================================================================
   PUBLICIDAD (anuncios en el panel del revendedor + admin)
   ===================================================================== */

/* --- Admin: tabla y formulario --------------------------------------- */
.ad-actions      { white-space: nowrap; }
.ad-inline       { display: inline; }
.ad-mb           { margin-bottom: 6px; }

.ad-thumb {
    width: 34px; height: 34px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    vertical-align: middle;
    margin-right: 8px;
}

.ad-img-actual        { margin-top: 10px; }
.ad-img-actual img    { max-width: 180px; border-radius: var(--radius-sm); display: block; margin-bottom: 6px; }

.ad-revendedores {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px;
}

.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 14px 6px 0;
    cursor: pointer;
    font-size: 0.9rem;
}

/* --- Banner arriba del contenido ------------------------------------- */
.ad-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius-md);
    position: relative;
}

.ad-banner-img   { width: 64px; height: 64px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.ad-banner-body  { flex: 1; min-width: 0; }
.ad-banner-title { margin: 0 0 2px; font-size: 1rem; }
.ad-banner-text  { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

.ad-close {
    background: none;
    border: 0;
    color: var(--text-muted);
    cursor: pointer;
    padding: 4px 6px;
    line-height: 1;
    border-radius: var(--radius-sm);
}
.ad-close:hover { color: var(--text); background: var(--bg-hover); }

/* --- Popup ------------------------------------------------------------ */
.ad-popup-body   { text-align: center; }
.ad-popup-img    { max-width: 100%; border-radius: var(--radius-sm); margin-bottom: 12px; }
.ad-popup-text   { margin: 0; color: var(--text-muted); }

/* --- Barra fija abajo -------------------------------------------------- */
.ad-barra {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 10px 16px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
}

.ad-barra-text { font-size: 0.9rem; color: var(--text-muted); }
.ad-barra-text strong { color: var(--text); }

/* --- Tarjeta en la tienda ---------------------------------------------- */
.ad-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 16px;
}

.ad-card {
    position: relative;
    background: var(--bg-card);
    border: 1px dashed var(--accent);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.ad-card-tag {
    position: absolute;
    top: 10px; right: 10px;
    background: var(--accent);
    color: #fff;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 8px;
    border-radius: 999px;
}

.ad-card-img   { width: 100%; height: 130px; object-fit: cover; }
.ad-card-body  { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.ad-card-title { margin: 0; font-size: 1rem; }
.ad-card-text  { margin: 0; color: var(--text-muted); font-size: 0.88rem; }

/* --- Móvil ------------------------------------------------------------- */
@media (max-width: 640px) {
    .ad-banner      { flex-wrap: wrap; }
    .ad-banner-img  { width: 48px; height: 48px; }
    .ad-barra       { flex-direction: column; gap: 8px; text-align: center; }
    .ad-barra-text  { font-size: 0.82rem; }
}

/* =====================================================================
   LANDING PÚBLICA (index.php con landing_activa = 1)
   ===================================================================== */
.lp-body {
    background: var(--bg);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.lp-wrap { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

.lp-nav {
    border-bottom: 1px solid var(--border);
    background: var(--bg-card);
    position: sticky; top: 0; z-index: 100;
}
.lp-nav-inner   { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.lp-brand       { display: flex; align-items: center; gap: 10px; }
.lp-logo        { width: 34px; height: 34px; object-fit: contain; border-radius: var(--radius-sm); }
.lp-brand-name  { font-weight: 700; font-size: 1.05rem; }
.lp-nav-actions { display: flex; gap: 8px; }

.lp-hero {
    padding: 96px 0 80px;
    text-align: center;
    background: linear-gradient(180deg, var(--bg-card), var(--bg));
    border-bottom: 1px solid var(--border);
}
.lp-hero-title { margin: 0 0 14px; font-size: 3rem; line-height: 1.1; letter-spacing: -0.02em; }
.lp-hero-text  { margin: 0 auto 30px; max-width: 620px; color: var(--text-muted); font-size: 1.12rem; }
.lp-hero-cta   { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.lp-main          { padding: 56px 20px 72px; flex: 1; }
.lp-section-title { text-align: center; margin: 0 0 28px; font-size: 1.5rem; }
.lp-empty         { text-align: center; color: var(--text-muted); }

.lp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
    gap: 18px;
    align-items: stretch;
}

.lp-card {
    /* Contenedor del volteo: el fondo y el borde viven en cada cara. */
    position: relative;
    height: 232px;
    perspective: 1000px;
    background: none;
    border: 0;
    padding: 0;
    outline: none;
}

.lp-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.55s cubic-bezier(0.4, 0.2, 0.2, 1);
}

/* Hover en escritorio, focus para teclado y .is-flipped para el tap en
   celular, donde no existe el hover. */
.lp-card-gira:hover  .lp-card-inner,
.lp-card-gira:focus  .lp-card-inner,
.lp-card-gira.is-flipped .lp-card-inner { transform: rotateY(180deg); }

.lp-card-gira { cursor: pointer; }
.lp-card-gira:focus-visible .lp-card-face { border-color: var(--accent); }

.lp-card-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px 18px;
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    transition: border-color 0.15s ease;
}

.lp-card:hover .lp-card-face { border-color: var(--accent); }
.lp-card-back { transform: rotateY(180deg); }

/* Tile uniforme: los logos vienen con fondos, formatos y proporciones
   distintas, asi que se los encierra en un cuadro del mismo tamano para
   que la grilla se vea pareja. */
.lp-card-media {
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    border-radius: var(--radius-md);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    flex-shrink: 0;
    overflow: hidden;
}

.lp-card-logo {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
}

/* Plataforma sin logo: inicial sobre un color derivado del nombre. */
.lp-card-inicial,
.auth-plat-inicial {
    display: flex; align-items: center; justify-content: center;
    background: hsl(var(--ph, 240) 55% 22%);
    color: hsl(var(--ph, 240) 85% 78%);
    border: 1px solid hsl(var(--ph, 240) 50% 34%);
    font-weight: 700;
}
.lp-card-inicial {
    width: 100%; height: 100%;
    border-radius: var(--radius-sm);
    font-size: 2.6rem;
}

.lp-card-title      { margin: 0; font-size: 1.02rem; }
.lp-card-back-title { margin: 0 0 2px; font-size: 0.95rem; color: var(--accent); }

.lp-card-hint {
    font-size: 0.74rem;
    color: var(--text-soft);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.lp-card-text {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Sin animacion para quien la desactivo en el sistema. */
@media (prefers-reduced-motion: reduce) {
    .lp-card-inner { transition: none; }
}

.lp-section-sub {
    text-align: center;
    margin: -20px 0 30px;
    color: var(--text-muted);
    font-size: 0.96rem;
}

/* --- Funcionalidades del panel del revendedor --- */
.lp-features { margin-top: 76px; }

.lp-feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
    align-items: stretch;
}

.lp-feat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-feat-icono {
    width: 46px; height: 46px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md);
    background: var(--accent-light);
    color: var(--accent);
    font-size: 1.15rem;
    flex-shrink: 0;
}

.lp-feat-title { margin: 0; font-size: 1.05rem; }
.lp-feat-text  { margin: 0; color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; }

.lp-feat-cta { text-align: center; margin-top: 34px; }

.lp-contacto       { margin-top: 76px; text-align: center; }
.lp-contacto-links { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

.lp-footer {
    border-top: 1px solid var(--border);
    padding: 22px 0;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.88rem;
    margin-top: auto;
}

@media (max-width: 640px) {
    .lp-card         { height: 208px; }
    .lp-card-media   { width: 88px; height: 88px; }
    .lp-card-inicial { font-size: 2.1rem; }
    .lp-hero       { padding: 48px 0 40px; }
    .lp-hero-title { font-size: 2rem; }
    .lp-main       { padding: 40px 20px 56px; }
}

/* =====================================================================
   AUTH PARTIDO (login y registro)
   Panel de marca a la izquierda + tarjeta de formulario a la derecha,
   sobre un mosaico difuminado con los logos de las plataformas.
   ===================================================================== */
.auth-split {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    position: relative;
    overflow-x: hidden;
}

/* Mosaico de fondo: los mismos logos del catálogo, muy atenuados. */
.auth-mosaico {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    align-content: center;
    gap: 26px;
    padding: 26px;
    opacity: 0.14;
    filter: blur(1px) grayscale(35%);
    pointer-events: none;
}
.auth-mosaico img { width: 100%; max-height: 74px; object-fit: contain; }

/* Velo: sin esto el formulario no tiene contraste suficiente sobre el
   mosaico y el texto se vuelve difícil de leer. */
.auth-velo {
    position: fixed;
    inset: 0;
    z-index: 1;
    background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.35) 0%, var(--bg) 82%);
    pointer-events: none;
}

.auth-split-wrap {
    position: relative;
    z-index: 2;
    flex: 1;
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 40px 24px;
    display: grid;
    grid-template-columns: 1fr minmax(360px, 440px);
    align-items: center;
    gap: 48px;
}

/* --- Panel de marca ---------------------------------------------------- */
.auth-marca-head { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; }

.auth-marca-logo {
    width: 76px; height: 76px;
    object-fit: contain;
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    border: 1px solid var(--border);
    padding: 8px;
    flex-shrink: 0;
}
.auth-marca-logo-ph {
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    font-size: 1.9rem;
}

.auth-marca-nombre {
    margin: 0 0 4px;
    font-size: 2.3rem;
    line-height: 1.1;
    color: var(--accent);
}
.auth-marca-desc { margin: 0; color: var(--text-muted); font-size: 1rem; max-width: 34ch; }

.auth-plats { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }

.auth-plat {
    width: 56px; height: 56px;
    display: flex; align-items: center; justify-content: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 8px;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.auth-plat:hover { transform: translateY(-2px); border-color: var(--accent); }
.auth-plat img   { max-width: 100%; max-height: 100%; object-fit: contain; }
.auth-plat-inicial { width: 100%; height: 100%; border-radius: var(--radius-sm); font-size: 1.15rem; }

/* --- Tarjeta del formulario -------------------------------------------- */
.auth-panel {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.auth-panel-head  { text-align: center; margin-bottom: 24px; position: relative; }
.auth-tema-btn    { position: absolute; top: -6px; right: -6px; }
.auth-panel-title { margin: 0 0 4px; font-size: 1.55rem; }
.auth-panel-sub   { margin: 0; color: var(--text-muted); font-size: 0.92rem; }

.auth-panel .form-label { text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.04em; }
.auth-panel .form-label i { color: var(--accent); margin-right: 4px; }

.auth-sep {
    display: flex; align-items: center; gap: 12px;
    margin: 20px 0 16px;
    color: var(--text-soft);
    font-size: 0.82rem;
}
.auth-sep::before,
.auth-sep::after { content: ''; flex: 1; height: 1px; background: var(--border); }


.auth-split-footer {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 18px 24px 24px;
    color: var(--text-muted);
    font-size: 0.84rem;
}
.auth-split-footer a { color: var(--text-muted); }
.auth-split-footer a:hover { color: var(--accent); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 900px) {
    .auth-split-wrap {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 30px 20px;
        max-width: 520px;
    }
    .auth-marca        { text-align: center; }
    .auth-marca-head   { flex-direction: column; gap: 12px; }
    .auth-marca-desc   { max-width: none; }
    .auth-marca-nombre { font-size: 1.8rem; }
    .auth-plats        { justify-content: center; }
    .auth-mosaico      { opacity: 0.09; }
}

@media (max-width: 480px) {
    .auth-panel { padding: 26px 20px; }
    .auth-plat  { width: 48px; height: 48px; }
}

/* =====================================================================
   AJUSTES — pestañas
   ===================================================================== */
.stg-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border);
}

.stg-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--text-muted);
    font-size: 0.92rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.stg-tab i      { font-size: 0.9em; }
.stg-tab:hover  { color: var(--text); }
.stg-tab.is-active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

/* Los paneles inactivos se ocultan, no se sacan del DOM: sus campos
   tienen que seguir viajando en el POST del formulario compartido. */
.stg-panel { display: none; }
.stg-panel.is-active { display: block; }

/* Selector de paleta (Ajustes > Apariencia): tarjetas clicables con un
   radio nativo oculto, asi funciona sin JS y es accesible por teclado. */
.paleta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 12px;
}
.paleta-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}
.paleta-card:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.paleta-card.is-active { border-color: var(--accent); background: var(--accent-light); }
.paleta-card input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.paleta-dot { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 3px var(--bg-hover); }
.paleta-text { display: flex; flex-direction: column; gap: 2px; }
.paleta-text strong { font-size: 0.9rem; }
.paleta-text small { font-size: 0.72rem; color: var(--text-muted); }

/* Mismo aspecto para las pestañas del dashboard, pero con clases propias.
   Reusar .stg-tab las metia en el querySelectorAll de initTabs(), que les
   enganchaba un click con activar(null); como sus paneles no tienen
   data-panel, el null === null hacia match con todos y se abrian a la vez. */
.venc-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.venc-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 16px;
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
}
.venc-tab i { font-size: 0.9em; }
.venc-tab:hover { color: var(--text); }
.venc-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
.venc-panel { display: none; }
.venc-panel.is-active { display: block; }

/* El formulario agrupa tres paneles; se oculta entero cuando la pestaña
   activa no es ninguno de ellos. */
.stg-form.is-hidden { display: none; }

@media (max-width: 640px) {
    .stg-tabs { gap: 0; }
    .stg-tab  { padding: 10px 12px; font-size: 0.85rem; }
    .stg-tab i { display: none; }
}

/* Casilla "mantener sesión iniciada" del login */
.auth-recordar {
    margin: -4px 0 16px;
    color: var(--text-muted);
    font-size: 0.86rem;
}

/* =====================================================================
   MATERIAL PROMOCIONAL
   ===================================================================== */
.mat-thumb {
    width: 150px;
    padding: 10px;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    text-align: center;
}
.mat-thumb img {
    width: 100%;
    height: 110px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 6px;
}
/* Los nombres de archivo largos romperian la rejilla: se recortan. */
.mat-thumb-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 6px;
}

.mat-pack {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform .15s ease, border-color .15s ease;
}
.mat-pack:hover {
    transform: translateY(-2px);
    border-color: var(--accent);
}
.mat-cover {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: var(--radius-sm);
    margin-bottom: 10px;
}
.mat-cover-vacia {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    color: var(--text-muted);
    font-size: 1.8rem;
}

/* =====================================================================
   MODAL DE CODIGO QR
   ===================================================================== */
.qr-contenedor {
    display: flex;
    justify-content: center;
    padding: 8px 0;
}
.qr-contenedor svg {
    width: 220px;
    height: 220px;
    max-width: 100%;
}

/* Fila de una cuenta de cliente ya retirada (volvió al pool tras vencer).
   Se mantiene visible como historial de la venta, pero apagada. */
.fila-retirada > td { opacity: .55; }
.fila-retirada code { text-decoration: line-through; }

/* Duración: número y unidad pegados, como un solo control. */
.dur-control { display: flex; gap: .4rem; }
.dur-control input { flex: 1 1 auto; min-width: 0; }
.dur-control select { flex: 0 0 auto; width: auto; }

/* =====================================================================
   VISTA TARJETAS / LISTA (compartido entre secciones)
   Control segmentado en el header de cada sección con listado en tarjetas.
   El JS (initViewToggles en main.js) alterna la clase "view-list" sobre
   el contenedor del grid y guarda la preferencia en localStorage.
   ===================================================================== */
.vista-header-tools { display: flex; align-items: center; gap: 10px; }

.vista-toggle {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    flex-shrink: 0;
}
.vista-toggle .btn {
    border: 0;
    border-radius: 0;
    width: 36px; height: 36px;
    padding: 0;
    color: var(--text-muted);
    background: var(--bg-card);
}
.vista-toggle .btn:hover:not(:disabled) { color: var(--text); background: var(--bg-hover); }
.vista-toggle .btn.active { background: var(--accent); color: #fff; }

/* --- Proveedores / Cuentas madre: vista lista en tabla (igual que
     plataformas): el grid se oculta y la tabla se enciende. --- */
.prov-vista-wrap .prov-lista { display: none; }
.prov-vista-wrap.view-list .prov-grid { display: none; }
.prov-vista-wrap.view-list .prov-lista { display: block; }

.cm-vista-wrap .cm-lista { display: none; }
.cm-vista-wrap.view-list .cm-grid { display: none; }
.cm-vista-wrap.view-list .cm-lista { display: block; }

.prov-lista tbody tr:hover td,
.cm-lista tbody tr:hover td { background: var(--bg-hover); }
.cm-lista tr.is-inactive > td { opacity: .6; }

/* --- Lista compacta en el telefono (E14, D-10) --------------------------
   La vista "lista" del telefono reutiliza las tarjetas: cada una deja ver
   su cabecera (.vc-top) y, como mucho, su fila clave (.vc-clave); lo demas
   se oculta. .vc-js la pone initViewToggles() al decidir la vista, asi que
   antes de que corra el JS (o sin JS) se ven tarjetas, sin parpadeo.
   Los !important ganan a los display de cada familia (.lv-card-stats,
   .plat-card-stats, .d-flex...). La cabecera pierde su margen inferior
   (el .mb-3 de la de pagos) y la tarjeta, su elevacion al pasar el raton
   (.lv-card/.cm-card/.prov-card/.plat-card:hover). El selector, que ahora
   se usa con el dedo, gana ancho (44px).
   Ojo: admin/vencimientos.php tiene clases locales con el mismo prefijo
   (.vc-stat, .vc-par...); vc-grid/vc-card/vc-top/vc-clave/vc-body/vc-js
   quedan reservadas para esto. */
@media (max-width: 767px) {
    .vista-toggle .btn { width: 44px; }
    .vc-js.view-list .vc-grid { grid-template-columns: 1fr !important; gap: 8px; }
    .vc-js.view-list .vc-card { padding: 10px 12px; gap: 6px; min-height: 0; }
    .vc-js.view-list .vc-card > :not(.vc-top):not(.vc-clave):not(.vc-body) { display: none !important; }
    .vc-js.view-list .vc-card .vc-body > :not(.vc-clave) { display: none !important; }
    .vc-js.view-list .vc-card .vc-top { margin-bottom: 0; }
    .vc-js.view-list .vc-card:hover { transform: none; }
}

/* =====================================================================
   INTERRUPTOR (switch) - reemplaza checkboxes con estilo inline/JS manual
   Uso: <label class="switch-row"><span>Texto</span>
          <span class="switch"><input type="checkbox" ...><span class="switch-track"></span></span>
        </label>
   El estado (color, posición del círculo) es 100% CSS via :checked, sin
   JS para pintarlo. Si hace falta reaccionar al cambio (mostrar/ocultar
   algo), es un simple addEventListener('change', ...) en el checkbox.
   ===================================================================== */
.switch-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; cursor: pointer; user-select: none; }
.switch-row .switch-label { font-weight: 600; font-size: .82rem; color: var(--text-muted); }

.switch { position: relative; display: inline-block; width: 40px; height: 22px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track {
    position: absolute; inset: 0;
    background: var(--border);
    border-radius: 12px;
    transition: background .2s;
}
.switch-track::before {
    content: '';
    position: absolute; left: 2px; top: 2px;
    width: 18px; height: 18px;
    background: #fff;
    border-radius: 50%;
    transition: transform .2s;
}
.switch input:checked ~ .switch-track { background: var(--accent); }
.switch input:checked ~ .switch-track::before { transform: translateX(18px); }
.switch input:focus-visible ~ .switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sección que un switch habilita/deshabilita (p.ej. el % del bono en Afiliados) */
.bono-perc-section { margin-top: 14px; transition: opacity .3s; }
.bono-perc-section.is-disabled { opacity: .4; pointer-events: none; }
/* Ajustes > Revendedores (E9): campos de una regla apagada. */
.aj-regla-campos { margin-top: 14px; transition: opacity .3s; }
.aj-regla-campos.is-disabled { opacity: .5; pointer-events: none; }

/* =====================================================================
   VISTA TARJETAS - componente genérico (revendedores, clientes,
   recuperadas, activaciones, reportes, pagos)
   ---------------------------------------------------------------------
   A diferencia de proveedores/cuentas_madre/plataformas (que nacieron
   como tarjetas y ganaron la tabla), estas páginas nacieron como tabla y
   ganan la tarjeta: mismo mecanismo (initViewToggles en main.js,
   data-vista-grid/data-vista-btns), clases genéricas .lv-* reutilizadas
   en las seis en vez de un juego de clases por página.
   ===================================================================== */
.lv-vista-wrap .lv-lista { display: none; }
.lv-vista-wrap.view-list .lv-grid { display: none; }
.lv-vista-wrap.view-list .lv-lista { display: block; }

.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 14px; margin-top: 16px; }
.lv-card {
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm, 10px);
    padding: 16px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s;
    display: flex; flex-direction: column; gap: 10px;
}
.lv-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.12); border-color: var(--accent); }

.lv-card-top { display: flex; align-items: flex-start; gap: 10px; }
.lv-card-top .avatar { flex-shrink: 0; }
.lv-card-title { font-weight: 600; font-size: .9rem; line-height: 1.3; }
.lv-card-sub { font-size: .72rem; color: var(--text-muted); margin-top: 2px; word-break: break-word; }
.lv-card-top-end { margin-left: auto; flex-shrink: 0; text-align: right; }

.lv-card-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.lv-card-stats { display: flex; flex-wrap: wrap; gap: 10px 16px; padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; }
.lv-stat { flex: 1 1 auto; min-width: 54px; }
.lv-stat-value { font-weight: 700; font-size: .88rem; }
.lv-stat-label { font-size: .62rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .03em; }

.lv-card-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; }
.lv-card-row .text-muted { flex-shrink: 0; }

/* Fila que no debe abrir el detalle al hacer clic (acciones dentro de la tarjeta) */
.lv-card-acciones { display: flex; gap: 6px; flex-wrap: wrap; }


/* =====================================================================
   INSTALAR APP (PWA)
   Los botones nacen ocultos; main.js (initInstalarApp) los muestra solo
   si el dispositivo puede instalar. El !important hace falta porque
   .dropdown a fija display:flex y le ganaria al atributo hidden.
   ===================================================================== */
.pwa-instalar[hidden] { display: none !important; }

.auth-instalar { margin-top: 16px; }

.pwa-pasos { margin: 0; padding-left: 20px; display: grid; gap: 12px; line-height: 1.5; }
.pwa-pasos i { color: var(--accent); margin-left: 2px; }

/* Formulario de plataformas: color de marca */
.plat-color-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.plat-color-input { width: 52px; height: 40px; padding: 2px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--input-bg); cursor: pointer; }
.plat-color-sin { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; color: var(--text-muted); cursor: pointer; }

/* =====================================================================
   SHEET UI (sheet-*) — modales rediseñados (detalle de producto, venta)
   El color de marca llega por --brand / --brand-rgb (estiloBrand() en
   PHP, en un ancestro). Sin él, todo cae al acento del tema.
   ===================================================================== */

/* --- Cabecera --------------------------------------------------------- */
.sheet-hero {
    position: relative; overflow: hidden;
    display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center;
    padding: 20px;
    background:
        radial-gradient(circle at 110% 120%, rgba(var(--brand-rgb, var(--accent-rgb)), .30), transparent 55%),
        var(--bg-card);
    border-bottom: 1px solid var(--border);
}
.sheet-hero-logo {
    width: 88px; height: 88px; border-radius: 20px; object-fit: cover;
    display: grid; place-items: center; font-size: 2rem; color: var(--text-muted);
    background: var(--bg-elevated); border: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(var(--brand-rgb, var(--accent-rgb)), .25);
}
.sheet-hero-body { min-width: 0; display: grid; gap: 6px; }
.sheet-hero-title { margin: 0; font-size: 1.5rem; font-weight: 700; color: var(--heading-color, var(--text)); line-height: 1.15; }
.sheet-hero-title .sheet-brand-text { color: var(--brand, var(--accent)); }
.sheet-hero-sub { font-size: .95rem; color: var(--text-soft, var(--text-muted)); }
.sheet-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: .82rem; color: var(--text-muted); }
.sheet-hero-meta i { margin-right: 4px; }
.sheet-hero-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }

/* --- Pill de estado --------------------------------------------------- */
.sheet-pill {
    display: inline-flex; align-items: center; gap: 6px; width: fit-content;
    padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600;
    background: var(--success-bg); color: var(--success);
}
.sheet-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.sheet-pill--danger { background: var(--danger-bg); color: var(--danger); }
.sheet-pill--warning { background: var(--warning-bg); color: var(--warning); }
.sheet-pill--muted { background: var(--bg-hover); color: var(--text-muted); }
.sheet-pill--info { background: var(--info-bg); color: var(--info); }

/* --- Botones de icono de la cabecera ---------------------------------- */
.sheet-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.sheet-icon-btn {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: inline-grid; place-items: center;
    background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text);
    cursor: pointer; transition: var(--transition); text-decoration: none;
}
.sheet-icon-btn:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.sheet-icon-btn--warning { color: var(--warning); border-color: var(--warning); background: var(--warning-bg); }
.sheet-icon-btn--danger { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

/* --- Tarjeta ------------------------------------------------------------ */
.sheet-card {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-lg); padding: 0 16px; margin-bottom: 12px;
}
.sheet-card-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--border);
    font-size: 1.05rem; font-weight: 700; color: var(--heading-color, var(--text));
}
.sheet-card-ic {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; color: var(--brand-on, var(--text-inverse, #fff));
    background: var(--brand, var(--accent));
}
.sheet-card-chev { margin-left: auto; color: var(--text-muted); font-size: .85rem; }

/* --- Dato (icono + etiqueta + valor + acciones) ------------------------ */
.sheet-grid2 { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; }
.sheet-field { display: flex; align-items: center; gap: 12px; padding: 14px 0; min-width: 0; }
.sheet-field--full { grid-column: 1 / -1; }
.sheet-list > .sheet-field + .sheet-field { border-top: 1px solid var(--border); }
.sheet-field-ic {
    width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
    display: grid; place-items: center; color: #fff; background: var(--accent);
}
.sheet-ic-blue   { background: var(--info); }
.sheet-ic-purple { background: var(--purple, var(--accent)); }
.sheet-ic-green  { background: var(--success); }
.sheet-ic-orange { background: var(--warning); color: #111; }
.sheet-ic-pink   { background: var(--pink, var(--danger)); }
.sheet-field-body { flex: 1; min-width: 0; }
.sheet-field-k { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sheet-field-v { font-size: 1rem; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.sheet-field-acts { display: flex; gap: 6px; flex-shrink: 0; }
.sheet-mini-btn {
    width: 40px; height: 40px; border-radius: 10px;
    display: inline-grid; place-items: center;
    background: var(--bg-hover); border: 1px solid var(--border); color: var(--text-muted);
    cursor: pointer; transition: var(--transition);
}
.sheet-mini-btn:hover { color: var(--text); border-color: var(--border-strong); }

/* --- Tarjeta seleccionable (role="radio") ------------------------------ */
.sheet-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sheet-select {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px;
    padding: 14px 16px; text-align: left; font: inherit; color: var(--text);
    background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: var(--radius-md);
    cursor: pointer; transition: var(--transition);
}
.sheet-select:hover { border-color: var(--border-strong); }
.sheet-select[aria-checked="true"], .sheet-select.is-active {
    border-color: var(--brand, var(--accent));
    background: rgba(var(--brand-rgb, var(--accent-rgb)), .10);
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, var(--accent-rgb)), .15);
}
.sheet-select[aria-disabled="true"], .sheet-select.is-disabled { opacity: .45; pointer-events: none; }
.sheet-select-ic {
    width: 44px; height: 44px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; background: var(--bg-hover); color: var(--text);
}
.sheet-select[aria-checked="true"] .sheet-select-ic, .sheet-select.is-active .sheet-select-ic { background: var(--brand, var(--accent)); color: var(--brand-on, var(--text-inverse, #fff)); }
.sheet-select-body { flex: 1; min-width: 0; }
.sheet-select-t { font-weight: 600; }
.sheet-select-s { font-size: .8rem; color: var(--text-muted); }
.sheet-select-end { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }

/* --- Selector segmentado ---------------------------------------------- */
.sheet-seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; }
.sheet-seg-btn {
    position: relative; min-height: 44px; padding: 8px 12px;
    font: inherit; font-weight: 600; color: var(--text);
    background: var(--bg-elevated); border: 1.5px solid var(--border); border-radius: var(--radius-md);
    cursor: pointer; transition: var(--transition);
}
.sheet-seg-btn[aria-checked="true"] {
    color: var(--brand, var(--accent)); border-color: var(--brand, var(--accent));
    background: rgba(var(--brand-rgb, var(--accent-rgb)), .10);
}
.sheet-seg-btn[aria-checked="true"]::after {
    content: "\2713"; position: absolute; top: -7px; right: -7px;
    width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center;
    font-size: .7rem; color: var(--brand-on, var(--text-inverse, #fff)); background: var(--brand, var(--accent));
}
.sheet-seg-btn:disabled { opacity: .4; cursor: not-allowed; }

/* --- Estado vacío ------------------------------------------------------- */
.sheet-empty {
    padding: 14px; text-align: center; font-size: .85rem; color: var(--text-muted);
    border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md);
}
.sheet-empty i { margin-right: 6px; }

/* --- Barra inferior de acciones ---------------------------------------- */
.sheet-bar {
    position: sticky; bottom: 0; z-index: 2;
    display: flex; gap: 12px;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: var(--bg-card); border-top: 1px solid var(--border);
}
.sheet-bar > .btn { flex: 1; min-height: 48px; justify-content: center; }
.sheet-bar .sheet-bar-main { background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent)); color: var(--brand-on, var(--text-inverse, #fff)); }
.sheet-bar .sheet-bar-main:disabled { opacity: .5; cursor: not-allowed; }

/* --- Navegación inferior por pestañas ---------------------------------- */
.sheet-tabbar {
    display: flex; gap: 4px; flex-shrink: 0;
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
    background: var(--bg-card); border-top: 1px solid var(--border);
}
.sheet-tab {
    flex: 1; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    font: inherit; font-size: .75rem; font-weight: 600; color: var(--text-muted);
    background: transparent; border: 0; border-radius: 12px; cursor: pointer; transition: var(--transition);
}
.sheet-tab i { font-size: 1.1rem; }
.sheet-tab:hover { color: var(--text); }
.sheet-tab.is-active, .sheet-tab[aria-selected="true"] { color: var(--brand, var(--accent)); background: rgba(var(--brand-rgb, var(--accent-rgb)), .12); }

/* --- Foco visible y movimiento reducido -------------------------------- */
.sheet-icon-btn:focus-visible, .sheet-mini-btn:focus-visible, .sheet-select:focus-visible,
.sheet-seg-btn:focus-visible, .sheet-tab:focus-visible, .sheet-bar > .btn:focus-visible {
    outline: 2px solid var(--brand, var(--accent)); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
    .sheet-icon-btn, .sheet-mini-btn, .sheet-select, .sheet-seg-btn, .sheet-tab { transition: none; }
}

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 480px) {
    .sheet-grid2, .sheet-options { grid-template-columns: 1fr; }
    .sheet-hero-logo { width: 72px; height: 72px; border-radius: 16px; }
    .sheet-hero-title { font-size: 1.3rem; }
}

/* Tablas como tarjetas en móvil: cada <td> lleva data-label. */
@media (max-width: 767px) {
    .sheet-table-cards thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .sheet-table-cards, .sheet-table-cards tbody, .sheet-table-cards tr, .sheet-table-cards td { display: block; width: 100%; }
    .sheet-table-cards tr {
        margin-bottom: 10px; padding: 10px 14px;
        background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-md);
    }
    .sheet-table-cards td {
        display: flex; justify-content: space-between; align-items: center; gap: 12px;
        padding: 6px 0; border: 0; text-align: right; overflow-wrap: anywhere;
    }
    .sheet-table-cards td::before {
        content: attr(data-label); flex-shrink: 0; text-align: left;
        font-size: .7rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted);
    }
    .table-wrap:has(> .sheet-table-cards) { overflow-x: visible; }
}

/* --- Contenedor de modal sheet (detalle de producto / cliente) ---------- */
.sheet-modal {
    width: 100%; max-width: 760px; padding: 0; overflow: hidden;
    display: flex; flex-direction: column; max-height: calc(100dvh - 32px);
    background: var(--bg);
}
.sheet-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 16px; }
/* La cabecera no se encoge: con overflow:hidden su alto mínimo es 0 y, con un
   cuerpo largo en escritorio, recortaba el avatar, el estado y la meta. */
.sheet-modal > .sheet-hero { flex-shrink: 0; }
.sheet-modal .sheet-tabbar { position: relative; }
.sheet-actions form { display: contents; }
.dropdown.sheet-menu { z-index: 1100; }
.sheet-btn-brand {
    min-height: 44px;
    background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent));
    color: var(--brand-on, var(--text-inverse, #fff));
}
.sheet-btn-brand:hover { filter: brightness(1.08); color: var(--brand-on, var(--text-inverse, #fff)); }
.sheet-link { color: var(--info); text-decoration: none; overflow-wrap: anywhere; }
.sheet-link:hover { text-decoration: underline; }
.sheet-section-btn { margin-top: 12px; }
.sheet-break { word-break: break-all; }

/* "Más" de la barra inferior (solo móvil): pestañas que no caben. */
.sheet-mas {
    position: absolute; right: 8px; bottom: calc(100% + 6px); z-index: 3; min-width: 200px;
    padding: 6px; background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
}
.sheet-mas[hidden] { display: none; }
.sheet-mas-item {
    display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 8px 12px;
    font: inherit; color: var(--text); background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.sheet-mas-item:hover { background: var(--bg-hover); }
.sheet-mas-item:focus-visible { outline: 2px solid var(--brand, var(--accent)); outline-offset: 2px; }

@media (min-width: 768px) {
    .sheet-tab--mas, .sheet-mas { display: none !important; }
}
@media (max-width: 767px) {
    .modal-backdrop:has(> .sheet-modal) { padding: 0; }
    .sheet-modal { max-width: none; height: 100dvh; max-height: none; border-radius: 0; }
    .sheet-tab--extra { display: none; }
    .sheet-btn-brand .sheet-btn-txt { display: none; }
}

/* .sheet-tabs envuelve solo los .pdt-tab para que el tablist real (con
   role="tablist") no incluya el botón "Más" ni su menú; display:contents
   la saca del flujo para que .sheet-tabbar siga maquetando igual. */
.sheet-tabs { display: contents; }

/* --- Detalle de cliente (Fase 1B) ------------------------------------- */
.sheet-modal--wide { max-width: 1100px; }

/* Avatar con la inicial, en el lugar del logo de .sheet-hero. */
.sheet-avatar {
    width: 88px; height: 88px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-size: 2.2rem; font-weight: 700;
    color: var(--text-inverse, #fff);
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), .55));
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), .30);
}

/* Visibilidad por ancho: acciones de la cabecera que pasan al "⋯" en móvil. */
@media (max-width: 767px) { .sheet-desk { display: none !important; } }
@media (min-width: 768px) { .sheet-mob { display: none !important; } }

/* Dos columnas en escritorio: resumen (380px) + historial. */
.sheet-cols { display: grid; gap: 16px; }
.sheet-col-side, .sheet-col-main { min-width: 0; }
@media (min-width: 1024px) {
    .sheet-cols { grid-template-columns: 380px minmax(0, 1fr); align-items: start; }
}

/* Métricas. */
.sheet-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.sheet-stat {
    display: flex; align-items: center; gap: 12px; padding: 14px; min-width: 0;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.sheet-stat-k { font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.sheet-stat-v { font-size: 1.3rem; font-weight: 700; color: var(--heading-color, var(--text)); overflow-wrap: anywhere; }

/* Contador a la derecha del título de una tarjeta. */
.sheet-card-count { margin-left: auto; font-size: .8rem; font-weight: 600; color: var(--text-muted); }
.sheet-card-foot { padding: 12px 0 14px; font-size: .8rem; color: var(--text-muted); }
.sheet-card .table-wrap { margin: 0 -16px; width: auto; max-width: none; }
.sheet-btn-block { width: 100%; justify-content: center; margin-bottom: 16px; }
.sheet-badge-xs { font-size: .6rem; }
/* Texto solo para lectores de pantalla (no existía en style.css). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Plataforma: mosaico (logo o inicial en el color de marca) + textos. */
.sheet-plat { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sheet-tile {
    width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; object-fit: cover;
    display: grid; place-items: center; font-weight: 700;
    color: var(--brand-on, var(--text-inverse, #fff)); background: var(--brand, var(--accent));
}
.sheet-plat-body { min-width: 0; text-align: left; }
.sheet-plat-name { font-weight: 600; }
.sheet-plat-sub, .sheet-cell-sub { font-size: .75rem; color: var(--text-muted); }

/* Chips (tipo de entrega, correo, contraseña). */
.sheet-chip {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 2px 4px 2px 10px; border-radius: 999px; font-size: .75rem; font-weight: 600;
    background: var(--bg-hover); border: 1px solid var(--border); color: var(--text);
}
.sheet-chip--solo { padding-right: 10px; }
.sheet-chip code { background: none; padding: 0; color: inherit; overflow-wrap: anywhere; }
/* Correo de cuenta en una tabla: una sola línea cortada con «…» y la columna con ancho mínimo
   (sin esto la celda se comprime a una letra por línea y la tabla se desborda). */
/* Contraseña y contacto en una tabla: siempre visibles, en una línea, con su botón de copiar. */
.celda-copia { min-width: 150px; }
.celda-copia .sheet-chip code { white-space: nowrap; overflow-wrap: normal; }
.vc-contacto { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
/* Cuentas de la ficha del revendedor: el panel es angosto, así que nada se parte en varias
   líneas (ID, perfil y PIN, contraseña): filas de una línea y la tabla se desplaza de lado. */
.rv-tabla-cuentas th, .rv-tabla-cuentas td { white-space: nowrap; vertical-align: middle; }
.rv-tabla-cuentas .sheet-chip code { white-space: nowrap; overflow-wrap: normal; }
.rv-cta-correo { min-width: 200px; }
.rv-cta-correo .sheet-chip code { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; vertical-align: middle; }
.sheet-chip-btn {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: inline-grid; place-items: center;
    background: none; border: 0; color: var(--text-muted); cursor: pointer;
}
.sheet-chip-btn:hover { color: var(--text); background: var(--bg-elevated); }
.sheet-chip-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
@media (pointer: coarse) { .sheet-chip-btn { width: 44px; height: 44px; } }
.sheet-acc { display: grid; gap: 6px; justify-items: start; }

/* Vence: fecha en color de estado + pill + "Desde". */
.sheet-venc { display: grid; gap: 4px; justify-items: start; }
.sheet-venc-fecha { font-weight: 600; }
.sheet-td-acts { width: 1%; text-align: right; }

@media (max-width: 767px) {
    .sheet-card .table-wrap { margin: 0; }
    .sheet-acc, .sheet-venc { justify-items: end; }
    .sheet-plat-body { text-align: right; }
    .sheet-td-acts { width: 100%; justify-content: flex-end !important; }
    .sheet-td-acts::before { display: none; }
}
@media (max-width: 480px) {
    .sheet-avatar { width: 72px; height: 72px; font-size: 1.8rem; }
}

/* Ajustes de accesibilidad y de tarjetas (revisión Fase 1B). */
.sheet-menu button, .sheet-menu a { min-height: 44px; }
@media (pointer: coarse) { .sheet-mini-btn { width: 44px; height: 44px; } }
.sheet-link:focus-visible, .sheet-btn-brand:focus-visible { outline: 2px solid var(--brand, var(--accent)); outline-offset: 2px; }
@media (max-width: 767px) {
    /* La rejilla (body.panel-* .table td, 0,2,2) gana a .sheet-table-cards td
       { border: 0 } (0,1,1): en tarjetas no hay líneas verticales. */
    body.panel-admin .sheet-table-cards td,
    body.panel-reseller .sheet-table-cards td { border-right: none; }
}

/* =====================================================================
   SHEET UI v2 (Fase D0) — formularios, interruptor, pasos, filas,
   progreso, barra fija y páginas de lista. Ver el marcado de referencia
   en docs/superpowers/plans/2026-09-30-faseD0-sistema.md.
   ===================================================================== */

/* --- Modal de formulario ---------------------------------------------- */
.sheet-modal--form { max-width: 760px; }
.sheet-modal--sm { max-width: 560px; }
.sheet-form-head {
    display: flex; align-items: flex-start; gap: 12px; flex-shrink: 0;
    padding: 14px 14px 14px 20px;
    background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.sheet-form-head-txt { flex: 1; min-width: 0; display: grid; gap: 2px; padding-top: 4px; }
.sheet-form-title { margin: 0; font-size: 1.2rem; font-weight: 700; line-height: 1.25; color: var(--heading-color, var(--text)); }
.sheet-form-sub { margin: 0; font-size: .85rem; color: var(--text-muted); }
.sheet-form-head > .sheet-icon-btn { flex-shrink: 0; }

/* --- Secciones del formulario ------------------------------------------ */
.sheet-section { padding: 4px 0 8px; }
.sheet-section + .sheet-section { margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--border); }
.sheet-section-title {
    margin: 0 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--text-muted);
}
.sheet-section-help { margin: -6px 0 12px; font-size: .8rem; color: var(--text-muted); }

/* --- Campos dentro de un .sheet-modal (solo restyle) -------------------- */
.sheet-modal .form-label { font-size: .82rem; font-weight: 600; }
.sheet-modal .form-control, .sheet-modal .form-select {
    min-height: 48px; padding-top: 12px; padding-bottom: 12px; border-radius: var(--radius-md); font-size: 1rem;
}
.sheet-modal textarea.form-control { min-height: 96px; }
.sheet-modal .form-control:focus, .sheet-modal .form-select:focus {
    border-color: var(--brand, var(--accent));
    box-shadow: 0 0 0 3px rgba(var(--brand-rgb, var(--accent-rgb)), .18);
}

/* --- Interruptor sobre un checkbox real ---------------------------------- */
.sheet-switch {
    position: relative; display: flex; align-items: center; gap: 12px;
    min-height: 44px; padding: 8px 0; cursor: pointer; user-select: none;
}
.sheet-switch > input[type="checkbox"] {
    position: absolute; left: 0; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0;
}
.sheet-switch-track {
    position: relative; flex-shrink: 0; width: 46px; height: 28px; border-radius: 999px;
    background: var(--bg-hover); border: 1.5px solid var(--border-strong); transition: var(--transition);
}
.sheet-switch-track::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; border-radius: 50%;
    background: var(--text-muted); transition: var(--transition);
}
.sheet-switch > input:checked + .sheet-switch-track { background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent)); }
.sheet-switch > input:checked + .sheet-switch-track::after { transform: translateX(18px); background: var(--brand-on, var(--text-inverse, #fff)); }
.sheet-switch > input:focus-visible + .sheet-switch-track { outline: 2px solid var(--brand, var(--accent)); outline-offset: 2px; }
.sheet-switch > input:disabled + .sheet-switch-track { opacity: .45; }
.sheet-switch:has(> input:disabled) { cursor: not-allowed; }
.sheet-switch-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sheet-switch-t { font-weight: 600; color: var(--text); }
.sheet-switch-s { font-size: .8rem; color: var(--text-muted); }

/* --- Barra inferior: variantes de formulario y de detalle ---------------- */
.sheet-modal--form .sheet-bar { justify-content: flex-end; flex-shrink: 0; }
.sheet-modal--form .sheet-bar > .btn { flex: 0 0 auto; min-width: 128px; }
.sheet-bar > .sheet-bar-start { margin-right: auto; }
.sheet-bar .sheet-bar-sec {
    background: transparent; border: 1.5px solid var(--brand, var(--accent)); color: var(--brand, var(--accent));
}
.sheet-bar .sheet-bar-sec:hover { background: rgba(var(--brand-rgb, var(--accent-rgb)), .10); }
.sheet-bar .sheet-bar-danger { background: var(--danger-bg); border: 1.5px solid var(--danger); color: var(--danger); }
.sheet-bar .sheet-bar-danger:hover { background: var(--danger); color: var(--text-inverse, #fff); }
.sheet-bar .sheet-bar-sec:disabled, .sheet-bar .sheet-bar-danger:disabled { opacity: .5; cursor: not-allowed; }
.sheet-bar [hidden] { display: none !important; }
/* Opciones del menú «⋯» que el JS oculta: initSheetMenus() lo porta al <body>
   y .dropdown button (display:flex) le ganaba al atributo hidden. */
.sheet-menu [hidden] { display: none !important; }
/* Barra fija de un detalle: acciones principales en móvil; en escritorio
   esas acciones ya están en la cabecera. */
.sheet-bar--fixed { flex-shrink: 0; }
@media (min-width: 768px) { .sheet-bar--fixed { display: none !important; } }
@media (max-width: 767px) {
    .sheet-modal--form .sheet-bar > .btn { flex: 1 1 0; min-width: 0; }
    .sheet-modal--form .sheet-bar > .sheet-bar-start { flex: 0 0 48px; padding-left: 0; padding-right: 0; }
    .sheet-bar-start .sheet-btn-txt { display: none; }
}
.sheet-bar .sheet-bar-sec:focus-visible, .sheet-bar .sheet-bar-danger:focus-visible { outline: 2px solid var(--brand, var(--accent)); outline-offset: 2px; }

/* --- Asistente por pasos (.sheet-steps; JS: initSheetSteps) -------------- */
.sheet-steps-head {
    flex-shrink: 0; display: grid; gap: 2px;
    padding: 12px 20px 0; background: var(--bg-card); border-bottom: 1px solid var(--border);
}
.sheet-steps-count { font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand, var(--accent)); }
.sheet-steps-name { font-size: 1rem; font-weight: 700; color: var(--heading-color, var(--text)); }
.sheet-steps-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
/* El botón mide 44px de alto para el dedo; la barra visible es el ::before. */
.sheet-steps-seg { position: relative; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; }
.sheet-steps-seg::before {
    content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px;
    border-radius: 999px; background: var(--bg-hover); border: 1px solid var(--border); transition: var(--transition);
}
.sheet-steps-seg.is-done::before, .sheet-steps-seg[aria-current="step"]::before {
    background: var(--brand, var(--accent)); border-color: var(--brand, var(--accent));
}
.sheet-steps-seg[aria-current="step"]::before { box-shadow: 0 0 0 3px rgba(var(--brand-rgb, var(--accent-rgb)), .20); }
.sheet-steps-seg:disabled { cursor: default; }
.sheet-steps-seg:focus-visible { outline: 2px solid var(--brand, var(--accent)); outline-offset: 2px; border-radius: 6px; }
[data-sheet-steps] [hidden] { display: none !important; }

/* --- Lista compacta de 2–3 líneas (.sheet-rows / .sheet-row) ------------- */
.sheet-rows { list-style: none; margin: 0; padding: 0; display: grid; }
.sheet-card > .sheet-rows { margin: 0 -16px; }
.sheet-rows > li + li, .sheet-rows > .sheet-row + .sheet-row { border-top: 1px solid var(--border); }
.sheet-row {
    display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px;
    padding: 12px 16px; text-align: left; font: inherit; color: var(--text); text-decoration: none;
    background: none; border: 0; transition: var(--transition);
}
a.sheet-row, button.sheet-row { cursor: pointer; }
a.sheet-row:hover, button.sheet-row:hover { background: var(--bg-hover); color: var(--text); }
.sheet-row:focus-visible { outline: 2px solid var(--brand, var(--accent)); outline-offset: -2px; }
.sheet-row-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.sheet-row-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sheet-row-title { min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sheet-row-end { margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; }
.sheet-row-sub { font-size: .8rem; color: var(--text-muted); overflow-wrap: anywhere; }
.sheet-row-chev { flex-shrink: 0; font-size: .8rem; color: var(--text-muted); }

/* --- Barra de progreso (ancho por --p, calculado en PHP o JS) ------------ */
.sheet-progress { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: var(--bg-hover); }
.sheet-progress > span {
    display: block; height: 100%; width: var(--p, 0%); max-width: 100%;
    border-radius: inherit; background: var(--brand, var(--accent)); transition: width .4s ease;
}
.sheet-progress--success > span { background: var(--success); }
.sheet-progress--warning > span { background: var(--warning); }
.sheet-progress--danger > span { background: var(--danger); }
.sheet-progress-label { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; font-size: .75rem; color: var(--text-muted); }

@media (prefers-reduced-motion: reduce) {
    .sheet-switch-track, .sheet-switch-track::after, .sheet-steps-seg::before,
    .sheet-row, .sheet-progress > span { transition: none; }
}

/* --- Páginas de lista (.page-*) ------------------------------------------- */
.page-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 16px; margin-bottom: 20px; }
.page-head-txt { min-width: 0; display: grid; gap: 4px; }
.page-head-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 1.6rem; line-height: 1.2; }
.page-head-title i { color: var(--accent); }
.page-head-sub { margin: 0; font-size: .9rem; color: var(--text-muted); }
.page-head-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.page-head-acts .btn { min-height: 44px; }
.page-stats.stats-grid { margin-bottom: 20px; }
.page-filters { padding: 12px 14px; margin-bottom: 16px; }
.page-filters .filters { margin-bottom: 0; }
.page-card { padding: 0; overflow: hidden; }
.page-card > .table-wrap { margin: 0; }
@media (max-width: 767px) {
    .page-head-title { font-size: 1.3rem; }
    .page-head-acts { width: 100%; }
    .page-head-acts .btn { flex: 1 1 auto; justify-content: center; }
    .page-stats.stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .page-stats .stat-card { padding: 12px; gap: 10px; }
    .page-stats .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
    .page-stats .stat-value { font-size: 1.15rem; }
    /* Con la tabla en tarjetas, cada fila ya es una tarjeta: el contenedor se aplana. */
    .page-card:has(.sheet-table-cards) { overflow: visible; background: transparent; border: 0; box-shadow: none; }
}

/* El "⋯" de los detalles se porta al <body> y se coloca con top/right en
   línea: con el transition:all de .dropdown, el top también se animaba y el
   menú llegaba volando desde el fondo de la página. */
.dropdown.sheet-menu { transition: opacity var(--transition), transform var(--transition), visibility var(--transition); }
/* Acción peligrosa dentro de un menú (antes solo en el <style> de productos.php). */
.dropdown .text-danger { color: var(--danger); }
.dropdown .text-danger:hover { color: var(--danger); background: var(--danger-bg); }

/* --- Fase D1: añadidos compartidos ------------------------------------- */
/* Tarjeta con campos de formulario adentro (ficha de perfil y similares). */
.sheet-card--form { padding: 16px 16px 4px; }
/* "(privado)" y notas cortas junto al título de una sección. */
.sheet-section-note { font-weight: 500; letter-spacing: 0; text-transform: none; }
/* Fila de lista que abre algo pero contiene un enlace (no puede ser <button>). */
.sheet-row[role="button"] { cursor: pointer; }
.sheet-row[role="button"]:hover { background: var(--bg-hover); }
.sheet-menu button:disabled { opacity: .5; cursor: not-allowed; }
/* Listas con vista tarjetas/tabla: en móvil la tabla nunca se muestra
   (tiene demasiadas columnas); la vista "lista" es la compacta (E14). */
@media (max-width: 767px) {
    .lv-vista-wrap--movil-tarjetas.view-list .lv-grid { display: grid; }
    .lv-vista-wrap--movil-tarjetas .lv-lista { display: none !important; }
}
/* Un <form hidden> dentro de .modal (p. ej. el de eliminar perfil): la regla
   .modal > form { display:flex } le ganaba al [hidden] del navegador y en
   móvil se repartía la altura con el formulario visible. */
.modal > form[hidden] { display: none; }
/* Botón de icono deshabilitado (p. ej. "Revertir" con perfiles vendidos). */
.sheet-icon-btn:disabled { opacity: .45; cursor: not-allowed; }
/* Una insignia dentro del cuerpo del hero no se estira a todo el ancho. */
.sheet-hero-body > .badge { justify-self: start; }

/* --- Fase D2: añadidos compartidos ------------------------------------- */
/* Botones de icono que el JS oculta con [hidden] (p. ej. el ojo y el copiar
   de una contraseña vacía): su display:inline-grid le ganaba al atributo. */
.sheet-mini-btn[hidden], .sheet-icon-btn[hidden] { display: none; }
/* Insignia de estado junto al título de un modal de formulario o ficha. */
.sheet-form-title .badge { margin-left: 6px; vertical-align: middle; font-size: .7rem; }
/* Grupo de botones de compartir (compartirBotones) dentro de una tarjeta. */
.sheet-share { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 0; }
.sheet-share .sp-share-group { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet-share .btn { min-width: 44px; min-height: 44px; justify-content: center; }

/* === TIENDA ADMIN: interruptor general (Fase E4) === */
.at-tienda-estado { display: flex; align-items: center; margin: 0; }
.at-tienda-estado .sheet-switch { padding: 0 8px 0 0; }
.at-tienda-estado .sheet-switch.is-enviando { pointer-events: none; opacity: .6; }
@media (max-width: 767px) {
    .at-tienda-estado { width: 100%; }
}

/* =====================================================================
   LAYOUT DE LOS PANELES (D10 admin, D11a revendedor) — barra superior y lateral
   Acotado a body.panel-admin y body.panel-reseller (selectores en pareja: la
   especificidad no cambia). Las páginas sueltas (login, landing, instalador)
   no llevan ninguna de las dos clases. test_pantallas_rev.php exige que todo
   selector body.panel-admin tenga su body.panel-reseller.
   ===================================================================== */
.user-menu-info { padding: 10px 12px; }
body.panel-admin .btn-menu:focus-visible,
body.panel-admin .theme-toggle:focus-visible,
body.panel-admin .notif-bell:focus-visible,
body.panel-admin .user-btn:focus-visible,
body.panel-reseller .btn-menu:focus-visible,
body.panel-reseller .theme-toggle:focus-visible,
body.panel-reseller .notif-bell:focus-visible,
body.panel-reseller .user-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* 992px: el mismo corte en que style.css muestra .btn-menu y oculta la barra lateral. */
@media (max-width: 992px) {
    body.panel-admin .btn-menu,
    body.panel-admin .theme-toggle,
    body.panel-admin .notif-bell,
    body.panel-reseller .btn-menu,
    body.panel-reseller .theme-toggle,
    body.panel-reseller .notif-bell { width: 44px; height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; }
    body.panel-admin .user-btn,
    body.panel-reseller .user-btn { min-height: 44px; }
    body.panel-admin .navbar-right,
    body.panel-reseller .navbar-right { gap: 8px; }
    body.panel-admin .sidebar-nav a,
    body.panel-reseller .sidebar-nav a { min-height: 44px; }
}

/* E10: pedido en el detalle de Ventas */
/* Productos de un pedido: un chip por producto en cuadricula (antes, una lista con viñetas). */
.dv-pedido-lista { list-style: none; margin: .5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; font-size: .8rem; }
.dv-pedido-chip { display: flex; align-items: center; gap: 8px; min-width: 0; height: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-hover); color: var(--text); text-decoration: none; transition: var(--transition); }
a.dv-pedido-chip:hover { border-color: var(--accent); background: var(--bg-elevated); }
a.dv-pedido-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dv-pedido-chip strong { white-space: nowrap; color: var(--accent); }
.dv-pedido-desc { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-muted); }
.dv-pedido-chip.is-actual { border-color: var(--accent); background: var(--bg-elevated); }
.dv-pedido-chip.is-actual .dv-pedido-desc { color: var(--text); font-weight: 600; }
.dv-pedido-chip.is-baja { opacity: .6; }
.dv-pedido-tag { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; font-size: .7rem; font-weight: 600; background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); }
.dv-pedido-chip.is-actual .dv-pedido-tag { color: var(--accent); border-color: var(--accent); }
.vt-pedido-badge { margin-left: .25rem; }

/* =====================================================================
   PORTAL DEL REVENDEDOR — LISTAS SIMPLES (D11b)
   reseller/creditos.php, activaciones.php, ranking.php y notificaciones.php.
   Prefijos: ract- (activaciones), rrk- (ranking), rnot- (notificaciones).
   .page-head-dato: dato destacado a la derecha de .page-head (saldo, puesto);
   lo pueden reutilizar las demás pantallas del revendedor.
   ===================================================================== */
.page-head-dato { display: grid; gap: 2px; text-align: right; }
.page-head-dato-v { font-size: 1.4rem; line-height: 1.2; }
@media (max-width: 767px) {
    .page-head-dato { text-align: left; }
}

/* Activaciones: logo de la tabla, botonera sin saltos y fila móvil (el logo
   hace de mosaico; sin logo, la inicial en el color de acento). */
.ract-logo { width: 22px; height: 22px; border-radius: 4px; object-fit: contain; }
.ract-acts { white-space: nowrap; }
.ract-tile { object-fit: contain; padding: 4px; background: var(--bg-hover); }
.ract-share { padding: 6px 0 0; }

/* Ranking: fila propia (antes style= en línea; tbody tr para ganarle a la
   cebra .table tbody tr:nth-child(even)) y mosaico del podio en las filas
   móviles con los colores de .rk-medal-* (admin/ranking.php repite las tres
   reglas del podio en su <style>: mismo valor, sin conflicto). */
.table tbody tr.rrk-yo, .sheet-row.rrk-yo { background: var(--bg-hover); }
.sheet-tile.rk-tile-1 { background: linear-gradient(135deg, #ffd76e, #e8a800); color: #1b1b1b; }
.sheet-tile.rk-tile-2 { background: linear-gradient(135deg, #e2e6ea, #a9b1b8); color: #1b1b1b; }
.sheet-tile.rk-tile-3 { background: linear-gradient(135deg, #e8b083, #b9702f); color: #1b1b1b; }

/* Notificaciones: lista de filas con las acciones a la derecha (en móvil,
   debajo del texto). El color del icono sale del tipo ($ICONOS) por clase. */
.rnot-inline { display: inline; }
.page-head-acts > .rnot-inline { display: contents; }   /* el botón, no el form, es el ítem flex: en móvil se estira como en las demás páginas */
.rnot-fila--nueva { background: var(--accent-light); }
.rnot-tile { font-size: 1rem; }
.rnot-tile--success { background: var(--success-bg); color: var(--success); }
.rnot-tile--danger { background: var(--danger-bg); color: var(--danger); }
.rnot-tile--warning { background: var(--warning-bg); color: var(--warning); }
.rnot-tile--info { background: var(--info-bg); color: var(--info); }
.rnot-tile--primary, .rnot-tile--muted { background: var(--accent-light); color: var(--accent); }
.rnot-top { flex-wrap: wrap; }
.rnot-top > .sheet-row-title { white-space: normal; overflow-wrap: anywhere; }
.rnot-acts { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
@media (max-width: 767px) {
    .rnot-fila { flex-wrap: wrap; align-items: flex-start; }
    .rnot-acts { width: 100%; justify-content: flex-end; }
}

/* =====================================================================
   PORTAL DEL REVENDEDOR — PERFIL, SOPORTE, AFILIADOS, PAGOS Y MATERIAL (D11c)
   reseller/material.php, pagos.php, afiliados.php, soporte.php y perfil.php.
   Prefijos: rmat- (material), rpg- (pagos), raf- (afiliados), rsop- (soporte),
   rper- (perfil). .btn-wa / .btn-tg: botones con el color de marca de
   WhatsApp y Telegram (antes style= en línea), compartidos por las tres
   pantallas que los usan. Sin selectores body.panel-*.
   ===================================================================== */
.btn.btn-wa { --btn-marca: #25d366; }
.btn.btn-tg { --btn-marca: #0088cc; }
.btn.btn-wa, .btn.btn-tg { background: var(--btn-marca); color: #fff; }
.btn.btn-wa:hover, .btn.btn-tg:hover { color: #fff; }

/* Material: detalle del paquete como tarjeta, miniaturas y rejilla de paquetes
   (las .mat-* de la sección MATERIAL PROMOCIONAL son compartidas con admin). */
.rmat-det { margin-bottom: 16px; }
.rmat-det-head { flex-wrap: wrap; }
.rmat-det-txt { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rmat-det-title { margin: 0; font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.rmat-det-sub { font-weight: 400; }
.rmat-det-acts { display: flex; flex-wrap: wrap; gap: 8px; }
.rmat-det-body { padding: 14px 0 16px; }
.rmat-galeria { display: flex; flex-wrap: wrap; gap: 8px; }
.rmat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 16px; margin-bottom: 24px; }
@media (max-width: 767px) {
    .rmat-det-acts { width: 100%; }
    .rmat-det-acts > .btn { flex: 1 1 auto; min-height: 44px; }
}

/* Pagos (antes en un <style> propio con .pg-*; admin/pagos.php tiene sus
   propias .pg-* en su <style>, por eso el prefijo rpg-). Pasos 1-3, tarjeta
   por método con su color de tipo arriba y cada dato como .sheet-field. */
.rpg-pre { white-space: pre-line; }
.rpg-paso { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 8px 0 12px; font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.rpg-paso-n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8rem; flex-shrink: 0; }
.rpg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.rpg-card { --rpg-c: var(--accent); position: relative; overflow: hidden; margin-bottom: 0; }
.rpg-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--rpg-c); }
.rpg-card--banco   { --rpg-c: #3b82f6; }
.rpg-card--tarjeta { --rpg-c: #8b5cf6; }
.rpg-card--binance { --rpg-c: #f0b90b; }
.sheet-card-ic.rpg-card-ic { border-radius: 12px; color: var(--rpg-c); background: color-mix(in srgb, var(--rpg-c) 16%, transparent); }
.rpg-card-tit { flex: 1; min-width: 0; display: grid; gap: 2px; }
.rpg-card-nombre { overflow-wrap: anywhere; }
.rpg-card-tipo { font-size: .72rem; font-weight: 500; color: var(--text-muted); }
.rpg-copiar-todo { flex-shrink: 0; }
.rpg-v { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: .92rem; }
.rpg-libre { margin: 0 0 14px; padding: 10px 12px; border-radius: 10px; background: var(--bg-hover); font-size: .875rem; }
.rpg-vacio { padding: 14px 0; }
.rpg-aviso { margin-bottom: 16px; }
.rpg-body { padding: 16px 0; }
.rpg-form { margin-top: 14px; }
.rpg-notificar { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 767px) {
    .rpg-copiar-todo span { display: none; }
    .sheet-table-cards td:has(> .rpg-motivo) { flex-wrap: wrap; }
    .rpg-motivo { flex-basis: 100%; }
}

/* Afiliados: link con su botón de copiar, condiciones del programa y las dos
   tablas (afiliados y últimas comisiones) lado a lado en escritorio. */
.raf-card { margin-bottom: 16px; }
.raf-body { padding: 14px 0 16px; }
.raf-link-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.raf-link-row > .form-control { flex: 1; min-width: 0; }
.raf-link { font-weight: 600; }
.raf-share { display: flex; flex-wrap: wrap; gap: 8px; }
.raf-conds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.raf-cond { display: grid; gap: 2px; min-width: 0; }
.raf-cond-v { font-size: 1.5rem; font-weight: 700; line-height: 1.2; color: var(--accent); }
.raf-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 16px; align-items: start; }
.raf-cols > * { min-width: 0; }
.raf-seccion-title { margin: 0 0 12px; font-size: 1.1rem; display: flex; align-items: center; gap: 8px; }
.raf-seccion-title i { color: var(--accent); }
@media (max-width: 767px) {
    .raf-share > .btn { flex: 1 1 auto; min-height: 44px; }
}

/* Soporte: tarjeta de contacto centrada con los canales (color de marca por
   .btn-wa/.btn-tg) y accesos a reportes y pagos como filas enlazadas. */
.rsop-hero { margin-bottom: 16px; }
.rsop-hero-in { max-width: 600px; margin: 0 auto; padding: 40px 20px; text-align: center; }
.rsop-hero-ic { display: inline-block; margin-bottom: 20px; font-size: 4rem; color: var(--accent); }
.rsop-hero-title { margin: 0 0 12px; }
.rsop-canales { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.rsop-canal { min-width: 240px; }
.rsop-canal-ic { font-size: 1.5rem; }
.rsop-canal-txt { display: grid; text-align: left; }
.rsop-accesos { margin-bottom: 16px; }
.sheet-tile.rsop-tile--danger { background: var(--danger-bg); color: var(--danger); }
.sheet-tile.rsop-tile--success { background: var(--success-bg); color: var(--success); }
@media (max-width: 767px) {
    .rsop-hero-in { padding: 24px 4px; }
    .rsop-canal { min-width: 0; flex: 1 1 100%; }
}

/* Perfil: dos tarjetas (datos y contraseña) lado a lado en escritorio; los
   datos de la cuenta (registro, descuento, saldo) en una rejilla. */
.rper-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; align-items: start; }
.rper-cols > * { min-width: 0; }
.rper-card { margin-bottom: 0; }
.rper-form { padding: 16px 0 4px; }
.rper-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); gap: 12px 16px; margin-top: 16px; }
.rper-dato { display: grid; gap: 2px; min-width: 0; }
.rper-dato-v { font-size: 1.25rem; font-weight: 700; }
.rper-acts { display: flex; justify-content: flex-end; margin: 16px 0 12px; }
@media (max-width: 767px) {
    .rper-acts > .btn { flex: 1 1 auto; min-height: 44px; }
}

/* =====================================================================
   PORTAL DEL REVENDEDOR — DASHBOARD (D11d)
   reseller/index.php. Prefijo rdb-. Tarjetas .sheet-card con el título
   como <h2> (.rdb-card-title hereda el tamaño de .sheet-card-head),
   accesos rápidos y contenedor de la gráfica por clase (antes style= en
   línea). Sin selectores body.panel-*.
   ===================================================================== */
.rdb-card { margin-bottom: 16px; }
.rdb-card-title { margin: 0; min-width: 0; font: inherit; color: inherit; }
.rdb-card-link { margin-left: auto; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.rdb-card-end { margin-left: auto; }
.rdb-body { padding: 14px 0 16px; }
.rdb-card--warning { border-left: 4px solid var(--warning); }
.sheet-card-ic.rdb-ic--warning { background: var(--warning); }
/* U6: plataforma enlazada a su cuenta; U7: barra de avance de E9 (ancho por --p). */
.rdb-venc-link { color: inherit; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.rdb-venc-link:hover { color: var(--accent); text-decoration-color: currentColor; }
.rdb-avance { margin: 4px 0 6px; max-width: 420px; }
/* U4: insignia de compra dada de baja junto al nombre. */
.rdb-baja { flex-shrink: 0; }

/* Accesos rápidos: cuatro tarjetas enlace con el icono teñido por clase. */
.rdb-accesos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; margin-bottom: 24px; }
.rdb-acceso { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--text); transition: border-color .2s, transform .2s; }
.rdb-acceso:hover { color: var(--text); border-color: var(--accent); transform: translateY(-2px); }
.rdb-acceso:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rdb-acceso-ic { flex-shrink: 0; }
.rdb-acceso-ic--success { background: var(--success-bg); color: var(--success); }
.rdb-acceso-ic--danger { background: var(--danger-bg); color: var(--danger); }
.rdb-acceso-ic--info { background: var(--info-bg); color: var(--info); }
.rdb-acceso-txt { display: grid; gap: 2px; min-width: 0; }
.rdb-acceso-t { color: var(--text); }

/* Gráfica (alto fijo para Chart.js con maintainAspectRatio:false) y últimas compras. */
.rdb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; margin-bottom: 16px; }
.rdb-grid > * { min-width: 0; }
.rdb-grid > .sheet-card { margin-bottom: 0; }
.rdb-chart { position: relative; height: 240px; margin: 12px 0 14px; }
.rdb-empty { padding: 30px 20px; }
.rdb-vacio { margin: 14px 0 16px; }
.sheet-card > .rdb-compras { margin-bottom: 4px; }
.sheet-tile.rdb-compra-tile { width: 36px; height: 36px; font-size: .9rem; background: var(--accent-light); color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
    .rdb-acceso { transition: none; }
    .rdb-acceso:hover { transform: none; }
}
@media (max-width: 767px) {
    .rdb-card-link, .rdb-venc-link { min-height: 44px; display: inline-flex; align-items: center; }
    .rdb-accesos { grid-template-columns: 1fr 1fr; gap: 10px; }
    .rdb-acceso { padding: 12px; gap: 10px; }
    .rdb-acceso .stat-icon { width: 36px; height: 36px; font-size: 1rem; }
}

/* =====================================================================
   PLATAFORMAS — PRECIOS POR DEFECTO POR PLAN (admin/plataformas.php)
   Cada plan es un <details class="plat-plan"> plegado por defecto, con un
   resumen en el <summary> y tres grupos por rol (.plat-rol--admin,
   --revendedor, --cliente) con el acento del tema de cada uno. El costo por
   perfil es un <output> calculado (.plat-rol-calc). Prefijos plat-plan- y
   plat-rol-. Sin selectores body.panel-*.
   ===================================================================== */
.plat-plan { padding: 0; overflow: hidden; }
.plat-plan-sum {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    min-height: 52px; padding: 10px 16px; cursor: pointer; list-style: none;
}
.plat-plan-sum::-webkit-details-marker { display: none; }
.plat-plan-sum::marker { content: ''; }
.plat-plan-sum:hover { background: var(--bg-hover); }
.plat-plan-sum:focus-visible { outline: 2px solid var(--brand, var(--accent)); outline-offset: -2px; }
.plat-plan-nombre { font-weight: 700; font-size: 1.02rem; color: var(--heading-color, var(--text)); }
.plat-plan-resumen { flex: 1; min-width: 0; font-size: .78rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.plat-plan-chev { margin-left: auto; color: var(--text-muted); transition: transform var(--transition); }
.plat-plan[open] > .plat-plan-sum { border-bottom: 1px solid var(--border); }
.plat-plan[open] .plat-plan-chev, .plat-cuentas[open] .plat-plan-chev { transform: rotate(180deg); }
.plat-cuentas { padding: 0; overflow: hidden; }
.plat-cuentas > .plat-plan-sum { border-bottom: 0; }
.plat-cuentas > .sheet-rows { margin: 0; }
.plat-cuentas > .sheet-empty { margin: 14px 16px; }
.plat-cuentas[open] > .plat-plan-sum { border-bottom: 1px solid var(--border); }
.plat-cuentas-ver { display: flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 44px; padding: 8px 16px; font-size: .85rem; }
.plat-plan-body { display: grid; gap: 12px; padding: 14px 16px 4px; }
.plat-plan-periodo .plat-periodo { min-width: 0; }

.plat-rol {
    --rol-c: var(--accent); --rol-bg: var(--accent-light);
    border: 1px solid var(--border); border-left: 3px solid var(--rol-c);
    border-radius: var(--radius-md); background: var(--rol-bg); padding: 12px 12px 0;
}
.plat-rol--admin { --rol-c: var(--warning); --rol-bg: var(--warning-bg); }
.plat-rol--revendedor { --rol-c: var(--accent); --rol-bg: var(--accent-light); }
.plat-rol--cliente { --rol-c: var(--success); --rol-bg: var(--success-bg); }
.plat-rol-t {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    font-size: .78rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rol-c);
}
.plat-rol-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.plat-rol-campos > * { min-width: 0; }
.plat-rol-ref { font-weight: 500; color: var(--text-muted); }
.plat-rol-calc {
    display: flex; align-items: center; min-height: 48px; padding: 0 12px;
    border: 1px dashed var(--border-strong); border-radius: var(--radius-md);
    background: var(--bg-card); color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums;
}
@media (max-width: 480px) {
    .plat-rol-campos { grid-template-columns: 1fr; }
    .plat-plan-resumen { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) {
    .plat-plan-chev { transition: none; }
}

/* =====================================================================
   TIENDA DEL REVENDEDOR — CONFIRMACIÓN DE COMPRA (reseller/tienda.php)
   #modalExito y #modalExitoCombo: botones de compartir con texto visible
   (el title no se ve en el móvil). WhatsApp y Telegram usan .btn-wa/.btn-tg
   (D11c). Prefijo tienda-exito-. Sin selectores body.panel-*.
   ===================================================================== */
.success-actions.tienda-exito-acciones { flex-wrap: wrap; }
.share-btns.tienda-exito-share { flex-wrap: wrap; justify-content: center; gap: 8px; }
.share-btns.tienda-exito-share .btn { width: auto; min-height: 44px; padding: 0 14px; font-size: .9rem; }
.tienda-exito-combo { flex-wrap: wrap; }
.tienda-exito-combo > .btn { min-height: 44px; flex: 1 1 auto; }
@media (max-width: 480px) {
    .tienda-exito-acciones > .btn, .share-btns.tienda-exito-share { width: 100%; }
    .share-btns.tienda-exito-share .btn { flex: 1 1 auto; padding: 0 10px; }
}

/* =====================================================================
   PORTAL DEL REVENDEDOR — GUÍAS (D11e)
   reseller/guias.php. Prefijo rgu-. Absorbe la antigua assets/css/guias.css
   (la cuadrícula .guia-* pasa a .rgu-*; los morados fijos pasan a
   --accent-rgb). #guiaModal es un .sheet-modal de solo lectura: hero, una
   .sheet-card por sección y .sheet-tabbar. Las .guia-text/.guia-reglas de
   más arriba son del #modalGuia de la tienda y no se tocan.
   Sin selectores body.panel-*.
   ===================================================================== */
.rgu-oculto { display: none !important; }
.rgu-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px; margin-bottom: 24px;
}
.rgu-card {
    position: relative; display: flex; flex-direction: column; overflow: hidden;
    background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); cursor: pointer;
    transition: transform .3s cubic-bezier(.4, 0, .2, 1), border-color .3s ease, box-shadow .3s ease;
}
.rgu-card::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 1;
    background: linear-gradient(135deg, var(--accent), rgba(var(--accent-rgb), .55));
    transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.rgu-card:hover { transform: translateY(-8px); border-color: var(--accent); box-shadow: 0 12px 32px rgba(var(--accent-rgb), .25); }
.rgu-card:hover::before, .rgu-card:focus-visible::before { transform: scaleX(1); }
.rgu-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); }
.rgu-card-header {
    position: relative; overflow: hidden; height: 140px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .06));
    border-bottom: 1px solid var(--border);
}
.rgu-card-header::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% -50%, rgba(var(--accent-rgb), .2), transparent 70%);
}
.rgu-card-logo {
    position: relative; z-index: 1; max-width: 70%; max-height: 100px; object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .2));
}
.rgu-card-icon { position: relative; z-index: 1; font-size: 3rem; color: var(--accent); opacity: .7; }
.rgu-card-body { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; }
.rgu-card-body > .badge { align-self: flex-start; }
.rgu-card-title {
    margin: 0; min-height: 2.5em; display: flex; align-items: center;
    font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--text);
}
.rgu-card-footer {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 12px 16px; border-top: 1px solid var(--border);
    font-size: .85rem; font-weight: 600; color: var(--accent);
    background: linear-gradient(to bottom, transparent, rgba(var(--accent-rgb), .05));
    transition: background .2s ease;
}
.rgu-card:hover .rgu-card-footer { background: rgba(var(--accent-rgb), .12); }
.rgu-card-footer i { transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.rgu-card:hover .rgu-card-footer i { transform: translateX(4px); }

/* Modal: logo contenido (no recortado) e icono de respaldo sin logo. */
.sheet-hero-logo.rgu-hero-logo { object-fit: contain; padding: 8px; }
.rgu-hero-icono { color: var(--accent); }
.rgu-panel { display: none; }
.rgu-panel.is-active { display: block; animation: rgu-fade-in .3s ease; }
/* Respeta los saltos de línea que el admin escribió (se pinta con textContent). */
.rgu-text { padding: 14px 0; white-space: pre-line; line-height: 1.6; color: var(--text); overflow-wrap: anywhere; }
.rgu-text.rgu-reglas {
    margin: 14px 0; padding: 14px 16px;
    background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-md);
}
.rgu-tab { text-align: center; line-height: 1.2; padding: 4px 6px; }
@keyframes rgu-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
    .rgu-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; }
    .rgu-card-header { height: 120px; }
    .rgu-card-title { font-size: .95rem; }
}
@media (max-width: 520px) {
    .rgu-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .rgu-card-header { height: 100px; }
    .rgu-card-logo, .rgu-card-icon { max-height: 80px; }
    .rgu-card-body { padding: 14px 12px; }
    .rgu-card-footer { padding: 10px 12px; font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .rgu-card, .rgu-card::before, .rgu-card-footer, .rgu-card-footer i { transition: none; }
    .rgu-card:hover { transform: none; }
    .rgu-panel.is-active { animation: none; }
}

/* =====================================================================
   PORTAL DEL REVENDEDOR — REPORTES (D11f)
   reseller/reportes.php. Prefijo rrp-. Absorbe los style= del visor de la
   captura (#modalImagen), de la miniatura de la lista y de la vista previa
   del formulario; el detalle y el formulario usan las clases sheet-* y el
   z-index de .rpm-detail-backdrop (999) de más arriba. Sin selectores
   body.panel-*.
   ===================================================================== */
.rrp-thumb { display: block; width: 40px; height: 40px; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; }
.rrp-tile { background: var(--bg-hover); color: var(--text-muted); }
.sheet-pill.rrp-pill--success { background: var(--success-bg); color: var(--success); }
/* El display de la vista previa lo mueve el JS (data-preview). */
.rrp-preview { max-width: 200px; margin-bottom: 8px; border-radius: 8px; }
/* Visor de la captura: sin caja, solo la imagen y su X encima. */
.rrp-visor { max-width: min(92vw, 900px); padding: 0; background: transparent; box-shadow: none; }
.rrp-visor-top { text-align: right; margin-bottom: 8px; }
.rrp-visor-close { background: rgba(0, 0, 0, .5); border-radius: 8px; }
.rrp-visor-img { display: block; max-width: 100%; max-height: 82vh; margin: 0 auto; border-radius: 10px; }

/* =====================================================================
   PORTAL DEL REVENDEDOR — MIS CUENTAS (D11g)
   reseller/cuentas.php. Prefijo rcu-. Absorbe los style= de los titulos de
   grupo y del boton de filtros y el <style> del resaltado de la compra
   señalada (?compra=); el detalle y el modal de renovar usan las clases
   sheet-*. El detalle sigue en .rpm-detail-backdrop (999) y #modalRenovar en
   .modal-backdrop (1000), asi que renovar se abre por encima del detalle y
   compartir/QR (1300) por encima de ambos. Sin selectores body.panel-*.
   ===================================================================== */
.rcu-grupo { margin: 24px 0 16px; font-size: 1.1rem; }
.filters .form-group.rcu-filtro-btn { flex: 0 0 auto; min-width: 0; }

/* Fila/tarjeta señalada al llegar desde una notificación (?compra=ID) */
@keyframes rowHighlightPulse {
    0%, 100% { background: color-mix(in srgb, var(--accent) 16%, transparent); }
    50%      { background: color-mix(in srgb, var(--accent) 30%, transparent); }
}
.row-highlight { animation: rowHighlightPulse 1.2s ease-in-out 2; box-shadow: inset 3px 0 0 var(--accent); }
@media (prefers-reduced-motion: reduce) { .row-highlight { animation: none; } }

/* Detalle: mosaico de la cabecera en el color de marca/acento e IDs en monoespaciada. */
.rcu-hero-tile { color: var(--brand-on, var(--text-inverse, #fff)); background: var(--brand, var(--accent)); border: 0; }
.rcu-mono { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); }

/* Barra de acciones del detalle: Renovar / Marcar como usado arriba y los
   cuatro botones de compartir (con su etiqueta) en una fila de cuatro, o de dos
   en teléfonos estrechos. El formulario de marcar usado no hace caja: su boton
   es el item de la barra. */
.rcu-bar { flex-wrap: wrap; flex-shrink: 0; }
.rcu-pin-form { display: contents; }
.rcu-bar > .btn, .rcu-pin-form > .btn { flex: 1 1 160px; min-height: 48px; justify-content: center; }
.rcu-share { flex: 1 1 100%; min-width: 0; }
.rcu-share .sp-share-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; }
.rcu-share .sp-share-group .btn { min-height: 44px; justify-content: center; gap: 8px; padding-left: 10px; padding-right: 10px; }
.rcu-share-txt { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 480px) {
    .rcu-share .sp-share-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------------------------------------------------------------------
   PORTAL DEL REVENDEDOR — TIENDA, PÁGINA Y CATÁLOGO (D11h)
   Prefijo rtd-. Sin selectores body.panel-*. No toca .pcard, .product-card,
   .product-grid, .combo-* ni .ad-* (las usa también admin/tienda.php).
   --------------------------------------------------------------------- */
/* Insignia del combo dentro de .combo-card: sale del flujo absoluto de .pcard-head. */
.rtd-combo-badge { position: static; display: inline-flex; align-items: center; gap: 5px; align-self: flex-start; margin-bottom: 10px; }
/* Botón Aplicar de los filtros: no se estira con los demás campos. */
.filters .form-group.rtd-filtro-accion { flex: 0; }

/* D11i y C5: resumen del carrito y lineas del combo armado */
.rc-texto { white-space: pre-wrap; word-break: break-word; margin: 0; font: inherit; font-size: 0.9rem; }
.cb-lineas { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.cb-lineas li { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

/* ===== D11i: modales de la tienda del revendedor (prefijo rtm-) ===== */
.rtm-mt { margin-top: 14px; }
.rtm-mb { margin-bottom: 12px; }
.rtm-prewrap { white-space: pre-line; }
.rtm-label-sm { font-size: .75rem; }
.cart-panel .cart-cupon input { text-transform: uppercase; }
.cart-line-logo--vacio { display: flex; align-items: center; justify-content: center; background: var(--bg-hover); }
.cred-value { overflow-wrap: anywhere; }
@media (max-width: 480px) { .success-creds-box .cred-row { grid-template-columns: 1fr; gap: 2px; padding: 10px 0; } }

/* Éxito de compra: icono grande, título y subtítulo centrados */
.rtm-exito-head { flex-direction: column; align-items: center; gap: 6px; text-align: center; border-bottom: 0; padding-bottom: 0; }
.rtm-exito-ico { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; font-size: 1.7rem; color: #fff;
    background: linear-gradient(145deg, var(--success), #059669); box-shadow: 0 8px 24px rgba(16,185,129,.45); animation: rtm-pop .45s cubic-bezier(.34,1.56,.64,1) both; }
.rtm-exito-title { font-size: 1.5rem; font-weight: 800; color: var(--success); margin: 4px 0 0; }
.rtm-exito-sub { margin: 0; color: var(--text-muted); font-size: .9rem; }
.rtm-exito-sub strong { color: var(--text); }
.rtm-exito-body { padding-top: 16px; }
.rtm-exito-foot { border-top: 0; padding-top: 10px; }
.rtm-exito-foot .btn { border-radius: 12px; font-weight: 600; }
.rtm-combo-acc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.rtm-combo-acc > .btn-primary { flex: 1 1 100%; }
.rtm-combo-acc > .btn:not(.btn-primary) { flex: 1 1 0; min-width: 120px; }
@keyframes rtm-pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .rtm-exito-ico { animation: none; } }
/* Producto sin logo: no se reserva el panel vacío, el formulario ocupa todo el ancho. */
.buy-grid:has(.buy-media img[src=""]) { grid-template-columns: 1fr; }
.buy-media:has(img[src=""]) { display: none; }