@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

:root {
    --bg-main: #05070a;
    --bg-panel: #0b1118;
    --bg-card: #101923;
    --bg-soft: #162230;

    --green: #00ff88;
    --cyan: #00d9ff;
    --blue: #1b6dff;
    --yellow: #ffd166;
    --orange: #ff9f1c;
    --red: #ff304f;
    --purple: #a855f7;

    --text: #ecf8ff;
    --muted: #8ea3b5;
    --line: rgba(0, 217, 255, .22);
    --line-strong: rgba(0, 217, 255, .55);

    --radius: 14px;
    --shadow: 0 18px 50px rgba(0,0,0,.55);
    --font-title: 'Rajdhani', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(0,217,255,.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(0,255,136,.10), transparent 28%),
        linear-gradient(135deg, #020406, #08111a 45%, #020406);
    color: var(--text);
    font-family: var(--font-title);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(0,217,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,217,255,.045) 1px, transparent 1px);
    background-size: 42px 42px;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.025) 0,
        rgba(255,255,255,.025) 1px,
        transparent 1px,
        transparent 5px
    );
    opacity: .32;
    z-index: 9999;
}

/* ==================================================
   MENU ADMIN POLICIAL
================================================== */

.admin-grid-container {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-menu {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 14px;
    background:
        linear-gradient(180deg, rgba(5,10,16,.98), rgba(9,17,26,.98)),
        radial-gradient(circle at top, rgba(0,217,255,.14), transparent 35%);
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 40px rgba(0,0,0,.45);
}

.logo-container {
    padding: 10px 10px 20px;
    margin-bottom: 14px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.logo-container img,
.logo {
    max-width: 150px;
    max-height: 80px;
    filter: drop-shadow(0 0 16px rgba(0,217,255,.35));
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-items a,
.menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .04em;
    transition: .2s;
}

.menu-items a:hover,
.menu-items a.active,
.menu-items a.active-parent,
.menu-toggle.active-parent {
    color: var(--green);
    border-color: rgba(0,255,136,.45);
    background: linear-gradient(90deg, rgba(0,255,136,.16), rgba(0,217,255,.08));
    box-shadow: inset 4px 0 0 var(--green), 0 0 18px rgba(0,255,136,.12);
    transform: translateX(3px);
}

.logout-link {
    margin-top: 12px;
    color: #ffd6dd !important;
    border-color: rgba(255,48,79,.35) !important;
    background: rgba(255,48,79,.10) !important;
}

.logout-link:hover {
    color: #fff !important;
    box-shadow: inset 4px 0 0 var(--red), 0 0 20px rgba(255,48,79,.22) !important;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    padding: 0 0 0 16px;
    margin: 0;
    transition: max-height .35s ease, padding .25s ease;
}

.submenu.active {
    max-height: 1200px;
    padding: 7px 0 7px 16px;
}

.submenu li {
    list-style: none;
}

.submenu a {
    font-size: 12px;
    padding: 9px 11px;
}

/* ==================================================
   LAYOUT GENERAL
================================================== */

.admin-main-content {
    padding: 26px;
    min-width: 0;
}

.main-title {
    position: relative;
    margin: 0 0 22px;
    padding: 18px 22px 18px 54px;
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(0,217,255,.15), rgba(0,255,136,.06)),
        rgba(8,16,25,.88);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    color: var(--green);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(0,255,136,.35);
}

.main-title::before {
    content: "⌖";
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cyan);
    font-size: 30px;
}

.alert {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid var(--line);
    background: rgba(8,16,25,.9);
    box-shadow: var(--shadow);
}

.alert-success {
    color: var(--green);
    border-color: rgba(0,255,136,.5);
}

.alert-error,
.alert-danger {
    color: var(--red);
    border-color: rgba(255,48,79,.55);
}

/* ==================================================
   INDEX
================================================== */

.top-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 16px 28px;
    background:
        linear-gradient(90deg, rgba(5,10,16,.96), rgba(10,20,31,.92)),
        radial-gradient(circle at left, rgba(0,217,255,.14), transparent 35%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 45px rgba(0,0,0,.45);
    backdrop-filter: blur(12px);
}

.logo-and-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-small {
    max-height: 64px;
    max-width: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(0,217,255,.42));
}

.logo-and-title::after {
    content: "CENTRO DE ACCESO / JIMTV";
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(0,255,136,.35);
}

.admin-title {
    display: none;
}

.login-form-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.login-form-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(0,217,255,.20);
}

.login-input-top {
    width: 170px;
    height: 42px;
    padding: 0 13px;
    border-radius: 11px;
    border: 1px solid rgba(0,217,255,.24);
    outline: none;
    background: #050b11;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    transition: .2s;
}

.login-input-top::placeholder {
    color: #6f879a;
}

.login-input-top:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12), 0 0 18px rgba(0,255,136,.16);
}

.login-button-top {
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), #00b86b);
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(0,255,136,.23);
    transition: .2s;
}

.login-button-top:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.error-message-top {
    margin: 0;
    padding: 8px 12px;
    color: var(--red);
    background: rgba(255,48,79,.12);
    border: 1px solid rgba(255,48,79,.42);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.container {
    width: min(1180px, 94%);
    margin: 0 auto;
}

.store-section-main {
    min-height: calc(100vh - 98px);
    display: grid;
    place-items: center;
    padding: 46px 0;
}

.store-content-main {
    position: relative;
    width: min(760px, 100%);
    padding: 42px 34px 38px;
    text-align: center;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.94), rgba(5,10,16,.97));
    border: 1px solid var(--line);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
}

.store-content-main::before {
    content: "OPERACIÓN COMERCIAL ACTIVA";
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--green);
    border: 1px solid rgba(0,255,136,.35);
    background: rgba(0,255,136,.08);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
}

.store-image-large {
    position: relative;
    z-index: 1;
    width: min(340px, 72vw);
    margin-top: 20px;
    filter:
        drop-shadow(0 0 28px rgba(0,217,255,.38))
        drop-shadow(0 18px 22px rgba(0,0,0,.5));
    animation: floatCart 3.6s ease-in-out infinite;
}

@keyframes floatCart {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.store-title-main {
    position: relative;
    z-index: 1;
    margin: 24px 0 22px;
    color: var(--cyan);
    font-size: clamp(38px, 7vw, 74px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow:
        0 0 18px rgba(0,217,255,.45),
        0 0 38px rgba(0,217,255,.18);
}

.store-title-main::after {
    content: "Acceso público al catálogo de productos digitales";
    display: block;
    margin-top: 14px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: clamp(12px, 2vw, 15px);
    letter-spacing: .07em;
    text-transform: none;
    text-shadow: none;
}

.store-button-main {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    height: 56px;
    padding: 0 28px;
    border-radius: 14px;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(0,255,136,.27);
    transition: .22s;
}

.store-button-main::before {
    content: "▶";
    margin-right: 9px;
    font-size: 14px;
}

.store-button-main:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.08);
    box-shadow: 0 0 42px rgba(0,217,255,.38);
}

/* ==================================================
   LOGIN
================================================== */

body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-container.command-center,
.login-container {
    position: relative;
    width: min(500px,92vw);
    background:
        linear-gradient(180deg, rgba(16,30,43,.97), rgba(5,10,16,.97));
    border: 1px solid rgba(0,217,255,.25);
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.login-container.command-center::before,
.login-container::before {
    content: "CENTRO DE CONTROL";
    position: absolute;
    top: 15px;
    left: 15px;
    font-family: var(--font-mono);
    color: var(--green);
    font-size: 11px;
    letter-spacing: .15em;
}

.login-title {
    color: var(--cyan);
    font-size: 38px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 15px rgba(0,217,255,.35);
}

.system-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .15em;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 15px var(--green);
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    50% { transform: scale(1.4); }
}

.form-group {
    text-align: left;
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.form-group input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.20);
    background: #040a10;
    color: white;
    font-family: var(--font-mono);
    font-size: 14px;
    transition: .25s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow:
        0 0 0 3px rgba(0,255,136,.12),
        0 0 20px rgba(0,255,136,.15);
}

.login-btn {
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    color: #00140b;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: .25s;
}

.login-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 35px rgba(0,255,136,.30);
}

/* ==================================================
   GESTION CUENTAS
================================================== */

.bulk-actions {
    position: sticky;
    top: 14px;
    z-index: 50;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding: 14px;
    border-radius: var(--radius);
    background: rgba(5,10,16,.92);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.bulk-action-btn,
.clear-filters-btn {
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    color: #00140b !important;
    font-family: var(--font-title);
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: .2s;
}

#make-available-selected-btn {
    background: linear-gradient(135deg, var(--green), #00b86b) !important;
}

#delete-selected-btn {
    background: linear-gradient(135deg, var(--red), #9d1026) !important;
    color: white !important;
}

.global-search-mobile {
    width: 100%;
    margin-bottom: 16px;
    padding: 16px 18px 16px 48px;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    outline: none;
    background:
        linear-gradient(90deg, rgba(0,217,255,.08), rgba(0,255,136,.04)),
        #060c12;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 15px;
    box-shadow: 0 0 26px rgba(0,217,255,.12);
}

.table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
    background: rgba(5,10,16,.86);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

#cuentasTable,
#cuentasMaestrasTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

#cuentasTable {
    min-width: 1850px;
}

#cuentasMaestrasTable {
    min-width: 1560px;
}

#cuentasTable thead,
#cuentasMaestrasTable thead {
    background: linear-gradient(180deg, #0e1d2b, #08111a);
}

#cuentasTable th,
#cuentasMaestrasTable th {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 13px 10px;
    color: var(--cyan);
    border-bottom: 1px solid var(--line-strong);
    border-right: 1px solid rgba(255,255,255,.045);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#cuentasTable td,
#cuentasMaestrasTable td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    border-right: 1px solid rgba(255,255,255,.035);
    color: var(--text);
    vertical-align: middle;
    background: rgba(10,18,27,.56);
}

#cuentasTable tbody tr:nth-child(even) td,
#cuentasMaestrasTable tbody tr:nth-child(even) td {
    background: rgba(13,25,36,.68);
}

#cuentasTable tbody tr:hover td,
#cuentasMaestrasTable tbody tr:hover td {
    background: rgba(0,217,255,.09);
}

.filter-input {
    width: 100%;
    margin-top: 7px;
    padding: 8px 9px;
    border-radius: 9px;
    border: 1px solid rgba(0,217,255,.24);
    background: #050a10;
    color: var(--text);
    outline: none;
    font-family: var(--font-mono);
    font-size: 11px;
}

.filter-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(0,255,136,.15);
}

.copy-container {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 12px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(0,217,255,.18);
    cursor: pointer;
}

.copy-text {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cyan);
    font-family: var(--font-mono);
}

.copy-button {
    width: 31px;
    height: 31px;
    border: 1px solid rgba(0,255,136,.28);
    border-radius: 9px;
    background: rgba(0,217,255,.12);
    color: var(--green);
    cursor: pointer;
    transition: .2s;
}

.copy-button:hover {
    transform: translateY(-2px);
}

.pagado,
.disponible,
.debe,
.vencida,
.le-quedan,
.vencido,
.pausada,
.normal,
.critico,
.advertencia,
.activo-texto,
.pausada-texto,
.days-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.pagado,
.normal,
.activo-texto,
.days-ok {
    color: var(--green);
    background: rgba(0,255,136,.12);
}

.disponible {
    color: var(--cyan);
    background: rgba(0,217,255,.12);
}

.debe,
.advertencia,
.days-warning {
    color: var(--yellow);
    background: rgba(255,209,102,.12);
}

.vencida,
.vencido,
.critico,
.days-expired {
    color: var(--red);
    background: rgba(255,48,79,.14);
}

.pausada,
.pausada-texto {
    color: var(--purple);
    background: rgba(168,85,247,.15);
}

#cuentasTable td.acciones-celda,
#cuentasMaestrasTable td.acciones-celda {
    position: sticky;
    right: 0;
    z-index: 15;
    background: #07111a !important;
    border-left: 1px solid var(--line-strong);
    box-shadow: -12px 0 22px rgba(0,0,0,.28);
}

#cuentasTable td.acciones-celda {
    min-width: 305px;
}

#cuentasMaestrasTable td.acciones-celda {
    min-width: 245px;
}

.acciones-celda {
    display: grid;
    grid-template-columns: repeat(5, 42px);
    justify-content: center;
    gap: 8px;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    color: white !important;
    text-decoration: none;
    transition: .2s;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
    cursor: pointer;
}

.action-btn:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.12);
}

.edit-btn {
    background: linear-gradient(135deg, #ffd166, #ff9f1c) !important;
    color: #1b1000 !important;
}

.delete-btn {
    background: linear-gradient(135deg, #ff304f, #9d1026) !important;
}

.pause-btn {
    background: linear-gradient(135deg, #ffd166, #b7791f) !important;
    color: #1b1000 !important;
}

.resume-btn,
.renew-btn {
    background: linear-gradient(135deg, #00ff88, #00995a) !important;
    color: #00190e !important;
}

.link-btn,
.visible-icon {
    background: linear-gradient(135deg, #00d9ff, #1b6dff) !important;
}

.update-btn,
.move-btn {
    background: linear-gradient(135deg, #a855f7, #5b21b6) !important;
}

.whatsapp-btn {
    background: linear-gradient(135deg, #25d366, #075e54) !important;
}

.change-btn {
    background: linear-gradient(135deg, #ff9f1c, #c2410c) !important;
}

.code-link-btn {
    background: linear-gradient(135deg, #ffd166, #f59e0b) !important;
    color: #160d00 !important;
}

.hidden-icon {
    background: linear-gradient(135deg, var(--red), #9d1026) !important;
}

/* ==================================================
   GESTION MAESTRAS
================================================== */

.platform-group-header {
    position: sticky;
    left: 0;
    z-index: 10;
    padding: 13px 18px !important;
    background:
        linear-gradient(90deg, rgba(168,85,247,.36), rgba(0,217,255,.12)) !important;
    color: var(--green) !important;
    font-family: var(--font-mono);
    font-size: 14px !important;
    letter-spacing: .18em;
    text-align: left !important;
    text-transform: uppercase;
    border-top: 1px solid rgba(168,85,247,.6);
    border-bottom: 1px solid rgba(0,255,136,.35);
}

.platform-group-header::before {
    content: "NÚCLEO / ";
    color: var(--cyan);
}

tr.fila-oculta td {
    background: rgba(255,48,79,.16) !important;
    color: #ffd6dd !important;
}

.perfiles-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.36);
    font-family: var(--font-mono);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.filter-buttons {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
}

.clear-filters-btn {
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: white !important;
}

/* ==================================================
   SWEETALERT
================================================== */

.swal2-popup {
    background: linear-gradient(180deg, #101923, #050a10) !important;
    color: var(--text) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 40px rgba(0,217,255,.22) !important;
    font-family: var(--font-title) !important;
}

.swal2-title {
    color: var(--green) !important;
    letter-spacing: .05em;
}

.swal2-html-container {
    color: var(--muted) !important;
}

.swal2-confirm,
.swal2-cancel {
    border-radius: 10px !important;
    font-weight: 700 !important;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 900px) {
    .admin-grid-container {
        grid-template-columns: 1fr;
    }

    .admin-menu {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .menu-items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-items a,
    .menu-toggle {
        font-size: 12px;
        padding: 10px;
        justify-content: center;
        text-align: center;
    }

    .submenu {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .submenu.active {
        padding-left: 0;
    }

    .admin-main-content {
        padding: 14px;
    }

    .main-title {
        font-size: 28px;
        padding: 16px 16px 16px 48px;
    }

    .top-bar {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .logo-and-title {
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }

    .login-form-container {
        align-items: stretch;
    }

    .login-form-inline {
        display: grid;
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .login-input-top,
    .login-button-top {
        width: 100%;
    }

    .store-section-main {
        min-height: auto;
        padding: 28px 0;
    }

    .store-content-main {
        padding: 48px 20px 28px;
        border-radius: 22px;
    }

    .store-title-main {
        font-size: 42px;
    }

    .store-button-main {
        width: 100%;
    }

    .bulk-actions {
        position: relative;
        top: auto;
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .bulk-action-btn {
        width: 100%;
    }

    .table-container {
        overflow: visible;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    #cuentasTable,
    #cuentasMaestrasTable {
        min-width: 0;
    }

    #cuentasTable thead,
    #cuentasMaestrasTable thead {
        display: none;
    }

    #cuentasTable,
    #cuentasTable tbody,
    #cuentasTable tr,
    #cuentasTable td,
    #cuentasMaestrasTable,
    #cuentasMaestrasTable tbody,
    #cuentasMaestrasTable tr,
    #cuentasMaestrasTable td {
        display: block;
        width: 100%;
    }

    #cuentasTable tbody tr,
    #cuentasMaestrasTable tbody tr {
        margin-bottom: 18px;
        padding: 14px;
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(16,25,35,.96), rgba(6,12,18,.96));
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        overflow: hidden !important;
    }

    #cuentasTable td,
    #cuentasMaestrasTable td {
        position: relative !important;
        right: auto !important;
        z-index: auto !important;
        display: grid;
        grid-template-columns: 125px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 10px 0;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        background: transparent !important;
        box-shadow: none !important;
        text-align: right;
    }

    #cuentasTable td::before,
    #cuentasMaestrasTable td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    #cuentasMaestrasTable td:nth-child(1)::before { content: "Plataforma"; }
    #cuentasMaestrasTable td:nth-child(2)::before { content: "Correo"; }
    #cuentasMaestrasTable td:nth-child(3)::before { content: "Contraseña"; }
    #cuentasMaestrasTable td:nth-child(4)::before { content: "Perfiles"; }
    #cuentasMaestrasTable td:nth-child(5)::before { content: "Proveedor"; }
    #cuentasMaestrasTable td:nth-child(6)::before { content: "Compra"; }
    #cuentasMaestrasTable td:nth-child(7)::before { content: "Días"; }
    #cuentasMaestrasTable td:nth-child(8)::before { content: "Costo"; }
    #cuentasMaestrasTable td:nth-child(9)::before { content: "Vencimiento"; }
    #cuentasMaestrasTable td:nth-child(10)::before { content: "Restantes"; }
    #cuentasMaestrasTable td:nth-child(11)::before { content: "Observación"; }

    #cuentasTable td.acciones-celda,
    #cuentasMaestrasTable td.acciones-celda,
    .acciones-celda {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 9px !important;
        min-width: 0 !important;
        position: relative !important;
        right: auto !important;
        z-index: auto !important;
        padding-top: 14px !important;
    }

    .acciones-celda::before {
        content: "ACCIONES";
        grid-column: 1 / -1;
        color: var(--green);
        font-family: var(--font-mono);
        font-size: 12px;
        text-align: center;
        letter-spacing: .14em;
        margin-bottom: 3px;
    }

    .action-btn {
        width: 100% !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .copy-container {
        max-width: 100%;
        justify-self: end;
    }

    .copy-text {
        max-width: 175px;
    }

    .platform-group-header {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .platform-group-header::before {
        content: "";
    }

    .filter-buttons {
        padding: 0;
    }

    .clear-filters-btn {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .menu-items {
        grid-template-columns: 1fr;
    }

    .main-title {
        font-size: 24px;
    }

    #cuentasTable td,
    #cuentasMaestrasTable td {
        grid-template-columns: 105px minmax(0, 1fr);
        font-size: 13px;
    }

    .copy-text {
        max-width: 140px;
    }

    .acciones-celda {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .login-container {
        padding: 30px 20px;
    }

    .login-title {
        font-size: 30px;
    }
}



/* ==================================================
   EDITAR CUENTA / EXPEDIENTE INDIVIDUAL
================================================== */

body.page-editar-cuenta {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.18), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.12), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-editar-cuenta .cuentas-container {
    width: min(980px, 94%);
    margin: 0 auto;
    padding: 34px 0;
}

.page-editar-cuenta .logo-container {
    width: min(360px, 100%);
    margin: 0 auto 22px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(5,10,16,.78);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.page-editar-cuenta .logo {
    max-width: 180px;
    max-height: 92px;
}

.page-editar-cuenta .panel-container {
    position: relative;
    padding: 34px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.32);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
}

.page-editar-cuenta .panel-container::before {
    content: "EXPEDIENTE OPERATIVO / EDICIÓN DE CUENTA";
    position: absolute;
    top: 18px;
    left: 22px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.09);
    border: 1px solid rgba(0,255,136,.35);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
}

.page-editar-cuenta .panel-container::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,217,255,.20), transparent 68%);
    pointer-events: none;
}

.page-editar-cuenta h2 {
    margin: 36px 0 28px;
    color: var(--cyan);
    font-size: clamp(34px, 5vw, 56px);
    line-height: .95;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 24px rgba(0,217,255,.38);
}

.page-editar-cuenta h2::before {
    content: "⌖ ";
    color: var(--green);
}

.page-editar-cuenta form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.page-editar-cuenta label {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.page-editar-cuenta input,
.page-editar-cuenta select,
.page-editar-cuenta textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border-radius: 13px;
    border: 1px solid rgba(0,217,255,.22);
    outline: none;
    background:
        linear-gradient(180deg, rgba(4,10,16,.98), rgba(8,17,26,.98));
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    transition: .22s;
}

.page-editar-cuenta input:focus,
.page-editar-cuenta select:focus,
.page-editar-cuenta textarea:focus {
    border-color: var(--green);
    box-shadow:
        0 0 0 3px rgba(0,255,136,.12),
        0 0 22px rgba(0,255,136,.16);
}

.page-editar-cuenta input[readonly] {
    color: var(--yellow);
    background: rgba(255,209,102,.08);
    border-color: rgba(255,209,102,.28);
}

.page-editar-cuenta textarea {
    min-height: 130px;
    padding: 14px 15px;
    resize: vertical;
}

.page-editar-cuenta form > label,
.page-editar-cuenta form > input,
.page-editar-cuenta form > select,
.page-editar-cuenta form > textarea,
.page-editar-cuenta .form-row-2,
.page-editar-cuenta .link-access-box,
.page-editar-cuenta .submit-edit-btn {
    grid-column: span 2;
}

.page-editar-cuenta .form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.page-editar-cuenta .link-access-box {
    margin: 8px 0;
    padding: 18px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(0,217,255,.12), rgba(0,255,136,.05)),
        rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.34);
    box-shadow: inset 4px 0 0 var(--cyan);
}

.page-editar-cuenta .link-access-box label {
    color: var(--green);
}

.page-editar-cuenta .submit-edit-btn {
    width: 100%;
    height: 58px;
    margin-top: 8px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(0,255,136,.25);
    transition: .22s;
}

.page-editar-cuenta .submit-edit-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 0 42px rgba(0,217,255,.36);
}

.page-editar-cuenta .back-edit-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 230px;
    margin: 22px auto 0;
    padding: 13px 18px;
    border-radius: 14px;
    color: var(--muted);
    text-decoration: none;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: .22s;
}

.page-editar-cuenta .back-edit-link:hover {
    color: var(--cyan);
    border-color: var(--line-strong);
    background: rgba(0,217,255,.09);
    transform: translateY(-2px);
}

/* Ajuste visual: cada label/input tradicional ocupa toda la fila */
.page-editar-cuenta form > label + select,
.page-editar-cuenta form > label + input,
.page-editar-cuenta form > label + textarea {
    grid-column: span 2;
}

/* Celular */
@media (max-width: 700px) {
    .page-editar-cuenta .cuentas-container {
        width: min(94%, 100%);
        padding: 18px 0;
    }

    .page-editar-cuenta .panel-container {
        padding: 26px 18px;
        border-radius: 22px;
    }

    .page-editar-cuenta .panel-container::before {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 16px;
        text-align: center;
        font-size: 9px;
    }

    .page-editar-cuenta h2 {
        margin-top: 12px;
        font-size: 34px;
    }

    .page-editar-cuenta form,
    .page-editar-cuenta .form-row-2 {
        grid-template-columns: 1fr;
    }

    .page-editar-cuenta form > label,
    .page-editar-cuenta form > input,
    .page-editar-cuenta form > select,
    .page-editar-cuenta form > textarea,
    .page-editar-cuenta .form-row-2,
    .page-editar-cuenta .link-access-box,
    .page-editar-cuenta .submit-edit-btn {
        grid-column: span 1;
    }

    .page-editar-cuenta .back-edit-link {
        width: 100%;
    }
}


/* ==================================================
   GARANTÍAS / CAMBIO DE CUENTA
================================================== */

body.page-garantias {
    background:
        radial-gradient(circle at 14% 10%, rgba(255,48,79,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.13), transparent 32%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-garantias .main-title {
    color: var(--red);
    text-shadow: 0 0 20px rgba(255,48,79,.42);
    border-color: rgba(255,48,79,.38);
    background:
        linear-gradient(90deg, rgba(255,48,79,.18), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
}

.page-garantias .main-title::before {
    content: "⚠";
    color: var(--yellow);
}

.guarantee-container {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(255,48,79,.28);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.055);
}

.guarantee-section {
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background: rgba(5,10,16,.58);
    border: 1px solid rgba(0,217,255,.20);
}

.guarantee-section h3 {
    margin: 0 0 18px;
    color: var(--cyan);
    text-align: center;
    font-size: 26px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(0,217,255,.28);
}

.guarantee-section h3::before {
    content: "▣ ";
    color: var(--green);
}

.account-display-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(0,217,255,.08), rgba(255,255,255,.025)),
        rgba(7,14,22,.92);
    border: 1px solid rgba(0,217,255,.18);
    transition: .22s;
}

.account-display-card.original {
    border-color: rgba(255,48,79,.55);
    box-shadow: inset 4px 0 0 var(--red), 0 0 24px rgba(255,48,79,.12);
}

.account-display-card.replacement {
    cursor: pointer;
}

.account-display-card.replacement:hover {
    transform: translateY(-2px);
    border-color: rgba(0,255,136,.5);
    box-shadow: 0 0 28px rgba(0,255,136,.16);
}

.account-display-card.replacement.selected {
    border-color: var(--green);
    background:
        linear-gradient(90deg, rgba(0,255,136,.16), rgba(0,217,255,.07)),
        rgba(7,14,22,.96);
    box-shadow: inset 4px 0 0 var(--green), 0 0 30px rgba(0,255,136,.22);
}

.platform-logo-small {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 14px;
    padding: 6px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    filter: drop-shadow(0 0 14px rgba(0,217,255,.25));
}

.account-info {
    flex: 1;
    min-width: 0;
}

.account-info p {
    margin: 5px 0;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    word-break: break-word;
}

.account-info strong {
    color: var(--cyan);
}

.replacement-list {
    max-height: 430px;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(0,217,255,.18);
}

.no-accounts,
.no-results {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-family: var(--font-mono);
}

.action-options {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(0,0,0,.28);
    border: 1px dashed rgba(255,209,102,.45);
}

.action-options p {
    margin: 0 0 12px;
    color: var(--yellow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.action-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
}

.action-options input[type="radio"] {
    accent-color: var(--green);
    transform: scale(1.25);
}

.action-buttons-container {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}

.btn-action {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .22s;
}

.btn-confirm {
    background: linear-gradient(135deg, var(--green), var(--cyan));
    color: #00140b;
    box-shadow: 0 0 26px rgba(0,255,136,.22);
}

.btn-confirm:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.5);
}

.btn-cancel {
    background: linear-gradient(135deg, #374151, #111827);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
}

.btn-action:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.message-box {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 15px;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--line);
    background: rgba(8,16,25,.9);
    box-shadow: var(--shadow);
}

.message-success {
    color: var(--green);
    border-color: rgba(0,255,136,.45);
}

.message-error {
    color: var(--red);
    border-color: rgba(255,48,79,.5);
}

.message-warning {
    color: var(--yellow);
    border-color: rgba(255,209,102,.5);
}

.message-info {
    color: var(--cyan);
    border-color: rgba(0,217,255,.45);
}

.comment-input-group {
    display: none;
}

/* móvil garantías */
@media (max-width: 760px) {
    .guarantee-container {
        padding: 16px;
        border-radius: 22px;
    }

    .guarantee-section {
        padding: 16px;
    }

    .guarantee-section h3 {
        font-size: 22px;
    }

    .account-display-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .platform-logo-small {
        width: 50px;
        height: 50px;
    }

    .action-buttons-container {
        flex-direction: column;
    }

    .btn-action {
        width: 100%;
    }
}





/* ==================================================
   ENVIAR WHATSAPP / DESPACHO OPERATIVO
================================================== */

body.page-enviar-whatsapp {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 12%, rgba(37,211,102,.16), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(0,217,255,.13), transparent 30%),
        linear-gradient(135deg, #020406, #07120d 45%, #020406);
}

.whatsapp-page-container {
    width: min(1180px, 94%);
    margin: 0 auto;
    padding: 34px 0;
}

.whatsapp-content {
    position: relative;
    padding: 28px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(12,30,22,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(37,211,102,.28);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
}

.whatsapp-content::before {
    content: "DESPACHO OPERATIVO / WHATSAPP";
    position: absolute;
    top: 18px;
    left: 22px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #25d366;
    background: rgba(37,211,102,.10);
    border: 1px solid rgba(37,211,102,.38);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
}

.page-enviar-whatsapp .main-title {
    margin-top: 34px;
    color: #25d366;
    border-color: rgba(37,211,102,.38);
    background:
        linear-gradient(90deg, rgba(37,211,102,.18), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 20px rgba(37,211,102,.38);
}

.page-enviar-whatsapp .main-title::before {
    content: "☏";
    color: var(--cyan);
}

.whatsapp-card-container {
    display: grid;
    gap: 22px;
}

.whatsapp-card {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(37,211,102,.12), rgba(0,217,255,.045)),
        rgba(6,14,20,.92);
    border: 1px solid rgba(37,211,102,.24);
    box-shadow: 0 18px 45px rgba(0,0,0,.38);
}

.whatsapp-card::before {
    content: "MENSAJE LISTO";
    position: absolute;
    right: 18px;
    top: 16px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.34);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
}

.whatsapp-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-radius: 18px;
    background:
        radial-gradient(circle, rgba(37,211,102,.16), transparent 70%),
        rgba(0,0,0,.28);
    border: 1px solid rgba(37,211,102,.22);
}

.platform-logo {
    max-width: 165px;
    max-height: 120px;
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 0 18px rgba(37,211,102,.35))
        drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.whatsapp-body {
    min-width: 0;
}

.whatsapp-text {
    width: 100%;
    min-height: 330px;
    max-height: 520px;
    overflow: auto;
    margin: 0;
    padding: 18px;
    border-radius: 18px;
    color: #d7ffe8;
    background:
        linear-gradient(180deg, rgba(0,0,0,.55), rgba(3,11,8,.82));
    border: 1px solid rgba(37,211,102,.25);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    box-shadow: inset 0 0 24px rgba(0,0,0,.35);
}

.whatsapp-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding-top: 4px;
}

.btn-copy-whatsapp,
.btn-open-whatsapp,
.back-to-gestion-btn {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .22s;
}

.btn-copy-whatsapp {
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: white;
}

.btn-open-whatsapp {
    background: linear-gradient(135deg, #25d366, #075e54);
    color: #00190e;
    box-shadow: 0 0 26px rgba(37,211,102,.22);
}

.back-to-gestion-btn {
    width: fit-content;
    margin: 24px auto 0;
    background: rgba(255,255,255,.045);
    color: var(--muted);
    border: 1px solid rgba(255,255,255,.10);
}

.btn-copy-whatsapp:hover,
.btn-open-whatsapp:hover,
.back-to-gestion-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.back-to-gestion-btn:hover {
    color: var(--cyan);
    border-color: var(--line-strong);
}

/* móvil enviar whatsapp */
@media (max-width: 820px) {
    .whatsapp-page-container {
        padding: 18px 0;
    }

    .whatsapp-content {
        padding: 22px 16px;
        border-radius: 22px;
    }

    .whatsapp-content::before {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 14px;
        text-align: center;
        font-size: 9px;
    }

    .page-enviar-whatsapp .main-title {
        margin-top: 12px;
    }

    .whatsapp-card {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .whatsapp-card::before {
        position: relative;
        top: auto;
        right: auto;
        width: fit-content;
        margin-bottom: 8px;
    }

    .whatsapp-text {
        min-height: 300px;
        font-size: 13px;
    }

    .whatsapp-actions {
        flex-direction: column;
    }

    .btn-copy-whatsapp,
    .btn-open-whatsapp,
    .back-to-gestion-btn {
        width: 100%;
    }
}







/* ==================================================
   GESTIONAR PERFILES MAESTRA
================================================== */

body.page-perfiles-maestra {
    background:
        radial-gradient(circle at 12% 12%, rgba(168,85,247,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.11), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-perfiles-maestra .main-title {
    color: #d8b4fe;
    border-color: rgba(168,85,247,.42);
    background:
        linear-gradient(90deg, rgba(168,85,247,.20), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 20px rgba(168,85,247,.38);
}

.page-perfiles-maestra .main-title::before {
    content: "👥";
    color: var(--green);
}

.page-perfiles-maestra .form-section,
.page-perfiles-maestra .table-container {
    width: min(850px, 100%);
    margin: 0 auto 24px;
    padding: 24px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(168,85,247,.30);
    box-shadow: var(--shadow);
}

.page-perfiles-maestra .form-section h3,
.page-perfiles-maestra .table-container h3 {
    margin: 0 0 20px;
    text-align: center;
    color: var(--cyan);
    font-size: 26px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-perfiles-maestra .form-section label {
    display: block;
    margin-bottom: 9px;
    color: var(--green);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-perfiles-maestra input[type="email"] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(0,217,255,.25);
    outline: none;
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
}

.page-perfiles-maestra input[type="email"]:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-perfiles-maestra button[type="submit"] {
    width: 100%;
    height: 54px;
    margin-top: 14px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.perfiles-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.perfiles-lista li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 150px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 16px;
    background: rgba(5,10,16,.72);
    border: 1px solid rgba(0,217,255,.18);
}

.email-perfil {
    color: var(--cyan);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.estado-perfil {
    justify-self: center;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.35);
    font-family: var(--font-mono);
    font-size: 12px;
}

.desvincular-perfil-btn {
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #1b1000;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: .22s;
}

.desvincular-perfil-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.page-perfiles-maestra p[style*="text-align: center"] .action-btn {
    width: auto;
    min-width: 240px;
    padding: 0 18px;
    background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
}

@media (max-width: 720px) {
    .page-perfiles-maestra .form-section,
    .page-perfiles-maestra .table-container {
        padding: 18px;
        border-radius: 20px;
    }

    .perfiles-lista li {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .estado-perfil {
        justify-self: center;
    }

    .desvincular-perfil-btn {
        width: 100%;
    }
}




/* ==================================================
   EDITAR CUENTA MAESTRA
================================================== */

body.page-editar-maestra {
    background:
        radial-gradient(circle at 12% 12%, rgba(168,85,247,.18), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.12), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-editar-maestra .main-title {
    color: #d8b4fe;
    border-color: rgba(168,85,247,.42);
    background:
        linear-gradient(90deg, rgba(168,85,247,.22), rgba(0,217,255,.08)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 22px rgba(168,85,247,.42);
}

.page-editar-maestra .main-title::before {
    content: "◆";
    color: var(--cyan);
}

.page-editar-maestra .main-content-wrapper {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.page-editar-maestra .form-panel {
    position: relative;
    padding: 30px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(168,85,247,.32);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.page-editar-maestra .form-panel::before {
    content: "BÓVEDA MAESTRA / EDICIÓN";
    display: inline-flex;
    margin-bottom: 22px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.09);
    border: 1px solid rgba(0,255,136,.35);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
}

.page-editar-maestra form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.page-editar-maestra .form-group {
    margin: 0;
}

.page-editar-maestra .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.page-editar-maestra input,
.page-editar-maestra select,
.page-editar-maestra textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border-radius: 13px;
    border: 1px solid rgba(0,217,255,.22);
    outline: none;
    background:
        linear-gradient(180deg, rgba(4,10,16,.98), rgba(8,17,26,.98));
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    transition: .22s;
}

.page-editar-maestra input:focus,
.page-editar-maestra select:focus,
.page-editar-maestra textarea:focus {
    border-color: var(--green);
    box-shadow:
        0 0 0 3px rgba(0,255,136,.12),
        0 0 22px rgba(0,255,136,.16);
}

.page-editar-maestra textarea {
    min-height: 120px;
    padding: 14px 15px;
    resize: vertical;
}

.page-editar-maestra .password-input-group,
.page-editar-maestra .pin-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.page-editar-maestra .generate-btn {
    min-height: 50px;
    padding: 0 14px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: .22s;
}

.page-editar-maestra .generate-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.page-editar-maestra .form-group:has(textarea),
.page-editar-maestra .form-group:has(.perfiles-vinculados-container),
.page-editar-maestra .form-group:last-child,
.page-editar-maestra .alert {
    grid-column: 1 / -1;
}

.page-editar-maestra .perfiles-vinculados-container {
    max-height: 260px;
    overflow-y: auto;
    padding: 14px;
    border-radius: 18px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(168,85,247,.28);
}

.page-editar-maestra .perfil-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 15px;
    background: rgba(5,10,16,.72);
    border: 1px solid rgba(0,217,255,.16);
}

.page-editar-maestra .perfil-item label {
    margin: 0;
    color: var(--text);
}

.page-editar-maestra .perfil-item span {
    color: var(--cyan);
    font-family: var(--font-mono);
}

.page-editar-maestra .pin-input {
    text-align: center;
}

.page-editar-maestra input[type="checkbox"] {
    min-height: auto;
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}

.page-editar-maestra input[type="submit"] {
    width: 100%;
    min-height: 58px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(0,255,136,.25);
}

.page-editar-maestra .back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 12px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .page-editar-maestra .form-panel {
        padding: 20px;
        border-radius: 22px;
    }

    .page-editar-maestra form {
        grid-template-columns: 1fr;
    }

    .page-editar-maestra .form-group:has(textarea),
    .page-editar-maestra .form-group:has(.perfiles-vinculados-container),
    .page-editar-maestra .form-group:last-child,
    .page-editar-maestra .alert {
        grid-column: auto;
    }

    .page-editar-maestra .password-input-group,
    .page-editar-maestra .pin-input-group {
        flex-direction: column;
    }

    .page-editar-maestra .generate-btn {
        width: 100%;
    }

    .page-editar-maestra .perfil-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page-editar-maestra input[type="checkbox"] {
        justify-self: center;
    }
}





/* ==================================================
   GESTION TARJETAS
================================================== */

body.page-tarjetas{
    background:
    radial-gradient(circle at 10% 10%, rgba(0,217,255,.12), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(0,255,136,.08), transparent 35%),
    linear-gradient(135deg,#020406,#08111a 45%,#020406);
}

.page-tarjetas .cards-container{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:24px;
}

.page-tarjetas .card-item{
    background:
    linear-gradient(180deg,
    rgba(12,22,32,.98),
    rgba(5,10,16,.98));

    border:1px solid rgba(0,217,255,.18);
    border-radius:22px;
    overflow:hidden;

    transition:.25s;
    box-shadow:
    0 10px 25px rgba(0,0,0,.35);
}

.page-tarjetas .card-item:hover{
    transform:translateY(-6px);
    border-color:var(--cyan);
    box-shadow:
    0 0 25px rgba(0,217,255,.18);
}

.page-tarjetas .card-header{
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:
    linear-gradient(
    90deg,
    rgba(0,217,255,.10),
    rgba(0,255,136,.05));
}

.page-tarjetas .card-header h3{
    margin:0;
    color:var(--cyan);
    font-family:var(--font-title);
    letter-spacing:.08em;
}

.page-tarjetas .card-content{
    padding:20px;
}

.page-tarjetas .card-field{
    margin-bottom:14px;
    color:var(--text);
}

.page-tarjetas .card-field strong{
    color:var(--green);
    display:block;
    margin-bottom:4px;
}

.page-tarjetas .card-sensitive-data{
    margin-top:18px;
    padding:18px;

    border-radius:18px;

    background:
    rgba(0,0,0,.28);

    border:
    1px solid rgba(0,217,255,.18);
}

.page-tarjetas .card-sensitive-data p{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin:10px 0;

    font-family:var(--font-mono);
}

.page-tarjetas .masked-number{
    color:#9ca3af;
}

.page-tarjetas .revealed-number{
    color:var(--green);
    cursor:pointer;
}

.page-tarjetas .copy-icon{
    margin-left:8px;
}

.page-tarjetas .toggle-button{
    width:100%;
    margin-top:15px;
    min-height:46px;

    border:none;
    border-radius:12px;

    cursor:pointer;

    color:#00140b;

    font-family:var(--font-title);
    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));
}

.page-tarjetas .toggle-button:hover{
    filter:brightness(1.08);
}

.page-tarjetas .service-list{
    list-style:none;
    padding:0;
    margin:8px 0 0;
}

.page-tarjetas .service-list li{
    padding:10px 12px;
    margin-bottom:8px;

    border-radius:10px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.08);

    color:var(--text);
}

.page-tarjetas .add-card-btn-container{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:28px;
}

.page-tarjetas .add-card-btn{
    min-height:52px;
    padding:0 22px;

    border-radius:14px;

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:#00140b;

    font-family:var(--font-title);
    font-weight:700;
    letter-spacing:.06em;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));

    transition:.25s;
}

.page-tarjetas .add-card-btn:hover{
    transform:translateY(-2px);
}

.page-tarjetas .card-actions{
    display:flex;
    gap:8px;
}

.page-tarjetas .card-actions .action-btn{
    min-width:42px;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}

@media(max-width:768px){

    .page-tarjetas .cards-container{
        grid-template-columns:1fr;
    }

    .page-tarjetas .add-card-btn-container{
        flex-direction:column;
    }

    .page-tarjetas .add-card-btn{
        width:100%;
        justify-content:center;
    }
}






/* ==================================================
   GESTION YOUTUBE / ICLOUD
================================================== */

body.page-youtube{
    background:
    radial-gradient(circle at 15% 15%, rgba(0,217,255,.10), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(0,255,136,.08), transparent 35%),
    linear-gradient(135deg,#020406,#08111a 45%,#020406);
}

.page-youtube .form-section{
    background:rgba(7,15,22,.95);
    border:1px solid rgba(0,217,255,.15);
    border-radius:22px;
    padding:25px;
    margin-bottom:25px;
}

.page-youtube .hidden-step{
    margin-top:25px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.08);
}

.page-youtube .form-control{
    width:100%;
    min-height:48px;

    background:rgba(0,0,0,.25);

    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;

    color:var(--text);

    padding:12px 14px;
}

.page-youtube .form-control:focus{
    outline:none;
    border-color:var(--cyan);

    box-shadow:
    0 0 15px rgba(0,217,255,.18);
}

.page-youtube .grid-cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
    gap:22px;
}

.page-youtube .card-cuenta{
    position:relative;

    background:
    linear-gradient(
    180deg,
    rgba(10,18,26,.95),
    rgba(5,10,16,.98));

    border-radius:20px;

    border:1px solid rgba(0,217,255,.15);

    padding:22px;

    transition:.25s;
}

.page-youtube .card-cuenta:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 20px rgba(0,217,255,.15);
}

.page-youtube .btn-edit{
    position:absolute;
    top:15px;
    right:15px;

    width:42px;
    height:42px;

    border:none;
    border-radius:12px;

    cursor:pointer;

    background:
    linear-gradient(
    135deg,
    var(--warning),
    #ffb142);

    color:#111;
}

.page-youtube .plat-tag{
    display:inline-block;

    padding:5px 12px;

    border-radius:999px;

    background:
    linear-gradient(
    135deg,
    #ff006e,
    #ff4d9d);

    color:white;

    font-size:.75rem;
    font-weight:700;
    letter-spacing:.05em;
}

.page-youtube .metodo-tag{
    display:inline-block;

    margin-top:8px;

    padding:4px 10px;

    border-radius:8px;

    background:
    rgba(0,217,255,.18);

    color:var(--cyan);

    font-size:.75rem;
}

.page-youtube .pais-badge{
    display:inline-block;

    margin-left:8px;

    padding:4px 10px;

    border-radius:8px;

    background:
    rgba(255,255,255,.08);

    color:var(--text);

    font-size:.75rem;
}

.page-youtube .nota-box{
    margin-top:12px;

    padding:12px;

    border-left:4px solid #f1c40f;

    border-radius:10px;

    background:
    rgba(255,255,255,.04);
}

.page-youtube #modalEdit{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;

    background:
    rgba(0,0,0,.82);

    overflow-y:auto;
}

.page-youtube .modal-content{
    width:90%;
    max-width:700px;

    margin:40px auto;

    background:
    rgba(7,15,22,.98);

    border:1px solid rgba(0,217,255,.20);

    border-radius:22px;

    padding:25px;
}

.page-youtube .btn-save-youtube{
    width:100%;
    min-height:50px;

    border:none;
    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    color:#00140b;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));
}

@media(max-width:768px){

    .page-youtube .grid-cards{
        grid-template-columns:1fr;
    }

    .page-youtube .modal-content{
        width:95%;
    }
}








/* ==================================================
   PROVEEDORES
================================================== */

body.page-proveedores{

    background:
    radial-gradient(circle at 15% 15%, rgba(0,217,255,.08), transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(0,255,136,.06), transparent 30%),
    linear-gradient(
    135deg,
    #020406,
    #08111a 50%,
    #020406);
}

.provider-layout{

    display:grid;

    grid-template-columns:
    350px 1fr;

    gap:25px;
}

.provider-form-card,
.provider-table-card{

    background:
    linear-gradient(
    180deg,
    rgba(10,18,26,.96),
    rgba(4,8,12,.98));

    border-radius:22px;

    border:1px solid rgba(0,217,255,.15);

    padding:25px;
}

.provider-form-card h3,
.provider-table-card h3{

    margin-bottom:20px;

    color:var(--cyan);
}

.provider-input{

    width:100%;

    min-height:48px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(0,0,0,.25);

    color:white;

    padding:12px 14px;

    margin-bottom:15px;
}

.provider-input:focus{

    outline:none;

    border-color:var(--cyan);

    box-shadow:
    0 0 15px rgba(0,217,255,.15);
}

.provider-btn{

    width:100%;

    min-height:50px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));

    color:#00140b;
}

.provider-btn:hover{

    transform:translateY(-2px);
}

.provider-table-card table{

    width:100%;

    border-collapse:collapse;
}

.provider-table-card th{

    background:
    rgba(0,217,255,.12);

    color:var(--cyan);

    padding:14px;
}

.provider-table-card td{

    padding:14px;

    border-top:
    1px solid rgba(255,255,255,.06);
}

.provider-table-card tr:hover{

    background:
    rgba(0,217,255,.04);
}

@media(max-width:900px){

    .provider-layout{

        grid-template-columns:1fr;
    }
}










/* ==================================================
   GESTIONAR PERFILES MAESTRA
================================================== */

.page-perfiles-maestra .form-section{

    max-width:700px;
    margin:0 auto 25px;

    background:
    linear-gradient(
    180deg,
    rgba(10,18,26,.96),
    rgba(4,8,12,.98));

    border:1px solid rgba(0,217,255,.15);

    border-radius:20px;

    padding:25px;
}

.page-perfiles-maestra .form-section h3{

    color:var(--cyan);

    margin-bottom:20px;

    text-align:center;
}

.page-perfiles-maestra .form-section label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

.page-perfiles-maestra .form-section input{

    width:100%;

    min-height:48px;

    padding:12px 15px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(0,0,0,.25);

    color:white;

    margin-bottom:15px;
}

.page-perfiles-maestra .form-section input:focus{

    outline:none;

    border-color:var(--cyan);

    box-shadow:
    0 0 15px rgba(0,217,255,.18);
}

.page-perfiles-maestra .form-section button{

    width:100%;

    min-height:50px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));

    color:#00140b;
}

.page-perfiles-maestra .form-section button:hover{

    transform:translateY(-2px);
}

.page-perfiles-maestra .table-container{

    background:
    linear-gradient(
    180deg,
    rgba(10,18,26,.96),
    rgba(4,8,12,.98));

    border:1px solid rgba(0,217,255,.15);

    border-radius:20px;

    padding:25px;
}

.page-perfiles-maestra .table-container h3{

    text-align:center;

    color:var(--cyan);

    margin-bottom:20px;
}

.page-perfiles-maestra .perfiles-lista{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:12px;
}

.page-perfiles-maestra .perfiles-lista li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:14px 18px;

    border-radius:14px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.06);
}

.page-perfiles-maestra .email-perfil{

    font-weight:600;

    color:white;
}

.page-perfiles-maestra .estado-perfil{

    padding:5px 12px;

    border-radius:999px;

    background:
    rgba(0,255,136,.15);

    color:var(--green);

    font-size:.8rem;

    font-weight:700;
}

.page-perfiles-maestra .desvincular-perfil-btn{

    text-decoration:none;

    padding:8px 14px;

    border-radius:10px;

    background:
    linear-gradient(
    135deg,
    #ff4757,
    #ff6b81);

    color:white;

    font-weight:700;
}

.page-perfiles-maestra .desvincular-perfil-btn:hover{

    opacity:.9;
}

@media(max-width:768px){

    .page-perfiles-maestra .perfiles-lista li{

        flex-direction:column;

        align-items:flex-start;
    }

    .page-perfiles-maestra .desvincular-perfil-btn{

        width:100%;

        text-align:center;
    }
}





/* ==================================================
   AGREGAR CUENTAS
================================================== */

body.page-agregar-cuentas {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-agregar-cuentas .content-card {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 30px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.30);
    box-shadow: var(--shadow);
}

.page-agregar-cuentas .page-title {
    margin: 0 0 26px;
    color: var(--cyan);
    text-align: center;
    font-size: clamp(30px, 5vw, 48px);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(0,217,255,.36);
}

.page-agregar-cuentas form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 20px;
}

.page-agregar-cuentas label {
    color: var(--green);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-agregar-cuentas input,
.page-agregar-cuentas select,
.page-agregar-cuentas textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border-radius: 13px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
}

.page-agregar-cuentas textarea {
    min-height: 120px;
    padding: 14px 15px;
    resize: vertical;
}

.page-agregar-cuentas input:focus,
.page-agregar-cuentas select:focus,
.page-agregar-cuentas textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-agregar-cuentas #master-account-section,
.page-agregar-cuentas #link_codigo_acceso_container,
.page-agregar-cuentas textarea,
.page-agregar-cuentas .btn-add-account {
    grid-column: 1 / -1;
}

.page-agregar-cuentas .password-container {
    position: relative;
}

.page-agregar-cuentas .password-container input {
    padding-right: 58px;
}

.page-agregar-cuentas .generate-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 42px;
    height: 38px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    color: #1b1000;
}

.page-agregar-cuentas #link_codigo_acceso_container {
    padding: 18px;
    border-radius: 18px;
    background: rgba(0,217,255,.08);
    border: 1px solid rgba(0,217,255,.28);
    box-shadow: inset 4px 0 0 var(--cyan);
}

.page-agregar-cuentas .btn-add-account {
    height: 58px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.page-agregar-cuentas .back-btn-container {
    margin-top: 24px;
    text-align: center;
}

.page-agregar-cuentas .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 760px) {
    .page-agregar-cuentas .content-card {
        padding: 20px;
        border-radius: 22px;
    }

    .page-agregar-cuentas form {
        grid-template-columns: 1fr;
    }
}





/* ==================================================
   GESTION CLIENTES
================================================== */

body.page-clientes {
    background:
        radial-gradient(circle at top left,
        rgba(0,217,255,.12),
        transparent 30%),
        linear-gradient(135deg,
        #030507,
        #08131d 50%,
        #030507);
}

.page-clientes .page-title{
    text-align:center;
    margin-bottom:30px;
    color:var(--cyan);
    text-transform:uppercase;
    letter-spacing:.12em;
}

.page-clientes .glass-card{
    background:rgba(9,18,28,.95);
    border:1px solid rgba(0,217,255,.25);
    border-radius:22px;
    padding:25px;
    margin-bottom:30px;
    box-shadow:var(--shadow);
}

.page-clientes .add-form{
    display:grid;
    gap:15px;
}

.page-clientes input{
    height:50px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.15);
    background:#081018;
    color:white;
    padding:0 15px;
}

.page-clientes input:focus{
    outline:none;
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(0,217,255,.15);
}

.page-clientes .btn-primary{
    height:54px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    font-weight:700;
    letter-spacing:.08em;
    background:linear-gradient(
        135deg,
        var(--green),
        var(--cyan)
    );
    color:#02130b;
}

.page-clientes .table-container{
    overflow-x:auto;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
}

.page-clientes table{
    width:100%;
    border-collapse:collapse;
}

.page-clientes th{
    background:#0c1823;
    color:var(--cyan);
    padding:14px;
}

.page-clientes td{
    padding:12px;
    border-top:1px solid rgba(255,255,255,.06);
}

.page-clientes tr:hover{
    background:rgba(0,217,255,.04);
}

.page-clientes .edit-btn{
    background:#ffc107;
    color:#111;
    padding:8px 12px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
}

.page-clientes .delete-btn{
    background:#dc3545;
    color:white;
    padding:8px 12px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
}

.page-clientes .back-button-container{
    margin-top:25px;
    text-align:center;
}






/* ==================================================
   BUSCAR CLIENTE
================================================== */

body.page-buscar-cliente{
    background:
        radial-gradient(circle at top right,
        rgba(0,217,255,.12),
        transparent 28%),
        linear-gradient(
        135deg,
        #020406,
        #08111a 50%,
        #020406);
}

.page-buscar-cliente .page-title{
    text-align:center;
    color:var(--cyan);
    margin-bottom:25px;
    letter-spacing:.12em;
}

.page-buscar-cliente .glass-card{
    background:rgba(10,18,28,.95);
    border:1px solid rgba(0,217,255,.22);
    border-radius:20px;
    padding:20px;
    margin-bottom:25px;
}

.page-buscar-cliente .search-container form{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:15px;
}

.page-buscar-cliente input[type="text"]{
    flex:1;
    min-width:260px;
    height:50px;
    padding:0 15px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:#081018;
    color:white;
}

.page-buscar-cliente input[type="text"]:focus{
    outline:none;
    border-color:var(--cyan);
}

.page-buscar-cliente .search-btn{
    height:50px;
    padding:0 22px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--green)
    );
    color:#04140f;
}

.page-buscar-cliente .table-container{
    overflow-x:auto;
    border-radius:18px;
}

.page-buscar-cliente table{
    width:100%;
    border-collapse:collapse;
}

.page-buscar-cliente th{
    background:#0c1823;
    color:var(--cyan);
    padding:14px;
}

.page-buscar-cliente td{
    padding:12px;
    border-top:1px solid rgba(255,255,255,.06);
}

.page-buscar-cliente tr:hover{
    background:rgba(0,217,255,.04);
}

.page-buscar-cliente .generar-contrasena-btn{
    display:inline-block;
    padding:8px 14px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    background:#ffc107;
    color:#111;
}

.page-buscar-cliente .mensaje{
    padding:14px;
    border-radius:12px;
    margin-bottom:20px;
    text-align:center;
    font-weight:700;
}

.page-buscar-cliente .mensaje.exito{
    background:rgba(0,255,136,.12);
    border:1px solid rgba(0,255,136,.35);
}

.page-buscar-cliente .mensaje.error{
    background:rgba(255,0,0,.12);
    border:1px solid rgba(255,0,0,.35);
}




/* ==================================================
   STREAMING / PLATAFORMAS
================================================== */

body.page-streaming {
    background:
        radial-gradient(circle at 12% 14%, rgba(0,217,255,.15), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.08), transparent 32%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-streaming .streaming-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
}

.page-streaming .streaming-form-card,
.page-streaming .streaming-table-card {
    padding: 24px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.24);
    box-shadow: var(--shadow);
}

.page-streaming h2 {
    margin: 0 0 20px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-streaming form {
    display: grid;
    gap: 14px;
}

.page-streaming input {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border-radius: 13px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
}

.page-streaming input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-streaming button[type="submit"] {
    height: 52px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-streaming .mensaje {
    margin-top: 16px;
    padding: 13px;
    border-radius: 14px;
    font-weight: 700;
    text-align: center;
}

.page-streaming .mensaje.error {
    color: var(--red);
    background: rgba(255,48,79,.13);
    border: 1px solid rgba(255,48,79,.36);
}

.page-streaming table {
    width: 100%;
    border-collapse: collapse;
}

.page-streaming th {
    padding: 14px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
}

.page-streaming td {
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.page-streaming tr:hover {
    background: rgba(0,217,255,.04);
}

.page-streaming .streaming-back-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    margin-top: 20px;
    padding: 0 20px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 900px) {
    .page-streaming .streaming-layout {
        grid-template-columns: 1fr;
    }

    .page-streaming .streaming-back-btn {
        width: 100%;
    }
}




/* ==================================================
   USUARIOS / VENDEDORES / COMISIONES
================================================== */

body.page-usuarios {
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.15), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 32%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-usuarios .main-title {
    color: var(--yellow);
    border-color: rgba(255,209,102,.38);
    background:
        linear-gradient(90deg, rgba(255,209,102,.18), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 22px rgba(255,209,102,.35);
}

.page-usuarios .main-title::before {
    content: "🧰";
    color: var(--cyan);
}

.page-usuarios .usuarios-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 22px;
    padding: 0 20px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .06em;
}

.page-usuarios .page-content-two-col {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.page-usuarios .left-column,
.page-usuarios .right-column {
    display: grid;
    gap: 22px;
}

.page-usuarios .filter-section,
.page-usuarios .comisiones-section,
.page-usuarios .add-vendor-section,
.page-usuarios .vendors-list-section,
.page-usuarios .reset-password-section,
.page-usuarios .configuracion-plataformas-section,
.page-usuarios .modificar-plataforma-section,
.page-usuarios .cuentas-section {
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-usuarios h3 {
    margin: 0 0 18px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 20px;
}

.page-usuarios form {
    display: grid;
    gap: 12px;
}

.page-usuarios label {
    color: var(--green);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 13px;
}

.page-usuarios input,
.page-usuarios select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
}

.page-usuarios input:focus,
.page-usuarios select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-usuarios button,
.page-usuarios .btn-reporte-comisiones {
    min-height: 44px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .22s;
}

.page-usuarios button:hover,
.page-usuarios .btn-reporte-comisiones:hover,
.page-usuarios .usuarios-back-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.page-usuarios .btn-filter,
.page-usuarios .btn-add-vendor,
.page-usuarios .btn-reset-password,
.page-usuarios .btn-modificar-plataforma,
.page-usuarios .modal-content button[type="submit"] {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-usuarios .btn-clear,
.page-usuarios .btn-quitar {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-usuarios .btn-reporte-comisiones {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #1b1000;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.page-usuarios .total-general-comisiones {
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 18px;
    text-align: center;
    background:
        linear-gradient(90deg, rgba(255,209,102,.15), rgba(0,217,255,.06)),
        rgba(0,0,0,.28);
    border: 1px solid rgba(255,209,102,.38);
}

.page-usuarios .total-general-comisiones p {
    margin: 0 0 8px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
}

.page-usuarios .total-general-comisiones span {
    color: var(--yellow);
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 700;
    text-shadow: 0 0 18px rgba(255,209,102,.35);
}

.page-usuarios .comisiones-resumen-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.page-usuarios .vendedor-comision-item {
    padding: 15px;
    border-radius: 17px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,209,102,.24);
}

.page-usuarios .vendedor-info-button {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text);
    margin-bottom: 12px;
}

.page-usuarios .total-comision,
.page-usuarios .detalle-monto {
    color: var(--yellow);
    font-family: var(--font-mono);
    font-weight: 700;
}

.page-usuarios .btn-pagar-todas,
.page-usuarios .btn-pagar,
.page-usuarios .btn-pagar-individual {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), #00b86b);
}

.page-usuarios .btn-detalle-comision,
.page-usuarios .btn-asignar,
.page-usuarios .btn-modificar-comision {
    color: white;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
}

.page-usuarios .comision-detalles-list {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,.14);
}

.page-usuarios .comision-detalles-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.page-usuarios .comision-detalles-list li {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.page-usuarios .detalle-plataforma {
    color: var(--green);
    font-weight: 700;
}

.page-usuarios .detalle-info,
.page-usuarios .detalle-cliente,
.page-usuarios .detalle-fecha {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 13px;
}

.page-usuarios .scroll-container {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(0,217,255,.16);
    background: rgba(0,0,0,.20);
}

.page-usuarios table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.page-usuarios .cuentas-table {
    min-width: 1250px;
}

.page-usuarios th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .05em;
}

.page-usuarios td {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: var(--text);
}

.page-usuarios tr:hover {
    background: rgba(0,217,255,.045);
}

.page-usuarios .btn-pagar {
    margin-top: 6px;
    padding: 8px 10px;
}

.page-usuarios .btn-asignar {
    padding: 8px 10px;
}

.page-usuarios .mensaje {
    display: none;
}

/* Modales usuarios */
.page-usuarios .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow-y: auto;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(8px);
}

.page-usuarios .modal-content {
    width: min(540px, 92%);
    margin: 60px auto;
    padding: 26px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.98), rgba(5,10,16,.99));
    border: 1px solid rgba(0,217,255,.30);
    color: var(--text);
    box-shadow: var(--shadow);
    position: relative;
}

.page-usuarios .modal-content h2 {
    color: var(--cyan);
    margin: 0 0 18px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-usuarios .close-button {
    position: absolute;
    right: 18px;
    top: 12px;
    color: var(--red);
    font-size: 32px;
    cursor: pointer;
}

.page-usuarios .note {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* responsive usuarios */
@media (max-width: 1100px) {
    .page-usuarios .page-content-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .page-usuarios .filter-section,
    .page-usuarios .comisiones-section,
    .page-usuarios .add-vendor-section,
    .page-usuarios .vendors-list-section,
    .page-usuarios .reset-password-section,
    .page-usuarios .configuracion-plataformas-section,
    .page-usuarios .modificar-plataforma-section,
    .page-usuarios .cuentas-section {
        padding: 16px;
        border-radius: 18px;
    }

    .page-usuarios .vendedor-info-button {
        flex-direction: column;
    }

    .page-usuarios table {
        min-width: 720px;
    }

    .page-usuarios .cuentas-table {
        min-width: 1050px;
    }

    .page-usuarios .modal-content {
        margin: 25px auto;
    }
}





/* ==================================================
   USUARIOS / MEJORAS RESPONSIVE PC Y CELULAR
================================================== */

/* PC grande */
@media (min-width: 1300px) {
    .page-usuarios .page-content-two-col {
        grid-template-columns: 460px minmax(0, 1fr);
    }

    .page-usuarios .admin-main-content {
        padding: 28px 32px;
    }

    .page-usuarios .cuentas-section {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Laptop / PC mediana */
@media (max-width: 1299px) {
    .page-usuarios .page-content-two-col {
        grid-template-columns: 390px minmax(0, 1fr);
        gap: 18px;
    }

    .page-usuarios .filter-section,
    .page-usuarios .comisiones-section,
    .page-usuarios .add-vendor-section,
    .page-usuarios .vendors-list-section,
    .page-usuarios .reset-password-section,
    .page-usuarios .configuracion-plataformas-section,
    .page-usuarios .modificar-plataforma-section,
    .page-usuarios .cuentas-section {
        padding: 18px;
    }
}

/* Tablet */
@media (max-width: 1050px) {
    .page-usuarios .page-content-two-col {
        grid-template-columns: 1fr;
    }

    .page-usuarios .usuarios-back-btn {
        width: 100%;
    }
}

/* Celular: tarjetas más limpias */
@media (max-width: 760px) {
    .page-usuarios .main-title {
        font-size: 24px;
        padding-left: 46px;
    }

    .page-usuarios .left-column,
    .page-usuarios .right-column {
        gap: 16px;
    }

    .page-usuarios h3 {
        font-size: 17px;
        text-align: center;
    }

    .page-usuarios .filter-form button,
    .page-usuarios .btn-add-vendor,
    .page-usuarios .btn-reset-password,
    .page-usuarios .btn-modificar-plataforma,
    .page-usuarios .btn-reporte-comisiones {
        width: 100%;
    }

    .page-usuarios .total-general-comisiones span {
        font-size: 28px;
    }

    .page-usuarios .vendedor-comision-item {
        padding: 14px;
    }

    .page-usuarios .btn-pagar-todas,
    .page-usuarios .btn-detalle-comision {
        width: 100%;
        margin-top: 8px;
    }

    .page-usuarios .comision-detalles-list li {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-usuarios .btn-pagar-individual {
        width: 100%;
        margin-top: 6px;
    }

    .page-usuarios .scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-usuarios .vendors-table,
    .page-usuarios .configuracion-plataformas-table {
        min-width: 640px;
    }

    .page-usuarios .cuentas-table {
        min-width: 980px;
    }

    .page-usuarios .btn-asignar,
    .page-usuarios .btn-pagar,
    .page-usuarios .btn-modificar-comision {
        width: 100%;
        margin: 4px 0;
    }
}

/* Celular chico */
@media (max-width: 480px) {
    .page-usuarios .admin-main-content {
        padding: 12px;
    }

    .page-usuarios .main-title {
        font-size: 21px;
        letter-spacing: .04em;
    }

    .page-usuarios .filter-section,
    .page-usuarios .comisiones-section,
    .page-usuarios .add-vendor-section,
    .page-usuarios .vendors-list-section,
    .page-usuarios .reset-password-section,
    .page-usuarios .configuracion-plataformas-section,
    .page-usuarios .modificar-plataforma-section,
    .page-usuarios .cuentas-section {
        padding: 14px;
    }

    .page-usuarios input,
    .page-usuarios select {
        font-size: 13px;
    }

    .page-usuarios .modal-content {
        width: 94%;
        padding: 20px;
    }
}




/* ==================================================
   FIX CELULAR: COMISIONES PENDIENTES USUARIOS
================================================== */

@media (max-width: 760px) {

    .page-usuarios .comisiones-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .page-usuarios .comisiones-resumen-list {
        width: 100%;
        max-width: 100%;
    }

    .page-usuarios .vendedor-comision-item {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .page-usuarios .vendedor-info-button {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    .page-usuarios .vendedor-info-button span {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        text-align: center;
    }

    .page-usuarios .total-comision {
        display: block;
        width: 100%;
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255,209,102,.12);
        border: 1px solid rgba(255,209,102,.28);
        text-align: center;
        font-size: 15px;
        box-sizing: border-box;
    }

    .page-usuarios .vendedor-comision-item form {
        width: 100%;
        max-width: 100%;
        display: block;
    }

    .page-usuarios .btn-pagar-todas,
    .page-usuarios .btn-detalle-comision {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-height: 42px;
        margin: 8px 0 0 0 !important;
        padding: 0 10px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }

    .page-usuarios .comision-detalles-list {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .page-usuarios .comision-detalles-list ul,
    .page-usuarios .comision-detalles-list li {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-usuarios .comision-detalles-list li {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        overflow: hidden;
    }

    .page-usuarios .detalle-plataforma,
    .page-usuarios .detalle-info,
    .page-usuarios .detalle-cliente,
    .page-usuarios .detalle-monto,
    .page-usuarios .detalle-fecha {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        text-align: center;
    }

    .page-usuarios .btn-pagar-individual {
        display: flex;
        width: 100%;
        max-width: 100%;
        margin: 8px 0 0 0 !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}





/* ==================================================
   FIX GLOBAL CELULAR USUARIOS - MISMO ANCHO QUE MENÚ
================================================== */

@media (max-width: 760px) {

    .page-usuarios .admin-main-content {
        width: 100%;
        max-width: 100vw;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-usuarios .page-content-two-col,
    .page-usuarios .left-column,
    .page-usuarios .right-column {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-usuarios .filter-section,
    .page-usuarios .comisiones-section,
    .page-usuarios .add-vendor-section,
    .page-usuarios .vendors-list-section,
    .page-usuarios .reset-password-section,
    .page-usuarios .configuracion-plataformas-section,
    .page-usuarios .modificar-plataforma-section,
    .page-usuarios .cuentas-section {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        padding: 14px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-usuarios .comisiones-resumen-list,
    .page-usuarios .vendedor-comision-item,
    .page-usuarios .vendedor-info-button,
    .page-usuarios .comision-detalles-list,
    .page-usuarios .comision-detalles-list ul,
    .page-usuarios .comision-detalles-list li {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-usuarios .vendedor-info-button {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .page-usuarios .vendedor-info-button span,
    .page-usuarios .detalle-plataforma,
    .page-usuarios .detalle-info,
    .page-usuarios .detalle-cliente,
    .page-usuarios .detalle-monto,
    .page-usuarios .detalle-fecha {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-align: center;
        box-sizing: border-box;
    }

    .page-usuarios .total-comision {
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255,209,102,.12);
        border: 1px solid rgba(255,209,102,.28);
    }

    .page-usuarios .vendedor-comision-item form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: block;
    }

    .page-usuarios .btn-pagar-todas,
    .page-usuarios .btn-detalle-comision,
    .page-usuarios .btn-pagar-individual,
    .page-usuarios .btn-reporte-comisiones,
    .page-usuarios .btn-filter,
    .page-usuarios .btn-clear,
    .page-usuarios .btn-add-vendor,
    .page-usuarios .btn-reset-password,
    .page-usuarios .btn-modificar-plataforma {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }

    .page-usuarios input,
    .page-usuarios select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .page-usuarios .scroll-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }

    .page-usuarios .total-general-comisiones {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-usuarios .total-general-comisiones span {
        font-size: clamp(22px, 8vw, 30px);
        overflow-wrap: anywhere;
    }
}





/* ==========================================
   CUENTAS VENCIDAS
========================================== */

.btn-action-custom{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:none;
    border-radius:8px;
    color:#fff;
    cursor:pointer;
    transition:.3s;
    text-decoration:none;
}

.btn-action-custom:hover{
    transform:translateY(-2px);
}

.btn-go-maestra{
    background:#6c5ce7;
}

.btn-quick-edit{
    background:#f39c12;
}
.bulk-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
    margin-bottom:15px;
}

.bulk-action-btn{
    padding:10px 15px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}
@media(max-width:768px){

    .admin-main-content{
        width:100%;
        padding:15px;
    }

    .bulk-actions{
        flex-direction:column;
    }

    .bulk-action-btn{
        width:100%;
    }

    .table-container{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    #cuentasTable{
        min-width:1100px;
    }
}





/* ==================================================
   CUENTAS VENCIDAS
================================================== */

body.page-cuentas-vencidas {
    background:
        radial-gradient(circle at 14% 12%, rgba(255,48,79,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-cuentas-vencidas .main-title {
    color: var(--red);
    border-color: rgba(255,48,79,.42);
    background:
        linear-gradient(90deg, rgba(255,48,79,.18), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 22px rgba(255,48,79,.38);
}

.page-cuentas-vencidas .main-title::before {
    content: "⚠";
    color: var(--yellow);
}

.page-cuentas-vencidas .bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-cuentas-vencidas .bulk-action-btn {
    min-height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-cuentas-vencidas .bulk-action-btn.danger {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-cuentas-vencidas .acciones-rapidas {
    display: flex;
    gap: 7px;
    justify-content: center;
    align-items: center;
}

.page-cuentas-vencidas .btn-action-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 11px;
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: .22s;
}

.page-cuentas-vencidas .btn-action-custom:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.08);
}

.page-cuentas-vencidas .btn-go-maestra {
    background: linear-gradient(135deg, #6c5ce7, #341f97);
}

.page-cuentas-vencidas .btn-quick-edit {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    color: #1b1000;
}

/* Ajuste celular para que no tengas que hacer zoom */
@media (max-width: 768px) {
    .page-cuentas-vencidas .admin-main-content {
        width: 100%;
        max-width: 100vw;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-cuentas-vencidas .global-search-mobile,
    .page-cuentas-vencidas .bulk-actions,
    .page-cuentas-vencidas .table-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-vencidas .bulk-actions {
        flex-direction: column;
    }

    .page-cuentas-vencidas .bulk-action-btn {
        width: 100%;
    }

    .page-cuentas-vencidas #cuentasTable,
    .page-cuentas-vencidas #cuentasTable tbody,
    .page-cuentas-vencidas #cuentasTable tr,
    .page-cuentas-vencidas #cuentasTable td {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-vencidas #cuentasTable td {
        grid-template-columns: 115px minmax(0, 1fr);
    }

    .page-cuentas-vencidas .copy-container,
    .page-cuentas-vencidas .copy-text {
        max-width: 100%;
        min-width: 0;
    }

    .page-cuentas-vencidas .copy-text {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-vencidas .acciones-rapidas {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .page-cuentas-vencidas .btn-action-custom {
        width: 100%;
    }
}





/* ==================================================
   CUENTAS DISPONIBLES
================================================== */

body.page-cuentas-disponibles{
    background:
    radial-gradient(circle at 10% 10%, rgba(0,255,136,.12), transparent 25%),
    radial-gradient(circle at 90% 90%, rgba(0,217,255,.08), transparent 30%),
    linear-gradient(135deg,#020406,#08111a 45%,#020406);
}

.page-cuentas-disponibles .main-title{
    color:var(--green);
    border-color:rgba(0,255,136,.35);
    background:
    linear-gradient(90deg,rgba(0,255,136,.12),rgba(0,217,255,.05)),
    rgba(8,16,25,.92);
}

.page-cuentas-disponibles .main-title::before{
    content:"✅";
}

.page-cuentas-disponibles .filter-input{
    width:100%;
    padding:8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:#fff;
    font-size:.85rem;
}

.page-cuentas-disponibles .copy-container{
    display:flex;
    align-items:center;
    gap:6px;
}

.page-cuentas-disponibles .copy-button{
    border:none;
    background:none;
    color:var(--cyan);
    cursor:pointer;
    font-size:1rem;
}

.page-cuentas-disponibles .copy-button:hover{
    color:var(--green);
}

.page-cuentas-disponibles .copyable-text-wrapper{
    text-decoration:none;
    color:inherit;
}

.page-cuentas-disponibles .acciones-celda{
    display:flex;
    justify-content:center;
    gap:6px;
}

.page-cuentas-disponibles .edit-btn,
.page-cuentas-disponibles .delete-btn{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:white;
    text-decoration:none;
    transition:.25s;
}

.page-cuentas-disponibles .edit-btn{
    background:#007bff;
}

.page-cuentas-disponibles .delete-btn{
    background:#dc3545;
}

.page-cuentas-disponibles .edit-btn:hover,
.page-cuentas-disponibles .delete-btn:hover{
    transform:translateY(-2px);
}

.page-cuentas-disponibles .pagado{
    color:#00ff88;
    font-weight:700;
}

.page-cuentas-disponibles .disponible{
    color:#00d9ff;
    font-weight:700;
}

.page-cuentas-disponibles .debe{
    color:#ff304f;
    font-weight:700;
}

.page-cuentas-disponibles .vencida{
    color:#ffae00;
    font-weight:700;
}

.page-cuentas-disponibles .le-quedan.normal{
    color:#00ff88;
    font-weight:700;
}

.page-cuentas-disponibles .le-quedan.advertencia{
    color:#ffae00;
    font-weight:700;
}

.page-cuentas-disponibles .le-quedan.critico{
    color:#ff304f;
    font-weight:700;
}

.page-cuentas-disponibles .vencido{
    color:#ff304f;
    font-weight:700;
}






@media(max-width:768px){

    .page-cuentas-disponibles .admin-main-content{
        padding:12px;
        width:100%;
        max-width:100vw;
    }

    .page-cuentas-disponibles .table-container{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .page-cuentas-disponibles #cuentasDisponiblesTable{
        min-width:1200px;
    }

    .page-cuentas-disponibles .filter-input{
        min-width:90px;
    }
}






/* ==================================================
   CUENTAS POR PAGAR
================================================== */

body.page-cuentas-deuda{
    background:
    radial-gradient(circle at 10% 10%, rgba(255,174,0,.12), transparent 25%),
    radial-gradient(circle at 90% 90%, rgba(255,48,79,.08), transparent 30%),
    linear-gradient(135deg,#020406,#08111a 45%,#020406);
}

.page-cuentas-deuda .main-title{
    color:#ffae00;
    border-color:rgba(255,174,0,.35);
    background:
    linear-gradient(
        90deg,
        rgba(255,174,0,.12),
        rgba(255,48,79,.05)
    ),
    rgba(8,16,25,.92);
}

.page-cuentas-deuda .main-title::before{
    content:"💰";
}

.page-cuentas-deuda .filter-input{
    width:100%;
    padding:8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:white;
}

.page-cuentas-deuda .copy-container{
    display:flex;
    align-items:center;
    gap:6px;
}

.page-cuentas-deuda .copy-button{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--cyan);
}

.page-cuentas-deuda .copy-button:hover{
    color:#ffae00;
}

.page-cuentas-deuda .debe{
    color:#ff304f;
    font-weight:700;
}

.page-cuentas-deuda .pagado{
    color:#00ff88;
    font-weight:700;
}

.page-cuentas-deuda .vencida{
    color:#ffae00;
    font-weight:700;
}

.page-cuentas-deuda .disponible{
    color:#00d9ff;
    font-weight:700;
}

.page-cuentas-deuda .activo-texto{
    color:#00ff88;
    font-weight:700;
}

.page-cuentas-deuda .pausada-texto{
    color:#ffae00;
    font-weight:700;
}

.page-cuentas-deuda .paid-btn{
    background:#28a745;
    color:white;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    text-decoration:none;
    transition:.25s;
}

.page-cuentas-deuda .paid-btn:hover{
    transform:translateY(-2px);
}

.page-cuentas-deuda .clear-filters-btn{
    margin-top:15px;
}





@media(max-width:768px){

    .page-cuentas-deuda .admin-main-content{
        padding:12px;
        width:100%;
        max-width:100vw;
    }

    .page-cuentas-deuda .table-container{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .page-cuentas-deuda #cuentasTable{
        min-width:1400px;
    }

}





/* ==================================================
   CUENTAS DEUDA - CELULAR AJUSTADO AL ANCHO DEL MENÚ
================================================== */

@media (max-width: 768px) {

    .page-cuentas-deuda .admin-main-content {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-cuentas-deuda .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-cuentas-deuda #cuentasTable,
    .page-cuentas-deuda #cuentasTable thead,
    .page-cuentas-deuda #cuentasTable tbody,
    .page-cuentas-deuda #cuentasTable tr,
    .page-cuentas-deuda #cuentasTable td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-deuda #cuentasTable thead {
        display: none;
    }

    .page-cuentas-deuda #cuentasTable tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(255,174,0,.24);
        box-shadow: 0 10px 25px rgba(0,0,0,.30);
        overflow: hidden;
    }

    .page-cuentas-deuda #cuentasTable td {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-deuda #cuentasTable td:last-child {
        border-bottom: none;
    }

    .page-cuentas-deuda #cuentasTable td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .05em;
    }

    .page-cuentas-deuda .copy-container,
    .page-cuentas-deuda .copy-text {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-deuda .acciones-celda {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .page-cuentas-deuda .paid-btn {
        width: 100%;
    }

    .page-cuentas-deuda .filter-buttons,
    .page-cuentas-deuda .clear-filters-btn {
        width: 100%;
    }
}




/* ==================================================
   CUENTAS ELIMINADAS / PAPELERA
================================================== */

body.page-cuentas-eliminadas {
    background:
        radial-gradient(circle at 14% 12%, rgba(255,48,79,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-cuentas-eliminadas .main-title {
    color: var(--red);
    border-color: rgba(255,48,79,.42);
    background:
        linear-gradient(90deg, rgba(255,48,79,.18), rgba(255,209,102,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 22px rgba(255,48,79,.38);
}

.page-cuentas-eliminadas .main-title::before {
    content: "🗑";
    color: var(--yellow);
}

.page-cuentas-eliminadas .bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(255,48,79,.25);
    box-shadow: var(--shadow);
}

.page-cuentas-eliminadas .bulk-action-btn {
    min-height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-cuentas-eliminadas #delete-selected-btn {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-cuentas-eliminadas .precio-venta {
    color: var(--green);
    font-weight: 700;
}

.page-cuentas-eliminadas .precio-compra {
    color: var(--yellow);
    font-weight: 700;
}

.page-cuentas-eliminadas .comentarios span {
    color: var(--red);
    font-weight: 800;
    letter-spacing: .06em;
}

.page-cuentas-eliminadas .acciones-celda {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.page-cuentas-eliminadas .restore-btn,
.page-cuentas-eliminadas .permanent-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    text-decoration: none;
    transition: .22s;
    font-weight: 700;
}

.page-cuentas-eliminadas .restore-btn {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-cuentas-eliminadas .permanent-delete-btn {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-cuentas-eliminadas .restore-btn:hover,
.page-cuentas-eliminadas .permanent-delete-btn:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.08);
}

.page-cuentas-eliminadas .filter-buttons {
    margin-top: 15px;
}




/* ==================================================
   CUENTAS ELIMINADAS - CELULAR TIPO TARJETA
================================================== */

@media (max-width: 768px) {

    .page-cuentas-eliminadas .admin-main-content {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-cuentas-eliminadas .bulk-actions,
    .page-cuentas-eliminadas .table-container,
    .page-cuentas-eliminadas .filter-buttons {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-eliminadas .bulk-actions {
        flex-direction: column;
    }

    .page-cuentas-eliminadas .bulk-action-btn,
    .page-cuentas-eliminadas .clear-filters-btn {
        width: 100%;
    }

    .page-cuentas-eliminadas .table-container {
        overflow-x: hidden;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable,
    .page-cuentas-eliminadas #cuentasEliminadasTable thead,
    .page-cuentas-eliminadas #cuentasEliminadasTable tbody,
    .page-cuentas-eliminadas #cuentasEliminadasTable tr,
    .page-cuentas-eliminadas #cuentasEliminadasTable td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable thead {
        display: none;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(255,48,79,.25);
        box-shadow: 0 10px 25px rgba(0,0,0,.30);
        overflow: hidden;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable td {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable td:last-child {
        border-bottom: none;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .05em;
    }

    .page-cuentas-eliminadas .copy-container,
    .page-cuentas-eliminadas .copy-text {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-eliminadas .acciones-celda {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .page-cuentas-eliminadas .restore-btn,
    .page-cuentas-eliminadas .permanent-delete-btn {
        width: 100%;
    }
}




/* ==================================================
   PANEL DE VENCIMIENTOS
================================================== */

body.page-panel-vencimientos{
    background:
        radial-gradient(circle at 15% 10%, rgba(0,255,136,.12), transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(0,212,255,.12), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 50%,#020406);
}

.page-panel-vencimientos .admin-main-content{
    width:100%;
}

.page-panel-vencimientos header{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.page-panel-vencimientos h1{
    margin:0;
    color:var(--cyan);
    font-family:var(--font-title);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.page-panel-vencimientos .premium-card{
    background:rgba(8,16,25,.92);
    border:1px solid rgba(0,212,255,.18);
    border-radius:18px;
    padding:16px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
}

.page-panel-vencimientos .neo-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:0 14px;
    border-radius:12px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    font-family:var(--font-title);
    font-weight:700;
    letter-spacing:.04em;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    color:#00140b;
}

.page-panel-vencimientos .filter-input{
    width:100%;
    min-height:42px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:white;
}

.page-panel-vencimientos table{
    width:100%;
    border-collapse:collapse;
}

.page-panel-vencimientos th{
    background:rgba(0,212,255,.08);
    color:var(--cyan);
    font-size:.78rem;
}

.page-panel-vencimientos td,
.page-panel-vencimientos th{
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.page-panel-vencimientos .premium-input{
    background:#0f1722;
    color:white;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    padding:8px;
}

.page-panel-vencimientos .status-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:30px;
    font-size:.75rem;
    font-weight:700;
}

.page-panel-vencimientos .status-excelente{
    background:rgba(0,255,136,.12);
    color:var(--green);
}

.page-panel-vencimientos .status-vencido{
    background:rgba(255,48,79,.12);
    color:var(--red);
}

.page-panel-vencimientos .status-activo{
    background:rgba(255,209,102,.12);
    color:var(--yellow);
}

.page-panel-vencimientos .obs-badge{
    background:rgba(255,48,79,.08);
    color:var(--red);
    border:1px solid rgba(255,48,79,.2);
    padding:4px 8px;
    border-radius:8px;
    font-size:.7rem;
    font-weight:700;
}

.page-panel-vencimientos .toast-notif{
    border-radius:50px;
}

/* ==================================================
   CELULAR
================================================== */

@media(max-width:768px){

    .page-panel-vencimientos .admin-main-content{
        padding:12px;
    }

    .page-panel-vencimientos header{
        flex-direction:column;
        align-items:stretch;
    }

    .page-panel-vencimientos header div{
        display:grid !important;
        grid-template-columns:1fr;
        gap:10px;
    }

    .page-panel-vencimientos .neo-button{
        width:100%;
    }

    .page-panel-vencimientos table,
    .page-panel-vencimientos thead,
    .page-panel-vencimientos tbody,
    .page-panel-vencimientos tr,
    .page-panel-vencimientos td{
        display:block;
        width:100%;
    }

    .page-panel-vencimientos thead{
        display:none;
    }

    .page-panel-vencimientos tr{
        margin-bottom:14px;
        border:1px solid rgba(255,255,255,.08);
        border-radius:16px;
        padding:12px;
        background:rgba(8,16,25,.9);
    }

    .page-panel-vencimientos td{
        display:grid;
        grid-template-columns:110px 1fr;
        gap:10px;
        padding:10px 0;
        border-bottom:1px solid rgba(255,255,255,.05);
    }

    .page-panel-vencimientos td:last-child{
        border-bottom:none;
    }

    .page-panel-vencimientos td::before{
        content:attr(data-label);
        color:var(--cyan);
        font-size:.72rem;
        font-weight:700;
        text-transform:uppercase;
    }
}





.page-panel-vencimientos .panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.page-panel-vencimientos .panel-header h1{
    margin:0;
}



/* ==================================================
   PANEL VENCIMIENTOS - MODAL NUEVO VENCIMIENTO
================================================== */

.page-panel-vencimientos #modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(8px);
}

.page-panel-vencimientos #modal-confirm {
    width: min(380px, 100%);
    padding: 26px;
    border-radius: 24px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(16,30,43,.98), rgba(5,10,16,.99));
    border: 1px solid rgba(0,217,255,.35);
    box-shadow:
        0 0 35px rgba(0,217,255,.22),
        0 20px 60px rgba(0,0,0,.55);
}

.page-panel-vencimientos #modal-confirm h3 {
    color: var(--cyan) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-panel-vencimientos #modal-confirm p {
    color: var(--muted) !important;
}

.page-panel-vencimientos #fecha_modal {
    width: 100% !important;
    height: 48px !important;
    margin: 0 0 15px !important;
}

.page-panel-vencimientos #btn-save-modal {
    width: 100% !important;
    height: 48px !important;
}

.page-panel-vencimientos #modal-confirm button[onclick="cerrarModal()"] {
    width: 100%;
    margin-top: 16px !important;
    color: var(--muted) !important;
}




/* ==================================================
   PANEL VENCIMIENTOS - BOTON OK
================================================== */

.page-panel-vencimientos .btn-ok{
    display:none;
    padding:8px 12px;
    border:none;
    border-radius:8px;
    background:#00d9ff;
    color:#001018;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.page-panel-vencimientos .btn-ok:hover{
    transform:translateY(-1px);
    box-shadow:0 0 10px rgba(0,217,255,.5);
}





.page-panel-vencimientos .panel-vencimientos-table{
    padding:0;
    overflow-x:auto;
}


.page-panel-vencimientos .panel-header-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

@media(max-width:768px){

    .page-panel-vencimientos .panel-header-actions{
        width:100%;
    }

    .page-panel-vencimientos .panel-header-actions a{
        flex:1 1 calc(50% - 10px);
        text-align:center;
    }
}


/* ==================================================
   PANEL VENCIMIENTOS - CORRECCIÓN FINAL
================================================== */

.page-panel-vencimientos {
    --neon-green: var(--green, #00ff88);
    --neon-blue: var(--cyan, #00d4ff);
    --neon-red: var(--red, #ff304f);
}

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

.page-panel-vencimientos .panel-header h1 {
    margin: 0;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 18px rgba(0,255,136,.35);
}

.page-panel-vencimientos .panel-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-panel-vencimientos .neo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: 800;
    font-size: .8rem;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    color: #00140b;
}

.page-panel-vencimientos .neo-button.danger-button {
    background: linear-gradient(135deg, var(--red), #9d1026);
    color: #fff;
}

.page-panel-vencimientos .neo-button.secondary-button {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(0,217,255,.35);
    color: var(--cyan);
}

.page-panel-vencimientos .search-panel {
    display: flex;
    gap: 10px;
    align-items: center;
}

.page-panel-vencimientos .search-box {
    flex: 1;
    position: relative;
}

.page-panel-vencimientos .filter-input {
    width: 100%;
    min-height: 44px;
    padding: 0 16px 0 40px;
    border-radius: 999px;
    border: 1px solid rgba(0,217,255,.22);
    background: rgba(0,0,0,.35);
    color: #fff;
    box-sizing: border-box;
}

.page-panel-vencimientos .panel-vencimientos-table {
    padding: 0;
    overflow-x: auto;
}

.page-panel-vencimientos .btn-ok {
    display: none;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: var(--green);
    color: #00140b;
    font-weight: 800;
    cursor: pointer;
    margin-right: 5px;
}

.page-panel-vencimientos .hidden {
    display: none !important;
}

.page-panel-vencimientos #modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(8px);
}

.page-panel-vencimientos #modal-confirm {
    width: min(380px, 100%);
    padding: 26px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(16,30,43,.98), rgba(5,10,16,.99));
    border: 1px solid rgba(0,217,255,.35);
    box-shadow: 0 0 35px rgba(0,217,255,.22), 0 20px 60px rgba(0,0,0,.55);
}

.page-panel-vencimientos .toast-notif {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11000;
    display: none;
    padding: 12px 25px;
    border-radius: 999px;
    background: #111;
    border: 1px solid var(--green);
    color: #fff;
    font-weight: 800;
}

@media (max-width: 768px) {
    .page-panel-vencimientos .panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-panel-vencimientos .panel-header-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .page-panel-vencimientos .search-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .page-panel-vencimientos .neo-button {
        width: 100%;
    }

    .page-panel-vencimientos table,
    .page-panel-vencimientos thead,
    .page-panel-vencimientos tbody,
    .page-panel-vencimientos tr,
    .page-panel-vencimientos td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-panel-vencimientos thead {
        display: none;
    }

    .page-panel-vencimientos tr {
        margin-bottom: 14px;
        padding: 12px;
        border-radius: 16px;
        background: rgba(8,16,25,.9);
        border: 1px solid rgba(255,255,255,.08);
    }

    .page-panel-vencimientos td {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-panel-vencimientos td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-panel-vencimientos .col-vencimiento form {
        flex-wrap: wrap;
        justify-content: flex-end !important;
    }

    .page-panel-vencimientos .premium-input,
    .page-panel-vencimientos .msg-permanente {
        width: 100%;
    }
}



.page-panel-vencimientos .modal-cancel-btn {
    margin-top: 16px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
}


/* =======================================================
   GENERADOR DE CORREOS
======================================================= */

.page-generador-correos .main{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:calc(100vh - 40px);
}

.page-generador-correos .card-header{
    width:100%;
    max-width:650px;
    margin:auto;
    background:linear-gradient(
        145deg,
        rgba(8,12,18,.96),
        rgba(16,26,38,.98)
    );
    border:1px solid rgba(0,255,255,.15);
    border-radius:20px;
    padding:35px;
    text-align:center;
    box-shadow:
    0 0 30px rgba(0,255,255,.12),
    inset 0 0 15px rgba(0,255,255,.05);
}

.page-generador-correos h1{
    font-size:2rem;
    margin-bottom:10px;
}

.page-generador-correos h1 span{
    color:var(--cyan);
}

.page-generador-correos .btn-group{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.page-generador-correos .btn-premium,
.page-generador-correos .btn-reset{
    flex:1;
    border:none;
    border-radius:12px;
    padding:14px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.page-generador-correos .btn-premium{
    background:linear-gradient(135deg,#00d4ff,#0099ff);
    color:#fff;
}

.page-generador-correos .btn-reset{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
}

.page-generador-correos .btn-premium:hover,
.page-generador-correos .btn-reset:hover{
    transform:translateY(-2px);
}

.page-generador-correos .result-container{
    margin-top:25px;
}

.page-generador-correos .email-box{
    background:#09111a;
    border:2px dashed #00d4ff;
    border-radius:12px;
    padding:18px;
    font-size:1.1rem;
    font-weight:700;
    color:#00d4ff;
    cursor:pointer;
    word-break:break-all;
}

.page-generador-correos #copy-toast{
    position:fixed;
    top:20px;
    right:20px;
    background:#00d4ff;
    color:#000;
    padding:12px 18px;
    border-radius:10px;
    z-index:9999;
    display:none;
    font-weight:700;
}

@media(max-width:768px){

    .page-generador-correos .card-header{
        padding:20px;
        width:100%;
        max-width:100%;
    }

    .page-generador-correos .btn-group{
        flex-direction:column;
    }

    .page-generador-correos .email-box{
        font-size:.95rem;
    }

    .page-generador-correos h1{
        font-size:1.5rem;
    }
}



/* ==================================================
   AGREGAR VENTA
================================================== */

body.page-agregar-venta {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,255,136,.13), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-agregar-venta .main-title {
    color: var(--green);
    border-color: rgba(0,255,136,.36);
    background:
        linear-gradient(90deg, rgba(0,255,136,.16), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
}

.page-agregar-venta .main-title::before {
    content: "💲";
}

.page-agregar-venta .multi-sale-form {
    display: grid;
    gap: 22px;
}

.page-agregar-venta .form-section,
.page-agregar-venta .selected-account-edit-group {
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-agregar-venta .form-section h3 {
    margin: 0 0 18px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-agregar-venta .form-group,
.page-agregar-venta .form-group-read-only {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.page-agregar-venta label {
    color: var(--green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13px;
}

.page-agregar-venta input,
.page-agregar-venta select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-agregar-venta input:focus,
.page-agregar-venta select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-agregar-venta input[readonly],
.page-agregar-venta input:disabled {
    opacity: .82;
    background: rgba(255,255,255,.04);
}

.page-agregar-venta .available-accounts-list-scroll {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(0,217,255,.16);
    background: rgba(0,0,0,.2);
}

.page-agregar-venta .available-accounts-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.page-agregar-venta .available-accounts-table th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
}

.page-agregar-venta .available-accounts-table td {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.page-agregar-venta .available-accounts-table tr:hover {
    background: rgba(0,217,255,.045);
}

.page-agregar-venta .price-col {
    color: var(--yellow);
    font-family: var(--font-mono);
    font-weight: 700;
}

.page-agregar-venta .selected-account-edit-group {
    margin-bottom: 18px;
}

.page-agregar-venta .account-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255,255,255,.14);
}

.page-agregar-venta .account-platform-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    padding: 5px;
}

.page-agregar-venta .account-header-info h4 {
    margin: 0;
    color: var(--cyan);
    word-break: break-word;
}

.page-agregar-venta .submit-btn {
    min-height: 54px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-agregar-venta .message-box {
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 16px;
    font-weight: 700;
}

.page-agregar-venta .message-success {
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.35);
}

.page-agregar-venta .message-error {
    background: rgba(255,48,79,.12);
    border: 1px solid rgba(255,48,79,.35);
}

.page-agregar-venta .message-warning {
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.35);
}

.page-agregar-venta .no-results,
.page-agregar-venta .no-results-selected {
    text-align: center;
    color: var(--muted);
    padding: 18px;
}




/* ==================================================
   AGREGAR VENTA - CELULAR
================================================== */

@media (max-width: 768px) {

    .page-agregar-venta .admin-main-content {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-agregar-venta .form-section,
    .page-agregar-venta .selected-account-edit-group {
        padding: 16px;
        border-radius: 18px;
    }

    .page-agregar-venta .available-accounts-list-scroll {
        overflow-x: hidden;
    }

    .page-agregar-venta .available-accounts-table,
    .page-agregar-venta .available-accounts-table thead,
    .page-agregar-venta .available-accounts-table tbody,
    .page-agregar-venta .available-accounts-table tr,
    .page-agregar-venta .available-accounts-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-agregar-venta .available-accounts-table {
        min-width: 0;
    }

    .page-agregar-venta .available-accounts-table thead {
        display: none;
    }

    .page-agregar-venta .available-accounts-table tr {
        margin-bottom: 13px;
        padding: 13px;
        border-radius: 16px;
        background: rgba(8,16,25,.9);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-agregar-venta .available-accounts-table td {
        display: grid;
        grid-template-columns: 115px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-agregar-venta .available-accounts-table td:last-child {
        border-bottom: none;
    }

    .page-agregar-venta .available-accounts-table td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-agregar-venta .account-header-info {
        align-items: flex-start;
    }

    .page-agregar-venta .submit-btn {
        width: 100%;
    }
}


.page-agregar-venta .venta-filter-box{
    position:relative;
    margin-bottom:14px;
}

.page-agregar-venta .venta-filter-box i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--cyan);
}

.page-agregar-venta .venta-filter-box input{
    padding-left:42px;
}



/* Checkbox selector de cuentas */

.page-agregar-venta .account-checkbox{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    cursor:pointer;
    transform:none !important;
}

.page-agregar-venta #select_all_accounts{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    cursor:pointer;
    transform:none !important;
}



@media(max-width:768px){

    .page-agregar-venta .account-checkbox,
    .page-agregar-venta #select_all_accounts{
        width:16px !important;
        height:16px !important;
        min-width:16px !important;
        min-height:16px !important;
    }

}

.page-agregar-venta .available-accounts-table td[data-label="Elegir"]{
    width:40px;
    text-align:center;
}

/* ==================================================
   ESTADISTICAS
================================================== */

body.page-estadisticas{
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
}

.page-estadisticas .main-title{
    color:var(--cyan);
}

.page-estadisticas .main-title::before{
    content:"📊";
}

.page-estadisticas .charts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:22px;
    margin-top:22px;
}

.page-estadisticas .chart-card{
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.22);
    border-radius:22px;
    padding:22px;
    box-shadow:var(--shadow);
}

.page-estadisticas .chart-card h3{
    margin:0 0 18px;
    color:var(--cyan);
    text-transform:uppercase;
    letter-spacing:.07em;
    display:flex;
    gap:10px;
    align-items:center;
}

.page-estadisticas canvas{
    max-width:100%;
}

@media(max-width:768px){
    .page-estadisticas .admin-main-content{
        padding:12px;
    }

    .page-estadisticas .charts-grid{
        grid-template-columns:1fr;
    }

    .page-estadisticas .chart-card{
        padding:16px;
        border-radius:18px;
    }
}


/* ==================================================
   CONVERSOR DE DIVISAS
================================================== */

body.page-conversor{
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
}

.page-conversor .conversor-card{
    width:100%;
    max-width:680px;
    margin:30px auto;
    padding:32px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.24);
    box-shadow:var(--shadow);
    text-align:center;
}

.page-conversor h1{
    color:var(--cyan);
    font-size:2.1rem;
    margin-bottom:8px;
    text-transform:uppercase;
}

.page-conversor .subtitle{
    color:var(--muted);
    margin-bottom:28px;
}

.page-conversor .input-group{
    display:grid;
    grid-template-columns:1fr 220px;
    gap:14px;
    margin-bottom:24px;
}

.page-conversor input,
.page-conversor select{
    width:100%;
    min-height:50px;
    padding:0 14px;
    border-radius:14px;
    border:1px solid rgba(0,217,255,.22);
    background:#050a10;
    color:var(--text);
    font-family:var(--font-mono);
}

.page-conversor input:focus,
.page-conversor select:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

.page-conversor #resultados-automaticos,
.page-conversor #tasas-config{
    margin-top:24px;
    padding-top:22px;
    border-top:1px dashed rgba(255,255,255,.14);
    text-align:left;
}

.page-conversor h2,
.page-conversor h3{
    color:var(--green);
    margin-bottom:16px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.page-conversor .resultado-item{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:15px;
    margin-bottom:12px;
    border-radius:16px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(0,217,255,.18);
}

.page-conversor .resultado-item .label{
    color:var(--muted);
    font-weight:700;
}

.page-conversor .resultado-item .value{
    color:var(--cyan);
    font-family:var(--font-mono);
    font-weight:800;
}

.page-conversor .tasas-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.page-conversor .tasa-input-container{
    display:grid;
    gap:6px;
}

.page-conversor .tasa-input-container label{
    color:var(--cyan);
    font-weight:700;
    text-align:center;
}

.page-conversor #tasas-config button{
    width:100%;
    min-height:50px;
    margin-top:16px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    font-weight:800;
    text-transform:uppercase;
}

.page-conversor #mensaje-tasas{
    text-align:center;
    margin-top:12px;
    font-weight:700;
}

@media(max-width:768px){
    .page-conversor .admin-main-content{
        padding:12px;
    }

    .page-conversor .conversor-card{
        padding:18px;
        border-radius:18px;
    }

    .page-conversor .input-group,
    .page-conversor .tasas-grid{
        grid-template-columns:1fr;
    }

    .page-conversor .resultado-item{
        flex-direction:column;
        text-align:center;
    }
}


/* ==================================================
   ADMIN CATALOGO
================================================== */

body.page-admin-catalogo {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-admin-catalogo .main-title {
    color: var(--cyan);
}

.page-admin-catalogo .main-title::before {
    content: "📕";
}

.page-admin-catalogo form {
    display: grid;
    gap: 14px;
    padding: 22px;
    margin-bottom: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-admin-catalogo select,
.page-admin-catalogo input,
.page-admin-catalogo textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-admin-catalogo textarea {
    min-height: 140px;
    padding-top: 14px;
    resize: vertical;
}

.page-admin-catalogo select:focus,
.page-admin-catalogo input:focus,
.page-admin-catalogo textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-admin-catalogo button {
    min-height: 50px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-admin-catalogo h3 {
    margin: 26px 0 16px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-admin-catalogo p {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.28);
    color: var(--green);
    font-weight: 700;
}

.page-admin-catalogo table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.18);
    border-radius: 18px;
    overflow: hidden;
}

.page-admin-catalogo th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
}

.page-admin-catalogo td {
    padding: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
    vertical-align: middle;
}

.page-admin-catalogo .catalogo-img {
    width: 90px;
    max-width: 90px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    padding: 5px;
}

.page-admin-catalogo .catalogo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin-catalogo .catalogo-edit-btn,
.page-admin-catalogo .catalogo-delete-btn,
.page-admin-catalogo .catalogo-back-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
}

.page-admin-catalogo .catalogo-edit-btn {
    color: #00140b;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.page-admin-catalogo .catalogo-delete-btn {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-admin-catalogo .catalogo-back-btn {
    margin-top: 18px;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}



/* ==================================================
   ADMIN CATALOGO - CELULAR
================================================== */

@media (max-width: 768px) {

    .page-admin-catalogo .admin-main-content {
        padding: 12px;
    }

    .page-admin-catalogo form {
        padding: 16px;
        border-radius: 18px;
    }

    .page-admin-catalogo table,
    .page-admin-catalogo thead,
    .page-admin-catalogo tbody,
    .page-admin-catalogo tr,
    .page-admin-catalogo td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-admin-catalogo thead {
        display: none;
    }

    .page-admin-catalogo tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-admin-catalogo td {
        display: grid;
        grid-template-columns: 105px minmax(0,1fr);
        gap: 10px;
        padding: 10px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-admin-catalogo td:last-child {
        border-bottom: none;
    }

    .page-admin-catalogo td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-admin-catalogo .catalogo-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-admin-catalogo .catalogo-edit-btn,
    .page-admin-catalogo .catalogo-delete-btn,
    .page-admin-catalogo .catalogo-back-btn {
        width: 100%;
    }
}


/* =====================================
   BUSCADOR
===================================== */

.catalog-search{
    width:100%;
    max-width:700px;
    margin:20px auto;
    padding:0 15px;
}

.catalog-search input{
    width:100%;
    height:50px;
    border:none;
    border-radius:30px;
    padding:0 20px;
    font-size:16px;
}

/* =====================================
   PRODUCTOS
===================================== */

.producto-card{
    transition:.3s;
}

.producto-card:hover{
    transform:translateY(-5px);
}

/* =====================================
   CARRITO FLOTANTE
===================================== */

.carrito-link{
    position:relative;
}

.carrito-link::after{
    content:attr(data-count);
    position:absolute;
    top:-10px;
    right:-10px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:red;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;
}

/* =====================================
   MODAL
===================================== */

.modal-content{
    border-radius:20px;
    box-shadow:0 0 30px rgba(0,0,0,.5);
}

/* =====================================
   CELULAR
===================================== */

@media(max-width:768px){

    .catalogo-titulo-header{
        font-size:1.2rem;
    }

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

    .producto{
        width:100%;
    }

    .carrito{
        width:100%;
    }

}




/* ==================================================
   CATALOGO PUBLICO CLIENTES
================================================== */

body.page-catalogo-publico{
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.16), transparent 30%),
        radial-gradient(circle at 88% 84%, rgba(0,255,136,.12), transparent 32%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
    color:var(--text);
}

.page-catalogo-publico .header{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 28px;
    background:rgba(5,10,16,.92);
    border-bottom:1px solid rgba(0,217,255,.24);
    backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.page-catalogo-publico .logo{
    width:82px;
    height:auto;
    filter:drop-shadow(0 0 14px rgba(0,217,255,.45));
}

.page-catalogo-publico .catalogo-titulo-header{
    flex:1;
    margin:0;
    color:var(--cyan);
    text-align:center;
    font-size:clamp(18px,3vw,34px);
    text-transform:uppercase;
    letter-spacing:.08em;
    text-shadow:0 0 18px rgba(0,217,255,.38);
}

.page-catalogo-publico .carrito-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    text-decoration:none;
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    font-weight:900;
    letter-spacing:.05em;
}

.page-catalogo-publico .carrito-link::after{
    content:attr(data-count);
    position:absolute;
    top:-8px;
    right:-8px;
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--red);
    color:white;
    font-size:12px;
    box-shadow:0 0 12px rgba(255,48,79,.55);
}

.page-catalogo-publico .catalog-search{
    width:min(760px,92%);
    margin:24px auto 8px;
}

.page-catalogo-publico .catalog-search input{
    width:100%;
    min-height:54px;
    padding:0 20px;
    border-radius:999px;
    border:1px solid rgba(0,217,255,.28);
    background:rgba(5,10,16,.88);
    color:var(--text);
    font-family:var(--font-mono);
    box-shadow:var(--shadow);
}

.page-catalogo-publico .catalogo-container{
    width:min(1280px,94%);
    margin:24px auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:24px;
    align-items:start;
}

.page-catalogo-publico .productos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:22px;
}

.page-catalogo-publico .producto{
    padding:18px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.20);
    box-shadow:var(--shadow);
    text-align:center;
    transition:.25s;
}

.page-catalogo-publico .producto:hover{
    transform:translateY(-5px);
    border-color:rgba(0,255,136,.38);
    box-shadow:0 20px 45px rgba(0,0,0,.5),0 0 24px rgba(0,217,255,.16);
}

.page-catalogo-publico .producto-imagen{
    width:100%;
    max-width:150px;
    height:120px;
    object-fit:contain;
    margin:0 auto 14px;
    display:block;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.05);
}

.page-catalogo-publico .producto-descripcion-corta{
    color:var(--cyan);
    font-size:18px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.page-catalogo-publico .producto-descripcion-larga{
    color:var(--muted);
    white-space:pre-wrap;
    margin:14px 0;
    line-height:1.45;
}

.page-catalogo-publico .producto-agregar,
.page-catalogo-publico .carrito button{
    width:100%;
    min-height:46px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.page-catalogo-publico .carrito{
    position:sticky;
    top:110px;
    padding:20px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.98),rgba(5,10,16,.99));
    border:1px solid rgba(0,255,136,.24);
    box-shadow:var(--shadow);
}

.page-catalogo-publico .carrito h2{
    margin:0 0 16px;
    color:var(--green);
    text-align:center;
    text-transform:uppercase;
}

.page-catalogo-publico .carrito ul{
    list-style:none;
    padding:0;
    margin:0 0 16px;
    display:grid;
    gap:12px;
}

.page-catalogo-publico .carrito li{
    padding:12px;
    border-radius:16px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.08);
}

.page-catalogo-publico .carrito li span{
    color:var(--muted);
    font-size:13px;
}

.page-catalogo-publico .carrito p{
    color:var(--yellow);
    font-size:20px;
    font-weight:900;
    text-align:center;
}

.page-catalogo-publico .carrito form button[name="borrar"]{
    margin-top:8px;
    color:white;
    background:linear-gradient(135deg,var(--red),#9d1026);
}

.page-catalogo-publico button[name="limpiar_carrito"]{
    margin-top:10px;
    background:linear-gradient(135deg,var(--red),#9d1026)!important;
    color:white!important;
}

.page-catalogo-publico .footer{
    width:min(1280px,94%);
    margin:20px auto 30px;
    padding:18px;
    border-radius:22px;
    background:rgba(5,10,16,.82);
    border:1px solid rgba(0,217,255,.18);
}

.page-catalogo-publico .footer-left{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}

.page-catalogo-publico .index-button,
.page-catalogo-publico .facebook-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    text-decoration:none;
    color:var(--text);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(0,217,255,.18);
    font-weight:800;
}

.page-catalogo-publico .modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(10px);
    padding:20px;
}

.page-catalogo-publico .modal-content{
    width:min(460px,100%);
    margin:8vh auto;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.98),rgba(5,10,16,.99));
    border:1px solid rgba(0,217,255,.30);
    box-shadow:0 0 40px rgba(0,217,255,.20),0 20px 70px rgba(0,0,0,.65);
}

.page-catalogo-publico .close-btn{
    float:right;
    color:var(--red);
    font-size:32px;
    cursor:pointer;
}

.page-catalogo-publico #modal-title{
    color:var(--cyan);
    text-transform:uppercase;
    letter-spacing:.07em;
}

.page-catalogo-publico .opcion-label{
    display:block;
    padding:13px;
    margin-bottom:10px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(0,217,255,.18);
    cursor:pointer;
    color:var(--text);
}

.page-catalogo-publico .opcion-label:hover{
    border-color:var(--green);
}

.page-catalogo-publico #precio-final-display{
    color:var(--yellow);
    font-weight:900;
}

@media(max-width:900px){
    .page-catalogo-publico .catalogo-container{
        grid-template-columns:1fr;
    }

    .page-catalogo-publico .carrito{
        position:static;
    }
}

@media(max-width:620px){
    .page-catalogo-publico .header{
        flex-direction:column;
        padding:14px;
    }

    .page-catalogo-publico .carrito-link{
        width:100%;
    }

    .page-catalogo-publico .productos-grid{
        grid-template-columns:1fr;
    }

    .page-catalogo-publico .footer-left{
        display:grid;
        grid-template-columns:1fr;
    }

    .page-catalogo-publico .index-button,
    .page-catalogo-publico .facebook-button{
        width:100%;
    }
}


.page-catalogo-publico .catalogo-container{
    grid-template-columns: minmax(0,1fr);
}

.page-catalogo-publico .carrito{
    position: fixed;
    right: 18px;
    bottom: 18px;
    top: auto;
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 80;
}

@media(max-width:768px){
    .page-catalogo-publico .carrito{
        position: static;
        width: 100%;
        max-height: none;
    }
}


/* ==================================================
   EDITAR PRODUCTO CATALOGO
================================================== */

body.page-editar-catalogo-producto {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-editar-catalogo-producto .main-title {
    color: var(--cyan);
}

.page-editar-catalogo-producto .main-title::before {
    content: "✏️";
}

.page-editar-catalogo-producto form {
    display: grid;
    gap: 14px;
    max-width: 760px;
    padding: 22px;
    margin-bottom: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-editar-catalogo-producto select,
.page-editar-catalogo-producto input,
.page-editar-catalogo-producto textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-editar-catalogo-producto textarea {
    min-height: 170px;
    padding-top: 14px;
    resize: vertical;
}

.page-editar-catalogo-producto select:focus,
.page-editar-catalogo-producto input:focus,
.page-editar-catalogo-producto textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-editar-catalogo-producto button {
    min-height: 50px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-editar-catalogo-producto p {
    max-width: 760px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.28);
    color: var(--green);
    font-weight: 700;
}

.page-editar-catalogo-producto h3 {
    margin: 24px 0 14px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-editar-catalogo-producto .catalogo-options-btn,
.page-editar-catalogo-producto .catalogo-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    margin-right: 10px;
}

.page-editar-catalogo-producto .catalogo-options-btn {
    color: #00140b;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.page-editar-catalogo-producto .catalogo-back-btn {
    margin-top: 18px;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

@media (max-width: 768px) {
    .page-editar-catalogo-producto .admin-main-content {
        padding: 12px;
    }

    .page-editar-catalogo-producto form {
        max-width: 100%;
        padding: 16px;
        border-radius: 18px;
    }

    .page-editar-catalogo-producto .catalogo-options-btn,
    .page-editar-catalogo-producto .catalogo-back-btn {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}


/* ==================================================
   GESTIONAR OPCIONES CATALOGO
================================================== */

body.page-gestionar-opciones {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-gestionar-opciones .main-title {
    color: var(--cyan);
}

.page-gestionar-opciones .main-title::before {
    content: "⚙️";
}

.page-gestionar-opciones .catalogo-subtitle {
    max-width: 900px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    color: var(--yellow);
    background: rgba(255,209,102,.10);
    border: 1px solid rgba(255,209,102,.24);
    font-weight: 800;
}

.page-gestionar-opciones h3 {
    margin: 24px 0 14px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-gestionar-opciones .catalogo-options-form {
    display: grid;
    gap: 14px;
    max-width: 900px;
    padding: 22px;
    margin-bottom: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-gestionar-opciones input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-gestionar-opciones input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-gestionar-opciones button {
    min-height: 44px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
}

.page-gestionar-opciones .catalogo-options-form button {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-gestionar-opciones .eliminar-btn {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
    padding: 0 14px;
}

.page-gestionar-opciones p {
    max-width: 900px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.28);
    color: var(--green);
    font-weight: 700;
}

.page-gestionar-opciones hr {
    max-width: 900px;
    border: none;
    border-top: 1px dashed rgba(0,217,255,.25);
    margin: 22px 0;
}

.page-gestionar-opciones table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.18);
    border-radius: 18px;
    overflow: hidden;
}

.page-gestionar-opciones th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
}

.page-gestionar-opciones td {
    padding: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.page-gestionar-opciones .catalogo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-gestionar-opciones .catalogo-back-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

@media (max-width: 768px) {
    .page-gestionar-opciones .admin-main-content {
        padding: 12px;
    }

    .page-gestionar-opciones .catalogo-options-form {
        max-width: 100%;
        padding: 16px;
        border-radius: 18px;
    }

    .page-gestionar-opciones table,
    .page-gestionar-opciones thead,
    .page-gestionar-opciones tbody,
    .page-gestionar-opciones tr,
    .page-gestionar-opciones td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-gestionar-opciones thead {
        display: none;
    }

    .page-gestionar-opciones tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-gestionar-opciones td {
        display: grid;
        grid-template-columns: 110px minmax(0,1fr);
        gap: 10px;
        padding: 10px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-gestionar-opciones td:last-child {
        border-bottom: none;
    }

    .page-gestionar-opciones td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-gestionar-opciones .catalogo-actions,
    .page-gestionar-opciones .catalogo-actions form,
    .page-gestionar-opciones .eliminar-btn,
    .page-gestionar-opciones .catalogo-back-btn {
        width: 100%;
    }
}



.page-gestionar-opciones .editar-opcion-btn{
    color:#00140b;
    background:linear-gradient(135deg,var(--yellow),var(--orange));
    padding:0 14px;
}

.page-gestionar-opciones table input{
    min-height:40px;
    font-size:13px;
}

.page-gestionar-opciones .catalogo-actions form{
    display:inline-flex;
}



/* ==================================================
   NUEVA CARGA DE VENCIMIENTOS
================================================== */

body.page-nueva-carga {
    background:
        radial-gradient(circle at 14% 12%, rgba(188,19,254,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.12), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-nueva-carga .nueva-carga-card {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 28px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-nueva-carga h2 {
    margin: 0 0 24px;
    color: var(--cyan);
    display: flex;
    align-items: center;
    gap: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-nueva-carga h2 i {
    color: var(--purple, #bc13fe);
    text-shadow: 0 0 18px rgba(188,19,254,.55);
}

.page-nueva-carga p {
    color: var(--muted);
}

.page-nueva-carga textarea {
    width: 100%;
    min-height: 190px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(0,217,255,.22);
    background: rgba(0,0,0,.35);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.page-nueva-carga textarea:focus {
    outline: none;
    border-color: #bc13fe;
    box-shadow: 0 0 0 3px rgba(188,19,254,.14);
}

.page-nueva-carga .btn-main {
    width: 100%;
    min-height: 54px;
    margin-top: 18px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #bc13fe, #7000ff);
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: .22s;
}

.page-nueva-carga .btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(188,19,254,.42);
}

.page-nueva-carga .alert-duplicado {
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 16px;
    color: #ffb3b3;
    background: rgba(255,48,79,.12);
    border: 1px solid rgba(255,48,79,.35);
}

.page-nueva-carga .nueva-carga-table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}

.page-nueva-carga table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.page-nueva-carga th {
    padding: 12px;
    color: var(--cyan);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .06em;
}

.page-nueva-carga .account-row {
    background: rgba(255,255,255,.035);
    transition: .25s;
}

.page-nueva-carga .account-row td {
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.page-nueva-carga .account-row td:first-child {
    border-left: 1px solid rgba(255,255,255,.07);
    border-radius: 14px 0 0 14px;
}

.page-nueva-carga .account-row td:last-child {
    border-right: 1px solid rgba(255,255,255,.07);
    border-radius: 0 14px 14px 0;
}

.page-nueva-carga .account-row:hover {
    background: rgba(0,217,255,.06);
}

.page-nueva-carga input[type="date"] {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.24);
    background: #050a10;
    color: var(--cyan);
    font-family: var(--font-mono);
}

.page-nueva-carga input[type="date"]:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-nueva-carga input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.page-nueva-carga .star-btn {
    font-size: 24px;
    color: rgba(255,255,255,.18);
    cursor: pointer;
    transition: .2s;
}

.page-nueva-carga .star-btn.active {
    color: var(--yellow);
    text-shadow: 0 0 18px rgba(255,209,102,.6);
}

.page-nueva-carga .btn-row-save {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--green);
    background: transparent;
    border: 1px solid rgba(0,255,136,.45);
    font-weight: 800;
}

.page-nueva-carga .btn-row-save:hover {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-nueva-carga .baja-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--red);
    background: rgba(255,48,79,.12);
    border: 1px solid rgba(255,48,79,.28);
    font-size: 11px;
    font-weight: 900;
}

.page-nueva-carga .correo-label {
    display: block;
    color: white;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.page-nueva-carga .fade-out {
    opacity: 0;
    transform: scale(.95);
    transition: .4s;
}

.page-nueva-carga .row-error {
    box-shadow: inset 0 0 18px rgba(255,48,79,.35);
}

.page-nueva-carga .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}



/* ==================================================
   NUEVA CARGA - CELULAR
================================================== */

@media (max-width: 768px) {
    .page-nueva-carga .admin-main-content {
        padding: 12px;
    }

    .page-nueva-carga .nueva-carga-card {
        padding: 16px;
        border-radius: 18px;
    }

    .page-nueva-carga h2 {
        font-size: 1.1rem;
        align-items: flex-start;
    }

    .page-nueva-carga .nueva-carga-table-container {
        overflow-x: hidden;
    }

    .page-nueva-carga table,
    .page-nueva-carga thead,
    .page-nueva-carga tbody,
    .page-nueva-carga tr,
    .page-nueva-carga td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-nueva-carga thead {
        display: none;
    }

    .page-nueva-carga .account-row {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-nueva-carga .account-row td {
        display: grid;
        grid-template-columns: 110px minmax(0,1fr);
        gap: 10px;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .page-nueva-carga .account-row td:first-child,
    .page-nueva-carga .account-row td:last-child {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .page-nueva-carga .account-row td:last-child {
        border-bottom: none;
    }

    .page-nueva-carga .account-row td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-nueva-carga input[type="date"],
    .page-nueva-carga .btn-row-save {
        width: 100%;
    }
}



/* ==========================================
   SWEETALERT POLICIAL
========================================== */

.swal2-popup{
    background:#08111a !important;
    border:1px solid rgba(0,217,255,.25) !important;
    border-radius:20px !important;
    box-shadow:
        0 0 25px rgba(0,217,255,.15),
        0 15px 40px rgba(0,0,0,.55) !important;
}

.swal2-title{
    color:#00d9ff !important;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800 !important;
}

.swal2-html-container{
    color:#d7e7f7 !important;
}

.swal2-confirm{
    background:linear-gradient(135deg,#00ff88,#00d9ff)!important;
    color:#00140b!important;
    font-weight:800!important;
    border:none!important;
}

.swal2-cancel{
    background:linear-gradient(135deg,#ff304f,#a70d2a)!important;
    color:white!important;
    font-weight:800!important;
    border:none!important;
}

.swal2-icon.swal2-success{
    border-color:#00ff88!important;
    color:#00ff88!important;
}

.swal2-icon.swal2-error{
    border-color:#ff304f!important;
    color:#ff304f!important;
}

.swal2-icon.swal2-warning{
    border-color:#ffd166!important;
    color:#ffd166!important;
}



/* ==================================================
   EDITAR CLIENTE
================================================== */

body.page-editar-cliente {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-editar-cliente .page-title {
    color: var(--cyan);
}

.page-editar-cliente .page-title::before {
    content: "✍️";
}

.page-editar-cliente .form-container {
    max-width: 720px;
}

.page-editar-cliente .glass-card {
    padding: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-editar-cliente .form-container h2 {
    margin: 0 0 18px;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-editar-cliente .add-form {
    display: grid;
    gap: 13px;
}

.page-editar-cliente label {
    color: var(--cyan);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .06em;
}

.page-editar-cliente input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-editar-cliente input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-editar-cliente .btn-primary {
    min-height: 50px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-editar-cliente .back-button-container {
    margin-top: 20px;
}

.page-editar-cliente .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

@media(max-width:768px){
    .page-editar-cliente .admin-main-content {
        padding: 12px;
    }

    .page-editar-cliente .glass-card {
        padding: 16px;
        border-radius: 18px;
    }

    .page-editar-cliente .btn-secondary {
        width: 100%;
    }
}



.page-streaming .delete-btn{
    transition:.25s;
}

.page-streaming .delete-btn:hover{
    transform:scale(1.08);
    box-shadow:0 0 18px rgba(255,48,79,.45);
}


/* ==================================================
   REPORTE COMISIONES
================================================== */

body.page-reporte-comisiones {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,255,136,.13), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-reporte-comisiones .main-title {
    color: var(--green);
}

.page-reporte-comisiones .main-title::before {
    content: "💰";
}

.page-reporte-comisiones .header-with-back-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-reporte-comisiones .button-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

.page-reporte-comisiones .filter-section-wrapper,
.page-reporte-comisiones .report-results-wrapper {
    padding: 22px;
    margin-bottom: 22px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-reporte-comisiones h3 {
    margin: 0 0 18px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-reporte-comisiones .report-filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    align-items: end;
}

.page-reporte-comisiones .report-filter-form div {
    display: grid;
    gap: 7px;
}

.page-reporte-comisiones label {
    color: var(--green);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .06em;
}

.page-reporte-comisiones select,
.page-reporte-comisiones input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-reporte-comisiones select:focus,
.page-reporte-comisiones input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-reporte-comisiones .button-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.page-reporte-comisiones .button-primary,
.page-reporte-comisiones .button-secondary,
.page-reporte-comisiones .toggle-detail-btn {
    min-height: 44px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.page-reporte-comisiones .button-primary {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-reporte-comisiones .button-secondary {
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

.page-reporte-comisiones .scroll-container {
    overflow-x: auto;
    border-radius: 18px;
}

.page-reporte-comisiones .report-table,
.page-reporte-comisiones .inner-accounts-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.18);
    overflow: hidden;
}

.page-reporte-comisiones th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
}

.page-reporte-comisiones td {
    padding: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
    vertical-align: top;
}

.page-reporte-comisiones .vendor-summary-row td:nth-child(1) {
    color: var(--cyan);
    font-weight: 900;
}

.page-reporte-comisiones .vendor-summary-row td:nth-child(3),
.page-reporte-comisiones .total-comision-final {
    color: var(--green);
    font-weight: 900;
    font-family: var(--font-mono);
}

.page-reporte-comisiones .toggle-detail-btn {
    padding: 0 14px;
    color: #00140b;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.page-reporte-comisiones .hidden-detail-row {
    display: none;
}

.page-reporte-comisiones .detailed-accounts-container {
    padding: 18px;
    border-radius: 18px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.08);
}

.page-reporte-comisiones .detailed-accounts-container h4 {
    margin: 0 0 14px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-reporte-comisiones .inner-accounts-table td:nth-child(6) {
    color: var(--green);
    font-weight: 900;
    font-family: var(--font-mono);
}

.page-reporte-comisiones .no-results {
    padding: 16px;
    border-radius: 14px;
    color: var(--yellow);
    background: rgba(255,209,102,.10);
    border: 1px solid rgba(255,209,102,.28);
    font-weight: 800;
}



/* ==================================================
   REPORTE COMISIONES - CELULAR
================================================== */

@media (max-width: 768px) {

    .page-reporte-comisiones .admin-main-content {
        padding: 12px;
    }

    .page-reporte-comisiones .header-with-back-btn {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-reporte-comisiones .button-back {
        width: 100%;
    }

    .page-reporte-comisiones .filter-section-wrapper,
    .page-reporte-comisiones .report-results-wrapper {
        padding: 16px;
        border-radius: 18px;
    }

    .page-reporte-comisiones .report-filter-form {
        grid-template-columns: 1fr;
    }

    .page-reporte-comisiones .scroll-container {
        overflow-x: hidden;
    }

    .page-reporte-comisiones .report-table,
    .page-reporte-comisiones .report-table thead,
    .page-reporte-comisiones .report-table tbody,
    .page-reporte-comisiones .report-table tr,
    .page-reporte-comisiones .report-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-reporte-comisiones .report-table thead {
        display: none;
    }

    .page-reporte-comisiones .vendor-summary-row {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-reporte-comisiones .vendor-summary-row td {
        display: grid;
        grid-template-columns: 125px minmax(0,1fr);
        gap: 10px;
        padding: 10px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-reporte-comisiones .vendor-summary-row td:last-child {
        border-bottom: none;
    }

    .page-reporte-comisiones .vendor-summary-row td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-reporte-comisiones .toggle-detail-btn {
        width: 100%;
    }

    .page-reporte-comisiones .hidden-detail-row {
        display: none !important;
    }

    .page-reporte-comisiones .hidden-detail-row:not(.hidden-detail-row) {
        display: block !important;
    }

    .page-reporte-comisiones .inner-accounts-table,
    .page-reporte-comisiones .inner-accounts-table thead,
    .page-reporte-comisiones .inner-accounts-table tbody,
    .page-reporte-comisiones .inner-accounts-table tr,
    .page-reporte-comisiones .inner-accounts-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-reporte-comisiones .inner-accounts-table thead {
        display: none;
    }

    .page-reporte-comisiones .inner-accounts-table tr {
        margin-bottom: 12px;
        padding: 12px;
        border-radius: 16px;
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.08);
    }

    .page-reporte-comisiones .inner-accounts-table td {
        display: grid;
        grid-template-columns: 105px minmax(0,1fr);
        gap: 10px;
        padding: 9px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
        overflow-wrap: anywhere;
    }

    .page-reporte-comisiones .inner-accounts-table td:last-child {
        border-bottom: none;
    }

    .page-reporte-comisiones .inner-accounts-table td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }
}


/* ==================================================
   ENVIAR ACTUALIZACION WHATSAPP
================================================== */

body.page-enviar-actualizacion {
    background:
        radial-gradient(circle at 14% 12%, rgba(37,211,102,.15), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.12), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-enviar-actualizacion .main-title {
    color: var(--green);
}

.page-enviar-actualizacion .main-title::before {
    content: "🔑";
}

.page-enviar-actualizacion .platform-logo {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
}



/* ==================================================
   WHATSAPP / MENSAJES DE CUENTA
================================================== */

.whatsapp-page-container {
    min-height: 100vh;
    padding: 28px 14px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background:
        radial-gradient(circle at 14% 12%, rgba(37,211,102,.13), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.whatsapp-content {
    width: min(760px, 100%);
}

.whatsapp-card-container {
    display: grid;
    gap: 18px;
}

.whatsapp-card {
    padding: 22px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(37,211,102,.25);
    box-shadow: var(--shadow);
}

.whatsapp-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed rgba(255,255,255,.14);
    text-align: center;
}

.whatsapp-body {
    border-radius: 18px;
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(0,217,255,.16);
    overflow: hidden;
}

.whatsapp-text {
    margin: 0;
    padding: 18px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.whatsapp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.btn-copy-whatsapp,
.btn-open-whatsapp,
.back-to-gestion-btn {
    min-height: 46px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.btn-copy-whatsapp {
    color: #00140b;
    background: linear-gradient(135deg, var(--cyan), var(--green));
}

.btn-open-whatsapp {
    color: #00140b;
    background: linear-gradient(135deg, #25D366, var(--green));
}

.back-to-gestion-btn {
    margin-top: 18px;
    width: 100%;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

@media(max-width:768px) {
    .whatsapp-page-container {
        padding: 14px;
    }

    .whatsapp-card {
        padding: 16px;
        border-radius: 18px;
    }

    .whatsapp-actions {
        grid-template-columns: 1fr;
    }

    .whatsapp-text {
        font-size: 13px;
    }
}


/* ==================================================
   PANEL VENDEDOR
================================================== */

body.page-vendedor {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.15), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
    color: var(--text);
}

.page-vendedor .seller-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0,1fr);
}

.page-vendedor .seller-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 16px;
    background:
        linear-gradient(180deg, rgba(5,10,16,.98), rgba(8,16,25,.96));
    border-right: 1px solid rgba(0,217,255,.22);
    box-shadow: 12px 0 35px rgba(0,0,0,.35);
}

.page-vendedor .logo-container {
    text-align: center;
    margin-bottom: 24px;
}

.page-vendedor .logo {
    width: 120px;
    max-width: 80%;
    filter: drop-shadow(0 0 16px rgba(0,217,255,.35));
}

.page-vendedor .seller-sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.page-vendedor .seller-sidebar nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    font-weight: 800;
    letter-spacing: .04em;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(0,217,255,.14);
    transition: .22s;
}

.page-vendedor .seller-sidebar nav a:hover {
    transform: translateX(4px);
    color: var(--cyan);
    border-color: rgba(0,217,255,.34);
    box-shadow: 0 0 18px rgba(0,217,255,.12);
}

.page-vendedor .seller-sidebar nav .logout-btn {
    color: white;
    background: linear-gradient(135deg, rgba(255,48,79,.85), rgba(157,16,38,.9));
    border-color: rgba(255,48,79,.35);
}

.page-vendedor .seller-content {
    padding: 28px;
}

.page-vendedor .seller-title {
    margin: 0 0 10px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 18px rgba(0,217,255,.36);
}

.page-vendedor .seller-content > p {
    margin-bottom: 24px;
    color: var(--muted);
    font-weight: 600;
}

.page-vendedor .seller-commission-summary {
    max-width: 980px;
    padding: 24px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,255,136,.24);
    box-shadow: var(--shadow);
}

.page-vendedor .seller-commission-summary h3 {
    margin: 0 0 18px;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-vendedor .seller-commission-summary p {
    color: var(--text);
}

.page-vendedor .seller-commission-summary strong {
    color: var(--yellow);
    font-family: var(--font-mono);
}

.page-vendedor .commission-details-toggle {
    margin: 18px 0;
}

.page-vendedor .toggle-details-btn {
    min-height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-vendedor .commission-details-list {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(0,217,255,.18);
}

.page-vendedor .commission-details-list h4 {
    margin: 0 0 14px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-vendedor .commission-details-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.page-vendedor .commission-details-list li {
    display: grid;
    gap: 7px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.page-vendedor .detail-platform {
    color: var(--cyan);
    font-weight: 900;
    text-transform: uppercase;
}

.page-vendedor .detail-info,
.page-vendedor .detail-cliente,
.page-vendedor .detail-fecha {
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.page-vendedor .detail-precio-venta {
    color: var(--yellow);
    font-weight: 800;
}

.page-vendedor .detail-monto {
    color: var(--green);
    font-weight: 900;
}

.page-vendedor .commission-note {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--muted) !important;
    background: rgba(255,255,255,.04);
    border: 1px dashed rgba(255,255,255,.12);
}

/* ==================================================
   PANEL VENDEDOR - CELULAR
================================================== */

@media(max-width:768px) {

    .page-vendedor .seller-layout {
        grid-template-columns: 1fr;
    }

    .page-vendedor .seller-sidebar {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(0,217,255,.22);
    }

    .page-vendedor .seller-sidebar nav ul {
        grid-template-columns: 1fr;
    }

    .page-vendedor .seller-sidebar nav a {
        justify-content: center;
    }

    .page-vendedor .seller-content {
        padding: 14px;
    }

    .page-vendedor .seller-title {
        font-size: 1.4rem;
        text-align: center;
    }

    .page-vendedor .seller-content > p {
        text-align: center;
    }

    .page-vendedor .seller-commission-summary {
        padding: 16px;
        border-radius: 18px;
    }

    .page-vendedor .toggle-details-btn {
        width: 100%;
    }

    .page-vendedor .commission-details-list {
        padding: 12px;
    }
}

/* ==================================================
   VER PRODUCTOS / CUENTAS VENDEDOR
================================================== */

body.page-ver-productos{
    min-height:100vh;
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
    color:var(--text);
}

/* ADMIN */
.page-ver-productos .admin-products-content .main-title{
    color:var(--cyan);
}

.page-ver-productos .admin-products-content .main-title::before{
    content:"📦";
}

.page-ver-productos .filter-form-admin,
.page-ver-productos .filter-form-seller{
    padding:18px;
    margin-bottom:22px;
    border-radius:20px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.22);
    box-shadow:var(--shadow);
}

.page-ver-productos .filter-group-admin,
.page-ver-productos .filter-group-seller{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.page-ver-productos .filter-group-admin input,
.page-ver-productos .filter-group-seller input,
.page-ver-productos .filter-input{
    width:100%;
    min-height:44px;
    padding:0 13px;
    border-radius:12px;
    border:1px solid rgba(0,217,255,.22);
    background:#050a10;
    color:var(--text);
    font-family:var(--font-mono);
    box-sizing:border-box;
}

.page-ver-productos .filter-group-admin input:focus,
.page-ver-productos .filter-group-seller input:focus,
.page-ver-productos .filter-input:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

.page-ver-productos .filter-btn,
.page-ver-productos .clear-filter-btn,
.page-ver-productos .back-btn,
.page-ver-productos .btn-back{
    min-height:44px;
    padding:0 14px;
    border:none;
    border-radius:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    cursor:pointer;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.page-ver-productos .filter-btn{
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
}

.page-ver-productos .clear-filter-btn{
    color:#fff;
    background:linear-gradient(135deg,var(--red),#9d1026);
}

.page-ver-productos .table-scroll-container{
    overflow-x:auto;
    border-radius:20px;
    background:rgba(5,10,16,.82);
    border:1px solid rgba(0,217,255,.18);
    box-shadow:var(--shadow);
}

.page-ver-productos .table-products{
    width:100%;
    border-collapse:collapse;
}

.page-ver-productos .table-products th{
    padding:13px;
    background:rgba(0,217,255,.10);
    color:var(--cyan);
    font-size:12px;
    text-transform:uppercase;
}

.page-ver-productos .table-products td{
    padding:13px;
    border-top:1px solid rgba(255,255,255,.07);
    vertical-align:middle;
}

.page-ver-productos .product-info-cell{
    display:flex;
    align-items:center;
    gap:10px;
}

.page-ver-productos .product-icon{
    width:38px;
    height:38px;
    object-fit:contain;
    border-radius:10px;
    padding:4px;
    background:rgba(255,255,255,.06);
}

.page-ver-productos .copyable-cell{
    color:var(--text);
    font-family:var(--font-mono);
    overflow-wrap:anywhere;
}

.page-ver-productos .copy-button{
    margin-left:6px;
    border:none;
    border-radius:9px;
    cursor:pointer;
    color:#00140b;
    background:linear-gradient(135deg,var(--cyan),var(--green));
    padding:6px 8px;
}

.page-ver-productos .actions-admin{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.page-ver-productos .action-btn{
    width:38px;
    height:38px;
    border-radius:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:white;
    transition:.22s;
}

.page-ver-productos .edit-btn{
    background:linear-gradient(135deg,var(--yellow),var(--orange));
    color:#00140b;
}

.page-ver-productos .delete-btn{
    background:linear-gradient(135deg,var(--red),#9d1026);
}

.page-ver-productos .action-btn:hover{
    transform:scale(1.07);
}

.page-ver-productos .button-container-admin{
    margin-top:20px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.page-ver-productos .new-product-btn{
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
}

.page-ver-productos .admin-return-btn,
.page-ver-productos .seller-return-btn{
    color:var(--cyan);
    border:1px solid rgba(0,217,255,.28);
    background:rgba(255,255,255,.04);
}

.page-ver-productos .no-results{
    padding:18px;
    color:var(--yellow);
    text-align:center;
    font-weight:800;
}

/* VENDEDOR */
.page-ver-productos .seller-products-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
}

.page-ver-productos .seller-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    padding:22px 16px;
    background:linear-gradient(180deg,rgba(5,10,16,.98),rgba(8,16,25,.96));
    border-right:1px solid rgba(0,217,255,.22);
    box-shadow:12px 0 35px rgba(0,0,0,.35);
}

.page-ver-productos .seller-sidebar .logo-container{
    text-align:center;
    margin-bottom:24px;
}

.page-ver-productos .seller-sidebar .logo{
    width:120px;
    max-width:80%;
    filter:drop-shadow(0 0 16px rgba(0,217,255,.35));
}

.page-ver-productos .seller-sidebar nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:12px;
}

.page-ver-productos .seller-sidebar nav a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 14px;
    border-radius:14px;
    text-decoration:none;
    color:var(--text);
    font-weight:800;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(0,217,255,.14);
}

.page-ver-productos .seller-sidebar nav a.active,
.page-ver-productos .seller-sidebar nav a:hover{
    color:var(--cyan);
    border-color:rgba(0,217,255,.34);
    box-shadow:0 0 18px rgba(0,217,255,.12);
}

.page-ver-productos .seller-sidebar nav .logout-btn{
    color:#fff;
    background:linear-gradient(135deg,rgba(255,48,79,.85),rgba(157,16,38,.9));
    border-color:rgba(255,48,79,.35);
}

.page-ver-productos .seller-content{
    padding:28px;
}

.page-ver-productos .seller-content .main-title{
    color:var(--cyan);
}

.page-ver-productos .seller-content .main-title::before{
    content:"📦";
}

.page-ver-productos .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.page-ver-productos .product-card{
    padding:20px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.22);
    box-shadow:var(--shadow);
    transition:.22s;
}

.page-ver-productos .product-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,255,136,.35);
}

.page-ver-productos .product-logo-container{
    text-align:center;
    margin-bottom:16px;
}

.page-ver-productos .product-icon-large{
    width:110px;
    height:90px;
    object-fit:contain;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
}

.page-ver-productos .product-detail{
    display:grid;
    gap:6px;
    margin:0 0 12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.page-ver-productos .product-detail strong{
    color:var(--cyan);
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.06em;
}

.page-ver-productos .copyable-text{
    color:var(--text);
    font-family:var(--font-mono);
    cursor:pointer;
    overflow-wrap:anywhere;
}

.page-ver-productos .copyable-text:hover{
    color:var(--green);
}

.page-ver-productos .account-status-info{
    margin-top:14px;
    padding:12px;
    border-radius:16px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(0,217,255,.15);
}

.page-ver-productos .account-status-info p{
    margin:6px 0;
}

.page-ver-productos .days-remaining-status{
    font-weight:900;
}

.page-ver-productos .pausada,
.page-ver-productos .vencido,
.page-ver-productos .le-quedan{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.page-ver-productos .pausada{
    color:#00140b;
    background:var(--yellow);
}

.page-ver-productos .vencido,
.page-ver-productos .critico{
    color:#fff;
    background:var(--red);
}

.page-ver-productos .advertencia{
    color:#00140b;
    background:var(--yellow);
}

.page-ver-productos .normal{
    color:#00140b;
    background:var(--green);
}
/* ==================================================
   VER PRODUCTOS - CELULAR
================================================== */

@media(max-width:768px){

    .page-ver-productos .seller-products-layout{
        grid-template-columns:1fr;
    }

    .page-ver-productos .seller-sidebar{
        position:relative;
        height:auto;
        border-right:none;
        border-bottom:1px solid rgba(0,217,255,.22);
    }

    .page-ver-productos .seller-sidebar nav a{
        justify-content:center;
    }

    .page-ver-productos .seller-content,
    .page-ver-productos .admin-main-content{
        padding:12px;
    }

    .page-ver-productos .filter-group-admin,
    .page-ver-productos .filter-group-seller{
        grid-template-columns:1fr;
    }

    .page-ver-productos .table-scroll-container{
        overflow-x:hidden;
    }

    .page-ver-productos .table-products,
    .page-ver-productos .table-products thead,
    .page-ver-productos .table-products tbody,
    .page-ver-productos .table-products tr,
    .page-ver-productos .table-products td{
        display:block;
        width:100%;
        box-sizing:border-box;
    }

    .page-ver-productos .table-products thead{
        display:none;
    }

    .page-ver-productos .table-products tr{
        margin-bottom:14px;
        padding:14px;
        border-radius:18px;
        background:rgba(5,10,16,.86);
        border:1px solid rgba(0,217,255,.18);
    }

    .page-ver-productos .table-products td{
        display:grid;
        grid-template-columns:110px minmax(0,1fr);
        gap:10px;
        padding:10px 0;
        border-top:none;
        border-bottom:1px solid rgba(255,255,255,.07);
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .page-ver-productos .table-products td:last-child{
        border-bottom:none;
    }

    .page-ver-productos .table-products td::before{
        content:attr(data-label);
        color:var(--cyan);
        font-size:11px;
        font-weight:800;
        text-transform:uppercase;
    }

    .page-ver-productos .actions-admin,
    .page-ver-productos .button-container-admin{
        display:grid;
        grid-template-columns:1fr;
    }

    .page-ver-productos .action-btn{
        width:100%;
        min-height:42px;
    }

    .page-ver-productos .product-grid{
        grid-template-columns:1fr;
    }

    .page-ver-productos .product-card{
        padding:16px;
        border-radius:18px;
    }
}

/* ==================================================
   CAMBIAR CONTRASEÑA VENDEDOR
================================================== */

body.page-cambiar-contrasena{
    min-height:100vh;
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.15), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
    color:var(--text);
}

.page-cambiar-contrasena .change-password-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
}

.page-cambiar-contrasena .seller-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    padding:22px 16px;
    background:linear-gradient(180deg,rgba(5,10,16,.98),rgba(8,16,25,.96));
    border-right:1px solid rgba(0,217,255,.22);
    box-shadow:12px 0 35px rgba(0,0,0,.35);
}

.page-cambiar-contrasena .logo-container{
    text-align:center;
    margin-bottom:24px;
}

.page-cambiar-contrasena .logo{
    width:120px;
    max-width:80%;
    filter:drop-shadow(0 0 16px rgba(0,217,255,.35));
}

.page-cambiar-contrasena .seller-sidebar nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:12px;
}

.page-cambiar-contrasena .seller-sidebar nav a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 14px;
    border-radius:14px;
    text-decoration:none;
    color:var(--text);
    font-weight:800;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(0,217,255,.14);
    transition:.22s;
}

.page-cambiar-contrasena .seller-sidebar nav a.active,
.page-cambiar-contrasena .seller-sidebar nav a:hover{
    color:var(--cyan);
    border-color:rgba(0,217,255,.34);
    box-shadow:0 0 18px rgba(0,217,255,.12);
}

.page-cambiar-contrasena .seller-sidebar nav .logout-btn{
    color:white;
    background:linear-gradient(135deg,rgba(255,48,79,.85),rgba(157,16,38,.9));
    border-color:rgba(255,48,79,.35);
}

.page-cambiar-contrasena .password-panel{
    padding:28px;
}

.page-cambiar-contrasena .password-panel{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.page-cambiar-contrasena .password-panel > form,
.page-cambiar-contrasena .form-message,
.page-cambiar-contrasena .btn-back{
    max-width:620px;
}

.page-cambiar-contrasena .main-title{
    max-width:620px;
    color:var(--cyan);
}

.page-cambiar-contrasena .main-title::before{
    content:"🔑";
}

.page-cambiar-contrasena form{
    display:grid;
    gap:16px;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.22);
    box-shadow:var(--shadow);
}

.page-cambiar-contrasena .form-group{
    display:grid;
    gap:8px;
}

.page-cambiar-contrasena label{
    color:var(--green);
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.page-cambiar-contrasena input{
    width:100%;
    min-height:48px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(0,217,255,.22);
    background:#050a10;
    color:var(--text);
    font-family:var(--font-mono);
    box-sizing:border-box;
}

.page-cambiar-contrasena input:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

.page-cambiar-contrasena .submit-btn{
    min-height:52px;
    border:none;
    border-radius:15px;
    cursor:pointer;
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    font-family:var(--font-title);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.page-cambiar-contrasena .form-message{
    padding:14px 16px;
    border-radius:16px;
    font-weight:800;
}

.page-cambiar-contrasena .form-message.success{
    color:var(--green);
    background:rgba(0,255,136,.10);
    border:1px solid rgba(0,255,136,.30);
}

.page-cambiar-contrasena .form-message.error{
    color:var(--red);
    background:rgba(255,48,79,.10);
    border:1px solid rgba(255,48,79,.30);
}

.page-cambiar-contrasena .btn-back{
    margin-top:20px;
    min-height:44px;
    padding:0 16px;
    border-radius:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:900;
    color:var(--cyan);
    border:1px solid rgba(0,217,255,.28);
    background:rgba(255,255,255,.04);
}

/* ==================================================
   CAMBIAR CONTRASEÑA - CELULAR
================================================== */

@media(max-width:768px){

    .page-cambiar-contrasena .change-password-layout{
        grid-template-columns:1fr;
    }

    .page-cambiar-contrasena .seller-sidebar{
        position:relative;
        height:auto;
        border-right:none;
        border-bottom:1px solid rgba(0,217,255,.22);
    }

    .page-cambiar-contrasena .seller-sidebar nav a{
        justify-content:center;
    }

    .page-cambiar-contrasena .password-panel{
        padding:14px;
    }

    .page-cambiar-contrasena .main-title{
        text-align:center;
        font-size:1.35rem;
    }

    .page-cambiar-contrasena form{
        padding:16px;
        border-radius:18px;
    }

    .page-cambiar-contrasena .btn-back{
        width:100%;
    }
}

/* ===== GESTIÓN YOUTUBE COMPLETO - CUENTAS VINCULADAS ===== */

.page-youtube .youtube-linked-profiles {
    margin: 12px 0 8px;
}

.page-youtube .youtube-linked-btn {
    width: 100%;
    border: 1px solid rgba(0, 255, 170, 0.35);
    background: linear-gradient(135deg, rgba(0, 255, 170, 0.14), rgba(0, 120, 255, 0.12));
    color: #d9fff4;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: inset 0 0 18px rgba(0, 255, 170, 0.08), 0 0 18px rgba(0, 255, 170, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-youtube .youtube-linked-btn i {
    margin-right: 8px;
    color: #00ffaa;
}

.page-youtube .youtube-linked-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 170, 0.75);
    box-shadow: inset 0 0 22px rgba(0, 255, 170, 0.14), 0 0 26px rgba(0, 255, 170, 0.18);
}

.youtube-linked-modal-list {
    display: grid;
    gap: 10px;
    text-align: left;
}

.youtube-linked-item {
    border: 1px solid rgba(0, 255, 170, 0.25);
    background: rgba(5, 12, 22, 0.92);
    color: #eafff8;
    border-radius: 12px;
    padding: 12px;
    box-shadow: inset 0 0 14px rgba(0, 255, 170, 0.08);
}

.youtube-linked-item strong {
    color: #00ffaa;
}

.youtube-disponible {
    color: #00ff88;
    font-weight: 900;
}

.youtube-cliente {
    color: #45a3ff;
    font-weight: 900;
}

.youtube-linked-empty {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 193, 7, 0.12);
    color: #ffe08a;
    font-weight: 800;
    text-align: center;
}
/* ===== ALERTAS INTELIGENTES - CUENTAS MAESTRAS ===== */

.page-gestion-maestras .fila-requiere-eliminacion {
    background: linear-gradient(90deg, rgba(255, 49, 49, 0.28), rgba(18, 24, 38, 0.96)) !important;
    box-shadow: inset 4px 0 0 #ff3131;
}

.page-gestion-maestras .mini-alerta-eliminar {
    margin-top: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 49, 49, 0.16);
    border: 1px solid rgba(255, 49, 49, 0.55);
    color: #ffd6d6;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.page-gestion-maestras .mini-alerta-eliminar i {
    color: #ff4d4d;
}

.page-gestion-maestras .perfiles-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(0, 255, 170, 0.12);
    border: 1px solid rgba(0, 255, 170, 0.45);
    color: #bfffee;
    font-weight: 900;
    text-decoration: none;
}

.page-gestion-maestras .perfiles-link:hover {
    background: rgba(0, 255, 170, 0.22);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(0, 255, 170, 0.25);
}

.page-gestion-maestras .btn-gestionar-mini {
    padding: 6px 8px !important;
    font-size: 12px !important;
    margin-left: 6px !important;
}

.maestra-modal-list {
    display: grid;
    gap: 10px;
    text-align: left;
}

.maestra-modal-item {
    padding: 12px;
    border-radius: 12px;
    background: rgba(8, 15, 27, 0.94);
    border: 1px solid rgba(0, 255, 170, 0.25);
    color: #eafff8;
    box-shadow: inset 0 0 14px rgba(0, 255, 170, 0.08);
}

.maestra-modal-item strong {
    color: #00ffaa;
}
/* ===== CHECKBOX Y ELIMINACIÓN MASIVA - CUENTAS MAESTRAS ===== */

.page-gestion-maestras .check-maestra,
.page-gestion-maestras #checkAllMaestras {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #ff3131;
}

.page-gestion-maestras .bulk-delete-btn {
    border: 1px solid rgba(255, 49, 49, 0.65);
    background: linear-gradient(135deg, rgba(255, 49, 49, 0.25), rgba(80, 0, 0, 0.45));
    color: #ffe1e1;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-gestion-maestras .bulk-delete-btn:hover {
    background: linear-gradient(135deg, rgba(255, 49, 49, 0.45), rgba(120, 0, 0, 0.65));
    box-shadow: 0 0 22px rgba(255, 49, 49, 0.28);
}

.page-gestion-maestras .bulk-delete-btn i {
    margin-right: 8px;
}

/* ==================================================
   PANEL CLIENTE - CUENTAS
================================================== */

.cliente-portal-body {
    min-height: 100vh;
    padding: 26px;
}

.cliente-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.cliente-login-card {
    width: min(430px, 94vw);
    background: linear-gradient(145deg, rgba(16,25,35,.96), rgba(5,7,10,.98));
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 34px;
    box-shadow: var(--shadow);
}

.cliente-login-badge,
.cliente-chip {
    display: inline-flex;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: 1px;
}

.cliente-login-card h1,
.cliente-topbar h1 {
    margin: 14px 0 4px;
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
}

.cliente-login-card p,
.cliente-topbar p {
    color: var(--muted);
    margin-top: 0;
}

.cliente-login-form {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.cliente-login-form label {
    color: var(--cyan);
    text-transform: uppercase;
    font-size: .86rem;
}

.cliente-login-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 14px;
    background: rgba(0,0,0,.35);
    color: var(--text);
    outline: none;
}

.cliente-login-form input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0,217,255,.12);
}

.cliente-login-form button,
.cliente-btn {
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--cyan), var(--green));
    color: #031014;
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.cliente-alerta.error {
    margin: 18px 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,48,79,.14);
    border: 1px solid rgba(255,48,79,.45);
    color: #ff8fa0;
}

.cliente-topbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(11,17,24,.88);
    box-shadow: var(--shadow);
}

.cliente-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
}

.cliente-cuentas-grid {
    display: grid;
    gap: 18px;
}

.cliente-cuenta-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    background:
        linear-gradient(145deg, rgba(16,25,35,.96), rgba(5,7,10,.94));
    box-shadow: 0 16px 42px rgba(0,0,0,.42);
}

.cliente-cuenta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 5px solid var(--green);
    pointer-events: none;
}

.cliente-cuenta-card.critica::before {
    border-left-color: var(--yellow);
}

.cliente-cuenta-card.vencida::before,
.cliente-cuenta-card.eliminada::before {
    border-left-color: var(--red);
}

.cliente-cuenta-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.cliente-plataforma {
    color: var(--cyan);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .82rem;
}

.cliente-cuenta-head h2 {
    margin: 6px 0 0;
    font-size: 1.5rem;
    word-break: break-all;
}

.cliente-estado {
    white-space: nowrap;
    border-radius: 999px;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--green);
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.35);
}

.cliente-cuenta-card.critica .cliente-estado {
    color: var(--yellow);
    background: rgba(255,209,102,.12);
    border-color: rgba(255,209,102,.38);
}

.cliente-cuenta-card.vencida .cliente-estado,
.cliente-cuenta-card.eliminada .cliente-estado {
    color: var(--red);
    background: rgba(255,48,79,.12);
    border-color: rgba(255,48,79,.38);
}

.cliente-datos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.cliente-datos div {
    padding: 14px;
    border: 1px solid rgba(0,217,255,.16);
    border-radius: 14px;
    background: rgba(0,0,0,.24);
}

.cliente-datos small {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.cliente-datos strong {
    font-family: var(--font-mono);
    color: var(--text);
    word-break: break-word;
}

.cliente-acciones {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.cliente-btn.codigo {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
}

.cliente-btn.salir {
    background: rgba(255,48,79,.14);
    color: #ff8fa0;
    border: 1px solid rgba(255,48,79,.4);
}

.cliente-btn.bloqueado {
    background: rgba(255,48,79,.14);
    color: #ff8fa0;
    border: 1px solid rgba(255,48,79,.35);
    cursor: not-allowed;
}

.cliente-reglas {
    position: sticky;
    top: 24px;
    align-self: start;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    background: rgba(11,17,24,.9);
    box-shadow: var(--shadow);
}

.cliente-reglas h2 {
    margin-top: 0;
    color: var(--cyan);
    text-transform: uppercase;
}

.cliente-reglas ul {
    padding-left: 18px;
    color: var(--muted);
}

.cliente-reglas li {
    margin-bottom: 12px;
}

.cliente-warning {
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    color: var(--yellow);
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.35);
}

.cliente-empty {
    border: 1px dashed var(--line-strong);
    border-radius: 20px;
    padding: 34px;
    text-align: center;
    background: rgba(11,17,24,.72);
}

@media (max-width: 980px) {
    .cliente-layout {
        grid-template-columns: 1fr;
    }

    .cliente-reglas {
        position: static;
    }

    .cliente-datos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .cliente-portal-body {
        padding: 14px;
    }

    .cliente-topbar,
    .cliente-cuenta-head {
        flex-direction: column;
    }

    .cliente-datos {
        grid-template-columns: 1fr;
    }

    .cliente-estado {
        white-space: normal;
    }
}
.codigo-modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 99999;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px);
}

.codigo-modal.activo {
    display: grid;
}

.codigo-modal-card {
    position: relative;
    width: min(430px, 92vw);
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(145deg, rgba(11,17,24,.98), rgba(3,8,13,.98));
    border: 1px solid var(--line-strong);
    box-shadow: 0 25px 80px rgba(0,0,0,.65);
}

.codigo-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-size: 26px;
    cursor: pointer;
}

.codigo-modal-badge {
    display: inline-flex;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(0,217,255,.35);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: 1px;
}

.codigo-modal-card h2 {
    margin: 16px 0 6px;
    text-transform: uppercase;
}

.codigo-modal-card p {
    color: var(--muted);
    margin-bottom: 18px;
}

.codigo-numero {
    margin: 18px auto 24px;
    padding: 18px;
    border-radius: 18px;
    font-size: clamp(2.4rem, 9vw, 4rem);
    font-family: var(--font-mono);
    font-weight: 900;
    letter-spacing: 8px;
    color: var(--green);
    background: rgba(0,255,136,.08);
    border: 1px solid rgba(0,255,136,.35);
    text-shadow: 0 0 24px rgba(0,255,136,.55);
}

/* ==================================================
   ADMIN CÓDIGOS
================================================== */

.page-admin-codigos .cliente-login-shell {
    min-height: calc(100vh - 52px);
    display: grid;
    place-items: center;
    padding: 20px;
}

.page-admin-codigos .cliente-login-card {
    width: min(520px, 100%);
}

/* ==================================================
   FIX GENERAL MÓVIL - MENÚ + TARJETAS
================================================== */

@media (max-width: 900px) {
    .admin-grid-container {
        display: block;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .admin-menu {
        width: 100%;
        max-width: 100vw;
        position: relative;
    }

    .admin-main-content {
        width: 100%;
        max-width: 100vw;
        padding: 12px !important;
        overflow-x: hidden;
    }

    .cliente-login-shell,
    .cliente-layout,
    .cliente-cuentas-grid,
    .cards-container,
    .grid-cards,
    .productos-grid,
    .cuentas-container,
    .content-card,
    .form-section,
    .table-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cliente-login-card,
    .cliente-cuenta-card,
    .card,
    .cuenta-card,
    .producto-card,
    .content-card,
    .form-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .admin-main-content {
        padding: 10px !important;
    }

    .cliente-login-shell {
        padding: 10px !important;
    }

    .cliente-login-card,
    .cliente-cuenta-card,
    .content-card,
    .form-section {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .menu-items {
        grid-template-columns: 1fr !important;
    }
}
/* ==================================================
   FIX GLOBAL CELULAR - TARJETAS NO SE SALEN
================================================== */

@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .admin-grid-container,
    .admin-main-content,
    .admin-menu,
    .menu-items,
    .submenu,
    .table-container,
    .premium-card,
    .search-panel,
    .cliente-login-shell,
    .cliente-login-card,
    .cliente-layout,
    .cliente-cuentas-grid,
    .cliente-cuenta-card,
    .guarantee-container,
    .guarantee-section,
    .account-display-card,
    .whatsapp-page-container,
    .whatsapp-content,
    .whatsapp-card,
    .form-section,
    .form-panel,
    .panel-container,
    .main-content-wrapper,
    .cuentas-container,
    .content-card,
    .card,
    .cuenta-card,
    .producto-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .admin-main-content {
        padding: 12px !important;
    }

    .premium-card,
    .cliente-login-card,
    .cliente-cuenta-card,
    .guarantee-container,
    .guarantee-section,
    .account-display-card,
    .whatsapp-content,
    .whatsapp-card,
    .form-section,
    .form-panel,
    .panel-container,
    .content-card,
    .card,
    .cuenta-card,
    .producto-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    table,
    tbody,
    tr,
    td,
    th {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    td,
    th,
    p,
    span,
    strong,
    div,
    a,
    input,
    textarea,
    select,
    button {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    input,
    textarea,
    select,
    button {
        width: 100% !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .copy-container,
    .copy-text,
    .email-perfil,
    .account-info,
    .whatsapp-text {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    #cuentasTable tbody tr,
    #cuentasMaestrasTable tbody tr,
    .panel-vencimientos-table tbody tr {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 480px) {
    .admin-main-content {
        padding: 10px !important;
    }

    .premium-card,
    .cliente-login-card,
    .cliente-cuenta-card,
    .guarantee-container,
    .guarantee-section,
    .whatsapp-content,
    .whatsapp-card,
    .form-section,
    .form-panel,
    .panel-container {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .main-title,
    .panel-header h1,
    .cliente-login-card h1 {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }
}
/* ==================================================
   FIX REAL MÓVIL - CONTENIDO MISMO ANCHO QUE MENÚ
================================================== */

@media (max-width: 900px) {
    .admin-grid-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .admin-menu {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .admin-main-content > *,
    .premium-card,
    .cliente-login-shell,
    .cliente-login-card,
    .cliente-layout,
    .cliente-cuentas-grid,
    .cliente-cuenta-card,
    .table-container,
    .panel-vencimientos-table,
    .guarantee-container,
    .guarantee-section,
    .whatsapp-page-container,
    .whatsapp-content,
    .whatsapp-card,
    .form-section,
    .form-panel,
    .panel-container,
    .main-content-wrapper,
    .cuentas-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    tbody,
    tr,
    td {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #cuentasTable tbody tr,
    #cuentasMaestrasTable tbody tr,
    .panel-vencimientos-table tbody tr {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    #cuentasTable td,
    #cuentasMaestrasTable td,
    .panel-vencimientos-table td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    input,
    select,
    textarea,
    button,
    a,
    span,
    strong,
    p,
    div {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .copy-container,
    .copy-text,
    .email-perfil,
    .account-info,
    .whatsapp-text {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 480px) {
    .admin-main-content {
        padding: 10px !important;
    }

    .premium-card,
    .cliente-login-card,
    .cliente-cuenta-card,
    .panel-container,
    .form-panel,
    .form-section,
    .guarantee-container,
    .guarantee-section,
    .whatsapp-content,
    .whatsapp-card {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}
/* ==================================================
   LOGO PRIME VIDEO - ADMIN CÓDIGOS
================================================== */

.codigo-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.codigo-logo {
    width: auto;
    max-width: 420px;
    max-height: 180px;
    object-fit: contain;

    filter:
        drop-shadow(0 0 22px rgba(0,217,255,.40))
        drop-shadow(0 0 45px rgba(0,217,255,.25));
}

.codigo-logo:hover {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .codigo-logo {
        max-width: 260px;
        max-height: 120px;
    }
}
.youtube-payment-email {
    margin-top: 8px;
    font-size: 13px;
}

.youtube-payment-same,
.youtube-payment-different {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.youtube-payment-same {
    color: var(--green);
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.35);
}

.youtube-payment-different {
    color: var(--yellow);
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.38);
}

.youtube-payment-different strong {
    color: var(--text);
}
.btn-copy-youtube {
    width: 100%;
    min-height: 42px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.btn-edit-visible {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    min-width: 130px;
    margin-bottom: 12px;
    padding: 9px 14px !important;
    border-radius: 12px;
    color: #00140b !important;
    background: linear-gradient(135deg, var(--yellow), var(--orange)) !important;
    font-weight: 800;
    cursor: pointer;
}
/* YOUTUBE ICLOUD - PLATAFORMA Y BOTÓN EDITAR EQUILIBRADO */
.page-youtube .plat-tag {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 7px 12px !important;
    border-radius: 999px;
    color: var(--cyan) !important;
    background: rgba(0,217,255,.12) !important;
    border: 1px solid rgba(0,217,255,.35) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-youtube .btn-edit-visible {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: auto !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,209,102,.38) !important;
    background: rgba(255,209,102,.10) !important;
    color: var(--yellow) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    box-shadow: none !important;
}

.page-youtube .btn-edit-visible:hover {
    background: rgba(255,209,102,.18) !important;
    border-color: rgba(255,209,102,.65) !important;
    transform: translateY(-1px);
}

.page-youtube .card-cuenta {
    position: relative !important;
    padding-top: 48px !important;
}
/* AJUSTE BOTÓN EDITAR YOUTUBE */

.page-youtube .card-cuenta{
    position: relative;
}

.page-youtube .btn-edit-visible{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;

    width: auto !important;
    min-width: auto !important;

    padding: 5px 10px !important;

    z-index: 20;
}
/* AJUSTE FINAL TARJETA YOUTUBE */

.page-youtube .card-cuenta {
    position: relative !important;
    padding-top: 18px !important;
}

.page-youtube .plat-tag {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;

    color: #ff304f !important;
    background: rgba(255,48,79,.13) !important;
    border: 1px solid rgba(255,48,79,.55) !important;

    font-family: var(--font-mono) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.page-youtube .btn-edit-visible {
    position: absolute !important;
    top: 20px !important;
    right: 12px !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    border-radius: 50% !important;
    z-index: 20 !important;
}


/* FIX CATALOGO PUBLICO - CARRITO NO ESTORBA */

.page-catalogo-publico .catalogo-container {
    display: block !important;
    width: min(1280px, 96%) !important;
    margin: 0 auto !important;
}

.page-catalogo-publico .productos-grid {
    width: 100% !important;
}

.page-catalogo-publico .carrito {
    position: static !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 28px auto !important;
    z-index: 1 !important;
}

.page-catalogo-publico .carrito-link {
    position: relative !important;
}

/* FIX MODAL OPCIONES CATALOGO */

.page-catalogo-publico #opcionesModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    padding: 22px 12px !important;
    background: rgba(0,0,0,.78) !important;
}

.page-catalogo-publico #opcionesModal .modal-content {
    width: min(620px, 94vw) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    margin: 20px auto !important;
    border-radius: 22px !important;
}

.page-catalogo-publico #opciones-container {
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
}

.page-catalogo-publico .opcion-label {
    display: block !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    line-height: 1.35 !important;
}
/* CATALOGO - CARRITO LATERAL PROFESIONAL */

.page-catalogo-publico .catalogo-container {
    width: min(1380px, 96%);
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.page-catalogo-publico .carrito-lateral {
    position: sticky !important;
    top: 18px;
    width: 100% !important;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(16,25,35,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.26);
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.page-catalogo-publico .carrito-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,217,255,.18);
}

.page-catalogo-publico .carrito-header h2 {
    margin: 0;
    color: var(--cyan);
    font-size: 24px;
    text-transform: uppercase;
}

.page-catalogo-publico .carrito-header span {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 12px;
}

.page-catalogo-publico .carrito-items {
    display: grid;
    gap: 12px;
}

.page-catalogo-publico .carrito-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 32px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.08);
}

.page-catalogo-publico .carrito-item-img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    padding: 6px;
}

.page-catalogo-publico .carrito-item-info {
    min-width: 0;
}

.page-catalogo-publico .carrito-item-info strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    text-transform: uppercase;
}

.page-catalogo-publico .carrito-item-info small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
    margin: 3px 0;
}

.page-catalogo-publico .carrito-item-info span {
    color: var(--green);
    font-family: var(--font-mono);
    font-weight: 800;
}

.page-catalogo-publico .carrito-remove {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid rgba(255,48,79,.45) !important;
    border-radius: 50% !important;
    background: rgba(255,48,79,.12) !important;
    color: var(--red) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer;
}

.page-catalogo-publico .carrito-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0;
    padding-top: 14px;
    border-top: 1px solid rgba(0,217,255,.18);
}

.page-catalogo-publico .carrito-total span {
    color: var(--muted);
    text-transform: uppercase;
}

.page-catalogo-publico .carrito-total strong {
    color: var(--green);
    font-size: 24px;
    font-family: var(--font-mono);
}

.page-catalogo-publico .carrito-comprar,
.page-catalogo-publico .carrito-limpiar {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.page-catalogo-publico .carrito-comprar {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-catalogo-publico .carrito-limpiar {
    margin-top: 10px;
    border: 1px solid rgba(255,48,79,.35);
    background: rgba(255,48,79,.10);
    color: #ff8fa0;
}

.page-catalogo-publico .carrito-vacio {
    text-align: center;
    color: var(--muted);
    padding: 22px 10px;
}

/* móvil */
@media (max-width: 900px) {
    .page-catalogo-publico .catalogo-container {
        display: block !important;
        width: 94% !important;
    }

    .page-catalogo-publico .carrito-lateral {
        position: static !important;
        max-height: none;
        margin-top: 24px;
    }
}
/* CATALOGO - AJUSTE ESPACIO Y CARRITO */

.page-catalogo-publico .catalogo-container {
    width: min(1500px, 98%) !important;
    gap: 18px !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
}

.page-catalogo-publico .productos-grid {
    gap: 18px !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
}

.page-catalogo-publico .producto-card {
    padding: 16px !important;
    border-radius: 20px !important;
}

.page-catalogo-publico .producto-imagen {
    max-height: 170px !important;
    width: 100% !important;
    object-fit: contain !important;
}

.page-catalogo-publico .producto-descripcion-corta {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 10px 0 !important;
}

.page-catalogo-publico .producto-descripcion-larga {
    font-size: 13px !important;
    line-height: 1.35 !important;
    max-height: 82px !important;
    overflow: hidden !important;
}

.page-catalogo-publico .carrito-lateral {
    top: 92px !important;
    max-height: calc(100vh - 110px) !important;
}

.page-catalogo-publico .carrito-item {
    grid-template-columns: 64px minmax(0, 1fr) 30px !important;
}

.page-catalogo-publico .carrito-item-img {
    width: 64px !important;
    height: 64px !important;
}

.page-catalogo-publico .carrito-item-info small {
    font-size: 12px !important;
    color: var(--text) !important;
}

@media (max-width: 900px) {
    .page-catalogo-publico .catalogo-container {
        display: block !important;
        width: 94% !important;
    }

    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 120px !important;
    }

    .page-catalogo-publico .producto-descripcion-corta {
        font-size: 15px !important;
    }

    .page-catalogo-publico .carrito-lateral {
        position: static !important;
        max-height: none !important;
        margin-top: 18px !important;
    }
}

@media (max-width: 480px) {
    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-catalogo-publico .producto-card {
        padding: 10px !important;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 100px !important;
    }
}
.carrito-descuento{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
    padding:10px 0;
    border-top:1px dashed rgba(255,255,255,.15);
    color:#9fe7c2;
    font-size:14px;
}

.carrito-descuento strong{
    color:#00ff88;
    font-size:18px;
    font-weight:800;
}
/* GESTIONAR OPCIONES - MOVER ARRIBA / ABAJO */

.catalogo-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
}

.catalogo-actions form{
    display:inline-flex;
    margin:0;
}

.btn-mover{
    width:34px;
    height:34px;
    border:none;
    border-radius:10px;
    background:rgba(0,217,255,.12);
    border:1px solid rgba(0,217,255,.30);
    color:#00d9ff;
    cursor:pointer;
    font-size:16px;
    transition:.2s;
}

.btn-mover:hover{
    background:rgba(0,217,255,.22);
    transform:translateY(-1px);
}

.editar-opcion-btn{
    min-width:90px;
}

.eliminar-btn{
    min-width:90px;
}
.opcion-texto-formateado {
    display: block;
    line-height: 1.55;
    font-weight: 700;
}

.opcion-label {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
}
.opcion-label-pro {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.opcion-catalogo-info {
    display: grid;
    gap: 5px;
    line-height: 1.3;
}

.opcion-dispositivos {
    font-size: 20px;
}

.opcion-nombre {
    font-weight: 800;
}

.opcion-servicio {
    color: var(--cyan);
    font-weight: 800;
}

.opcion-precio {
    color: var(--green);
    font-weight: 900;
    font-size: 18px;
}
/* CATALOGO - OPCIONES PREVIEW EN TARJETA */

.page-catalogo-publico .producto-opciones-preview {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.page-catalogo-publico .preview-opcion {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.08);
}

.page-catalogo-publico .preview-opcion span {
    color: var(--text);
    font-weight: 800;
    font-size: 13px;
}

.page-catalogo-publico .preview-opcion small {
    color: var(--cyan);
    font-weight: 700;
    font-size: 12px;
}

.page-catalogo-publico .preview-opcion strong {
    grid-row: span 2;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 14px;
}


.page-catalogo-publico .btn-ver-opciones {
    border: 1px solid rgba(0,217,255,.35);
    background: rgba(0,217,255,.10);
    color: var(--cyan);
    border-radius: 12px;
    padding: 8px 10px;
    font-weight: 800;
    cursor: pointer;
}

.page-catalogo-publico .producto-sin-opciones {
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}
/* CATALOGO - OPCIONES AGRUPADAS POR DIAS */

.page-catalogo-publico .producto-opcion-grupo {
    display: grid;
    gap: 6px;
}

.page-catalogo-publico .producto-opcion-grupo-titulo {
    margin-top: 4px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.25);
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    letter-spacing: .04em;
}

.page-catalogo-publico .producto-opcion-linea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.page-catalogo-publico .producto-opcion-linea span {
    color: var(--text);
}

.page-catalogo-publico .producto-opcion-linea strong {
    color: var(--green);
    font-family: var(--font-mono);
    white-space: nowrap;
}
/* CATÁLOGO - TARJETAS MÁS PROFESIONALES Y OPCIONES ALINEADAS */

.page-catalogo-publico .productos-grid {
    align-items: stretch !important;
}

.page-catalogo-publico .producto-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    
    padding: 18px !important;
    overflow: hidden !important;
}

.page-catalogo-publico .producto-imagen {
    width: 100% !important;
    height: 145px !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
}

.page-catalogo-publico .producto-opciones-preview {
    flex: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.page-catalogo-publico .producto-opcion-grupo {
    display: grid !important;
    gap: 7px !important;
}

.page-catalogo-publico .producto-opcion-grupo-titulo {
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
}

.page-catalogo-publico .producto-opcion-linea {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
}

.page-catalogo-publico .producto-opcion-linea span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
    font-size: 13px !important;
}

.page-catalogo-publico .producto-opcion-linea strong {
    white-space: nowrap !important;
    font-size: 13px !important;
    text-align: right !important;
}

.page-catalogo-publico .producto-agregar {
    margin-top: 14px !important;
    width: 100% !important;
}

/* Cuando hay muchos iconos de dispositivo, que no rompan la línea feo */
.page-catalogo-publico .producto-opcion-linea span {
    display: block !important;
}

/* MÓVIL */
@media (max-width: 600px) {
    .page-catalogo-publico .producto-card {
        min-height: 360px !important;
        padding: 12px !important;
    }

    .page-catalogo-publico .producto-imagen {
        height: 105px !important;
    }

    .page-catalogo-publico .producto-opcion-linea {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .page-catalogo-publico .producto-opcion-linea strong {
        text-align: left !important;
        font-size: 14px !important;
    }
}
/* CATÁLOGO - TARJETAS COMPACTAS PROFESIONALES */

.page-catalogo-publico .producto-card {
    min-height: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 16px !important;
}

.page-catalogo-publico .producto-imagen {
    height: 115px !important;
    margin-bottom: 10px !important;
}

.page-catalogo-publico .producto-opciones-preview {
    flex: 0 0 auto !important;
    margin: 8px 0 12px !important;
}

.page-catalogo-publico .producto-agregar {
    margin-top: auto !important;
}

.page-catalogo-publico .productos-grid {
    align-items: start !important;
}

/* Que las opciones no hagan la tarjeta enorme */
.page-catalogo-publico .producto-opcion-grupo {
    margin-bottom: 8px !important;
}

.page-catalogo-publico .producto-opcion-linea {
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
}

.page-catalogo-publico .producto-opcion-grupo-titulo {
    padding: 5px 8px !important;
    font-size: 11px !important;
}

/* Botón más integrado */
.page-catalogo-publico .producto-agregar {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
}
/* ===== TARJETAS CATÁLOGO ESTÁNDAR ===== */

.page-catalogo-publico .productos-grid{
    align-items:stretch !important;
}

.page-catalogo-publico .producto-card{
    display:flex !important;
    flex-direction:column !important;
    height:470px !important;
    padding:16px !important;
    overflow:hidden !important;
}

.page-catalogo-publico .producto-imagen{
    height:115px !important;
    object-fit:contain !important;
    margin-bottom:10px !important;
}

.page-catalogo-publico .producto-opciones-preview{
    flex:1 !important;
    overflow:hidden !important;
}

.page-catalogo-publico .producto-opcion-grupo{
    margin-bottom:8px !important;
}

.page-catalogo-publico .producto-opcion-linea{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:4px 6px !important;
    font-size:12px !important;
}

.page-catalogo-publico .producto-agregar{
    margin-top:auto !important;
}
/* FIX VER TODAS LAS OPCIONES - CATALOGO */

.page-catalogo-publico .producto-card {
    height: auto !important;
    min-height: 430px !important;
    overflow: visible !important;
}

.page-catalogo-publico .producto-opciones-preview {
    max-height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
}

.page-catalogo-publico .producto-opciones-preview.expandido {
    max-height: none !important;
    overflow: visible !important;
}

.page-catalogo-publico .btn-ver-opciones {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 12px !important;
    position: relative !important;
    z-index: 20 !important;
}
/* FIX FINAL - OPCIONES EXPANDIBLES CATÁLOGO */

.page-catalogo-publico .producto-card {
    height: auto !important;
    min-height: 430px !important;
    overflow: visible !important;
    justify-content: flex-start !important;
}

.page-catalogo-publico .producto-opciones-preview {
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 14px !important;
}

.page-catalogo-publico .producto-agregar {
    margin-top: 14px !important;
    position: static !important;
}




/* CATALOGO - OPCIONES EN AREA FIJA PROFESIONAL */

.page-catalogo-publico .producto-card {
    height: 470px !important;
    min-height: 470px !important;
    max-height: 470px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.page-catalogo-publico .producto-imagen {
    height: 110px !important;
    flex: 0 0 auto !important;
}

.page-catalogo-publico .producto-opciones-preview {
    height: 245px !important;
    max-height: 245px !important;
    overflow: hidden !important;
    position: relative !important;
    padding-right: 2px !important;
    margin: 8px 0 10px !important;
}



/* Abierto: mismo espacio, pero con scroll interno */
.page-catalogo-publico .producto-opciones-preview.expandido {
    overflow-y: auto !important;
}


/* botón siempre visible dentro del área de opciones */
.page-catalogo-publico .btn-ver-opciones {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
    margin-top: 8px !important;
}

/* botón agregar siempre abajo */
.page-catalogo-publico .producto-agregar {
    margin-top: auto !important;
    flex: 0 0 auto !important;
}
/* ===== COLORES POR PLATAFORMA - TARJETAS YOUTUBE COMPLETO ===== */

.page-youtube .plat-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 0 18px rgba(255,255,255,0.08);
}

/* Netflix */
.page-youtube .platform-tag-netflix,
.page-youtube .platform-tag-netflix-extra {
    background: linear-gradient(135deg, #e50914, #7a0007);
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.42);
}

/* YouTube */
.page-youtube .platform-tag-youtube {
    background: linear-gradient(135deg, #ff0033, #990000);
    box-shadow: 0 0 20px rgba(255, 0, 51, 0.42);
}

/* Disney */
.page-youtube .platform-tag-disney,
.page-youtube .platform-tag-disneyplus {
    background: linear-gradient(135deg, #113ccf, #071733);
    box-shadow: 0 0 20px rgba(17, 60, 207, 0.45);
}

/* Max */
.page-youtube .platform-tag-max {
    background: linear-gradient(135deg, #6f4cff, #21105c);
    box-shadow: 0 0 20px rgba(111, 76, 255, 0.42);
}

/* Prime Video */
.page-youtube .platform-tag-prime-video {
    background: linear-gradient(135deg, #00a8e1, #003f5c);
    box-shadow: 0 0 20px rgba(0, 168, 225, 0.42);
}

/* Spotify */
.page-youtube .platform-tag-spotify {
    background: linear-gradient(135deg, #1db954, #063d1b);
    box-shadow: 0 0 20px rgba(29, 185, 84, 0.42);
}

/* Canva */
.page-youtube .platform-tag-canva {
    background: linear-gradient(135deg, #00c4cc, #7d2ae8);
    box-shadow: 0 0 20px rgba(0, 196, 204, 0.42);
}

/* Paramount */
.page-youtube .platform-tag-paramount {
    background: linear-gradient(135deg, #0057ff, #001d5c);
    box-shadow: 0 0 20px rgba(0, 87, 255, 0.42);
}

/* Crunchyroll */
.page-youtube .platform-tag-crunchyroll {
    background: linear-gradient(135deg, #f47521, #743100);
    box-shadow: 0 0 20px rgba(244, 117, 33, 0.42);
}

/* Apple TV */
.page-youtube .platform-tag-apple-tv {
    background: linear-gradient(135deg, #f5f5f7, #4d4d55);
    color: #111;
    box-shadow: 0 0 20px rgba(245, 245, 247, 0.32);
}

/* IPTV */
.page-youtube .platform-tag-iptv {
    background: linear-gradient(135deg, #00ffaa, #005f4f);
    color: #02110d;
    box-shadow: 0 0 20px rgba(0, 255, 170, 0.42);
}

/* VIX */
.page-youtube .platform-tag-vix {
    background: linear-gradient(135deg, #ff7a00, #6d2400);
    box-shadow: 0 0 20px rgba(255, 122, 0, 0.42);
}

/* Universal */
.page-youtube .platform-tag-universal,
.page-youtube .platform-tag-universalplus {
    background: linear-gradient(135deg, #f5c542, #12295c);
    color: #08101f;
    box-shadow: 0 0 20px rgba(245, 197, 66, 0.42);
}

/* Plex */
.page-youtube .platform-tag-plex {
    background: linear-gradient(135deg, #e5a00d, #2e2100);
    box-shadow: 0 0 20px rgba(229, 160, 13, 0.42);
}

/* Fox One */
.page-youtube .platform-tag-fox-one {
    background: linear-gradient(135deg, #ff6a00, #111827);
    box-shadow: 0 0 20px rgba(255, 106, 0, 0.42);
}

/* Fallback */
.page-youtube .plat-tag:not([class*="platform-tag-"]) {
    background: linear-gradient(135deg, #2d3436, #111827);
}
/* ===== FORZAR COLORES REALES POR PLATAFORMA ===== */

.page-youtube .plat-tag {
    color: #fff !important;
    background: #222 !important;
}

.page-youtube .platform-tag-netflix,
.page-youtube .platform-tag-netflix-extra {
    background: #e50914 !important;
    color: #fff !important;
}

.page-youtube .platform-tag-youtube {
    background: #ff0000 !important;
    color: #fff !important;
}

.page-youtube .platform-tag-disney,
.page-youtube .platform-tag-disneyplus {
    background: #113ccf !important;
    color: #dff4ff !important;
}

.page-youtube .platform-tag-max {
    background: #5f35ff !important;
    color: #fff !important;
}

.page-youtube .platform-tag-prime-video {
    background: #00a8e1 !important;
    color: #001522 !important;
}

.page-youtube .platform-tag-spotify {
    background: #1db954 !important;
    color: #03160a !important;
}

.page-youtube .platform-tag-canva {
    background: #00c4cc !important;
    color: #061316 !important;
}

.page-youtube .platform-tag-paramount {
    background: #0057ff !important;
    color: #fff !important;
}

.page-youtube .platform-tag-crunchyroll {
    background: #f47521 !important;
    color: #1b0900 !important;
}

.page-youtube .platform-tag-apple-tv {
    background: #f5f5f7 !important;
    color: #111 !important;
}

.page-youtube .platform-tag-iptv {
    background: #00ffaa !important;
    color: #02110d !important;
}

.page-youtube .platform-tag-vix {
    background: #ff7a00 !important;
    color: #1c0800 !important;
}

.page-youtube .platform-tag-universal,
.page-youtube .platform-tag-universalplus {
    background: #f5c542 !important;
    color: #08101f !important;
}

.page-youtube .platform-tag-plex {
    background: #e5a00d !important;
    color: #140c00 !important;
}

.page-youtube .platform-tag-fox-one {
    background: #ff6a00 !important;
    color: #111827 !important;
}
/* ===== REPORTE DE RECIBOS PDF ===== */

.page-reporte-comisiones .report-results-wrapper {
    background: linear-gradient(145deg, #101722, #0b111b);
    border: 1px solid rgba(0, 255, 204, 0.18);
    border-radius: 18px;
    padding: 22px;
    margin: 24px 0;
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.08);
}

.page-reporte-comisiones .report-results-wrapper h3 {
    color: #00ffcc;
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.page-reporte-comisiones .report-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 14px;
}

.page-reporte-comisiones .report-table thead {
    background: #1e293b;
}

.page-reporte-comisiones .report-table th {
    color: #ffffff;
    padding: 13px 12px;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.page-reporte-comisiones .report-table td {
    padding: 13px 12px;
    color: #dbeafe;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.9rem;
}

.page-reporte-comisiones .report-table tbody tr:hover {
    background: rgba(0, 255, 204, 0.07);
}

.page-reporte-comisiones .button-primary,
.page-reporte-comisiones .button-secondary {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.82rem;
    transition: 0.2s ease;
}

.page-reporte-comisiones .button-primary {
    background: #00ffcc;
    color: #07111f;
}

.page-reporte-comisiones .button-secondary {
    background: #25d366;
    color: #07111f;
}

.page-reporte-comisiones .button-primary:hover,
.page-reporte-comisiones .button-secondary:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.page-reporte-comisiones .no-results {
    color: #94a3b8;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.16);
    padding: 18px;
    border-radius: 14px;
    text-align: center;
}

.page-reporte-comisiones .filter-section-wrapper {
    background: #101722;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 24px;
}

.page-reporte-comisiones .report-filter-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: end;
}

.page-reporte-comisiones .report-filter-form label {
    color: #94a3b8;
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 700;
}

.page-reporte-comisiones .report-filter-form select,
.page-reporte-comisiones .report-filter-form input {
    width: 100%;
    background: #0b111b;
    color: #ffffff;
    border: 1px solid rgba(0,255,204,0.25);
    border-radius: 10px;
    padding: 10px;
}

.page-reporte-comisiones .button-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .page-reporte-comisiones .report-filter-form {
        grid-template-columns: 1fr;
    }

    .page-reporte-comisiones .report-table thead {
        display: none;
    }

    .page-reporte-comisiones .report-table,
    .page-reporte-comisiones .report-table tbody,
    .page-reporte-comisiones .report-table tr,
    .page-reporte-comisiones .report-table td {
        display: block;
        width: 100%;
    }

    .page-reporte-comisiones .report-table tr {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 14px;
        margin-bottom: 14px;
        padding: 10px;
    }

    .page-reporte-comisiones .report-table td {
        border: none;
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .page-reporte-comisiones .report-table td::before {
        content: attr(data-label);
        color: #00ffcc;
        font-weight: 700;
    }
}
/* ===== HISTORIAL DE RECIBOS PDF ===== */

.recibos-principal-wrapper {
    background: linear-gradient(145deg, #101722, #070d16);
    border: 1px solid rgba(0,255,204,.22);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 0 28px rgba(0,255,204,.08);
}

.recibos-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.recibo-stat-card {
    background: #0b111b;
    border: 1px solid rgba(0,255,204,.2);
    border-radius: 16px;
    padding: 18px;
}

.recibo-stat-card span {
    display: block;
    color: #94a3b8;
    font-size: .82rem;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.recibo-stat-card strong {
    color: #00ffcc;
    font-size: 1.8rem;
}

.recibos-table td strong {
    color: #ffffff;
}

.recibos-table .button-primary,
.recibos-table .button-secondary {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: .82rem;
}

.recibos-table .button-primary {
    background: #00ffcc;
    color: #07111f;
}

.recibos-table .button-secondary {
    background: #25d366;
    color: #07111f;
}
.codigo-acciones{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:15px;
}

.codigo-acciones button[type="submit"]{
    flex:1;
}

.btn-recargar-codigo{
    width:48px;
    height:48px;
    border-radius:12px;
    border:1px solid rgba(0,255,255,.25);
    background:rgba(0,20,30,.8);
    color:#00e5ff;
    font-size:24px;
    cursor:pointer;
    transition:.25s;
}

.btn-recargar-codigo:hover{
    transform:rotate(180deg);
    box-shadow:0 0 15px rgba(0,255,255,.45);
}
/*=========================================
=            IPTV - DETALLES              =
=========================================*/

.btn-detalles-iptv{
    width:100%;
    margin-top:10px;
    padding:10px 14px;

    background:linear-gradient(135deg,#0d2f45,#134e6f);
    border:1px solid rgba(80,200,255,.35);

    color:#dff8ff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

    border-radius:10px;
    cursor:pointer;

    transition:.25s;
}

.btn-detalles-iptv:hover{
    background:linear-gradient(135deg,#13557a,#1b6b97);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(0,150,255,.25);
}

.btn-detalles-iptv:active{
    transform:scale(.98);
}

/* Caja de observaciones */

.iptv-observaciones-box{
    display:none;

    margin-top:10px;
    padding:14px;

    background:rgba(8,18,30,.92);
    border:1px solid rgba(0,180,255,.25);
    border-left:4px solid #28b6ff;

    border-radius:10px;

    color:#eef9ff;
    font-size:13px;
    line-height:1.6;

    text-align:left;

    animation:fadeDetalle .25s ease;
}

.iptv-observaciones-box.activo{
    display:block;
}

@keyframes fadeDetalle{
    from{
        opacity:0;
        transform:translateY(-5px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*=========================================
=     Gestionar Opciones (IPTV)           =
=========================================*/

.catalogo-options-form textarea,
.page-gestionar-opciones textarea{
    width:100%;
    min-height:90px;

    margin-top:10px;
    padding:12px;

    background:#101820;
    color:#ffffff;

    border:1px solid rgba(0,180,255,.25);
    border-radius:8px;

    resize:vertical;

    font-size:13px;
    font-family:inherit;
    box-sizing:border-box;
}

.catalogo-options-form textarea:focus,
.page-gestionar-opciones textarea:focus{
    outline:none;
    border-color:#33c7ff;
    box-shadow:0 0 10px rgba(51,199,255,.25);
}

/* Columna observaciones */

td[data-label="Observaciones IPTV"] textarea{
    min-width:220px;
    min-height:70px;
}
/*=========================================
=     OBSERVACIÓN GENERAL IPTV            =
=========================================*/

.iptv-observacion-general-admin{
    margin:25px 0;
    padding:20px;

    background:linear-gradient(145deg,#101722,#182534);
    border:1px solid rgba(0,170,255,.25);
    border-left:5px solid #1db8ff;

    border-radius:14px;

    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.iptv-observacion-general-admin h3{
    margin:0 0 15px 0;
    color:#7fdcff;
    font-size:20px;
    font-weight:700;
    letter-spacing:1px;
}

.iptv-observacion-general-admin textarea{
    width:100%;
    min-height:140px;

    padding:14px;
    box-sizing:border-box;

    background:#0f1720;
    color:#ffffff;

    border:1px solid rgba(0,180,255,.25);
    border-radius:10px;

    resize:vertical;

    font-size:14px;
    line-height:1.6;
    font-family:inherit;

    transition:.25s;
}

.iptv-observacion-general-admin textarea:focus{
    outline:none;
    border-color:#35c8ff;
    box-shadow:0 0 12px rgba(53,200,255,.25);
}

.iptv-observacion-general-admin button{
    margin-top:15px;

    padding:11px 22px;

    background:linear-gradient(135deg,#0d88d7,#16b3ff);
    color:#fff;

    border:none;
    border-radius:10px;

    font-size:14px;
    font-weight:700;
    letter-spacing:1px;

    cursor:pointer;

    transition:.25s;
}

.iptv-observacion-general-admin button:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,150,255,.30);
}

.iptv-observacion-general-admin button:active{
    transform:scale(.98);
}
.btn-detalles-iptv{
    width:100%;
    margin-top:10px;
    padding:10px;
    border-radius:10px;
    border:1px solid rgba(0,180,255,.35);
    background:rgba(0,180,255,.08);
    color:#7fdcff;
    font-weight:700;
    cursor:pointer;
}

.btn-detalles-iptv:hover{
    background:rgba(0,180,255,.18);
}

.iptv-observaciones-box{
    display:none;
    margin-top:10px;
    padding:12px;
    background:rgba(10,20,30,.92);
    border-left:4px solid #25b8ff;
    border-radius:10px;
    color:#eefcff;
    line-height:1.6;
    text-align:left;
}

.iptv-observaciones-box.activo{
    display:block;
}
.btn-detalles-catalogo {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 180, 255, .35);
    background: rgba(0, 180, 255, .10);
    color: #7fdcff;
    font-weight: 800;
    cursor: pointer;
}

.btn-detalles-catalogo:hover {
    background: rgba(0, 180, 255, .20);
}

.detalle-catalogo-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.detalle-catalogo-modal.activo {
    display: flex;
}

.detalle-catalogo-burbuja {
    position: relative;
    width: min(520px, 95%);
    max-height: 75vh;
    overflow-y: auto;

    padding: 26px 24px;
    border-radius: 18px;

    background: #101820;
    border: 1px solid rgba(0, 180, 255, .35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);

    color: #fff;
}
.detalle-catalogo-burbuja::-webkit-scrollbar {
    width: 8px;
}

.detalle-catalogo-burbuja::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 255, .45);
    border-radius: 10px;
}

.detalle-catalogo-burbuja::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06);
}
/* =========================================
   CATÁLOGO - GRID MEJORADO
========================================= */

.page-catalogo-publico .catalogo-container {
    display: block;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

.page-catalogo-publico .productos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* =========================================
   CARRITO FLOTANTE
========================================= */

.page-catalogo-publico .carrito-lateral {
    position: fixed;
    top: 0;
    right: -420px;
    width: 390px;
    max-width: 92vw;
    height: 100vh;
    z-index: 99998;

    overflow-y: auto;
    padding: 20px;

    background: rgba(10, 16, 26, 0.97);
    border-left: 1px solid rgba(0, 180, 255, 0.35);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.55);

    transition: right 0.28s ease;
}

.page-catalogo-publico .carrito-lateral.carrito-abierto {
    right: 0;
}

.page-catalogo-publico .carrito-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99997;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.page-catalogo-publico .carrito-overlay.activo {
    display: block;
}

/* Botón carrito */

.page-catalogo-publico .carrito-toggle {
    position: relative;
    cursor: pointer;
    border: none;
}

.page-catalogo-publico .carrito-toggle::after {
    content: attr(data-count);
    position: absolute;
    top: -10px;
    right: -10px;

    min-width: 22px;
    height: 22px;
    padding: 0 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ff2d55;
    color: #fff;

    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

/* =========================================
   CELULAR - 3 PRODUCTOS POR FILA
========================================= */

@media (max-width: 768px) {
    .page-catalogo-publico .catalogo-container {
        padding: 12px 8px;
    }

    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .page-catalogo-publico .producto-card {
        padding: 8px;
        border-radius: 12px;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 78px;
        object-fit: contain;
    }

    .page-catalogo-publico .producto-opciones-preview {
        font-size: 10px;
    }

    .page-catalogo-publico .producto-opcion-grupo-titulo {
        font-size: 10px;
    }

    .page-catalogo-publico .producto-opcion-linea {
        font-size: 10px;
        gap: 4px;
    }

    .page-catalogo-publico .producto-agregar,
    .page-catalogo-publico .btn-detalles-catalogo,
    .page-catalogo-publico .btn-ver-opciones {
        font-size: 10px;
        padding: 8px 5px;
        border-radius: 8px;
    }

    .page-catalogo-publico .carrito-lateral {
        width: 86vw;
        right: -90vw;
    }

    .page-catalogo-publico .carrito-lateral.carrito-abierto {
        right: 0;
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 420px) {
    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 68px;
    }
}
.page-catalogo-publico .catalogo-container {
    display: block !important;
    max-width: 1600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 18px !important;
}

.page-catalogo-publico .productos-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.page-catalogo-publico .carrito-lateral {
    position: fixed !important;
    top: 0 !important;
    right: -430px !important;
    width: 390px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    z-index: 99998 !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    background: rgba(10, 16, 26, .98) !important;
    border-left: 1px solid rgba(0, 180, 255, .35) !important;
    box-shadow: -16px 0 45px rgba(0,0,0,.55) !important;
    transition: right .25s ease !important;
}

.page-catalogo-publico .carrito-lateral.carrito-abierto {
    right: 0 !important;
}

.page-catalogo-publico .carrito-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99997 !important;
    background: rgba(0,0,0,.42) !important;
    backdrop-filter: blur(2px) !important;
}

.page-catalogo-publico .carrito-overlay.activo {
    display: block !important;
}

.page-catalogo-publico .btn-ver-opciones,
.page-catalogo-publico .btn-detalles-catalogo {
    width: auto !important;
    margin: 6px auto 0 !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
    opacity: .82 !important;
}

@media (max-width: 768px) {
    .page-catalogo-publico .catalogo-container {
        padding: 10px 6px !important;
    }

    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .page-catalogo-publico .producto-card {
        padding: 7px !important;
        border-radius: 12px !important;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 66px !important;
        object-fit: contain !important;
    }

    .page-catalogo-publico .producto-opciones-preview,
    .page-catalogo-publico .producto-opcion-linea,
    .page-catalogo-publico .producto-opcion-grupo-titulo {
        font-size: 9.5px !important;
    }

    .page-catalogo-publico .producto-agregar {
        font-size: 10px !important;
        padding: 7px 4px !important;
    }

    .page-catalogo-publico .carrito-lateral {
        width: 86vw !important;
        right: -90vw !important;
    }

    .page-catalogo-publico .carrito-lateral.carrito-abierto {
        right: 0 !important;
    }
}
/* Todas las opciones siempre visibles */

.page-catalogo-publico .preview-extra{
    display:flex !important;
}

.page-catalogo-publico .producto-opciones-preview{
    height:auto !important;
    overflow:visible !important;
}

.page-catalogo-publico .producto-opcion-grupo{
    margin-bottom:8px;
}
/* =========================================
   OPCIONES SIEMPRE VISIBLES CON SCROLL
========================================= */

.page-catalogo-publico .producto-opciones-preview {
    max-height: 240px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 5px !important;
}

.page-catalogo-publico .preview-extra {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Scroll bonito dentro de las opciones */
.page-catalogo-publico .producto-opciones-preview::-webkit-scrollbar {
    width: 6px;
}

.page-catalogo-publico .producto-opciones-preview::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 255, .45);
    border-radius: 10px;
}

.page-catalogo-publico .producto-opciones-preview::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06);
}

/* =========================================
   BOTÓN DETALLES COMO AGREGAR
========================================= */

.page-catalogo-publico .btn-detalles-catalogo {
    width: 100% !important;
    display: block !important;
    margin-top: 10px !important;
    padding: 11px 14px !important;

    border-radius: 12px !important;
    border: 1px solid rgba(0, 180, 255, .35) !important;

    background: linear-gradient(135deg, rgba(0, 120, 190, .85), rgba(0, 180, 255, .75)) !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.page-catalogo-publico .btn-detalles-catalogo:hover {
    background: linear-gradient(135deg, rgba(0, 160, 230, .95), rgba(0, 210, 255, .85)) !important;
    transform: translateY(-1px);
}
.page-catalogo-publico .btn-detalles-catalogo{
    width:100% !important;
    display:block !important;

    margin-top:10px !important;
    padding:11px 14px !important;

    border-radius:12px !important;

    border:1px solid rgba(120,220,255,.35) !important;

    background:
        linear-gradient(
            145deg,
            #162231 0%,
            #20354a 40%,
            #162231 100%
        ) !important;

    color:#dff8ff !important;

    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:1px !important;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 4px 14px rgba(0,120,255,.15);

    transition:all .25s ease;
}

.page-catalogo-publico .btn-detalles-catalogo:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            145deg,
            #1d3045 0%,
            #2a4d69 40%,
            #1d3045 100%
        ) !important;

    border-color:rgba(120,220,255,.65) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 22px rgba(0,180,255,.28);
}

.page-catalogo-publico .btn-detalles-catalogo:active{
    transform:scale(.98);
}
.contador-codigo{
    width:180px;
    margin:0 auto 22px;

    padding:18px 20px;

    border-radius:18px;

    background:linear-gradient(
        180deg,
        rgba(5,35,55,.92),
        rgba(8,22,35,.98)
    );

    border:1px solid rgba(0,180,255,.35);

    color:#79ebff;

    font-size:52px;
    font-weight:900;
    letter-spacing:2px;

    text-align:center;

    box-shadow:
        0 0 30px rgba(0,180,255,.15),
        inset 0 0 25px rgba(0,180,255,.05);
}

.contador-codigo.vencido {
    background: rgba(255, 45, 85, .12);
    border-color: rgba(255, 45, 85, .45);
    color: #ff6b87;
}

.cliente-btn.codigo.bloqueado,
.cliente-btn.codigo:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(1);
}
.codigo-centro-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    margin-top:25px;
}

.texto-tiempo{
    text-align:center;
    margin-top:20px;
    margin-bottom:18px;

    color:#9eb2c6;
    font-size:20px;
}

.btn-buscar-codigo{

    width:260px !important;

    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin:0 auto !important;

    padding:16px 20px !important;

    border-radius:18px !important;

    background:linear-gradient(
        135deg,
        #1574ff,
        #1fd5ff
    ) !important;

    border:none !important;

    color:#fff !important;

    font-size:24px !important;
    font-weight:900 !important;

    box-shadow:
        0 10px 25px rgba(0,180,255,.30);

    transition:.25s;
}

.btn-buscar-codigo:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(0,180,255,.45);
}

.btn-buscar-codigo i{
    font-size:22px;
}
/* ======================================
   PANTALLA CÓDIGO TEMPORAL
====================================== */

.page-admin-codigos .cliente-login-card{
    text-align:center;
}

.page-admin-codigos .cliente-login-card h1{
    width:100%;
    display:block;

    margin:25px auto 15px auto !important;

    text-align:center !important;

    font-size:72px;      /* ajusta si lo quieres más grande */
    line-height:1;

    letter-spacing:2px;
}

.page-admin-codigos .texto-tiempo{
    width:100%;
    text-align:center !important;
}

.page-admin-codigos .codigo-centro-panel{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
@media (max-width: 900px) {
    #cuentasTable td[data-label="Correo"],
    #cuentasTable td[data-label="Contraseña"],
    #cuentasTable td[data-label="Perfil"],
    #cuentasTable td[data-label="PIN"],
    #cuentasTable td[data-label="Pin"],
    #cuentasMaestrasTable td[data-label="Correo"],
    #cuentasMaestrasTable td[data-label="Contraseña"] {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        align-items: stretch !important;
        text-align: left !important;
    }

    #cuentasTable td[data-label="Correo"]::before,
    #cuentasTable td[data-label="Contraseña"]::before,
    #cuentasTable td[data-label="Perfil"]::before,
    #cuentasTable td[data-label="PIN"]::before,
    #cuentasTable td[data-label="Pin"]::before,
    #cuentasMaestrasTable td[data-label="Correo"]::before,
    #cuentasMaestrasTable td[data-label="Contraseña"]::before {
        width: 100% !important;
        display: block !important;
    }

    .copy-container {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        gap: 8px !important;
        justify-self: stretch !important;
    }

    .copy-text {
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: initial !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: left !important;
    }

    .copy-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
    }

    .page-agregar-cuentas .password-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .page-agregar-cuentas .password-container input {
        padding-right: 15px !important;
        min-width: 0 !important;
    }

    .page-agregar-cuentas .password-container .generate-btn {
        position: static !important;
        width: 48px !important;
        height: 50px !important;
        min-height: 50px !important;
    }
}
/* ===============================
   CÓDIGO DIRECTO
================================ */

.page-admin-codigos .cliente-login-badge{
    letter-spacing: 1px;
}

.page-admin-codigos .btn-buscar-codigo{
    min-width: 240px;
}

.page-admin-codigos .codigo-modal-numero,
.page-admin-codigos .codigo-numero{
    user-select: all;
    cursor: pointer;
}
.btn-generar-link{
    background: linear-gradient(135deg,#7c3aed,#2563eb);
    color:#fff;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 0 18px rgba(124,58,237,.35);
}

.btn-generar-link:hover{
    transform:translateY(-2px);
    box-shadow:0 0 25px rgba(37,99,235,.55);
}
/* BOTÓN CONSULTA CÓDIGO */

.code-link-btn{
    background:linear-gradient(135deg,#7c3aed,#2563eb) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 0 15px rgba(124,58,237,.35);
    transition:.25s;
}

.code-link-btn:hover{
    transform:translateY(-2px) scale(1.06);
    box-shadow:0 0 25px rgba(37,99,235,.65);
}
/* --- CORRECCIÓN FORZADA PARA MÓVIL --- */
@media (max-width: 760px) {
    
    /* 1. Fuerza a los contenedores padres a no colapsar el ancho */
    .action-options, 
    .action-options label, 
    .guarantee-section {
        display: block !important; /* Cambiamos de flex a block para evitar el apilado */
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }

    /* 2. Aseguramos que el radio button y el texto se vean bien */
    .action-options label {
        display: flex !important; /* Usamos flex solo aquí, pero con control */
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        padding: 15px !important;
        margin-bottom: 10px !important;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
    }

    /* 3. Evitamos que el input (check) se deforme */
    .action-options input[type="radio"] {
        flex: 0 0 auto !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
    }

    /* 4. Evitamos el efecto de letras verticales */
    .action-options span, 
    .action-options label {
        white-space: normal !important;
        word-break: keep-all !important; /* Importante: evita romper letras */
        overflow-wrap: break-word !important;
        display: inline-block !important;
    }
}

@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@500;600;700&family=Share+Tech+Mono&display=swap');

:root {
    --bg-main: #05070a;
    --bg-panel: #0b1118;
    --bg-card: #101923;
    --bg-soft: #162230;

    --green: #00ff88;
    --cyan: #00d9ff;
    --blue: #1b6dff;
    --yellow: #ffd166;
    --orange: #ff9f1c;
    --red: #ff304f;
    --purple: #a855f7;

    --text: #ecf8ff;
    --muted: #8ea3b5;
    --line: rgba(0, 217, 255, .22);
    --line-strong: rgba(0, 217, 255, .55);

    --radius: 14px;
    --shadow: 0 18px 50px rgba(0,0,0,.55);
    --font-title: 'Rajdhani', sans-serif;
    --font-mono: 'Share Tech Mono', monospace;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at top left, rgba(0,217,255,.16), transparent 28%),
        radial-gradient(circle at bottom right, rgba(0,255,136,.10), transparent 28%),
        linear-gradient(135deg, #020406, #08111a 45%, #020406);
    color: var(--text);
    font-family: var(--font-title);
    overflow-x: hidden;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    background-image:
        linear-gradient(rgba(0,217,255,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,217,255,.045) 1px, transparent 1px);
    background-size: 42px 42px;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: repeating-linear-gradient(
        to bottom,
        rgba(255,255,255,.025) 0,
        rgba(255,255,255,.025) 1px,
        transparent 1px,
        transparent 5px
    );
    opacity: .32;
    z-index: 9999;
}

/* ==================================================
   MENU ADMIN POLICIAL
================================================== */

.admin-grid-container {
    display: grid;
    grid-template-columns: 285px minmax(0, 1fr);
    min-height: 100vh;
}

.admin-menu {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    padding: 18px 14px;
    background:
        linear-gradient(180deg, rgba(5,10,16,.98), rgba(9,17,26,.98)),
        radial-gradient(circle at top, rgba(0,217,255,.14), transparent 35%);
    border-right: 1px solid var(--line);
    box-shadow: 12px 0 40px rgba(0,0,0,.45);
}

.logo-container {
    padding: 10px 10px 20px;
    margin-bottom: 14px;
    text-align: center;
    border-bottom: 1px solid var(--line);
}

.logo-container img,
.logo {
    max-width: 150px;
    max-height: 80px;
    filter: drop-shadow(0 0 16px rgba(0,217,255,.35));
}

.menu-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.menu-items a,
.menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 13px;
    border-radius: 11px;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.06);
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: .04em;
    transition: .2s;
}

.menu-items a:hover,
.menu-items a.active,
.menu-items a.active-parent,
.menu-toggle.active-parent {
    color: var(--green);
    border-color: rgba(0,255,136,.45);
    background: linear-gradient(90deg, rgba(0,255,136,.16), rgba(0,217,255,.08));
    box-shadow: inset 4px 0 0 var(--green), 0 0 18px rgba(0,255,136,.12);
    transform: translateX(3px);
}

.logout-link {
    margin-top: 12px;
    color: #ffd6dd !important;
    border-color: rgba(255,48,79,.35) !important;
    background: rgba(255,48,79,.10) !important;
}

.logout-link:hover {
    color: #fff !important;
    box-shadow: inset 4px 0 0 var(--red), 0 0 20px rgba(255,48,79,.22) !important;
}

.submenu {
    max-height: 0;
    overflow: hidden;
    list-style: none;
    padding: 0 0 0 16px;
    margin: 0;
    transition: max-height .35s ease, padding .25s ease;
}

.submenu.active {
    max-height: 1200px;
    padding: 7px 0 7px 16px;
}

.submenu li {
    list-style: none;
}

.submenu a {
    font-size: 12px;
    padding: 9px 11px;
}

/* ==================================================
   LAYOUT GENERAL
================================================== */

.admin-main-content {
    padding: 26px;
    min-width: 0;
}

.main-title {
    position: relative;
    margin: 0 0 22px;
    padding: 18px 22px 18px 54px;
    border-radius: var(--radius);
    background:
        linear-gradient(90deg, rgba(0,217,255,.15), rgba(0,255,136,.06)),
        rgba(8,16,25,.88);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    color: var(--green);
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 0 18px rgba(0,255,136,.35);
}

.main-title::before {
    content: "⌖";
    position: absolute;
    left: 19px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--cyan);
    font-size: 30px;
}

.alert {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: var(--radius);
    font-weight: 700;
    letter-spacing: .04em;
    border: 1px solid var(--line);
    background: rgba(8,16,25,.9);
    box-shadow: var(--shadow);
}

.alert-success {
    color: var(--green);
    border-color: rgba(0,255,136,.5);
}

.alert-error,
.alert-danger {
    color: var(--red);
    border-color: rgba(255,48,79,.55);
}

/* ==================================================
   INDEX
================================================== */

.top-bar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 16px 28px;
    background:
        linear-gradient(90deg, rgba(5,10,16,.96), rgba(10,20,31,.92)),
        radial-gradient(circle at left, rgba(0,217,255,.14), transparent 35%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 16px 45px rgba(0,0,0,.45);
    backdrop-filter: blur(12px);
}

.logo-and-title {
    display: flex;
    align-items: center;
    gap: 16px;
}

.logo-small {
    max-height: 64px;
    max-width: 150px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(0,217,255,.42));
}

.logo-and-title::after {
    content: "CENTRO DE ACCESO / JIMTV";
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(0,255,136,.35);
}

.admin-title {
    display: none;
}

.login-form-container {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 7px;
}

.login-form-inline {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(0,217,255,.20);
}

.login-input-top {
    width: 170px;
    height: 42px;
    padding: 0 13px;
    border-radius: 11px;
    border: 1px solid rgba(0,217,255,.24);
    outline: none;
    background: #050b11;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 13px;
    transition: .2s;
}

.login-input-top::placeholder {
    color: #6f879a;
}

.login-input-top:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12), 0 0 18px rgba(0,255,136,.16);
}

.login-button-top {
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 11px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), #00b86b);
    font-family: var(--font-title);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    box-shadow: 0 0 20px rgba(0,255,136,.23);
    transition: .2s;
}

.login-button-top:hover {
    transform: translateY(-2px);
    filter: brightness(1.1);
}

.error-message-top {
    margin: 0;
    padding: 8px 12px;
    color: var(--red);
    background: rgba(255,48,79,.12);
    border: 1px solid rgba(255,48,79,.42);
    border-radius: 10px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.container {
    width: min(1180px, 94%);
    margin: 0 auto;
}

.store-section-main {
    min-height: calc(100vh - 98px);
    display: grid;
    place-items: center;
    padding: 46px 0;
}

.store-content-main {
    position: relative;
    width: min(760px, 100%);
    padding: 42px 34px 38px;
    text-align: center;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.94), rgba(5,10,16,.97));
    border: 1px solid var(--line);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
}

.store-content-main::before {
    content: "OPERACIÓN COMERCIAL ACTIVA";
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--green);
    border: 1px solid rgba(0,255,136,.35);
    background: rgba(0,255,136,.08);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
}

.store-image-large {
    position: relative;
    z-index: 1;
    width: min(340px, 72vw);
    margin-top: 20px;
    filter:
        drop-shadow(0 0 28px rgba(0,217,255,.38))
        drop-shadow(0 18px 22px rgba(0,0,0,.5));
    animation: floatCart 3.6s ease-in-out infinite;
}

@keyframes floatCart {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.store-title-main {
    position: relative;
    z-index: 1;
    margin: 24px 0 22px;
    color: var(--cyan);
    font-size: clamp(38px, 7vw, 74px);
    font-weight: 700;
    line-height: .9;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-shadow:
        0 0 18px rgba(0,217,255,.45),
        0 0 38px rgba(0,217,255,.18);
}

.store-title-main::after {
    content: "Acceso público al catálogo de productos digitales";
    display: block;
    margin-top: 14px;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: clamp(12px, 2vw, 15px);
    letter-spacing: .07em;
    text-transform: none;
    text-shadow: none;
}

.store-button-main {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 210px;
    height: 56px;
    padding: 0 28px;
    border-radius: 14px;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    text-decoration: none;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(0,255,136,.27);
    transition: .22s;
}

.store-button-main::before {
    content: "▶";
    margin-right: 9px;
    font-size: 14px;
}

.store-button-main:hover {
    transform: translateY(-3px) scale(1.02);
    filter: brightness(1.08);
    box-shadow: 0 0 42px rgba(0,217,255,.38);
}

/* ==================================================
   LOGIN
================================================== */

body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-container.command-center,
.login-container {
    position: relative;
    width: min(500px,92vw);
    background:
        linear-gradient(180deg, rgba(16,30,43,.97), rgba(5,10,16,.97));
    border: 1px solid rgba(0,217,255,.25);
    border-radius: 25px;
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow);
    overflow: hidden;
}

.login-container.command-center::before,
.login-container::before {
    content: "CENTRO DE CONTROL";
    position: absolute;
    top: 15px;
    left: 15px;
    font-family: var(--font-mono);
    color: var(--green);
    font-size: 11px;
    letter-spacing: .15em;
}

.login-title {
    color: var(--cyan);
    font-size: 38px;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 15px rgba(0,217,255,.35);
}

.system-status {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 25px;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: .15em;
}

.status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 15px var(--green);
    animation: pulse 1.2s infinite;
}

@keyframes pulse {
    50% { transform: scale(1.4); }
}

.form-group {
    text-align: left;
    margin-bottom: 18px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
}

.form-group input {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.20);
    background: #040a10;
    color: white;
    font-family: var(--font-mono);
    font-size: 14px;
    transition: .25s;
}

.form-group input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow:
        0 0 0 3px rgba(0,255,136,.12),
        0 0 20px rgba(0,255,136,.15);
}

.login-btn {
    width: 100%;
    height: 58px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    color: #00140b;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    transition: .25s;
}

.login-btn:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 0 35px rgba(0,255,136,.30);
}

/* ==================================================
   GESTION CUENTAS
================================================== */

.bulk-actions {
    position: sticky;
    top: 14px;
    z-index: 50;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
    margin-bottom: 14px !important;
    padding: 14px;
    border-radius: var(--radius);
    background: rgba(5,10,16,.92);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
    backdrop-filter: blur(12px);
}

.bulk-action-btn,
.clear-filters-btn {
    border: none !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    cursor: pointer !important;
    color: #00140b !important;
    font-family: var(--font-title);
    font-weight: 700 !important;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: .2s;
}

#make-available-selected-btn {
    background: linear-gradient(135deg, var(--green), #00b86b) !important;
}

#delete-selected-btn {
    background: linear-gradient(135deg, var(--red), #9d1026) !important;
    color: white !important;
}

.global-search-mobile {
    width: 100%;
    margin-bottom: 16px;
    padding: 16px 18px 16px 48px;
    border-radius: 14px;
    border: 1px solid var(--line-strong);
    outline: none;
    background:
        linear-gradient(90deg, rgba(0,217,255,.08), rgba(0,255,136,.04)),
        #060c12;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 15px;
    box-shadow: 0 0 26px rgba(0,217,255,.12);
}

.table-container {
    width: 100%;
    overflow-x: auto;
    border-radius: 18px;
    background: rgba(5,10,16,.86);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

#cuentasTable,
#cuentasMaestrasTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 14px;
}

#cuentasTable {
    min-width: 1850px;
}

#cuentasMaestrasTable {
    min-width: 1560px;
}

#cuentasTable thead,
#cuentasMaestrasTable thead {
    background: linear-gradient(180deg, #0e1d2b, #08111a);
}

#cuentasTable th,
#cuentasMaestrasTable th {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 13px 10px;
    color: var(--cyan);
    border-bottom: 1px solid var(--line-strong);
    border-right: 1px solid rgba(255,255,255,.045);
    font-size: 12px;
    text-align: center;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: .06em;
}

#cuentasTable td,
#cuentasMaestrasTable td {
    padding: 12px 10px;
    border-bottom: 1px solid rgba(255,255,255,.07);
    border-right: 1px solid rgba(255,255,255,.035);
    color: var(--text);
    vertical-align: middle;
    background: rgba(10,18,27,.56);
}

#cuentasTable tbody tr:nth-child(even) td,
#cuentasMaestrasTable tbody tr:nth-child(even) td {
    background: rgba(13,25,36,.68);
}

#cuentasTable tbody tr:hover td,
#cuentasMaestrasTable tbody tr:hover td {
    background: rgba(0,217,255,.09);
}

.filter-input {
    width: 100%;
    margin-top: 7px;
    padding: 8px 9px;
    border-radius: 9px;
    border: 1px solid rgba(0,217,255,.24);
    background: #050a10;
    color: var(--text);
    outline: none;
    font-family: var(--font-mono);
    font-size: 11px;
}

.filter-input:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 2px rgba(0,255,136,.15);
}

.copy-container {
    display: inline-flex;
    align-items: center;
    max-width: 260px;
    gap: 8px;
    padding: 7px 8px;
    border-radius: 12px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(0,217,255,.18);
    cursor: pointer;
}

.copy-text {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--cyan);
    font-family: var(--font-mono);
}

.copy-button {
    width: 31px;
    height: 31px;
    border: 1px solid rgba(0,255,136,.28);
    border-radius: 9px;
    background: rgba(0,217,255,.12);
    color: var(--green);
    cursor: pointer;
    transition: .2s;
}

.copy-button:hover {
    transform: translateY(-2px);
}

.pagado,
.disponible,
.debe,
.vencida,
.le-quedan,
.vencido,
.pausada,
.normal,
.critico,
.advertencia,
.activo-texto,
.pausada-texto,
.days-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid currentColor;
}

.pagado,
.normal,
.activo-texto,
.days-ok {
    color: var(--green);
    background: rgba(0,255,136,.12);
}

.disponible {
    color: var(--cyan);
    background: rgba(0,217,255,.12);
}

.debe,
.advertencia,
.days-warning {
    color: var(--yellow);
    background: rgba(255,209,102,.12);
}

.vencida,
.vencido,
.critico,
.days-expired {
    color: var(--red);
    background: rgba(255,48,79,.14);
}

.pausada,
.pausada-texto {
    color: var(--purple);
    background: rgba(168,85,247,.15);
}

#cuentasTable td.acciones-celda,
#cuentasMaestrasTable td.acciones-celda {
    position: sticky;
    right: 0;
    z-index: 15;
    background: #07111a !important;
    border-left: 1px solid var(--line-strong);
    box-shadow: -12px 0 22px rgba(0,0,0,.28);
}

#cuentasTable td.acciones-celda {
    min-width: 305px;
}

#cuentasMaestrasTable td.acciones-celda {
    min-width: 245px;
}

.acciones-celda {
    display: grid;
    grid-template-columns: repeat(5, 42px);
    justify-content: center;
    gap: 8px;
}

.action-btn {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,.12);
    color: white !important;
    text-decoration: none;
    transition: .2s;
    box-shadow: 0 8px 18px rgba(0,0,0,.25);
    cursor: pointer;
}

.action-btn:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.12);
}

.edit-btn {
    background: linear-gradient(135deg, #ffd166, #ff9f1c) !important;
    color: #1b1000 !important;
}

.delete-btn {
    background: linear-gradient(135deg, #ff304f, #9d1026) !important;
}

.pause-btn {
    background: linear-gradient(135deg, #ffd166, #b7791f) !important;
    color: #1b1000 !important;
}

.resume-btn,
.renew-btn {
    background: linear-gradient(135deg, #00ff88, #00995a) !important;
    color: #00190e !important;
}

.link-btn,
.visible-icon {
    background: linear-gradient(135deg, #00d9ff, #1b6dff) !important;
}

.update-btn,
.move-btn {
    background: linear-gradient(135deg, #a855f7, #5b21b6) !important;
}

.whatsapp-btn {
    background: linear-gradient(135deg, #25d366, #075e54) !important;
}

.change-btn {
    background: linear-gradient(135deg, #ff9f1c, #c2410c) !important;
}

.code-link-btn {
    background: linear-gradient(135deg, #ffd166, #f59e0b) !important;
    color: #160d00 !important;
}

.hidden-icon {
    background: linear-gradient(135deg, var(--red), #9d1026) !important;
}

/* ==================================================
   GESTION MAESTRAS
================================================== */

.platform-group-header {
    position: sticky;
    left: 0;
    z-index: 10;
    padding: 13px 18px !important;
    background:
        linear-gradient(90deg, rgba(168,85,247,.36), rgba(0,217,255,.12)) !important;
    color: var(--green) !important;
    font-family: var(--font-mono);
    font-size: 14px !important;
    letter-spacing: .18em;
    text-align: left !important;
    text-transform: uppercase;
    border-top: 1px solid rgba(168,85,247,.6);
    border-bottom: 1px solid rgba(0,255,136,.35);
}

.platform-group-header::before {
    content: "NÚCLEO / ";
    color: var(--cyan);
}

tr.fila-oculta td {
    background: rgba(255,48,79,.16) !important;
    color: #ffd6dd !important;
}

.perfiles-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.36);
    font-family: var(--font-mono);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.filter-buttons {
    padding: 16px;
    display: flex;
    justify-content: flex-end;
}

.clear-filters-btn {
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: white !important;
}

/* ==================================================
   SWEETALERT
================================================== */

.swal2-popup {
    background: linear-gradient(180deg, #101923, #050a10) !important;
    color: var(--text) !important;
    border: 1px solid var(--line-strong) !important;
    border-radius: 18px !important;
    box-shadow: 0 0 40px rgba(0,217,255,.22) !important;
    font-family: var(--font-title) !important;
}

.swal2-title {
    color: var(--green) !important;
    letter-spacing: .05em;
}

.swal2-html-container {
    color: var(--muted) !important;
}

.swal2-confirm,
.swal2-cancel {
    border-radius: 10px !important;
    font-weight: 700 !important;
}

/* ==================================================
   RESPONSIVE
================================================== */

@media (max-width: 900px) {
    .admin-grid-container {
        grid-template-columns: 1fr;
    }

    .admin-menu {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--line);
    }

    .menu-items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .menu-items a,
    .menu-toggle {
        font-size: 12px;
        padding: 10px;
        justify-content: center;
        text-align: center;
    }

    .submenu {
        grid-column: 1 / -1;
        padding-left: 0;
    }

    .submenu.active {
        padding-left: 0;
    }

    .admin-main-content {
        padding: 14px;
    }

    .main-title {
        font-size: 28px;
        padding: 16px 16px 16px 48px;
    }

    .top-bar {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .logo-and-title {
        justify-content: center;
        flex-direction: column;
        gap: 8px;
    }

    .login-form-container {
        align-items: stretch;
    }

    .login-form-inline {
        display: grid;
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .login-input-top,
    .login-button-top {
        width: 100%;
    }

    .store-section-main {
        min-height: auto;
        padding: 28px 0;
    }

    .store-content-main {
        padding: 48px 20px 28px;
        border-radius: 22px;
    }

    .store-title-main {
        font-size: 42px;
    }

    .store-button-main {
        width: 100%;
    }

    .bulk-actions {
        position: relative;
        top: auto;
        display: grid !important;
        grid-template-columns: 1fr;
    }

    .bulk-action-btn {
        width: 100%;
    }

    .table-container {
        overflow: visible;
        border: none;
        background: transparent;
        box-shadow: none;
    }

    #cuentasTable,
    #cuentasMaestrasTable {
        min-width: 0;
    }

    #cuentasTable thead,
    #cuentasMaestrasTable thead {
        display: none;
    }

    #cuentasTable,
    #cuentasTable tbody,
    #cuentasTable tr,
    #cuentasTable td,
    #cuentasMaestrasTable,
    #cuentasMaestrasTable tbody,
    #cuentasMaestrasTable tr,
    #cuentasMaestrasTable td {
        display: block;
        width: 100%;
    }

    #cuentasTable tbody tr,
    #cuentasMaestrasTable tbody tr {
        margin-bottom: 18px;
        padding: 14px;
        border-radius: 18px;
        background:
            linear-gradient(180deg, rgba(16,25,35,.96), rgba(6,12,18,.96));
        border: 1px solid var(--line);
        box-shadow: var(--shadow);
        overflow: hidden !important;
    }

    #cuentasTable td,
    #cuentasMaestrasTable td {
        position: relative !important;
        right: auto !important;
        z-index: auto !important;
        display: grid;
        grid-template-columns: 125px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 10px 0;
        border-right: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        background: transparent !important;
        box-shadow: none !important;
        text-align: right;
    }

    #cuentasTable td::before,
    #cuentasMaestrasTable td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 12px;
        font-weight: 700;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    #cuentasMaestrasTable td:nth-child(1)::before { content: "Plataforma"; }
    #cuentasMaestrasTable td:nth-child(2)::before { content: "Correo"; }
    #cuentasMaestrasTable td:nth-child(3)::before { content: "Contraseña"; }
    #cuentasMaestrasTable td:nth-child(4)::before { content: "Perfiles"; }
    #cuentasMaestrasTable td:nth-child(5)::before { content: "Proveedor"; }
    #cuentasMaestrasTable td:nth-child(6)::before { content: "Compra"; }
    #cuentasMaestrasTable td:nth-child(7)::before { content: "Días"; }
    #cuentasMaestrasTable td:nth-child(8)::before { content: "Costo"; }
    #cuentasMaestrasTable td:nth-child(9)::before { content: "Vencimiento"; }
    #cuentasMaestrasTable td:nth-child(10)::before { content: "Restantes"; }
    #cuentasMaestrasTable td:nth-child(11)::before { content: "Observación"; }

    #cuentasTable td.acciones-celda,
    #cuentasMaestrasTable td.acciones-celda,
    .acciones-celda {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        gap: 9px !important;
        min-width: 0 !important;
        position: relative !important;
        right: auto !important;
        z-index: auto !important;
        padding-top: 14px !important;
    }

    .acciones-celda::before {
        content: "ACCIONES";
        grid-column: 1 / -1;
        color: var(--green);
        font-family: var(--font-mono);
        font-size: 12px;
        text-align: center;
        letter-spacing: .14em;
        margin-bottom: 3px;
    }

    .action-btn {
        width: 100% !important;
        height: 42px !important;
        border-radius: 12px !important;
    }

    .copy-container {
        max-width: 100%;
        justify-self: end;
    }

    .copy-text {
        max-width: 175px;
    }

    .platform-group-header {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    .platform-group-header::before {
        content: "";
    }

    .filter-buttons {
        padding: 0;
    }

    .clear-filters-btn {
        width: 100%;
        margin-top: 10px;
    }
}

@media (max-width: 480px) {
    .menu-items {
        grid-template-columns: 1fr;
    }

    .main-title {
        font-size: 24px;
    }

    #cuentasTable td,
    #cuentasMaestrasTable td {
        grid-template-columns: 105px minmax(0, 1fr);
        font-size: 13px;
    }

    .copy-text {
        max-width: 140px;
    }

    .acciones-celda {
        grid-template-columns: repeat(3, 1fr) !important;
    }

    .login-container {
        padding: 30px 20px;
    }

    .login-title {
        font-size: 30px;
    }
}



/* ==================================================
   EDITAR CUENTA / EXPEDIENTE INDIVIDUAL
================================================== */

body.page-editar-cuenta {
    min-height: 100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.18), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.12), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-editar-cuenta .cuentas-container {
    width: min(980px, 94%);
    margin: 0 auto;
    padding: 34px 0;
}

.page-editar-cuenta .logo-container {
    width: min(360px, 100%);
    margin: 0 auto 22px;
    padding: 18px;
    border-radius: 22px;
    background: rgba(5,10,16,.78);
    border: 1px solid var(--line);
    box-shadow: var(--shadow);
}

.page-editar-cuenta .logo {
    max-width: 180px;
    max-height: 92px;
}

.page-editar-cuenta .panel-container {
    position: relative;
    padding: 34px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.32);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
}

.page-editar-cuenta .panel-container::before {
    content: "EXPEDIENTE OPERATIVO / EDICIÓN DE CUENTA";
    position: absolute;
    top: 18px;
    left: 22px;
    padding: 6px 12px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.09);
    border: 1px solid rgba(0,255,136,.35);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
}

.page-editar-cuenta .panel-container::after {
    content: "";
    position: absolute;
    right: -120px;
    top: -120px;
    width: 290px;
    height: 290px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0,217,255,.20), transparent 68%);
    pointer-events: none;
}

.page-editar-cuenta h2 {
    margin: 36px 0 28px;
    color: var(--cyan);
    font-size: clamp(34px, 5vw, 56px);
    line-height: .95;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 24px rgba(0,217,255,.38);
}

.page-editar-cuenta h2::before {
    content: "⌖ ";
    color: var(--green);
}

.page-editar-cuenta form {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.page-editar-cuenta label {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.page-editar-cuenta input,
.page-editar-cuenta select,
.page-editar-cuenta textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border-radius: 13px;
    border: 1px solid rgba(0,217,255,.22);
    outline: none;
    background:
        linear-gradient(180deg, rgba(4,10,16,.98), rgba(8,17,26,.98));
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    transition: .22s;
}

.page-editar-cuenta input:focus,
.page-editar-cuenta select:focus,
.page-editar-cuenta textarea:focus {
    border-color: var(--green);
    box-shadow:
        0 0 0 3px rgba(0,255,136,.12),
        0 0 22px rgba(0,255,136,.16);
}

.page-editar-cuenta input[readonly] {
    color: var(--yellow);
    background: rgba(255,209,102,.08);
    border-color: rgba(255,209,102,.28);
}

.page-editar-cuenta textarea {
    min-height: 130px;
    padding: 14px 15px;
    resize: vertical;
}

.page-editar-cuenta form > label,
.page-editar-cuenta form > input,
.page-editar-cuenta form > select,
.page-editar-cuenta form > textarea,
.page-editar-cuenta .form-row-2,
.page-editar-cuenta .link-access-box,
.page-editar-cuenta .submit-edit-btn {
    grid-column: span 2;
}

.page-editar-cuenta .form-row-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.page-editar-cuenta .link-access-box {
    margin: 8px 0;
    padding: 18px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(0,217,255,.12), rgba(0,255,136,.05)),
        rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.34);
    box-shadow: inset 4px 0 0 var(--cyan);
}

.page-editar-cuenta .link-access-box label {
    color: var(--green);
}

.page-editar-cuenta .submit-edit-btn {
    width: 100%;
    height: 58px;
    margin-top: 8px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(0,255,136,.25);
    transition: .22s;
}

.page-editar-cuenta .submit-edit-btn:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    box-shadow: 0 0 42px rgba(0,217,255,.36);
}

.page-editar-cuenta .back-edit-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-width: 230px;
    margin: 22px auto 0;
    padding: 13px 18px;
    border-radius: 14px;
    color: var(--muted);
    text-decoration: none;
    background: rgba(255,255,255,.035);
    border: 1px solid rgba(255,255,255,.08);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    transition: .22s;
}

.page-editar-cuenta .back-edit-link:hover {
    color: var(--cyan);
    border-color: var(--line-strong);
    background: rgba(0,217,255,.09);
    transform: translateY(-2px);
}

/* Ajuste visual: cada label/input tradicional ocupa toda la fila */
.page-editar-cuenta form > label + select,
.page-editar-cuenta form > label + input,
.page-editar-cuenta form > label + textarea {
    grid-column: span 2;
}

/* Celular */
@media (max-width: 700px) {
    .page-editar-cuenta .cuentas-container {
        width: min(94%, 100%);
        padding: 18px 0;
    }

    .page-editar-cuenta .panel-container {
        padding: 26px 18px;
        border-radius: 22px;
    }

    .page-editar-cuenta .panel-container::before {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 16px;
        text-align: center;
        font-size: 9px;
    }

    .page-editar-cuenta h2 {
        margin-top: 12px;
        font-size: 34px;
    }

    .page-editar-cuenta form,
    .page-editar-cuenta .form-row-2 {
        grid-template-columns: 1fr;
    }

    .page-editar-cuenta form > label,
    .page-editar-cuenta form > input,
    .page-editar-cuenta form > select,
    .page-editar-cuenta form > textarea,
    .page-editar-cuenta .form-row-2,
    .page-editar-cuenta .link-access-box,
    .page-editar-cuenta .submit-edit-btn {
        grid-column: span 1;
    }

    .page-editar-cuenta .back-edit-link {
        width: 100%;
    }
}


/* ==================================================
   GARANTÍAS / CAMBIO DE CUENTA
================================================== */

body.page-garantias {
    background:
        radial-gradient(circle at 14% 10%, rgba(255,48,79,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.13), transparent 32%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-garantias .main-title {
    color: var(--red);
    text-shadow: 0 0 20px rgba(255,48,79,.42);
    border-color: rgba(255,48,79,.38);
    background:
        linear-gradient(90deg, rgba(255,48,79,.18), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
}

.page-garantias .main-title::before {
    content: "⚠";
    color: var(--yellow);
}

.guarantee-container {
    width: min(980px, 100%);
    margin: 0 auto;
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(255,48,79,.28);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.055);
}

.guarantee-section {
    position: relative;
    padding: 20px;
    border-radius: 20px;
    background: rgba(5,10,16,.58);
    border: 1px solid rgba(0,217,255,.20);
}

.guarantee-section h3 {
    margin: 0 0 18px;
    color: var(--cyan);
    text-align: center;
    font-size: 26px;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 0 16px rgba(0,217,255,.28);
}

.guarantee-section h3::before {
    content: "▣ ";
    color: var(--green);
}

.account-display-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    background:
        linear-gradient(90deg, rgba(0,217,255,.08), rgba(255,255,255,.025)),
        rgba(7,14,22,.92);
    border: 1px solid rgba(0,217,255,.18);
    transition: .22s;
}

.account-display-card.original {
    border-color: rgba(255,48,79,.55);
    box-shadow: inset 4px 0 0 var(--red), 0 0 24px rgba(255,48,79,.12);
}

.account-display-card.replacement {
    cursor: pointer;
}

.account-display-card.replacement:hover {
    transform: translateY(-2px);
    border-color: rgba(0,255,136,.5);
    box-shadow: 0 0 28px rgba(0,255,136,.16);
}

.account-display-card.replacement.selected {
    border-color: var(--green);
    background:
        linear-gradient(90deg, rgba(0,255,136,.16), rgba(0,217,255,.07)),
        rgba(7,14,22,.96);
    box-shadow: inset 4px 0 0 var(--green), 0 0 30px rgba(0,255,136,.22);
}

.platform-logo-small {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 14px;
    padding: 6px;
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.08);
    filter: drop-shadow(0 0 14px rgba(0,217,255,.25));
}

.account-info {
    flex: 1;
    min-width: 0;
}

.account-info p {
    margin: 5px 0;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    word-break: break-word;
}

.account-info strong {
    color: var(--cyan);
}

.replacement-list {
    max-height: 430px;
    overflow-y: auto;
    display: grid;
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(0,217,255,.18);
}

.no-accounts,
.no-results {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-family: var(--font-mono);
}

.action-options {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(0,0,0,.28);
    border: 1px dashed rgba(255,209,102,.45);
}

.action-options p {
    margin: 0 0 12px;
    color: var(--yellow);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.action-options label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    color: var(--text);
    cursor: pointer;
    font-weight: 700;
}

.action-options input[type="radio"] {
    accent-color: var(--green);
    transform: scale(1.25);
}

.action-buttons-container {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 22px;
}

.btn-action {
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .22s;
}

.btn-confirm {
    background: linear-gradient(135deg, var(--green), var(--cyan));
    color: #00140b;
    box-shadow: 0 0 26px rgba(0,255,136,.22);
}

.btn-confirm:disabled {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.5);
}

.btn-cancel {
    background: linear-gradient(135deg, #374151, #111827);
    color: var(--text);
    border: 1px solid rgba(255,255,255,.12);
}

.btn-action:hover:not(:disabled) {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.message-box {
    margin-bottom: 18px;
    padding: 14px 18px;
    border-radius: 15px;
    text-align: center;
    font-weight: 700;
    border: 1px solid var(--line);
    background: rgba(8,16,25,.9);
    box-shadow: var(--shadow);
}

.message-success {
    color: var(--green);
    border-color: rgba(0,255,136,.45);
}

.message-error {
    color: var(--red);
    border-color: rgba(255,48,79,.5);
}

.message-warning {
    color: var(--yellow);
    border-color: rgba(255,209,102,.5);
}

.message-info {
    color: var(--cyan);
    border-color: rgba(0,217,255,.45);
}

.comment-input-group {
    display: none;
}

/* móvil garantías */
@media (max-width: 760px) {
    .guarantee-container {
        padding: 16px;
        border-radius: 22px;
    }

    .guarantee-section {
        padding: 16px;
    }

    .guarantee-section h3 {
        font-size: 22px;
    }

    .account-display-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .platform-logo-small {
        width: 50px;
        height: 50px;
    }

    .action-buttons-container {
        flex-direction: column;
    }

    .btn-action {
        width: 100%;
    }
}





/* ==================================================
   ENVIAR WHATSAPP / DESPACHO OPERATIVO
================================================== */

body.page-enviar-whatsapp {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 12%, rgba(37,211,102,.16), transparent 28%),
        radial-gradient(circle at 88% 78%, rgba(0,217,255,.13), transparent 30%),
        linear-gradient(135deg, #020406, #07120d 45%, #020406);
}

.whatsapp-page-container {
    width: min(1180px, 94%);
    margin: 0 auto;
    padding: 34px 0;
}

.whatsapp-content {
    position: relative;
    padding: 28px;
    border-radius: 28px;
    background:
        linear-gradient(180deg, rgba(12,30,22,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(37,211,102,.28);
    box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,.055);
    overflow: hidden;
}

.whatsapp-content::before {
    content: "DESPACHO OPERATIVO / WHATSAPP";
    position: absolute;
    top: 18px;
    left: 22px;
    padding: 6px 12px;
    border-radius: 999px;
    color: #25d366;
    background: rgba(37,211,102,.10);
    border: 1px solid rgba(37,211,102,.38);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
}

.page-enviar-whatsapp .main-title {
    margin-top: 34px;
    color: #25d366;
    border-color: rgba(37,211,102,.38);
    background:
        linear-gradient(90deg, rgba(37,211,102,.18), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 20px rgba(37,211,102,.38);
}

.page-enviar-whatsapp .main-title::before {
    content: "☏";
    color: var(--cyan);
}

.whatsapp-card-container {
    display: grid;
    gap: 22px;
}

.whatsapp-card {
    position: relative;
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 20px;
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(90deg, rgba(37,211,102,.12), rgba(0,217,255,.045)),
        rgba(6,14,20,.92);
    border: 1px solid rgba(37,211,102,.24);
    box-shadow: 0 18px 45px rgba(0,0,0,.38);
}

.whatsapp-card::before {
    content: "MENSAJE LISTO";
    position: absolute;
    right: 18px;
    top: 16px;
    padding: 5px 10px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.34);
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: .12em;
}

.whatsapp-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    border-radius: 18px;
    background:
        radial-gradient(circle, rgba(37,211,102,.16), transparent 70%),
        rgba(0,0,0,.28);
    border: 1px solid rgba(37,211,102,.22);
}

.platform-logo {
    max-width: 165px;
    max-height: 120px;
    object-fit: contain;
    display: block;
    filter:
        drop-shadow(0 0 18px rgba(37,211,102,.35))
        drop-shadow(0 10px 18px rgba(0,0,0,.45));
}

.whatsapp-body {
    min-width: 0;
}

.whatsapp-text {
    width: 100%;
    min-height: 330px;
    max-height: 520px;
    overflow: auto;
    margin: 0;
    padding: 18px;
    border-radius: 18px;
    color: #d7ffe8;
    background:
        linear-gradient(180deg, rgba(0,0,0,.55), rgba(3,11,8,.82));
    border: 1px solid rgba(37,211,102,.25);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    box-shadow: inset 0 0 24px rgba(0,0,0,.35);
}

.whatsapp-actions {
    grid-column: 1 / -1;
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    padding-top: 4px;
}

.btn-copy-whatsapp,
.btn-open-whatsapp,
.back-to-gestion-btn {
    min-height: 48px;
    padding: 0 20px;
    border-radius: 14px;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .22s;
}

.btn-copy-whatsapp {
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    color: white;
}

.btn-open-whatsapp {
    background: linear-gradient(135deg, #25d366, #075e54);
    color: #00190e;
    box-shadow: 0 0 26px rgba(37,211,102,.22);
}

.back-to-gestion-btn {
    width: fit-content;
    margin: 24px auto 0;
    background: rgba(255,255,255,.045);
    color: var(--muted);
    border: 1px solid rgba(255,255,255,.10);
}

.btn-copy-whatsapp:hover,
.btn-open-whatsapp:hover,
.back-to-gestion-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.back-to-gestion-btn:hover {
    color: var(--cyan);
    border-color: var(--line-strong);
}

/* móvil enviar whatsapp */
@media (max-width: 820px) {
    .whatsapp-page-container {
        padding: 18px 0;
    }

    .whatsapp-content {
        padding: 22px 16px;
        border-radius: 22px;
    }

    .whatsapp-content::before {
        position: relative;
        top: auto;
        left: auto;
        display: block;
        width: fit-content;
        max-width: 100%;
        margin: 0 auto 14px;
        text-align: center;
        font-size: 9px;
    }

    .page-enviar-whatsapp .main-title {
        margin-top: 12px;
    }

    .whatsapp-card {
        grid-template-columns: 1fr;
        padding: 16px;
    }

    .whatsapp-card::before {
        position: relative;
        top: auto;
        right: auto;
        width: fit-content;
        margin-bottom: 8px;
    }

    .whatsapp-text {
        min-height: 300px;
        font-size: 13px;
    }

    .whatsapp-actions {
        flex-direction: column;
    }

    .btn-copy-whatsapp,
    .btn-open-whatsapp,
    .back-to-gestion-btn {
        width: 100%;
    }
}







/* ==================================================
   GESTIONAR PERFILES MAESTRA
================================================== */

body.page-perfiles-maestra {
    background:
        radial-gradient(circle at 12% 12%, rgba(168,85,247,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.11), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-perfiles-maestra .main-title {
    color: #d8b4fe;
    border-color: rgba(168,85,247,.42);
    background:
        linear-gradient(90deg, rgba(168,85,247,.20), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 20px rgba(168,85,247,.38);
}

.page-perfiles-maestra .main-title::before {
    content: "👥";
    color: var(--green);
}

.page-perfiles-maestra .form-section,
.page-perfiles-maestra .table-container {
    width: min(850px, 100%);
    margin: 0 auto 24px;
    padding: 24px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(168,85,247,.30);
    box-shadow: var(--shadow);
}

.page-perfiles-maestra .form-section h3,
.page-perfiles-maestra .table-container h3 {
    margin: 0 0 20px;
    text-align: center;
    color: var(--cyan);
    font-size: 26px;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-perfiles-maestra .form-section label {
    display: block;
    margin-bottom: 9px;
    color: var(--green);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-perfiles-maestra input[type="email"] {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    border-radius: 14px;
    border: 1px solid rgba(0,217,255,.25);
    outline: none;
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
}

.page-perfiles-maestra input[type="email"]:focus {
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-perfiles-maestra button[type="submit"] {
    width: 100%;
    height: 54px;
    margin-top: 14px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.perfiles-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.perfiles-lista li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 140px 150px;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: 16px;
    background: rgba(5,10,16,.72);
    border: 1px solid rgba(0,217,255,.18);
}

.email-perfil {
    color: var(--cyan);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.estado-perfil {
    justify-self: center;
    padding: 7px 11px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.35);
    font-family: var(--font-mono);
    font-size: 12px;
}

.desvincular-perfil-btn {
    height: 40px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    color: #1b1000;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    transition: .22s;
}

.desvincular-perfil-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.page-perfiles-maestra p[style*="text-align: center"] .action-btn {
    width: auto;
    min-width: 240px;
    padding: 0 18px;
    background: linear-gradient(135deg, var(--cyan), var(--blue)) !important;
}

@media (max-width: 720px) {
    .page-perfiles-maestra .form-section,
    .page-perfiles-maestra .table-container {
        padding: 18px;
        border-radius: 20px;
    }

    .perfiles-lista li {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .estado-perfil {
        justify-self: center;
    }

    .desvincular-perfil-btn {
        width: 100%;
    }
}




/* ==================================================
   EDITAR CUENTA MAESTRA
================================================== */

body.page-editar-maestra {
    background:
        radial-gradient(circle at 12% 12%, rgba(168,85,247,.18), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.12), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-editar-maestra .main-title {
    color: #d8b4fe;
    border-color: rgba(168,85,247,.42);
    background:
        linear-gradient(90deg, rgba(168,85,247,.22), rgba(0,217,255,.08)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 22px rgba(168,85,247,.42);
}

.page-editar-maestra .main-title::before {
    content: "◆";
    color: var(--cyan);
}

.page-editar-maestra .main-content-wrapper {
    width: min(1100px, 100%);
    margin: 0 auto;
}

.page-editar-maestra .form-panel {
    position: relative;
    padding: 30px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(168,85,247,.32);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.page-editar-maestra .form-panel::before {
    content: "BÓVEDA MAESTRA / EDICIÓN";
    display: inline-flex;
    margin-bottom: 22px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--green);
    background: rgba(0,255,136,.09);
    border: 1px solid rgba(0,255,136,.35);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .14em;
}

.page-editar-maestra form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 20px;
}

.page-editar-maestra .form-group {
    margin: 0;
}

.page-editar-maestra .form-group label {
    display: block;
    margin-bottom: 8px;
    color: var(--cyan);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.page-editar-maestra input,
.page-editar-maestra select,
.page-editar-maestra textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border-radius: 13px;
    border: 1px solid rgba(0,217,255,.22);
    outline: none;
    background:
        linear-gradient(180deg, rgba(4,10,16,.98), rgba(8,17,26,.98));
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    transition: .22s;
}

.page-editar-maestra input:focus,
.page-editar-maestra select:focus,
.page-editar-maestra textarea:focus {
    border-color: var(--green);
    box-shadow:
        0 0 0 3px rgba(0,255,136,.12),
        0 0 22px rgba(0,255,136,.16);
}

.page-editar-maestra textarea {
    min-height: 120px;
    padding: 14px 15px;
    resize: vertical;
}

.page-editar-maestra .password-input-group,
.page-editar-maestra .pin-input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.page-editar-maestra .generate-btn {
    min-height: 50px;
    padding: 0 14px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    transition: .22s;
}

.page-editar-maestra .generate-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.page-editar-maestra .form-group:has(textarea),
.page-editar-maestra .form-group:has(.perfiles-vinculados-container),
.page-editar-maestra .form-group:last-child,
.page-editar-maestra .alert {
    grid-column: 1 / -1;
}

.page-editar-maestra .perfiles-vinculados-container {
    max-height: 260px;
    overflow-y: auto;
    padding: 14px;
    border-radius: 18px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(168,85,247,.28);
}

.page-editar-maestra .perfil-item {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    margin-bottom: 10px;
    border-radius: 15px;
    background: rgba(5,10,16,.72);
    border: 1px solid rgba(0,217,255,.16);
}

.page-editar-maestra .perfil-item label {
    margin: 0;
    color: var(--text);
}

.page-editar-maestra .perfil-item span {
    color: var(--cyan);
    font-family: var(--font-mono);
}

.page-editar-maestra .pin-input {
    text-align: center;
}

.page-editar-maestra input[type="checkbox"] {
    min-height: auto;
    width: 18px;
    height: 18px;
    accent-color: var(--green);
}

.page-editar-maestra input[type="submit"] {
    width: 100%;
    min-height: 58px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    box-shadow: 0 0 30px rgba(0,255,136,.25);
}

.page-editar-maestra .back-button {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    margin-top: 12px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .page-editar-maestra .form-panel {
        padding: 20px;
        border-radius: 22px;
    }

    .page-editar-maestra form {
        grid-template-columns: 1fr;
    }

    .page-editar-maestra .form-group:has(textarea),
    .page-editar-maestra .form-group:has(.perfiles-vinculados-container),
    .page-editar-maestra .form-group:last-child,
    .page-editar-maestra .alert {
        grid-column: auto;
    }

    .page-editar-maestra .password-input-group,
    .page-editar-maestra .pin-input-group {
        flex-direction: column;
    }

    .page-editar-maestra .generate-btn {
        width: 100%;
    }

    .page-editar-maestra .perfil-item {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .page-editar-maestra input[type="checkbox"] {
        justify-self: center;
    }
}





/* ==================================================
   GESTION TARJETAS
================================================== */

body.page-tarjetas{
    background:
    radial-gradient(circle at 10% 10%, rgba(0,217,255,.12), transparent 30%),
    radial-gradient(circle at 90% 80%, rgba(0,255,136,.08), transparent 35%),
    linear-gradient(135deg,#020406,#08111a 45%,#020406);
}

.page-tarjetas .cards-container{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
    gap:24px;
}

.page-tarjetas .card-item{
    background:
    linear-gradient(180deg,
    rgba(12,22,32,.98),
    rgba(5,10,16,.98));

    border:1px solid rgba(0,217,255,.18);
    border-radius:22px;
    overflow:hidden;

    transition:.25s;
    box-shadow:
    0 10px 25px rgba(0,0,0,.35);
}

.page-tarjetas .card-item:hover{
    transform:translateY(-6px);
    border-color:var(--cyan);
    box-shadow:
    0 0 25px rgba(0,217,255,.18);
}

.page-tarjetas .card-header{
    padding:18px;
    display:flex;
    justify-content:space-between;
    align-items:center;

    background:
    linear-gradient(
    90deg,
    rgba(0,217,255,.10),
    rgba(0,255,136,.05));
}

.page-tarjetas .card-header h3{
    margin:0;
    color:var(--cyan);
    font-family:var(--font-title);
    letter-spacing:.08em;
}

.page-tarjetas .card-content{
    padding:20px;
}

.page-tarjetas .card-field{
    margin-bottom:14px;
    color:var(--text);
}

.page-tarjetas .card-field strong{
    color:var(--green);
    display:block;
    margin-bottom:4px;
}

.page-tarjetas .card-sensitive-data{
    margin-top:18px;
    padding:18px;

    border-radius:18px;

    background:
    rgba(0,0,0,.28);

    border:
    1px solid rgba(0,217,255,.18);
}

.page-tarjetas .card-sensitive-data p{
    display:flex;
    justify-content:space-between;
    align-items:center;

    margin:10px 0;

    font-family:var(--font-mono);
}

.page-tarjetas .masked-number{
    color:#9ca3af;
}

.page-tarjetas .revealed-number{
    color:var(--green);
    cursor:pointer;
}

.page-tarjetas .copy-icon{
    margin-left:8px;
}

.page-tarjetas .toggle-button{
    width:100%;
    margin-top:15px;
    min-height:46px;

    border:none;
    border-radius:12px;

    cursor:pointer;

    color:#00140b;

    font-family:var(--font-title);
    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));
}

.page-tarjetas .toggle-button:hover{
    filter:brightness(1.08);
}

.page-tarjetas .service-list{
    list-style:none;
    padding:0;
    margin:8px 0 0;
}

.page-tarjetas .service-list li{
    padding:10px 12px;
    margin-bottom:8px;

    border-radius:10px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.08);

    color:var(--text);
}

.page-tarjetas .add-card-btn-container{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:28px;
}

.page-tarjetas .add-card-btn{
    min-height:52px;
    padding:0 22px;

    border-radius:14px;

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    color:#00140b;

    font-family:var(--font-title);
    font-weight:700;
    letter-spacing:.06em;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));

    transition:.25s;
}

.page-tarjetas .add-card-btn:hover{
    transform:translateY(-2px);
}

.page-tarjetas .card-actions{
    display:flex;
    gap:8px;
}

.page-tarjetas .card-actions .action-btn{
    min-width:42px;
    min-height:42px;
    display:flex;
    align-items:center;
    justify-content:center;
}

@media(max-width:768px){

    .page-tarjetas .cards-container{
        grid-template-columns:1fr;
    }

    .page-tarjetas .add-card-btn-container{
        flex-direction:column;
    }

    .page-tarjetas .add-card-btn{
        width:100%;
        justify-content:center;
    }
}






/* ==================================================
   GESTION YOUTUBE / ICLOUD
================================================== */

body.page-youtube{
    background:
    radial-gradient(circle at 15% 15%, rgba(0,217,255,.10), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(0,255,136,.08), transparent 35%),
    linear-gradient(135deg,#020406,#08111a 45%,#020406);
}

.page-youtube .form-section{
    background:rgba(7,15,22,.95);
    border:1px solid rgba(0,217,255,.15);
    border-radius:22px;
    padding:25px;
    margin-bottom:25px;
}

.page-youtube .hidden-step{
    margin-top:25px;
    padding-top:25px;
    border-top:1px solid rgba(255,255,255,.08);
}

.page-youtube .form-control{
    width:100%;
    min-height:48px;

    background:rgba(0,0,0,.25);

    border:1px solid rgba(255,255,255,.10);
    border-radius:12px;

    color:var(--text);

    padding:12px 14px;
}

.page-youtube .form-control:focus{
    outline:none;
    border-color:var(--cyan);

    box-shadow:
    0 0 15px rgba(0,217,255,.18);
}

.page-youtube .grid-cards{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(380px,1fr));
    gap:22px;
}

.page-youtube .card-cuenta{
    position:relative;

    background:
    linear-gradient(
    180deg,
    rgba(10,18,26,.95),
    rgba(5,10,16,.98));

    border-radius:20px;

    border:1px solid rgba(0,217,255,.15);

    padding:22px;

    transition:.25s;
}

.page-youtube .card-cuenta:hover{
    transform:translateY(-5px);

    box-shadow:
    0 0 20px rgba(0,217,255,.15);
}

.page-youtube .btn-edit{
    position:absolute;
    top:15px;
    right:15px;

    width:42px;
    height:42px;

    border:none;
    border-radius:12px;

    cursor:pointer;

    background:
    linear-gradient(
    135deg,
    var(--warning),
    #ffb142);

    color:#111;
}

.page-youtube .plat-tag{
    display:inline-block;

    padding:5px 12px;

    border-radius:999px;

    background:
    linear-gradient(
    135deg,
    #ff006e,
    #ff4d9d);

    color:white;

    font-size:.75rem;
    font-weight:700;
    letter-spacing:.05em;
}

.page-youtube .metodo-tag{
    display:inline-block;

    margin-top:8px;

    padding:4px 10px;

    border-radius:8px;

    background:
    rgba(0,217,255,.18);

    color:var(--cyan);

    font-size:.75rem;
}

.page-youtube .pais-badge{
    display:inline-block;

    margin-left:8px;

    padding:4px 10px;

    border-radius:8px;

    background:
    rgba(255,255,255,.08);

    color:var(--text);

    font-size:.75rem;
}

.page-youtube .nota-box{
    margin-top:12px;

    padding:12px;

    border-left:4px solid #f1c40f;

    border-radius:10px;

    background:
    rgba(255,255,255,.04);
}

.page-youtube #modalEdit{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;

    background:
    rgba(0,0,0,.82);

    overflow-y:auto;
}

.page-youtube .modal-content{
    width:90%;
    max-width:700px;

    margin:40px auto;

    background:
    rgba(7,15,22,.98);

    border:1px solid rgba(0,217,255,.20);

    border-radius:22px;

    padding:25px;
}

.page-youtube .btn-save-youtube{
    width:100%;
    min-height:50px;

    border:none;
    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    color:#00140b;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));
}

@media(max-width:768px){

    .page-youtube .grid-cards{
        grid-template-columns:1fr;
    }

    .page-youtube .modal-content{
        width:95%;
    }
}








/* ==================================================
   PROVEEDORES
================================================== */

body.page-proveedores{

    background:
    radial-gradient(circle at 15% 15%, rgba(0,217,255,.08), transparent 30%),
    radial-gradient(circle at 85% 85%, rgba(0,255,136,.06), transparent 30%),
    linear-gradient(
    135deg,
    #020406,
    #08111a 50%,
    #020406);
}

.provider-layout{

    display:grid;

    grid-template-columns:
    350px 1fr;

    gap:25px;
}

.provider-form-card,
.provider-table-card{

    background:
    linear-gradient(
    180deg,
    rgba(10,18,26,.96),
    rgba(4,8,12,.98));

    border-radius:22px;

    border:1px solid rgba(0,217,255,.15);

    padding:25px;
}

.provider-form-card h3,
.provider-table-card h3{

    margin-bottom:20px;

    color:var(--cyan);
}

.provider-input{

    width:100%;

    min-height:48px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(0,0,0,.25);

    color:white;

    padding:12px 14px;

    margin-bottom:15px;
}

.provider-input:focus{

    outline:none;

    border-color:var(--cyan);

    box-shadow:
    0 0 15px rgba(0,217,255,.15);
}

.provider-btn{

    width:100%;

    min-height:50px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));

    color:#00140b;
}

.provider-btn:hover{

    transform:translateY(-2px);
}

.provider-table-card table{

    width:100%;

    border-collapse:collapse;
}

.provider-table-card th{

    background:
    rgba(0,217,255,.12);

    color:var(--cyan);

    padding:14px;
}

.provider-table-card td{

    padding:14px;

    border-top:
    1px solid rgba(255,255,255,.06);
}

.provider-table-card tr:hover{

    background:
    rgba(0,217,255,.04);
}

@media(max-width:900px){

    .provider-layout{

        grid-template-columns:1fr;
    }
}










/* ==================================================
   GESTIONAR PERFILES MAESTRA
================================================== */

.page-perfiles-maestra .form-section{

    max-width:700px;
    margin:0 auto 25px;

    background:
    linear-gradient(
    180deg,
    rgba(10,18,26,.96),
    rgba(4,8,12,.98));

    border:1px solid rgba(0,217,255,.15);

    border-radius:20px;

    padding:25px;
}

.page-perfiles-maestra .form-section h3{

    color:var(--cyan);

    margin-bottom:20px;

    text-align:center;
}

.page-perfiles-maestra .form-section label{

    display:block;

    margin-bottom:8px;

    font-weight:600;
}

.page-perfiles-maestra .form-section input{

    width:100%;

    min-height:48px;

    padding:12px 15px;

    border-radius:12px;

    border:1px solid rgba(255,255,255,.10);

    background:rgba(0,0,0,.25);

    color:white;

    margin-bottom:15px;
}

.page-perfiles-maestra .form-section input:focus{

    outline:none;

    border-color:var(--cyan);

    box-shadow:
    0 0 15px rgba(0,217,255,.18);
}

.page-perfiles-maestra .form-section button{

    width:100%;

    min-height:50px;

    border:none;

    border-radius:14px;

    cursor:pointer;

    font-weight:700;

    background:
    linear-gradient(
    135deg,
    var(--green),
    var(--cyan));

    color:#00140b;
}

.page-perfiles-maestra .form-section button:hover{

    transform:translateY(-2px);
}

.page-perfiles-maestra .table-container{

    background:
    linear-gradient(
    180deg,
    rgba(10,18,26,.96),
    rgba(4,8,12,.98));

    border:1px solid rgba(0,217,255,.15);

    border-radius:20px;

    padding:25px;
}

.page-perfiles-maestra .table-container h3{

    text-align:center;

    color:var(--cyan);

    margin-bottom:20px;
}

.page-perfiles-maestra .perfiles-lista{

    list-style:none;

    padding:0;

    margin:0;

    display:flex;

    flex-direction:column;

    gap:12px;
}

.page-perfiles-maestra .perfiles-lista li{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:15px;

    padding:14px 18px;

    border-radius:14px;

    background:
    rgba(255,255,255,.04);

    border:
    1px solid rgba(255,255,255,.06);
}

.page-perfiles-maestra .email-perfil{

    font-weight:600;

    color:white;
}

.page-perfiles-maestra .estado-perfil{

    padding:5px 12px;

    border-radius:999px;

    background:
    rgba(0,255,136,.15);

    color:var(--green);

    font-size:.8rem;

    font-weight:700;
}

.page-perfiles-maestra .desvincular-perfil-btn{

    text-decoration:none;

    padding:8px 14px;

    border-radius:10px;

    background:
    linear-gradient(
    135deg,
    #ff4757,
    #ff6b81);

    color:white;

    font-weight:700;
}

.page-perfiles-maestra .desvincular-perfil-btn:hover{

    opacity:.9;
}

@media(max-width:768px){

    .page-perfiles-maestra .perfiles-lista li{

        flex-direction:column;

        align-items:flex-start;
    }

    .page-perfiles-maestra .desvincular-perfil-btn{

        width:100%;

        text-align:center;
    }
}





/* ==================================================
   AGREGAR CUENTAS
================================================== */

body.page-agregar-cuentas {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-agregar-cuentas .content-card {
    width: min(900px, 100%);
    margin: 0 auto;
    padding: 30px;
    border-radius: 26px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.30);
    box-shadow: var(--shadow);
}

.page-agregar-cuentas .page-title {
    margin: 0 0 26px;
    color: var(--cyan);
    text-align: center;
    font-size: clamp(30px, 5vw, 48px);
    letter-spacing: .08em;
    text-transform: uppercase;
    text-shadow: 0 0 22px rgba(0,217,255,.36);
}

.page-agregar-cuentas form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px 20px;
}

.page-agregar-cuentas label {
    color: var(--green);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-agregar-cuentas input,
.page-agregar-cuentas select,
.page-agregar-cuentas textarea {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border-radius: 13px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
}

.page-agregar-cuentas textarea {
    min-height: 120px;
    padding: 14px 15px;
    resize: vertical;
}

.page-agregar-cuentas input:focus,
.page-agregar-cuentas select:focus,
.page-agregar-cuentas textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-agregar-cuentas #master-account-section,
.page-agregar-cuentas #link_codigo_acceso_container,
.page-agregar-cuentas textarea,
.page-agregar-cuentas .btn-add-account {
    grid-column: 1 / -1;
}

.page-agregar-cuentas .password-container {
    position: relative;
}

.page-agregar-cuentas .password-container input {
    padding-right: 58px;
}

.page-agregar-cuentas .generate-btn {
    position: absolute;
    right: 6px;
    top: 6px;
    width: 42px;
    height: 38px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    color: #1b1000;
}

.page-agregar-cuentas #link_codigo_acceso_container {
    padding: 18px;
    border-radius: 18px;
    background: rgba(0,217,255,.08);
    border: 1px solid rgba(0,217,255,.28);
    box-shadow: inset 4px 0 0 var(--cyan);
}

.page-agregar-cuentas .btn-add-account {
    height: 58px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.page-agregar-cuentas .back-btn-container {
    margin-top: 24px;
    text-align: center;
}

.page-agregar-cuentas .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 0 22px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 760px) {
    .page-agregar-cuentas .content-card {
        padding: 20px;
        border-radius: 22px;
    }

    .page-agregar-cuentas form {
        grid-template-columns: 1fr;
    }
}





/* ==================================================
   GESTION CLIENTES
================================================== */

body.page-clientes {
    background:
        radial-gradient(circle at top left,
        rgba(0,217,255,.12),
        transparent 30%),
        linear-gradient(135deg,
        #030507,
        #08131d 50%,
        #030507);
}

.page-clientes .page-title{
    text-align:center;
    margin-bottom:30px;
    color:var(--cyan);
    text-transform:uppercase;
    letter-spacing:.12em;
}

.page-clientes .glass-card{
    background:rgba(9,18,28,.95);
    border:1px solid rgba(0,217,255,.25);
    border-radius:22px;
    padding:25px;
    margin-bottom:30px;
    box-shadow:var(--shadow);
}

.page-clientes .add-form{
    display:grid;
    gap:15px;
}

.page-clientes input{
    height:50px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.15);
    background:#081018;
    color:white;
    padding:0 15px;
}

.page-clientes input:focus{
    outline:none;
    border-color:var(--cyan);
    box-shadow:0 0 0 3px rgba(0,217,255,.15);
}

.page-clientes .btn-primary{
    height:54px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    font-weight:700;
    letter-spacing:.08em;
    background:linear-gradient(
        135deg,
        var(--green),
        var(--cyan)
    );
    color:#02130b;
}

.page-clientes .table-container{
    overflow-x:auto;
    border-radius:20px;
    border:1px solid rgba(255,255,255,.08);
}

.page-clientes table{
    width:100%;
    border-collapse:collapse;
}

.page-clientes th{
    background:#0c1823;
    color:var(--cyan);
    padding:14px;
}

.page-clientes td{
    padding:12px;
    border-top:1px solid rgba(255,255,255,.06);
}

.page-clientes tr:hover{
    background:rgba(0,217,255,.04);
}

.page-clientes .edit-btn{
    background:#ffc107;
    color:#111;
    padding:8px 12px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
}

.page-clientes .delete-btn{
    background:#dc3545;
    color:white;
    padding:8px 12px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
}

.page-clientes .back-button-container{
    margin-top:25px;
    text-align:center;
}






/* ==================================================
   BUSCAR CLIENTE
================================================== */

body.page-buscar-cliente{
    background:
        radial-gradient(circle at top right,
        rgba(0,217,255,.12),
        transparent 28%),
        linear-gradient(
        135deg,
        #020406,
        #08111a 50%,
        #020406);
}

.page-buscar-cliente .page-title{
    text-align:center;
    color:var(--cyan);
    margin-bottom:25px;
    letter-spacing:.12em;
}

.page-buscar-cliente .glass-card{
    background:rgba(10,18,28,.95);
    border:1px solid rgba(0,217,255,.22);
    border-radius:20px;
    padding:20px;
    margin-bottom:25px;
}

.page-buscar-cliente .search-container form{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:15px;
}

.page-buscar-cliente input[type="text"]{
    flex:1;
    min-width:260px;
    height:50px;
    padding:0 15px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.12);
    background:#081018;
    color:white;
}

.page-buscar-cliente input[type="text"]:focus{
    outline:none;
    border-color:var(--cyan);
}

.page-buscar-cliente .search-btn{
    height:50px;
    padding:0 22px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    font-weight:700;
    background:linear-gradient(
        135deg,
        var(--cyan),
        var(--green)
    );
    color:#04140f;
}

.page-buscar-cliente .table-container{
    overflow-x:auto;
    border-radius:18px;
}

.page-buscar-cliente table{
    width:100%;
    border-collapse:collapse;
}

.page-buscar-cliente th{
    background:#0c1823;
    color:var(--cyan);
    padding:14px;
}

.page-buscar-cliente td{
    padding:12px;
    border-top:1px solid rgba(255,255,255,.06);
}

.page-buscar-cliente tr:hover{
    background:rgba(0,217,255,.04);
}

.page-buscar-cliente .generar-contrasena-btn{
    display:inline-block;
    padding:8px 14px;
    border-radius:10px;
    text-decoration:none;
    font-weight:700;
    background:#ffc107;
    color:#111;
}

.page-buscar-cliente .mensaje{
    padding:14px;
    border-radius:12px;
    margin-bottom:20px;
    text-align:center;
    font-weight:700;
}

.page-buscar-cliente .mensaje.exito{
    background:rgba(0,255,136,.12);
    border:1px solid rgba(0,255,136,.35);
}

.page-buscar-cliente .mensaje.error{
    background:rgba(255,0,0,.12);
    border:1px solid rgba(255,0,0,.35);
}




/* ==================================================
   STREAMING / PLATAFORMAS
================================================== */

body.page-streaming {
    background:
        radial-gradient(circle at 12% 14%, rgba(0,217,255,.15), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.08), transparent 32%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-streaming .streaming-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 24px;
}

.page-streaming .streaming-form-card,
.page-streaming .streaming-table-card {
    padding: 24px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.24);
    box-shadow: var(--shadow);
}

.page-streaming h2 {
    margin: 0 0 20px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-streaming form {
    display: grid;
    gap: 14px;
}

.page-streaming input {
    width: 100%;
    min-height: 50px;
    padding: 0 15px;
    border-radius: 13px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
}

.page-streaming input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-streaming button[type="submit"] {
    height: 52px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-streaming .mensaje {
    margin-top: 16px;
    padding: 13px;
    border-radius: 14px;
    font-weight: 700;
    text-align: center;
}

.page-streaming .mensaje.error {
    color: var(--red);
    background: rgba(255,48,79,.13);
    border: 1px solid rgba(255,48,79,.36);
}

.page-streaming table {
    width: 100%;
    border-collapse: collapse;
}

.page-streaming th {
    padding: 14px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
}

.page-streaming td {
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.page-streaming tr:hover {
    background: rgba(0,217,255,.04);
}

.page-streaming .streaming-back-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 48px;
    margin-top: 20px;
    padding: 0 20px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    font-weight: 700;
}

@media (max-width: 900px) {
    .page-streaming .streaming-layout {
        grid-template-columns: 1fr;
    }

    .page-streaming .streaming-back-btn {
        width: 100%;
    }
}




/* ==================================================
   USUARIOS / VENDEDORES / COMISIONES
================================================== */

body.page-usuarios {
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.15), transparent 30%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 32%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-usuarios .main-title {
    color: var(--yellow);
    border-color: rgba(255,209,102,.38);
    background:
        linear-gradient(90deg, rgba(255,209,102,.18), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 22px rgba(255,209,102,.35);
}

.page-usuarios .main-title::before {
    content: "🧰";
    color: var(--cyan);
}

.page-usuarios .usuarios-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    margin-bottom: 22px;
    padding: 0 20px;
    border-radius: 14px;
    color: var(--text);
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.12);
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .06em;
}

.page-usuarios .page-content-two-col {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.page-usuarios .left-column,
.page-usuarios .right-column {
    display: grid;
    gap: 22px;
}

.page-usuarios .filter-section,
.page-usuarios .comisiones-section,
.page-usuarios .add-vendor-section,
.page-usuarios .vendors-list-section,
.page-usuarios .reset-password-section,
.page-usuarios .configuracion-plataformas-section,
.page-usuarios .modificar-plataforma-section,
.page-usuarios .cuentas-section {
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-usuarios h3 {
    margin: 0 0 18px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .07em;
    font-size: 20px;
}

.page-usuarios form {
    display: grid;
    gap: 12px;
}

.page-usuarios label {
    color: var(--green);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    font-size: 13px;
}

.page-usuarios input,
.page-usuarios select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
}

.page-usuarios input:focus,
.page-usuarios select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-usuarios button,
.page-usuarios .btn-reporte-comisiones {
    min-height: 44px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: .22s;
}

.page-usuarios button:hover,
.page-usuarios .btn-reporte-comisiones:hover,
.page-usuarios .usuarios-back-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.08);
}

.page-usuarios .btn-filter,
.page-usuarios .btn-add-vendor,
.page-usuarios .btn-reset-password,
.page-usuarios .btn-modificar-plataforma,
.page-usuarios .modal-content button[type="submit"] {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-usuarios .btn-clear,
.page-usuarios .btn-quitar {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-usuarios .btn-reporte-comisiones {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    color: #1b1000;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.page-usuarios .total-general-comisiones {
    padding: 18px;
    margin-bottom: 18px;
    border-radius: 18px;
    text-align: center;
    background:
        linear-gradient(90deg, rgba(255,209,102,.15), rgba(0,217,255,.06)),
        rgba(0,0,0,.28);
    border: 1px solid rgba(255,209,102,.38);
}

.page-usuarios .total-general-comisiones p {
    margin: 0 0 8px;
    color: var(--muted);
    font-weight: 700;
    text-transform: uppercase;
}

.page-usuarios .total-general-comisiones span {
    color: var(--yellow);
    font-family: var(--font-mono);
    font-size: 34px;
    font-weight: 700;
    text-shadow: 0 0 18px rgba(255,209,102,.35);
}

.page-usuarios .comisiones-resumen-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.page-usuarios .vendedor-comision-item {
    padding: 15px;
    border-radius: 17px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,209,102,.24);
}

.page-usuarios .vendedor-info-button {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--text);
    margin-bottom: 12px;
}

.page-usuarios .total-comision,
.page-usuarios .detalle-monto {
    color: var(--yellow);
    font-family: var(--font-mono);
    font-weight: 700;
}

.page-usuarios .btn-pagar-todas,
.page-usuarios .btn-pagar,
.page-usuarios .btn-pagar-individual {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), #00b86b);
}

.page-usuarios .btn-detalle-comision,
.page-usuarios .btn-asignar,
.page-usuarios .btn-modificar-comision {
    color: white;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
}

.page-usuarios .comision-detalles-list {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed rgba(255,255,255,.14);
}

.page-usuarios .comision-detalles-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 10px;
}

.page-usuarios .comision-detalles-list li {
    display: grid;
    gap: 6px;
    padding: 12px;
    border-radius: 14px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.page-usuarios .detalle-plataforma {
    color: var(--green);
    font-weight: 700;
}

.page-usuarios .detalle-info,
.page-usuarios .detalle-cliente,
.page-usuarios .detalle-fecha {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 13px;
}

.page-usuarios .scroll-container {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(0,217,255,.16);
    background: rgba(0,0,0,.20);
}

.page-usuarios table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}

.page-usuarios .cuentas-table {
    min-width: 1250px;
}

.page-usuarios th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .05em;
}

.page-usuarios td {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: var(--text);
}

.page-usuarios tr:hover {
    background: rgba(0,217,255,.045);
}

.page-usuarios .btn-pagar {
    margin-top: 6px;
    padding: 8px 10px;
}

.page-usuarios .btn-asignar {
    padding: 8px 10px;
}

.page-usuarios .mensaje {
    display: none;
}

/* Modales usuarios */
.page-usuarios .modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    overflow-y: auto;
    background: rgba(0,0,0,.78);
    backdrop-filter: blur(8px);
}

.page-usuarios .modal-content {
    width: min(540px, 92%);
    margin: 60px auto;
    padding: 26px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.98), rgba(5,10,16,.99));
    border: 1px solid rgba(0,217,255,.30);
    color: var(--text);
    box-shadow: var(--shadow);
    position: relative;
}

.page-usuarios .modal-content h2 {
    color: var(--cyan);
    margin: 0 0 18px;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-usuarios .close-button {
    position: absolute;
    right: 18px;
    top: 12px;
    color: var(--red);
    font-size: 32px;
    cursor: pointer;
}

.page-usuarios .note {
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
}

/* responsive usuarios */
@media (max-width: 1100px) {
    .page-usuarios .page-content-two-col {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .page-usuarios .filter-section,
    .page-usuarios .comisiones-section,
    .page-usuarios .add-vendor-section,
    .page-usuarios .vendors-list-section,
    .page-usuarios .reset-password-section,
    .page-usuarios .configuracion-plataformas-section,
    .page-usuarios .modificar-plataforma-section,
    .page-usuarios .cuentas-section {
        padding: 16px;
        border-radius: 18px;
    }

    .page-usuarios .vendedor-info-button {
        flex-direction: column;
    }

    .page-usuarios table {
        min-width: 720px;
    }

    .page-usuarios .cuentas-table {
        min-width: 1050px;
    }

    .page-usuarios .modal-content {
        margin: 25px auto;
    }
}





/* ==================================================
   USUARIOS / MEJORAS RESPONSIVE PC Y CELULAR
================================================== */

/* PC grande */
@media (min-width: 1300px) {
    .page-usuarios .page-content-two-col {
        grid-template-columns: 460px minmax(0, 1fr);
    }

    .page-usuarios .admin-main-content {
        padding: 28px 32px;
    }

    .page-usuarios .cuentas-section {
        max-width: 100%;
        overflow: hidden;
    }
}

/* Laptop / PC mediana */
@media (max-width: 1299px) {
    .page-usuarios .page-content-two-col {
        grid-template-columns: 390px minmax(0, 1fr);
        gap: 18px;
    }

    .page-usuarios .filter-section,
    .page-usuarios .comisiones-section,
    .page-usuarios .add-vendor-section,
    .page-usuarios .vendors-list-section,
    .page-usuarios .reset-password-section,
    .page-usuarios .configuracion-plataformas-section,
    .page-usuarios .modificar-plataforma-section,
    .page-usuarios .cuentas-section {
        padding: 18px;
    }
}

/* Tablet */
@media (max-width: 1050px) {
    .page-usuarios .page-content-two-col {
        grid-template-columns: 1fr;
    }

    .page-usuarios .usuarios-back-btn {
        width: 100%;
    }
}

/* Celular: tarjetas más limpias */
@media (max-width: 760px) {
    .page-usuarios .main-title {
        font-size: 24px;
        padding-left: 46px;
    }

    .page-usuarios .left-column,
    .page-usuarios .right-column {
        gap: 16px;
    }

    .page-usuarios h3 {
        font-size: 17px;
        text-align: center;
    }

    .page-usuarios .filter-form button,
    .page-usuarios .btn-add-vendor,
    .page-usuarios .btn-reset-password,
    .page-usuarios .btn-modificar-plataforma,
    .page-usuarios .btn-reporte-comisiones {
        width: 100%;
    }

    .page-usuarios .total-general-comisiones span {
        font-size: 28px;
    }

    .page-usuarios .vendedor-comision-item {
        padding: 14px;
    }

    .page-usuarios .btn-pagar-todas,
    .page-usuarios .btn-detalle-comision {
        width: 100%;
        margin-top: 8px;
    }

    .page-usuarios .comision-detalles-list li {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-usuarios .btn-pagar-individual {
        width: 100%;
        margin-top: 6px;
    }

    .page-usuarios .scroll-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .page-usuarios .vendors-table,
    .page-usuarios .configuracion-plataformas-table {
        min-width: 640px;
    }

    .page-usuarios .cuentas-table {
        min-width: 980px;
    }

    .page-usuarios .btn-asignar,
    .page-usuarios .btn-pagar,
    .page-usuarios .btn-modificar-comision {
        width: 100%;
        margin: 4px 0;
    }
}

/* Celular chico */
@media (max-width: 480px) {
    .page-usuarios .admin-main-content {
        padding: 12px;
    }

    .page-usuarios .main-title {
        font-size: 21px;
        letter-spacing: .04em;
    }

    .page-usuarios .filter-section,
    .page-usuarios .comisiones-section,
    .page-usuarios .add-vendor-section,
    .page-usuarios .vendors-list-section,
    .page-usuarios .reset-password-section,
    .page-usuarios .configuracion-plataformas-section,
    .page-usuarios .modificar-plataforma-section,
    .page-usuarios .cuentas-section {
        padding: 14px;
    }

    .page-usuarios input,
    .page-usuarios select {
        font-size: 13px;
    }

    .page-usuarios .modal-content {
        width: 94%;
        padding: 20px;
    }
}




/* ==================================================
   FIX CELULAR: COMISIONES PENDIENTES USUARIOS
================================================== */

@media (max-width: 760px) {

    .page-usuarios .comisiones-section {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .page-usuarios .comisiones-resumen-list {
        width: 100%;
        max-width: 100%;
    }

    .page-usuarios .vendedor-comision-item {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .page-usuarios .vendedor-info-button {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
        width: 100%;
        max-width: 100%;
    }

    .page-usuarios .vendedor-info-button span {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        text-align: center;
    }

    .page-usuarios .total-comision {
        display: block;
        width: 100%;
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255,209,102,.12);
        border: 1px solid rgba(255,209,102,.28);
        text-align: center;
        font-size: 15px;
        box-sizing: border-box;
    }

    .page-usuarios .vendedor-comision-item form {
        width: 100%;
        max-width: 100%;
        display: block;
    }

    .page-usuarios .btn-pagar-todas,
    .page-usuarios .btn-detalle-comision {
        display: flex;
        width: 100%;
        max-width: 100%;
        min-height: 42px;
        margin: 8px 0 0 0 !important;
        padding: 0 10px;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }

    .page-usuarios .comision-detalles-list {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }

    .page-usuarios .comision-detalles-list ul,
    .page-usuarios .comision-detalles-list li {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-usuarios .comision-detalles-list li {
        display: grid;
        grid-template-columns: 1fr;
        gap: 6px;
        overflow: hidden;
    }

    .page-usuarios .detalle-plataforma,
    .page-usuarios .detalle-info,
    .page-usuarios .detalle-cliente,
    .page-usuarios .detalle-monto,
    .page-usuarios .detalle-fecha {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-wrap: anywhere;
        word-break: break-word;
        white-space: normal;
        text-align: center;
    }

    .page-usuarios .btn-pagar-individual {
        display: flex;
        width: 100%;
        max-width: 100%;
        margin: 8px 0 0 0 !important;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
    }
}





/* ==================================================
   FIX GLOBAL CELULAR USUARIOS - MISMO ANCHO QUE MENÚ
================================================== */

@media (max-width: 760px) {

    .page-usuarios .admin-main-content {
        width: 100%;
        max-width: 100vw;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-usuarios .page-content-two-col,
    .page-usuarios .left-column,
    .page-usuarios .right-column {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-usuarios .filter-section,
    .page-usuarios .comisiones-section,
    .page-usuarios .add-vendor-section,
    .page-usuarios .vendors-list-section,
    .page-usuarios .reset-password-section,
    .page-usuarios .configuracion-plataformas-section,
    .page-usuarios .modificar-plataforma-section,
    .page-usuarios .cuentas-section {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        padding: 14px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-usuarios .comisiones-resumen-list,
    .page-usuarios .vendedor-comision-item,
    .page-usuarios .vendedor-info-button,
    .page-usuarios .comision-detalles-list,
    .page-usuarios .comision-detalles-list ul,
    .page-usuarios .comision-detalles-list li {
        width: 100%;
        max-width: 100%;
        min-width: 0 !important;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-usuarios .vendedor-info-button {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .page-usuarios .vendedor-info-button span,
    .page-usuarios .detalle-plataforma,
    .page-usuarios .detalle-info,
    .page-usuarios .detalle-cliente,
    .page-usuarios .detalle-monto,
    .page-usuarios .detalle-fecha {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal !important;
        word-break: break-word;
        overflow-wrap: anywhere;
        text-align: center;
        box-sizing: border-box;
    }

    .page-usuarios .total-comision {
        padding: 8px 10px;
        border-radius: 12px;
        background: rgba(255,209,102,.12);
        border: 1px solid rgba(255,209,102,.28);
    }

    .page-usuarios .vendedor-comision-item form {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        display: block;
    }

    .page-usuarios .btn-pagar-todas,
    .page-usuarios .btn-detalle-comision,
    .page-usuarios .btn-pagar-individual,
    .page-usuarios .btn-reporte-comisiones,
    .page-usuarios .btn-filter,
    .page-usuarios .btn-clear,
    .page-usuarios .btn-add-vendor,
    .page-usuarios .btn-reset-password,
    .page-usuarios .btn-modificar-plataforma {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box;
        white-space: normal;
        text-align: center;
    }

    .page-usuarios input,
    .page-usuarios select {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .page-usuarios .scroll-container {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        box-sizing: border-box;
    }

    .page-usuarios .total-general-comisiones {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-usuarios .total-general-comisiones span {
        font-size: clamp(22px, 8vw, 30px);
        overflow-wrap: anywhere;
    }
}





/* ==========================================
   CUENTAS VENCIDAS
========================================== */

.btn-action-custom{
    display:flex;
    align-items:center;
    justify-content:center;
    width:38px;
    height:38px;
    border:none;
    border-radius:8px;
    color:#fff;
    cursor:pointer;
    transition:.3s;
    text-decoration:none;
}

.btn-action-custom:hover{
    transform:translateY(-2px);
}

.btn-go-maestra{
    background:#6c5ce7;
}

.btn-quick-edit{
    background:#f39c12;
}
.bulk-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    justify-content:flex-end;
    margin-bottom:15px;
}

.bulk-action-btn{
    padding:10px 15px;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-weight:600;
}
@media(max-width:768px){

    .admin-main-content{
        width:100%;
        padding:15px;
    }

    .bulk-actions{
        flex-direction:column;
    }

    .bulk-action-btn{
        width:100%;
    }

    .table-container{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    #cuentasTable{
        min-width:1100px;
    }
}





/* ==================================================
   CUENTAS VENCIDAS
================================================== */

body.page-cuentas-vencidas {
    background:
        radial-gradient(circle at 14% 12%, rgba(255,48,79,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-cuentas-vencidas .main-title {
    color: var(--red);
    border-color: rgba(255,48,79,.42);
    background:
        linear-gradient(90deg, rgba(255,48,79,.18), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 22px rgba(255,48,79,.38);
}

.page-cuentas-vencidas .main-title::before {
    content: "⚠";
    color: var(--yellow);
}

.page-cuentas-vencidas .bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-cuentas-vencidas .bulk-action-btn {
    min-height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-cuentas-vencidas .bulk-action-btn.danger {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-cuentas-vencidas .acciones-rapidas {
    display: flex;
    gap: 7px;
    justify-content: center;
    align-items: center;
}

.page-cuentas-vencidas .btn-action-custom {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 11px;
    color: white;
    cursor: pointer;
    text-decoration: none;
    transition: .22s;
}

.page-cuentas-vencidas .btn-action-custom:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.08);
}

.page-cuentas-vencidas .btn-go-maestra {
    background: linear-gradient(135deg, #6c5ce7, #341f97);
}

.page-cuentas-vencidas .btn-quick-edit {
    background: linear-gradient(135deg, var(--yellow), var(--orange));
    color: #1b1000;
}

.page-cuentas-vencidas .btn-renew-vencida {
    background: linear-gradient(135deg, #00d2ff, #28a745);
}

/* Ajuste celular para que no tengas que hacer zoom */
@media (max-width: 768px) {
    .page-cuentas-vencidas .admin-main-content {
        width: 100%;
        max-width: 100vw;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-cuentas-vencidas .global-search-mobile,
    .page-cuentas-vencidas .bulk-actions,
    .page-cuentas-vencidas .table-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-vencidas .bulk-actions {
        flex-direction: column;
    }

    .page-cuentas-vencidas .bulk-action-btn {
        width: 100%;
    }

    .page-cuentas-vencidas #cuentasTable,
    .page-cuentas-vencidas #cuentasTable tbody,
    .page-cuentas-vencidas #cuentasTable tr,
    .page-cuentas-vencidas #cuentasTable td {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-vencidas #cuentasTable td {
        grid-template-columns: 115px minmax(0, 1fr);
    }

    .page-cuentas-vencidas .copy-container,
    .page-cuentas-vencidas .copy-text {
        max-width: 100%;
        min-width: 0;
    }

    .page-cuentas-vencidas .copy-text {
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-vencidas .acciones-rapidas {
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .page-cuentas-vencidas .btn-action-custom {
        width: 100%;
    }
}





/* ==================================================
   CUENTAS DISPONIBLES
================================================== */

body.page-cuentas-disponibles{
    background:
    radial-gradient(circle at 10% 10%, rgba(0,255,136,.12), transparent 25%),
    radial-gradient(circle at 90% 90%, rgba(0,217,255,.08), transparent 30%),
    linear-gradient(135deg,#020406,#08111a 45%,#020406);
}

.page-cuentas-disponibles .main-title{
    color:var(--green);
    border-color:rgba(0,255,136,.35);
    background:
    linear-gradient(90deg,rgba(0,255,136,.12),rgba(0,217,255,.05)),
    rgba(8,16,25,.92);
}

.page-cuentas-disponibles .main-title::before{
    content:"✅";
}

.page-cuentas-disponibles .filter-input{
    width:100%;
    padding:8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:#fff;
    font-size:.85rem;
}

.page-cuentas-disponibles .copy-container{
    display:flex;
    align-items:center;
    gap:6px;
}

.page-cuentas-disponibles .copy-button{
    border:none;
    background:none;
    color:var(--cyan);
    cursor:pointer;
    font-size:1rem;
}

.page-cuentas-disponibles .copy-button:hover{
    color:var(--green);
}

.page-cuentas-disponibles .copyable-text-wrapper{
    text-decoration:none;
    color:inherit;
}

.page-cuentas-disponibles .acciones-celda{
    display:flex;
    justify-content:center;
    gap:6px;
}

.page-cuentas-disponibles .edit-btn,
.page-cuentas-disponibles .delete-btn{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    color:white;
    text-decoration:none;
    transition:.25s;
}

.page-cuentas-disponibles .edit-btn{
    background:#007bff;
}

.page-cuentas-disponibles .delete-btn{
    background:#dc3545;
}

.page-cuentas-disponibles .edit-btn:hover,
.page-cuentas-disponibles .delete-btn:hover{
    transform:translateY(-2px);
}

.page-cuentas-disponibles .pagado{
    color:#00ff88;
    font-weight:700;
}

.page-cuentas-disponibles .disponible{
    color:#00d9ff;
    font-weight:700;
}

.page-cuentas-disponibles .debe{
    color:#ff304f;
    font-weight:700;
}

.page-cuentas-disponibles .vencida{
    color:#ffae00;
    font-weight:700;
}

.page-cuentas-disponibles .le-quedan.normal{
    color:#00ff88;
    font-weight:700;
}

.page-cuentas-disponibles .le-quedan.advertencia{
    color:#ffae00;
    font-weight:700;
}

.page-cuentas-disponibles .le-quedan.critico{
    color:#ff304f;
    font-weight:700;
}

.page-cuentas-disponibles .vencido{
    color:#ff304f;
    font-weight:700;
}






@media(max-width:768px){

    .page-cuentas-disponibles .admin-main-content{
        padding:12px;
        width:100%;
        max-width:100vw;
    }

    .page-cuentas-disponibles .table-container{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .page-cuentas-disponibles #cuentasDisponiblesTable{
        min-width:1200px;
    }

    .page-cuentas-disponibles .filter-input{
        min-width:90px;
    }
}






/* ==================================================
   CUENTAS POR PAGAR
================================================== */

body.page-cuentas-deuda{
    background:
    radial-gradient(circle at 10% 10%, rgba(255,174,0,.12), transparent 25%),
    radial-gradient(circle at 90% 90%, rgba(255,48,79,.08), transparent 30%),
    linear-gradient(135deg,#020406,#08111a 45%,#020406);
}

.page-cuentas-deuda .main-title{
    color:#ffae00;
    border-color:rgba(255,174,0,.35);
    background:
    linear-gradient(
        90deg,
        rgba(255,174,0,.12),
        rgba(255,48,79,.05)
    ),
    rgba(8,16,25,.92);
}

.page-cuentas-deuda .main-title::before{
    content:"💰";
}

.page-cuentas-deuda .filter-input{
    width:100%;
    padding:8px;
    border-radius:8px;
    border:1px solid rgba(255,255,255,.12);
    background:rgba(255,255,255,.04);
    color:white;
}

.page-cuentas-deuda .copy-container{
    display:flex;
    align-items:center;
    gap:6px;
}

.page-cuentas-deuda .copy-button{
    background:none;
    border:none;
    cursor:pointer;
    color:var(--cyan);
}

.page-cuentas-deuda .copy-button:hover{
    color:#ffae00;
}

.page-cuentas-deuda .debe{
    color:#ff304f;
    font-weight:700;
}

.page-cuentas-deuda .pagado{
    color:#00ff88;
    font-weight:700;
}

.page-cuentas-deuda .vencida{
    color:#ffae00;
    font-weight:700;
}

.page-cuentas-deuda .disponible{
    color:#00d9ff;
    font-weight:700;
}

.page-cuentas-deuda .activo-texto{
    color:#00ff88;
    font-weight:700;
}

.page-cuentas-deuda .pausada-texto{
    color:#ffae00;
    font-weight:700;
}

.page-cuentas-deuda .paid-btn{
    background:#28a745;
    color:white;
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:8px;
    text-decoration:none;
    transition:.25s;
}

.page-cuentas-deuda .paid-btn:hover{
    transform:translateY(-2px);
}

.page-cuentas-deuda .clear-filters-btn{
    margin-top:15px;
}





@media(max-width:768px){

    .page-cuentas-deuda .admin-main-content{
        padding:12px;
        width:100%;
        max-width:100vw;
    }

    .page-cuentas-deuda .table-container{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .page-cuentas-deuda #cuentasTable{
        min-width:1400px;
    }

}





/* ==================================================
   CUENTAS DEUDA - CELULAR AJUSTADO AL ANCHO DEL MENÚ
================================================== */

@media (max-width: 768px) {

    .page-cuentas-deuda .admin-main-content {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-cuentas-deuda .table-container {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-cuentas-deuda #cuentasTable,
    .page-cuentas-deuda #cuentasTable thead,
    .page-cuentas-deuda #cuentasTable tbody,
    .page-cuentas-deuda #cuentasTable tr,
    .page-cuentas-deuda #cuentasTable td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-deuda #cuentasTable thead {
        display: none;
    }

    .page-cuentas-deuda #cuentasTable tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(255,174,0,.24);
        box-shadow: 0 10px 25px rgba(0,0,0,.30);
        overflow: hidden;
    }

    .page-cuentas-deuda #cuentasTable td {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-deuda #cuentasTable td:last-child {
        border-bottom: none;
    }

    .page-cuentas-deuda #cuentasTable td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .05em;
    }

    .page-cuentas-deuda .copy-container,
    .page-cuentas-deuda .copy-text {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-deuda .acciones-celda {
        display: grid !important;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .page-cuentas-deuda .paid-btn {
        width: 100%;
    }

    .page-cuentas-deuda .filter-buttons,
    .page-cuentas-deuda .clear-filters-btn {
        width: 100%;
    }
}




/* ==================================================
   CUENTAS ELIMINADAS / PAPELERA
================================================== */

body.page-cuentas-eliminadas {
    background:
        radial-gradient(circle at 14% 12%, rgba(255,48,79,.16), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-cuentas-eliminadas .main-title {
    color: var(--red);
    border-color: rgba(255,48,79,.42);
    background:
        linear-gradient(90deg, rgba(255,48,79,.18), rgba(255,209,102,.07)),
        rgba(8,16,25,.9);
    text-shadow: 0 0 22px rgba(255,48,79,.38);
}

.page-cuentas-eliminadas .main-title::before {
    content: "🗑";
    color: var(--yellow);
}

.page-cuentas-eliminadas .bulk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-end;
    margin-bottom: 16px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(255,48,79,.25);
    box-shadow: var(--shadow);
}

.page-cuentas-eliminadas .bulk-action-btn {
    min-height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.page-cuentas-eliminadas #delete-selected-btn {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-cuentas-eliminadas .precio-venta {
    color: var(--green);
    font-weight: 700;
}

.page-cuentas-eliminadas .precio-compra {
    color: var(--yellow);
    font-weight: 700;
}

.page-cuentas-eliminadas .comentarios span {
    color: var(--red);
    font-weight: 800;
    letter-spacing: .06em;
}

.page-cuentas-eliminadas .acciones-celda {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.page-cuentas-eliminadas .restore-btn,
.page-cuentas-eliminadas .permanent-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 11px;
    text-decoration: none;
    transition: .22s;
    font-weight: 700;
}

.page-cuentas-eliminadas .restore-btn {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-cuentas-eliminadas .permanent-delete-btn {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-cuentas-eliminadas .restore-btn:hover,
.page-cuentas-eliminadas .permanent-delete-btn:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.08);
}

.page-cuentas-eliminadas .filter-buttons {
    margin-top: 15px;
}




/* ==================================================
   CUENTAS ELIMINADAS - CELULAR TIPO TARJETA
================================================== */

@media (max-width: 768px) {

    .page-cuentas-eliminadas .admin-main-content {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-cuentas-eliminadas .bulk-actions,
    .page-cuentas-eliminadas .table-container,
    .page-cuentas-eliminadas .filter-buttons {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-eliminadas .bulk-actions {
        flex-direction: column;
    }

    .page-cuentas-eliminadas .bulk-action-btn,
    .page-cuentas-eliminadas .clear-filters-btn {
        width: 100%;
    }

    .page-cuentas-eliminadas .table-container {
        overflow-x: hidden;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable,
    .page-cuentas-eliminadas #cuentasEliminadasTable thead,
    .page-cuentas-eliminadas #cuentasEliminadasTable tbody,
    .page-cuentas-eliminadas #cuentasEliminadasTable tr,
    .page-cuentas-eliminadas #cuentasEliminadasTable td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable thead {
        display: none;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(255,48,79,.25);
        box-shadow: 0 10px 25px rgba(0,0,0,.30);
        overflow: hidden;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable td {
        display: grid;
        grid-template-columns: 118px minmax(0, 1fr);
        gap: 10px;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable td:last-child {
        border-bottom: none;
    }

    .page-cuentas-eliminadas #cuentasEliminadasTable td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-weight: 700;
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: .05em;
    }

    .page-cuentas-eliminadas .copy-container,
    .page-cuentas-eliminadas .copy-text {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .page-cuentas-eliminadas .acciones-celda {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr);
        width: 100%;
    }

    .page-cuentas-eliminadas .restore-btn,
    .page-cuentas-eliminadas .permanent-delete-btn {
        width: 100%;
    }
}




/* ==================================================
   PANEL DE VENCIMIENTOS
================================================== */

body.page-panel-vencimientos{
    background:
        radial-gradient(circle at 15% 10%, rgba(0,255,136,.12), transparent 30%),
        radial-gradient(circle at 85% 85%, rgba(0,212,255,.12), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 50%,#020406);
}

.page-panel-vencimientos .admin-main-content{
    width:100%;
}

.page-panel-vencimientos header{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
}

.page-panel-vencimientos h1{
    margin:0;
    color:var(--cyan);
    font-family:var(--font-title);
    text-transform:uppercase;
    letter-spacing:.08em;
}

.page-panel-vencimientos .premium-card{
    background:rgba(8,16,25,.92);
    border:1px solid rgba(0,212,255,.18);
    border-radius:18px;
    padding:16px;
    margin-bottom:18px;
    box-shadow:var(--shadow);
}

.page-panel-vencimientos .neo-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:42px;
    padding:0 14px;
    border-radius:12px;
    text-decoration:none;
    border:none;
    cursor:pointer;
    font-family:var(--font-title);
    font-weight:700;
    letter-spacing:.04em;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    color:#00140b;
}

.page-panel-vencimientos .filter-input{
    width:100%;
    min-height:42px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,.08);
    background:rgba(255,255,255,.04);
    color:white;
}

.page-panel-vencimientos table{
    width:100%;
    border-collapse:collapse;
}

.page-panel-vencimientos th{
    background:rgba(0,212,255,.08);
    color:var(--cyan);
    font-size:.78rem;
}

.page-panel-vencimientos td,
.page-panel-vencimientos th{
    padding:10px;
    border-bottom:1px solid rgba(255,255,255,.05);
}

.page-panel-vencimientos .premium-input{
    background:#0f1722;
    color:white;
    border:1px solid rgba(255,255,255,.1);
    border-radius:8px;
    padding:8px;
}

.page-panel-vencimientos .status-badge{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:30px;
    font-size:.75rem;
    font-weight:700;
}

.page-panel-vencimientos .status-excelente{
    background:rgba(0,255,136,.12);
    color:var(--green);
}

.page-panel-vencimientos .status-vencido{
    background:rgba(255,48,79,.12);
    color:var(--red);
}

.page-panel-vencimientos .status-activo{
    background:rgba(255,209,102,.12);
    color:var(--yellow);
}

.page-panel-vencimientos .obs-badge{
    background:rgba(255,48,79,.08);
    color:var(--red);
    border:1px solid rgba(255,48,79,.2);
    padding:4px 8px;
    border-radius:8px;
    font-size:.7rem;
    font-weight:700;
}

.page-panel-vencimientos .toast-notif{
    border-radius:50px;
}

/* ==================================================
   CELULAR
================================================== */

@media(max-width:768px){

    .page-panel-vencimientos .admin-main-content{
        padding:12px;
    }

    .page-panel-vencimientos header{
        flex-direction:column;
        align-items:stretch;
    }

    .page-panel-vencimientos header div{
        display:grid !important;
        grid-template-columns:1fr;
        gap:10px;
    }

    .page-panel-vencimientos .neo-button{
        width:100%;
    }

    .page-panel-vencimientos table,
    .page-panel-vencimientos thead,
    .page-panel-vencimientos tbody,
    .page-panel-vencimientos tr,
    .page-panel-vencimientos td{
        display:block;
        width:100%;
    }

    .page-panel-vencimientos thead{
        display:none;
    }

    .page-panel-vencimientos tr{
        margin-bottom:14px;
        border:1px solid rgba(255,255,255,.08);
        border-radius:16px;
        padding:12px;
        background:rgba(8,16,25,.9);
    }

    .page-panel-vencimientos td{
        display:grid;
        grid-template-columns:110px 1fr;
        gap:10px;
        padding:10px 0;
        border-bottom:1px solid rgba(255,255,255,.05);
    }

    .page-panel-vencimientos td:last-child{
        border-bottom:none;
    }

    .page-panel-vencimientos td::before{
        content:attr(data-label);
        color:var(--cyan);
        font-size:.72rem;
        font-weight:700;
        text-transform:uppercase;
    }
}





.page-panel-vencimientos .panel-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:15px;
    flex-wrap:wrap;
    margin-bottom:20px;
}

.page-panel-vencimientos .panel-header h1{
    margin:0;
}



/* ==================================================
   PANEL VENCIMIENTOS - MODAL NUEVO VENCIMIENTO
================================================== */

.page-panel-vencimientos #modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(8px);
}

.page-panel-vencimientos #modal-confirm {
    width: min(380px, 100%);
    padding: 26px;
    border-radius: 24px;
    text-align: center;
    background:
        linear-gradient(180deg, rgba(16,30,43,.98), rgba(5,10,16,.99));
    border: 1px solid rgba(0,217,255,.35);
    box-shadow:
        0 0 35px rgba(0,217,255,.22),
        0 20px 60px rgba(0,0,0,.55);
}

.page-panel-vencimientos #modal-confirm h3 {
    color: var(--cyan) !important;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-panel-vencimientos #modal-confirm p {
    color: var(--muted) !important;
}

.page-panel-vencimientos #fecha_modal {
    width: 100% !important;
    height: 48px !important;
    margin: 0 0 15px !important;
}

.page-panel-vencimientos #btn-save-modal {
    width: 100% !important;
    height: 48px !important;
}

.page-panel-vencimientos #modal-confirm button[onclick="cerrarModal()"] {
    width: 100%;
    margin-top: 16px !important;
    color: var(--muted) !important;
}




/* ==================================================
   PANEL VENCIMIENTOS - BOTON OK
================================================== */

.page-panel-vencimientos .btn-ok{
    display:none;
    padding:8px 12px;
    border:none;
    border-radius:8px;
    background:#00d9ff;
    color:#001018;
    font-weight:700;
    cursor:pointer;
    transition:.2s;
}

.page-panel-vencimientos .btn-ok:hover{
    transform:translateY(-1px);
    box-shadow:0 0 10px rgba(0,217,255,.5);
}





.page-panel-vencimientos .panel-vencimientos-table{
    padding:0;
    overflow-x:auto;
}


.page-panel-vencimientos .panel-header-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

@media(max-width:768px){

    .page-panel-vencimientos .panel-header-actions{
        width:100%;
    }

    .page-panel-vencimientos .panel-header-actions a{
        flex:1 1 calc(50% - 10px);
        text-align:center;
    }
}


/* ==================================================
   PANEL VENCIMIENTOS - CORRECCIÓN FINAL
================================================== */

.page-panel-vencimientos {
    --neon-green: var(--green, #00ff88);
    --neon-blue: var(--cyan, #00d4ff);
    --neon-red: var(--red, #ff304f);
}

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

.page-panel-vencimientos .panel-header h1 {
    margin: 0;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 18px rgba(0,255,136,.35);
}

.page-panel-vencimientos .panel-header-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.page-panel-vencimientos .neo-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    border-radius: 12px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-weight: 800;
    font-size: .8rem;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    color: #00140b;
}

.page-panel-vencimientos .neo-button.danger-button {
    background: linear-gradient(135deg, var(--red), #9d1026);
    color: #fff;
}

.page-panel-vencimientos .neo-button.secondary-button {
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(0,217,255,.35);
    color: var(--cyan);
}

.page-panel-vencimientos .search-panel {
    display: flex;
    gap: 10px;
    align-items: center;
}

.page-panel-vencimientos .search-box {
    flex: 1;
    position: relative;
}

.page-panel-vencimientos .filter-input {
    width: 100%;
    min-height: 44px;
    padding: 0 16px 0 40px;
    border-radius: 999px;
    border: 1px solid rgba(0,217,255,.22);
    background: rgba(0,0,0,.35);
    color: #fff;
    box-sizing: border-box;
}

.page-panel-vencimientos .panel-vencimientos-table {
    padding: 0;
    overflow-x: auto;
}

.page-panel-vencimientos .btn-ok {
    display: none;
    padding: 8px 12px;
    border: none;
    border-radius: 8px;
    background: var(--green);
    color: #00140b;
    font-weight: 800;
    cursor: pointer;
    margin-right: 5px;
}

.page-panel-vencimientos .hidden {
    display: none !important;
}

.page-panel-vencimientos #modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(8px);
}

.page-panel-vencimientos #modal-confirm {
    width: min(380px, 100%);
    padding: 26px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(180deg, rgba(16,30,43,.98), rgba(5,10,16,.99));
    border: 1px solid rgba(0,217,255,.35);
    box-shadow: 0 0 35px rgba(0,217,255,.22), 0 20px 60px rgba(0,0,0,.55);
}

.page-panel-vencimientos .toast-notif {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 11000;
    display: none;
    padding: 12px 25px;
    border-radius: 999px;
    background: #111;
    border: 1px solid var(--green);
    color: #fff;
    font-weight: 800;
}

@media (max-width: 768px) {
    .page-panel-vencimientos .panel-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-panel-vencimientos .panel-header-actions {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .page-panel-vencimientos .search-panel {
        flex-direction: column;
        align-items: stretch;
    }

    .page-panel-vencimientos .neo-button {
        width: 100%;
    }

    .page-panel-vencimientos table,
    .page-panel-vencimientos thead,
    .page-panel-vencimientos tbody,
    .page-panel-vencimientos tr,
    .page-panel-vencimientos td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-panel-vencimientos thead {
        display: none;
    }

    .page-panel-vencimientos tr {
        margin-bottom: 14px;
        padding: 12px;
        border-radius: 16px;
        background: rgba(8,16,25,.9);
        border: 1px solid rgba(255,255,255,.08);
    }

    .page-panel-vencimientos td {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        gap: 10px;
        padding: 10px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-panel-vencimientos td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: .72rem;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-panel-vencimientos .col-vencimiento form {
        flex-wrap: wrap;
        justify-content: flex-end !important;
    }

    .page-panel-vencimientos .premium-input,
    .page-panel-vencimientos .msg-permanente {
        width: 100%;
    }
}



.page-panel-vencimientos .modal-cancel-btn {
    margin-top: 16px;
    background: none;
    border: none;
    color: var(--muted);
    cursor: pointer;
}


/* =======================================================
   GENERADOR DE CORREOS
======================================================= */

.page-generador-correos .main{
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:calc(100vh - 40px);
}

.page-generador-correos .card-header{
    width:100%;
    max-width:650px;
    margin:auto;
    background:linear-gradient(
        145deg,
        rgba(8,12,18,.96),
        rgba(16,26,38,.98)
    );
    border:1px solid rgba(0,255,255,.15);
    border-radius:20px;
    padding:35px;
    text-align:center;
    box-shadow:
    0 0 30px rgba(0,255,255,.12),
    inset 0 0 15px rgba(0,255,255,.05);
}

.page-generador-correos h1{
    font-size:2rem;
    margin-bottom:10px;
}

.page-generador-correos h1 span{
    color:var(--cyan);
}

.page-generador-correos .btn-group{
    display:flex;
    gap:15px;
    margin-top:25px;
}

.page-generador-correos .btn-premium,
.page-generador-correos .btn-reset{
    flex:1;
    border:none;
    border-radius:12px;
    padding:14px;
    font-weight:700;
    cursor:pointer;
    transition:.3s;
}

.page-generador-correos .btn-premium{
    background:linear-gradient(135deg,#00d4ff,#0099ff);
    color:#fff;
}

.page-generador-correos .btn-reset{
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.15);
    color:#fff;
}

.page-generador-correos .btn-premium:hover,
.page-generador-correos .btn-reset:hover{
    transform:translateY(-2px);
}

.page-generador-correos .result-container{
    margin-top:25px;
}

.page-generador-correos .email-box{
    background:#09111a;
    border:2px dashed #00d4ff;
    border-radius:12px;
    padding:18px;
    font-size:1.1rem;
    font-weight:700;
    color:#00d4ff;
    cursor:pointer;
    word-break:break-all;
}

.page-generador-correos #copy-toast{
    position:fixed;
    top:20px;
    right:20px;
    background:#00d4ff;
    color:#000;
    padding:12px 18px;
    border-radius:10px;
    z-index:9999;
    display:none;
    font-weight:700;
}

@media(max-width:768px){

    .page-generador-correos .card-header{
        padding:20px;
        width:100%;
        max-width:100%;
    }

    .page-generador-correos .btn-group{
        flex-direction:column;
    }

    .page-generador-correos .email-box{
        font-size:.95rem;
    }

    .page-generador-correos h1{
        font-size:1.5rem;
    }
}



/* ==================================================
   AGREGAR VENTA
================================================== */

body.page-agregar-venta {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,255,136,.13), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-agregar-venta .main-title {
    color: var(--green);
    border-color: rgba(0,255,136,.36);
    background:
        linear-gradient(90deg, rgba(0,255,136,.16), rgba(0,217,255,.07)),
        rgba(8,16,25,.9);
}

.page-agregar-venta .main-title::before {
    content: "💲";
}

.page-agregar-venta .multi-sale-form {
    display: grid;
    gap: 22px;
}

.page-agregar-venta .form-section,
.page-agregar-venta .selected-account-edit-group {
    padding: 22px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-agregar-venta .form-section h3 {
    margin: 0 0 18px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-agregar-venta .form-group,
.page-agregar-venta .form-group-read-only {
    display: grid;
    gap: 7px;
    margin-bottom: 14px;
}

.page-agregar-venta label {
    color: var(--green);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: 13px;
}

.page-agregar-venta input,
.page-agregar-venta select {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-agregar-venta input:focus,
.page-agregar-venta select:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-agregar-venta input[readonly],
.page-agregar-venta input:disabled {
    opacity: .82;
    background: rgba(255,255,255,.04);
}

.page-agregar-venta .available-accounts-list-scroll {
    overflow-x: auto;
    border-radius: 18px;
    border: 1px solid rgba(0,217,255,.16);
    background: rgba(0,0,0,.2);
}

.page-agregar-venta .available-accounts-table {
    width: 100%;
    min-width: 850px;
    border-collapse: collapse;
}

.page-agregar-venta .available-accounts-table th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
}

.page-agregar-venta .available-accounts-table td {
    padding: 12px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.page-agregar-venta .available-accounts-table tr:hover {
    background: rgba(0,217,255,.045);
}

.page-agregar-venta .price-col {
    color: var(--yellow);
    font-family: var(--font-mono);
    font-weight: 700;
}

.page-agregar-venta .selected-account-edit-group {
    margin-bottom: 18px;
}

.page-agregar-venta .account-header-info {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px dashed rgba(255,255,255,.14);
}

.page-agregar-venta .account-platform-logo {
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    padding: 5px;
}

.page-agregar-venta .account-header-info h4 {
    margin: 0;
    color: var(--cyan);
    word-break: break-word;
}

.page-agregar-venta .submit-btn {
    min-height: 54px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-agregar-venta .message-box {
    padding: 14px;
    margin-bottom: 18px;
    border-radius: 16px;
    font-weight: 700;
}

.page-agregar-venta .message-success {
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.35);
}

.page-agregar-venta .message-error {
    background: rgba(255,48,79,.12);
    border: 1px solid rgba(255,48,79,.35);
}

.page-agregar-venta .message-warning {
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.35);
}

.page-agregar-venta .no-results,
.page-agregar-venta .no-results-selected {
    text-align: center;
    color: var(--muted);
    padding: 18px;
}




/* ==================================================
   AGREGAR VENTA - CELULAR
================================================== */

@media (max-width: 768px) {

    .page-agregar-venta .admin-main-content {
        width: 100%;
        max-width: 100%;
        padding: 12px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .page-agregar-venta .form-section,
    .page-agregar-venta .selected-account-edit-group {
        padding: 16px;
        border-radius: 18px;
    }

    .page-agregar-venta .available-accounts-list-scroll {
        overflow-x: hidden;
    }

    .page-agregar-venta .available-accounts-table,
    .page-agregar-venta .available-accounts-table thead,
    .page-agregar-venta .available-accounts-table tbody,
    .page-agregar-venta .available-accounts-table tr,
    .page-agregar-venta .available-accounts-table td {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .page-agregar-venta .available-accounts-table {
        min-width: 0;
    }

    .page-agregar-venta .available-accounts-table thead {
        display: none;
    }

    .page-agregar-venta .available-accounts-table tr {
        margin-bottom: 13px;
        padding: 13px;
        border-radius: 16px;
        background: rgba(8,16,25,.9);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-agregar-venta .available-accounts-table td {
        display: grid;
        grid-template-columns: 115px minmax(0, 1fr);
        gap: 10px;
        padding: 9px 0;
        border-bottom: 1px solid rgba(255,255,255,.06);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-agregar-venta .available-accounts-table td:last-child {
        border-bottom: none;
    }

    .page-agregar-venta .available-accounts-table td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-agregar-venta .account-header-info {
        align-items: flex-start;
    }

    .page-agregar-venta .submit-btn {
        width: 100%;
    }
}


.page-agregar-venta .venta-filter-box{
    position:relative;
    margin-bottom:14px;
}

.page-agregar-venta .venta-filter-box i{
    position:absolute;
    left:14px;
    top:50%;
    transform:translateY(-50%);
    color:var(--cyan);
}

.page-agregar-venta .venta-filter-box input{
    padding-left:42px;
}



/* Checkbox selector de cuentas */

.page-agregar-venta .account-checkbox{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    cursor:pointer;
    transform:none !important;
}

.page-agregar-venta #select_all_accounts{
    width:18px !important;
    height:18px !important;
    min-width:18px !important;
    min-height:18px !important;
    cursor:pointer;
    transform:none !important;
}



@media(max-width:768px){

    .page-agregar-venta .account-checkbox,
    .page-agregar-venta #select_all_accounts{
        width:16px !important;
        height:16px !important;
        min-width:16px !important;
        min-height:16px !important;
    }

}

.page-agregar-venta .available-accounts-table td[data-label="Elegir"]{
    width:40px;
    text-align:center;
}

/* ==================================================
   ESTADISTICAS
================================================== */

body.page-estadisticas{
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
}

.page-estadisticas .main-title{
    color:var(--cyan);
}

.page-estadisticas .main-title::before{
    content:"📊";
}

.page-estadisticas .charts-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(360px,1fr));
    gap:22px;
    margin-top:22px;
}

.page-estadisticas .chart-card{
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.22);
    border-radius:22px;
    padding:22px;
    box-shadow:var(--shadow);
}

.page-estadisticas .chart-card h3{
    margin:0 0 18px;
    color:var(--cyan);
    text-transform:uppercase;
    letter-spacing:.07em;
    display:flex;
    gap:10px;
    align-items:center;
}

.page-estadisticas canvas{
    max-width:100%;
}

@media(max-width:768px){
    .page-estadisticas .admin-main-content{
        padding:12px;
    }

    .page-estadisticas .charts-grid{
        grid-template-columns:1fr;
    }

    .page-estadisticas .chart-card{
        padding:16px;
        border-radius:18px;
    }
}


/* ==================================================
   CONVERSOR DE DIVISAS
================================================== */

body.page-conversor{
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
}

.page-conversor .conversor-card{
    width:100%;
    max-width:680px;
    margin:30px auto;
    padding:32px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.24);
    box-shadow:var(--shadow);
    text-align:center;
}

.page-conversor h1{
    color:var(--cyan);
    font-size:2.1rem;
    margin-bottom:8px;
    text-transform:uppercase;
}

.page-conversor .subtitle{
    color:var(--muted);
    margin-bottom:28px;
}

.page-conversor .input-group{
    display:grid;
    grid-template-columns:1fr 220px;
    gap:14px;
    margin-bottom:24px;
}

.page-conversor input,
.page-conversor select{
    width:100%;
    min-height:50px;
    padding:0 14px;
    border-radius:14px;
    border:1px solid rgba(0,217,255,.22);
    background:#050a10;
    color:var(--text);
    font-family:var(--font-mono);
}

.page-conversor input:focus,
.page-conversor select:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

.page-conversor #resultados-automaticos,
.page-conversor #tasas-config{
    margin-top:24px;
    padding-top:22px;
    border-top:1px dashed rgba(255,255,255,.14);
    text-align:left;
}

.page-conversor h2,
.page-conversor h3{
    color:var(--green);
    margin-bottom:16px;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.page-conversor .resultado-item{
    display:flex;
    justify-content:space-between;
    gap:14px;
    padding:15px;
    margin-bottom:12px;
    border-radius:16px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(0,217,255,.18);
}

.page-conversor .resultado-item .label{
    color:var(--muted);
    font-weight:700;
}

.page-conversor .resultado-item .value{
    color:var(--cyan);
    font-family:var(--font-mono);
    font-weight:800;
}

.page-conversor .tasas-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:12px;
}

.page-conversor .tasa-input-container{
    display:grid;
    gap:6px;
}

.page-conversor .tasa-input-container label{
    color:var(--cyan);
    font-weight:700;
    text-align:center;
}

.page-conversor #tasas-config button{
    width:100%;
    min-height:50px;
    margin-top:16px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    font-weight:800;
    text-transform:uppercase;
}

.page-conversor #mensaje-tasas{
    text-align:center;
    margin-top:12px;
    font-weight:700;
}

@media(max-width:768px){
    .page-conversor .admin-main-content{
        padding:12px;
    }

    .page-conversor .conversor-card{
        padding:18px;
        border-radius:18px;
    }

    .page-conversor .input-group,
    .page-conversor .tasas-grid{
        grid-template-columns:1fr;
    }

    .page-conversor .resultado-item{
        flex-direction:column;
        text-align:center;
    }
}


/* ==================================================
   ADMIN CATALOGO
================================================== */

body.page-admin-catalogo {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-admin-catalogo .main-title {
    color: var(--cyan);
}

.page-admin-catalogo .main-title::before {
    content: "📕";
}

.page-admin-catalogo form {
    display: grid;
    gap: 14px;
    padding: 22px;
    margin-bottom: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-admin-catalogo select,
.page-admin-catalogo input,
.page-admin-catalogo textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-admin-catalogo textarea {
    min-height: 140px;
    padding-top: 14px;
    resize: vertical;
}

.page-admin-catalogo select:focus,
.page-admin-catalogo input:focus,
.page-admin-catalogo textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-admin-catalogo button {
    min-height: 50px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-admin-catalogo h3 {
    margin: 26px 0 16px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-admin-catalogo p {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.28);
    color: var(--green);
    font-weight: 700;
}

.page-admin-catalogo table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.18);
    border-radius: 18px;
    overflow: hidden;
}

.page-admin-catalogo th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
}

.page-admin-catalogo td {
    padding: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
    vertical-align: middle;
}

.page-admin-catalogo .catalogo-img {
    width: 90px;
    max-width: 90px;
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    padding: 5px;
}

.page-admin-catalogo .catalogo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-admin-catalogo .catalogo-edit-btn,
.page-admin-catalogo .catalogo-delete-btn,
.page-admin-catalogo .catalogo-back-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
}

.page-admin-catalogo .catalogo-edit-btn {
    color: #00140b;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.page-admin-catalogo .catalogo-delete-btn {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
}

.page-admin-catalogo .catalogo-back-btn {
    margin-top: 18px;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}



/* ==================================================
   ADMIN CATALOGO - CELULAR
================================================== */

@media (max-width: 768px) {

    .page-admin-catalogo .admin-main-content {
        padding: 12px;
    }

    .page-admin-catalogo form {
        padding: 16px;
        border-radius: 18px;
    }

    .page-admin-catalogo table,
    .page-admin-catalogo thead,
    .page-admin-catalogo tbody,
    .page-admin-catalogo tr,
    .page-admin-catalogo td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-admin-catalogo thead {
        display: none;
    }

    .page-admin-catalogo tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-admin-catalogo td {
        display: grid;
        grid-template-columns: 105px minmax(0,1fr);
        gap: 10px;
        padding: 10px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-admin-catalogo td:last-child {
        border-bottom: none;
    }

    .page-admin-catalogo td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-admin-catalogo .catalogo-actions {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-admin-catalogo .catalogo-edit-btn,
    .page-admin-catalogo .catalogo-delete-btn,
    .page-admin-catalogo .catalogo-back-btn {
        width: 100%;
    }
}


/* =====================================
   BUSCADOR
===================================== */

.catalog-search{
    width:100%;
    max-width:700px;
    margin:20px auto;
    padding:0 15px;
}

.catalog-search input{
    width:100%;
    height:50px;
    border:none;
    border-radius:30px;
    padding:0 20px;
    font-size:16px;
}

/* =====================================
   PRODUCTOS
===================================== */

.producto-card{
    transition:.3s;
}

.producto-card:hover{
    transform:translateY(-5px);
}

/* =====================================
   CARRITO FLOTANTE
===================================== */

.carrito-link{
    position:relative;
}

.carrito-link::after{
    content:attr(data-count);
    position:absolute;
    top:-10px;
    right:-10px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:red;
    color:white;
    display:flex;
    justify-content:center;
    align-items:center;
    font-size:12px;
}

/* =====================================
   MODAL
===================================== */

.modal-content{
    border-radius:20px;
    box-shadow:0 0 30px rgba(0,0,0,.5);
}

/* =====================================
   CELULAR
===================================== */

@media(max-width:768px){

    .catalogo-titulo-header{
        font-size:1.2rem;
    }

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

    .producto{
        width:100%;
    }

    .carrito{
        width:100%;
    }

}




/* ==================================================
   CATALOGO PUBLICO CLIENTES
================================================== */

body.page-catalogo-publico{
    min-height:100vh;
    background:
        radial-gradient(circle at 12% 12%, rgba(0,217,255,.16), transparent 30%),
        radial-gradient(circle at 88% 84%, rgba(0,255,136,.12), transparent 32%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
    color:var(--text);
}

.page-catalogo-publico .header{
    position:sticky;
    top:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 28px;
    background:rgba(5,10,16,.92);
    border-bottom:1px solid rgba(0,217,255,.24);
    backdrop-filter:blur(14px);
    box-shadow:0 10px 30px rgba(0,0,0,.35);
}

.page-catalogo-publico .logo{
    width:82px;
    height:auto;
    filter:drop-shadow(0 0 14px rgba(0,217,255,.45));
}

.page-catalogo-publico .catalogo-titulo-header{
    flex:1;
    margin:0;
    color:var(--cyan);
    text-align:center;
    font-size:clamp(18px,3vw,34px);
    text-transform:uppercase;
    letter-spacing:.08em;
    text-shadow:0 0 18px rgba(0,217,255,.38);
}

.page-catalogo-publico .carrito-link{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    text-decoration:none;
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    font-weight:900;
    letter-spacing:.05em;
}

.page-catalogo-publico .carrito-link::after{
    content:attr(data-count);
    position:absolute;
    top:-8px;
    right:-8px;
    width:24px;
    height:24px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:var(--red);
    color:white;
    font-size:12px;
    box-shadow:0 0 12px rgba(255,48,79,.55);
}

.page-catalogo-publico .catalog-search{
    width:min(760px,92%);
    margin:24px auto 8px;
}

.page-catalogo-publico .catalog-search input{
    width:100%;
    min-height:54px;
    padding:0 20px;
    border-radius:999px;
    border:1px solid rgba(0,217,255,.28);
    background:rgba(5,10,16,.88);
    color:var(--text);
    font-family:var(--font-mono);
    box-shadow:var(--shadow);
}

.page-catalogo-publico .catalogo-container{
    width:min(1280px,94%);
    margin:24px auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:24px;
    align-items:start;
}

.page-catalogo-publico .productos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:22px;
}

.page-catalogo-publico .producto{
    padding:18px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.20);
    box-shadow:var(--shadow);
    text-align:center;
    transition:.25s;
}

.page-catalogo-publico .producto:hover{
    transform:translateY(-5px);
    border-color:rgba(0,255,136,.38);
    box-shadow:0 20px 45px rgba(0,0,0,.5),0 0 24px rgba(0,217,255,.16);
}

.page-catalogo-publico .producto-imagen{
    width:100%;
    max-width:150px;
    height:120px;
    object-fit:contain;
    margin:0 auto 14px;
    display:block;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.05);
}

.page-catalogo-publico .producto-descripcion-corta{
    color:var(--cyan);
    font-size:18px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.page-catalogo-publico .producto-descripcion-larga{
    color:var(--muted);
    white-space:pre-wrap;
    margin:14px 0;
    line-height:1.45;
}

.page-catalogo-publico .producto-agregar,
.page-catalogo-publico .carrito button{
    width:100%;
    min-height:46px;
    border:none;
    border-radius:14px;
    cursor:pointer;
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.page-catalogo-publico .carrito{
    position:sticky;
    top:110px;
    padding:20px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.98),rgba(5,10,16,.99));
    border:1px solid rgba(0,255,136,.24);
    box-shadow:var(--shadow);
}

.page-catalogo-publico .carrito h2{
    margin:0 0 16px;
    color:var(--green);
    text-align:center;
    text-transform:uppercase;
}

.page-catalogo-publico .carrito ul{
    list-style:none;
    padding:0;
    margin:0 0 16px;
    display:grid;
    gap:12px;
}

.page-catalogo-publico .carrito li{
    padding:12px;
    border-radius:16px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(255,255,255,.08);
}

.page-catalogo-publico .carrito li span{
    color:var(--muted);
    font-size:13px;
}

.page-catalogo-publico .carrito p{
    color:var(--yellow);
    font-size:20px;
    font-weight:900;
    text-align:center;
}

.page-catalogo-publico .carrito form button[name="borrar"]{
    margin-top:8px;
    color:white;
    background:linear-gradient(135deg,var(--red),#9d1026);
}

.page-catalogo-publico button[name="limpiar_carrito"]{
    margin-top:10px;
    background:linear-gradient(135deg,var(--red),#9d1026)!important;
    color:white!important;
}

.page-catalogo-publico .footer{
    width:min(1280px,94%);
    margin:20px auto 30px;
    padding:18px;
    border-radius:22px;
    background:rgba(5,10,16,.82);
    border:1px solid rgba(0,217,255,.18);
}

.page-catalogo-publico .footer-left{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
}

.page-catalogo-publico .index-button,
.page-catalogo-publico .facebook-button{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 16px;
    border-radius:999px;
    text-decoration:none;
    color:var(--text);
    background:rgba(255,255,255,.06);
    border:1px solid rgba(0,217,255,.18);
    font-weight:800;
}

.page-catalogo-publico .modal{
    display:none;
    position:fixed;
    inset:0;
    z-index:9999;
    background:rgba(0,0,0,.82);
    backdrop-filter:blur(10px);
    padding:20px;
}

.page-catalogo-publico .modal-content{
    width:min(460px,100%);
    margin:8vh auto;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.98),rgba(5,10,16,.99));
    border:1px solid rgba(0,217,255,.30);
    box-shadow:0 0 40px rgba(0,217,255,.20),0 20px 70px rgba(0,0,0,.65);
}

.page-catalogo-publico .close-btn{
    float:right;
    color:var(--red);
    font-size:32px;
    cursor:pointer;
}

.page-catalogo-publico #modal-title{
    color:var(--cyan);
    text-transform:uppercase;
    letter-spacing:.07em;
}

.page-catalogo-publico .opcion-label{
    display:block;
    padding:13px;
    margin-bottom:10px;
    border-radius:14px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(0,217,255,.18);
    cursor:pointer;
    color:var(--text);
}

.page-catalogo-publico .opcion-label:hover{
    border-color:var(--green);
}

.page-catalogo-publico #precio-final-display{
    color:var(--yellow);
    font-weight:900;
}

@media(max-width:900px){
    .page-catalogo-publico .catalogo-container{
        grid-template-columns:1fr;
    }

    .page-catalogo-publico .carrito{
        position:static;
    }
}

@media(max-width:620px){
    .page-catalogo-publico .header{
        flex-direction:column;
        padding:14px;
    }

    .page-catalogo-publico .carrito-link{
        width:100%;
    }

    .page-catalogo-publico .productos-grid{
        grid-template-columns:1fr;
    }

    .page-catalogo-publico .footer-left{
        display:grid;
        grid-template-columns:1fr;
    }

    .page-catalogo-publico .index-button,
    .page-catalogo-publico .facebook-button{
        width:100%;
    }
}


.page-catalogo-publico .catalogo-container{
    grid-template-columns: minmax(0,1fr);
}

.page-catalogo-publico .carrito{
    position: fixed;
    right: 18px;
    bottom: 18px;
    top: auto;
    width: 340px;
    max-height: 70vh;
    overflow-y: auto;
    z-index: 80;
}

@media(max-width:768px){
    .page-catalogo-publico .carrito{
        position: static;
        width: 100%;
        max-height: none;
    }
}


/* ==================================================
   EDITAR PRODUCTO CATALOGO
================================================== */

body.page-editar-catalogo-producto {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-editar-catalogo-producto .main-title {
    color: var(--cyan);
}

.page-editar-catalogo-producto .main-title::before {
    content: "✏️";
}

.page-editar-catalogo-producto form {
    display: grid;
    gap: 14px;
    max-width: 760px;
    padding: 22px;
    margin-bottom: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-editar-catalogo-producto select,
.page-editar-catalogo-producto input,
.page-editar-catalogo-producto textarea {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-editar-catalogo-producto textarea {
    min-height: 170px;
    padding-top: 14px;
    resize: vertical;
}

.page-editar-catalogo-producto select:focus,
.page-editar-catalogo-producto input:focus,
.page-editar-catalogo-producto textarea:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-editar-catalogo-producto button {
    min-height: 50px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-editar-catalogo-producto p {
    max-width: 760px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.28);
    color: var(--green);
    font-weight: 700;
}

.page-editar-catalogo-producto h3 {
    margin: 24px 0 14px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-editar-catalogo-producto .catalogo-options-btn,
.page-editar-catalogo-producto .catalogo-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    margin-right: 10px;
}

.page-editar-catalogo-producto .catalogo-options-btn {
    color: #00140b;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.page-editar-catalogo-producto .catalogo-back-btn {
    margin-top: 18px;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

@media (max-width: 768px) {
    .page-editar-catalogo-producto .admin-main-content {
        padding: 12px;
    }

    .page-editar-catalogo-producto form {
        max-width: 100%;
        padding: 16px;
        border-radius: 18px;
    }

    .page-editar-catalogo-producto .catalogo-options-btn,
    .page-editar-catalogo-producto .catalogo-back-btn {
        width: 100%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}


/* ==================================================
   GESTIONAR OPCIONES CATALOGO
================================================== */

body.page-gestionar-opciones {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(255,209,102,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-gestionar-opciones .main-title {
    color: var(--cyan);
}

.page-gestionar-opciones .main-title::before {
    content: "⚙️";
}

.page-gestionar-opciones .catalogo-subtitle {
    max-width: 900px;
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 16px;
    color: var(--yellow);
    background: rgba(255,209,102,.10);
    border: 1px solid rgba(255,209,102,.24);
    font-weight: 800;
}

.page-gestionar-opciones h3 {
    margin: 24px 0 14px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-gestionar-opciones .catalogo-options-form {
    display: grid;
    gap: 14px;
    max-width: 900px;
    padding: 22px;
    margin-bottom: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-gestionar-opciones input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-gestionar-opciones input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-gestionar-opciones button {
    min-height: 44px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
}

.page-gestionar-opciones .catalogo-options-form button {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-gestionar-opciones .eliminar-btn {
    color: white;
    background: linear-gradient(135deg, var(--red), #9d1026);
    padding: 0 14px;
}

.page-gestionar-opciones p {
    max-width: 900px;
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(0,255,136,.10);
    border: 1px solid rgba(0,255,136,.28);
    color: var(--green);
    font-weight: 700;
}

.page-gestionar-opciones hr {
    max-width: 900px;
    border: none;
    border-top: 1px dashed rgba(0,217,255,.25);
    margin: 22px 0;
}

.page-gestionar-opciones table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.18);
    border-radius: 18px;
    overflow: hidden;
}

.page-gestionar-opciones th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
}

.page-gestionar-opciones td {
    padding: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
}

.page-gestionar-opciones .catalogo-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.page-gestionar-opciones .catalogo-back-btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 44px;
    margin-top: 18px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

@media (max-width: 768px) {
    .page-gestionar-opciones .admin-main-content {
        padding: 12px;
    }

    .page-gestionar-opciones .catalogo-options-form {
        max-width: 100%;
        padding: 16px;
        border-radius: 18px;
    }

    .page-gestionar-opciones table,
    .page-gestionar-opciones thead,
    .page-gestionar-opciones tbody,
    .page-gestionar-opciones tr,
    .page-gestionar-opciones td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-gestionar-opciones thead {
        display: none;
    }

    .page-gestionar-opciones tr {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-gestionar-opciones td {
        display: grid;
        grid-template-columns: 110px minmax(0,1fr);
        gap: 10px;
        padding: 10px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-gestionar-opciones td:last-child {
        border-bottom: none;
    }

    .page-gestionar-opciones td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-gestionar-opciones .catalogo-actions,
    .page-gestionar-opciones .catalogo-actions form,
    .page-gestionar-opciones .eliminar-btn,
    .page-gestionar-opciones .catalogo-back-btn {
        width: 100%;
    }
}



.page-gestionar-opciones .editar-opcion-btn{
    color:#00140b;
    background:linear-gradient(135deg,var(--yellow),var(--orange));
    padding:0 14px;
}

.page-gestionar-opciones table input{
    min-height:40px;
    font-size:13px;
}

.page-gestionar-opciones .catalogo-actions form{
    display:inline-flex;
}



/* ==================================================
   NUEVA CARGA DE VENCIMIENTOS
================================================== */

body.page-nueva-carga {
    background:
        radial-gradient(circle at 14% 12%, rgba(188,19,254,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.12), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-nueva-carga .nueva-carga-card {
    width: 100%;
    max-width: 1050px;
    margin: 0 auto;
    padding: 28px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-nueva-carga h2 {
    margin: 0 0 24px;
    color: var(--cyan);
    display: flex;
    align-items: center;
    gap: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.page-nueva-carga h2 i {
    color: var(--purple, #bc13fe);
    text-shadow: 0 0 18px rgba(188,19,254,.55);
}

.page-nueva-carga p {
    color: var(--muted);
}

.page-nueva-carga textarea {
    width: 100%;
    min-height: 190px;
    padding: 16px;
    border-radius: 16px;
    border: 1px solid rgba(0,217,255,.22);
    background: rgba(0,0,0,.35);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: 14px;
    resize: vertical;
    box-sizing: border-box;
}

.page-nueva-carga textarea:focus {
    outline: none;
    border-color: #bc13fe;
    box-shadow: 0 0 0 3px rgba(188,19,254,.14);
}

.page-nueva-carga .btn-main {
    width: 100%;
    min-height: 54px;
    margin-top: 18px;
    border: none;
    border-radius: 15px;
    cursor: pointer;
    color: white;
    background: linear-gradient(135deg, #bc13fe, #7000ff);
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    transition: .22s;
}

.page-nueva-carga .btn-main:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(188,19,254,.42);
}

.page-nueva-carga .alert-duplicado {
    padding: 14px 16px;
    margin-bottom: 18px;
    border-radius: 16px;
    color: #ffb3b3;
    background: rgba(255,48,79,.12);
    border: 1px solid rgba(255,48,79,.35);
}

.page-nueva-carga .nueva-carga-table-container {
    width: 100%;
    overflow-x: auto;
    margin-top: 20px;
}

.page-nueva-carga table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 10px;
}

.page-nueva-carga th {
    padding: 12px;
    color: var(--cyan);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .06em;
}

.page-nueva-carga .account-row {
    background: rgba(255,255,255,.035);
    transition: .25s;
}

.page-nueva-carga .account-row td {
    padding: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
    border-bottom: 1px solid rgba(255,255,255,.07);
}

.page-nueva-carga .account-row td:first-child {
    border-left: 1px solid rgba(255,255,255,.07);
    border-radius: 14px 0 0 14px;
}

.page-nueva-carga .account-row td:last-child {
    border-right: 1px solid rgba(255,255,255,.07);
    border-radius: 0 14px 14px 0;
}

.page-nueva-carga .account-row:hover {
    background: rgba(0,217,255,.06);
}

.page-nueva-carga input[type="date"] {
    min-height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.24);
    background: #050a10;
    color: var(--cyan);
    font-family: var(--font-mono);
}

.page-nueva-carga input[type="date"]:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-nueva-carga input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
}

.page-nueva-carga .star-btn {
    font-size: 24px;
    color: rgba(255,255,255,.18);
    cursor: pointer;
    transition: .2s;
}

.page-nueva-carga .star-btn.active {
    color: var(--yellow);
    text-shadow: 0 0 18px rgba(255,209,102,.6);
}

.page-nueva-carga .btn-row-save {
    min-height: 40px;
    padding: 0 14px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--green);
    background: transparent;
    border: 1px solid rgba(0,255,136,.45);
    font-weight: 800;
}

.page-nueva-carga .btn-row-save:hover {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-nueva-carga .baja-badge {
    display: inline-block;
    margin-bottom: 6px;
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--red);
    background: rgba(255,48,79,.12);
    border: 1px solid rgba(255,48,79,.28);
    font-size: 11px;
    font-weight: 900;
}

.page-nueva-carga .correo-label {
    display: block;
    color: white;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.page-nueva-carga .fade-out {
    opacity: 0;
    transform: scale(.95);
    transition: .4s;
}

.page-nueva-carga .row-error {
    box-shadow: inset 0 0 18px rgba(255,48,79,.35);
}

.page-nueva-carga .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}



/* ==================================================
   NUEVA CARGA - CELULAR
================================================== */

@media (max-width: 768px) {
    .page-nueva-carga .admin-main-content {
        padding: 12px;
    }

    .page-nueva-carga .nueva-carga-card {
        padding: 16px;
        border-radius: 18px;
    }

    .page-nueva-carga h2 {
        font-size: 1.1rem;
        align-items: flex-start;
    }

    .page-nueva-carga .nueva-carga-table-container {
        overflow-x: hidden;
    }

    .page-nueva-carga table,
    .page-nueva-carga thead,
    .page-nueva-carga tbody,
    .page-nueva-carga tr,
    .page-nueva-carga td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-nueva-carga thead {
        display: none;
    }

    .page-nueva-carga .account-row {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-nueva-carga .account-row td {
        display: grid;
        grid-template-columns: 110px minmax(0,1fr);
        gap: 10px;
        padding: 10px 0;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .page-nueva-carga .account-row td:first-child,
    .page-nueva-carga .account-row td:last-child {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    .page-nueva-carga .account-row td:last-child {
        border-bottom: none;
    }

    .page-nueva-carga .account-row td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-nueva-carga input[type="date"],
    .page-nueva-carga .btn-row-save {
        width: 100%;
    }
}



/* ==========================================
   SWEETALERT POLICIAL
========================================== */

.swal2-popup{
    background:#08111a !important;
    border:1px solid rgba(0,217,255,.25) !important;
    border-radius:20px !important;
    box-shadow:
        0 0 25px rgba(0,217,255,.15),
        0 15px 40px rgba(0,0,0,.55) !important;
}

.swal2-title{
    color:#00d9ff !important;
    text-transform:uppercase;
    letter-spacing:.08em;
    font-weight:800 !important;
}

.swal2-html-container{
    color:#d7e7f7 !important;
}

.swal2-confirm{
    background:linear-gradient(135deg,#00ff88,#00d9ff)!important;
    color:#00140b!important;
    font-weight:800!important;
    border:none!important;
}

.swal2-cancel{
    background:linear-gradient(135deg,#ff304f,#a70d2a)!important;
    color:white!important;
    font-weight:800!important;
    border:none!important;
}

.swal2-icon.swal2-success{
    border-color:#00ff88!important;
    color:#00ff88!important;
}

.swal2-icon.swal2-error{
    border-color:#ff304f!important;
    color:#ff304f!important;
}

.swal2-icon.swal2-warning{
    border-color:#ffd166!important;
    color:#ffd166!important;
}



/* ==================================================
   EDITAR CLIENTE
================================================== */

body.page-editar-cliente {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-editar-cliente .page-title {
    color: var(--cyan);
}

.page-editar-cliente .page-title::before {
    content: "✍️";
}

.page-editar-cliente .form-container {
    max-width: 720px;
}

.page-editar-cliente .glass-card {
    padding: 24px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-editar-cliente .form-container h2 {
    margin: 0 0 18px;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-editar-cliente .add-form {
    display: grid;
    gap: 13px;
}

.page-editar-cliente label {
    color: var(--cyan);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .06em;
}

.page-editar-cliente input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-editar-cliente input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-editar-cliente .btn-primary {
    min-height: 50px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-editar-cliente .back-button-container {
    margin-top: 20px;
}

.page-editar-cliente .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

@media(max-width:768px){
    .page-editar-cliente .admin-main-content {
        padding: 12px;
    }

    .page-editar-cliente .glass-card {
        padding: 16px;
        border-radius: 18px;
    }

    .page-editar-cliente .btn-secondary {
        width: 100%;
    }
}



.page-streaming .delete-btn{
    transition:.25s;
}

.page-streaming .delete-btn:hover{
    transform:scale(1.08);
    box-shadow:0 0 18px rgba(255,48,79,.45);
}


/* ==================================================
   REPORTE COMISIONES
================================================== */

body.page-reporte-comisiones {
    background:
        radial-gradient(circle at 14% 12%, rgba(0,255,136,.13), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-reporte-comisiones .main-title {
    color: var(--green);
}

.page-reporte-comisiones .main-title::before {
    content: "💰";
}

.page-reporte-comisiones .header-with-back-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 22px;
}

.page-reporte-comisiones .button-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0 16px;
    border-radius: 13px;
    text-decoration: none;
    font-weight: 800;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

.page-reporte-comisiones .filter-section-wrapper,
.page-reporte-comisiones .report-results-wrapper {
    padding: 22px;
    margin-bottom: 22px;
    border-radius: 22px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.22);
    box-shadow: var(--shadow);
}

.page-reporte-comisiones h3 {
    margin: 0 0 18px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-reporte-comisiones .report-filter-form {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 14px;
    align-items: end;
}

.page-reporte-comisiones .report-filter-form div {
    display: grid;
    gap: 7px;
}

.page-reporte-comisiones label {
    color: var(--green);
    font-weight: 800;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: .06em;
}

.page-reporte-comisiones select,
.page-reporte-comisiones input {
    width: 100%;
    min-height: 46px;
    padding: 0 13px;
    border-radius: 12px;
    border: 1px solid rgba(0,217,255,.22);
    background: #050a10;
    color: var(--text);
    font-family: var(--font-mono);
    box-sizing: border-box;
}

.page-reporte-comisiones select:focus,
.page-reporte-comisiones input:focus {
    outline: none;
    border-color: var(--green);
    box-shadow: 0 0 0 3px rgba(0,255,136,.12);
}

.page-reporte-comisiones .button-group {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.page-reporte-comisiones .button-primary,
.page-reporte-comisiones .button-secondary,
.page-reporte-comisiones .toggle-detail-btn {
    min-height: 44px;
    border: none;
    border-radius: 13px;
    cursor: pointer;
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.page-reporte-comisiones .button-primary {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-reporte-comisiones .button-secondary {
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

.page-reporte-comisiones .scroll-container {
    overflow-x: auto;
    border-radius: 18px;
}

.page-reporte-comisiones .report-table,
.page-reporte-comisiones .inner-accounts-table {
    width: 100%;
    border-collapse: collapse;
    background: rgba(5,10,16,.82);
    border: 1px solid rgba(0,217,255,.18);
    overflow: hidden;
}

.page-reporte-comisiones th {
    padding: 13px;
    color: var(--cyan);
    background: rgba(0,217,255,.10);
    text-transform: uppercase;
    font-size: 12px;
}

.page-reporte-comisiones td {
    padding: 13px;
    border-top: 1px solid rgba(255,255,255,.07);
    vertical-align: top;
}

.page-reporte-comisiones .vendor-summary-row td:nth-child(1) {
    color: var(--cyan);
    font-weight: 900;
}

.page-reporte-comisiones .vendor-summary-row td:nth-child(3),
.page-reporte-comisiones .total-comision-final {
    color: var(--green);
    font-weight: 900;
    font-family: var(--font-mono);
}

.page-reporte-comisiones .toggle-detail-btn {
    padding: 0 14px;
    color: #00140b;
    background: linear-gradient(135deg, var(--yellow), var(--orange));
}

.page-reporte-comisiones .hidden-detail-row {
    display: none;
}

.page-reporte-comisiones .detailed-accounts-container {
    padding: 18px;
    border-radius: 18px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(255,255,255,.08);
}

.page-reporte-comisiones .detailed-accounts-container h4 {
    margin: 0 0 14px;
    color: var(--yellow);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-reporte-comisiones .inner-accounts-table td:nth-child(6) {
    color: var(--green);
    font-weight: 900;
    font-family: var(--font-mono);
}

.page-reporte-comisiones .no-results {
    padding: 16px;
    border-radius: 14px;
    color: var(--yellow);
    background: rgba(255,209,102,.10);
    border: 1px solid rgba(255,209,102,.28);
    font-weight: 800;
}



/* ==================================================
   REPORTE COMISIONES - CELULAR
================================================== */

@media (max-width: 768px) {

    .page-reporte-comisiones .admin-main-content {
        padding: 12px;
    }

    .page-reporte-comisiones .header-with-back-btn {
        display: grid;
        grid-template-columns: 1fr;
    }

    .page-reporte-comisiones .button-back {
        width: 100%;
    }

    .page-reporte-comisiones .filter-section-wrapper,
    .page-reporte-comisiones .report-results-wrapper {
        padding: 16px;
        border-radius: 18px;
    }

    .page-reporte-comisiones .report-filter-form {
        grid-template-columns: 1fr;
    }

    .page-reporte-comisiones .scroll-container {
        overflow-x: hidden;
    }

    .page-reporte-comisiones .report-table,
    .page-reporte-comisiones .report-table thead,
    .page-reporte-comisiones .report-table tbody,
    .page-reporte-comisiones .report-table tr,
    .page-reporte-comisiones .report-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-reporte-comisiones .report-table thead {
        display: none;
    }

    .page-reporte-comisiones .vendor-summary-row {
        margin-bottom: 14px;
        padding: 14px;
        border-radius: 18px;
        background: rgba(5,10,16,.86);
        border: 1px solid rgba(0,217,255,.18);
    }

    .page-reporte-comisiones .vendor-summary-row td {
        display: grid;
        grid-template-columns: 125px minmax(0,1fr);
        gap: 10px;
        padding: 10px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.07);
        white-space: normal;
        overflow-wrap: anywhere;
    }

    .page-reporte-comisiones .vendor-summary-row td:last-child {
        border-bottom: none;
    }

    .page-reporte-comisiones .vendor-summary-row td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .page-reporte-comisiones .toggle-detail-btn {
        width: 100%;
    }

    .page-reporte-comisiones .hidden-detail-row {
        display: none !important;
    }

    .page-reporte-comisiones .hidden-detail-row:not(.hidden-detail-row) {
        display: block !important;
    }

    .page-reporte-comisiones .inner-accounts-table,
    .page-reporte-comisiones .inner-accounts-table thead,
    .page-reporte-comisiones .inner-accounts-table tbody,
    .page-reporte-comisiones .inner-accounts-table tr,
    .page-reporte-comisiones .inner-accounts-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .page-reporte-comisiones .inner-accounts-table thead {
        display: none;
    }

    .page-reporte-comisiones .inner-accounts-table tr {
        margin-bottom: 12px;
        padding: 12px;
        border-radius: 16px;
        background: rgba(255,255,255,.035);
        border: 1px solid rgba(255,255,255,.08);
    }

    .page-reporte-comisiones .inner-accounts-table td {
        display: grid;
        grid-template-columns: 105px minmax(0,1fr);
        gap: 10px;
        padding: 9px 0;
        border-top: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
        overflow-wrap: anywhere;
    }

    .page-reporte-comisiones .inner-accounts-table td:last-child {
        border-bottom: none;
    }

    .page-reporte-comisiones .inner-accounts-table td::before {
        content: attr(data-label);
        color: var(--cyan);
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
    }
}


/* ==================================================
   ENVIAR ACTUALIZACION WHATSAPP
================================================== */

body.page-enviar-actualizacion {
    background:
        radial-gradient(circle at 14% 12%, rgba(37,211,102,.15), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.12), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.page-enviar-actualizacion .main-title {
    color: var(--green);
}

.page-enviar-actualizacion .main-title::before {
    content: "🔑";
}

.page-enviar-actualizacion .platform-logo {
    max-width: 150px;
    height: auto;
    display: block;
    margin: 0 auto;
}



/* ==================================================
   WHATSAPP / MENSAJES DE CUENTA
================================================== */

.whatsapp-page-container {
    min-height: 100vh;
    padding: 28px 14px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    background:
        radial-gradient(circle at 14% 12%, rgba(37,211,102,.13), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,217,255,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
}

.whatsapp-content {
    width: min(760px, 100%);
}

.whatsapp-card-container {
    display: grid;
    gap: 18px;
}

.whatsapp-card {
    padding: 22px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(37,211,102,.25);
    box-shadow: var(--shadow);
}

.whatsapp-header {
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 1px dashed rgba(255,255,255,.14);
    text-align: center;
}

.whatsapp-body {
    border-radius: 18px;
    background: rgba(0,0,0,.36);
    border: 1px solid rgba(0,217,255,.16);
    overflow: hidden;
}

.whatsapp-text {
    margin: 0;
    padding: 18px;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 14px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.whatsapp-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 16px;
}

.btn-copy-whatsapp,
.btn-open-whatsapp,
.back-to-gestion-btn {
    min-height: 46px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.btn-copy-whatsapp {
    color: #00140b;
    background: linear-gradient(135deg, var(--cyan), var(--green));
}

.btn-open-whatsapp {
    color: #00140b;
    background: linear-gradient(135deg, #25D366, var(--green));
}

.back-to-gestion-btn {
    margin-top: 18px;
    width: 100%;
    color: var(--cyan);
    border: 1px solid rgba(0,217,255,.28);
    background: rgba(255,255,255,.04);
}

@media(max-width:768px) {
    .whatsapp-page-container {
        padding: 14px;
    }

    .whatsapp-card {
        padding: 16px;
        border-radius: 18px;
    }

    .whatsapp-actions {
        grid-template-columns: 1fr;
    }

    .whatsapp-text {
        font-size: 13px;
    }
}


/* ==================================================
   PANEL VENDEDOR
================================================== */

body.page-vendedor {
    min-height: 100vh;
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.15), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg, #020406, #08111a 48%, #020406);
    color: var(--text);
}

.page-vendedor .seller-layout {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 280px minmax(0,1fr);
}

.page-vendedor .seller-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 22px 16px;
    background:
        linear-gradient(180deg, rgba(5,10,16,.98), rgba(8,16,25,.96));
    border-right: 1px solid rgba(0,217,255,.22);
    box-shadow: 12px 0 35px rgba(0,0,0,.35);
}

.page-vendedor .logo-container {
    text-align: center;
    margin-bottom: 24px;
}

.page-vendedor .logo {
    width: 120px;
    max-width: 80%;
    filter: drop-shadow(0 0 16px rgba(0,217,255,.35));
}

.page-vendedor .seller-sidebar nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.page-vendedor .seller-sidebar nav a {
    display: flex;
    align-items: center;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    text-decoration: none;
    color: var(--text);
    font-weight: 800;
    letter-spacing: .04em;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(0,217,255,.14);
    transition: .22s;
}

.page-vendedor .seller-sidebar nav a:hover {
    transform: translateX(4px);
    color: var(--cyan);
    border-color: rgba(0,217,255,.34);
    box-shadow: 0 0 18px rgba(0,217,255,.12);
}

.page-vendedor .seller-sidebar nav .logout-btn {
    color: white;
    background: linear-gradient(135deg, rgba(255,48,79,.85), rgba(157,16,38,.9));
    border-color: rgba(255,48,79,.35);
}

.page-vendedor .seller-content {
    padding: 28px;
}

.page-vendedor .seller-title {
    margin: 0 0 10px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .08em;
    text-shadow: 0 0 18px rgba(0,217,255,.36);
}

.page-vendedor .seller-content > p {
    margin-bottom: 24px;
    color: var(--muted);
    font-weight: 600;
}

.page-vendedor .seller-commission-summary {
    max-width: 980px;
    padding: 24px;
    border-radius: 24px;
    background:
        linear-gradient(180deg, rgba(16,30,43,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,255,136,.24);
    box-shadow: var(--shadow);
}

.page-vendedor .seller-commission-summary h3 {
    margin: 0 0 18px;
    color: var(--green);
    text-transform: uppercase;
    letter-spacing: .07em;
}

.page-vendedor .seller-commission-summary p {
    color: var(--text);
}

.page-vendedor .seller-commission-summary strong {
    color: var(--yellow);
    font-family: var(--font-mono);
}

.page-vendedor .commission-details-toggle {
    margin: 18px 0;
}

.page-vendedor .toggle-details-btn {
    min-height: 46px;
    padding: 0 16px;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-vendedor .commission-details-list {
    margin-top: 18px;
    padding: 18px;
    border-radius: 18px;
    background: rgba(0,0,0,.28);
    border: 1px solid rgba(0,217,255,.18);
}

.page-vendedor .commission-details-list h4 {
    margin: 0 0 14px;
    color: var(--cyan);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.page-vendedor .commission-details-list ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 14px;
}

.page-vendedor .commission-details-list li {
    display: grid;
    gap: 7px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
}

.page-vendedor .detail-platform {
    color: var(--cyan);
    font-weight: 900;
    text-transform: uppercase;
}

.page-vendedor .detail-info,
.page-vendedor .detail-cliente,
.page-vendedor .detail-fecha {
    color: var(--muted);
    font-size: 13px;
    overflow-wrap: anywhere;
}

.page-vendedor .detail-precio-venta {
    color: var(--yellow);
    font-weight: 800;
}

.page-vendedor .detail-monto {
    color: var(--green);
    font-weight: 900;
}

.page-vendedor .commission-note {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    color: var(--muted) !important;
    background: rgba(255,255,255,.04);
    border: 1px dashed rgba(255,255,255,.12);
}

/* ==================================================
   PANEL VENDEDOR - CELULAR
================================================== */

@media(max-width:768px) {

    .page-vendedor .seller-layout {
        grid-template-columns: 1fr;
    }

    .page-vendedor .seller-sidebar {
        position: relative;
        height: auto;
        border-right: none;
        border-bottom: 1px solid rgba(0,217,255,.22);
    }

    .page-vendedor .seller-sidebar nav ul {
        grid-template-columns: 1fr;
    }

    .page-vendedor .seller-sidebar nav a {
        justify-content: center;
    }

    .page-vendedor .seller-content {
        padding: 14px;
    }

    .page-vendedor .seller-title {
        font-size: 1.4rem;
        text-align: center;
    }

    .page-vendedor .seller-content > p {
        text-align: center;
    }

    .page-vendedor .seller-commission-summary {
        padding: 16px;
        border-radius: 18px;
    }

    .page-vendedor .toggle-details-btn {
        width: 100%;
    }

    .page-vendedor .commission-details-list {
        padding: 12px;
    }
}

/* ==================================================
   VER PRODUCTOS / CUENTAS VENDEDOR
================================================== */

body.page-ver-productos{
    min-height:100vh;
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.14), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
    color:var(--text);
}

/* ADMIN */
.page-ver-productos .admin-products-content .main-title{
    color:var(--cyan);
}

.page-ver-productos .admin-products-content .main-title::before{
    content:"📦";
}

.page-ver-productos .filter-form-admin,
.page-ver-productos .filter-form-seller{
    padding:18px;
    margin-bottom:22px;
    border-radius:20px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.22);
    box-shadow:var(--shadow);
}

.page-ver-productos .filter-group-admin,
.page-ver-productos .filter-group-seller{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:12px;
}

.page-ver-productos .filter-group-admin input,
.page-ver-productos .filter-group-seller input,
.page-ver-productos .filter-input{
    width:100%;
    min-height:44px;
    padding:0 13px;
    border-radius:12px;
    border:1px solid rgba(0,217,255,.22);
    background:#050a10;
    color:var(--text);
    font-family:var(--font-mono);
    box-sizing:border-box;
}

.page-ver-productos .filter-group-admin input:focus,
.page-ver-productos .filter-group-seller input:focus,
.page-ver-productos .filter-input:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

.page-ver-productos .filter-btn,
.page-ver-productos .clear-filter-btn,
.page-ver-productos .back-btn,
.page-ver-productos .btn-back{
    min-height:44px;
    padding:0 14px;
    border:none;
    border-radius:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    cursor:pointer;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.page-ver-productos .filter-btn{
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
}

.page-ver-productos .clear-filter-btn{
    color:#fff;
    background:linear-gradient(135deg,var(--red),#9d1026);
}

.page-ver-productos .table-scroll-container{
    overflow-x:auto;
    border-radius:20px;
    background:rgba(5,10,16,.82);
    border:1px solid rgba(0,217,255,.18);
    box-shadow:var(--shadow);
}

.page-ver-productos .table-products{
    width:100%;
    border-collapse:collapse;
}

.page-ver-productos .table-products th{
    padding:13px;
    background:rgba(0,217,255,.10);
    color:var(--cyan);
    font-size:12px;
    text-transform:uppercase;
}

.page-ver-productos .table-products td{
    padding:13px;
    border-top:1px solid rgba(255,255,255,.07);
    vertical-align:middle;
}

.page-ver-productos .product-info-cell{
    display:flex;
    align-items:center;
    gap:10px;
}

.page-ver-productos .product-icon{
    width:38px;
    height:38px;
    object-fit:contain;
    border-radius:10px;
    padding:4px;
    background:rgba(255,255,255,.06);
}

.page-ver-productos .copyable-cell{
    color:var(--text);
    font-family:var(--font-mono);
    overflow-wrap:anywhere;
}

.page-ver-productos .copy-button{
    margin-left:6px;
    border:none;
    border-radius:9px;
    cursor:pointer;
    color:#00140b;
    background:linear-gradient(135deg,var(--cyan),var(--green));
    padding:6px 8px;
}

.page-ver-productos .actions-admin{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.page-ver-productos .action-btn{
    width:38px;
    height:38px;
    border-radius:11px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:white;
    transition:.22s;
}

.page-ver-productos .edit-btn{
    background:linear-gradient(135deg,var(--yellow),var(--orange));
    color:#00140b;
}

.page-ver-productos .delete-btn{
    background:linear-gradient(135deg,var(--red),#9d1026);
}

.page-ver-productos .action-btn:hover{
    transform:scale(1.07);
}

.page-ver-productos .button-container-admin{
    margin-top:20px;
    display:flex;
    gap:12px;
    flex-wrap:wrap;
}

.page-ver-productos .new-product-btn{
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
}

.page-ver-productos .admin-return-btn,
.page-ver-productos .seller-return-btn{
    color:var(--cyan);
    border:1px solid rgba(0,217,255,.28);
    background:rgba(255,255,255,.04);
}

.page-ver-productos .no-results{
    padding:18px;
    color:var(--yellow);
    text-align:center;
    font-weight:800;
}

/* VENDEDOR */
.page-ver-productos .seller-products-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
}

.page-ver-productos .seller-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    padding:22px 16px;
    background:linear-gradient(180deg,rgba(5,10,16,.98),rgba(8,16,25,.96));
    border-right:1px solid rgba(0,217,255,.22);
    box-shadow:12px 0 35px rgba(0,0,0,.35);
}

.page-ver-productos .seller-sidebar .logo-container{
    text-align:center;
    margin-bottom:24px;
}

.page-ver-productos .seller-sidebar .logo{
    width:120px;
    max-width:80%;
    filter:drop-shadow(0 0 16px rgba(0,217,255,.35));
}

.page-ver-productos .seller-sidebar nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:12px;
}

.page-ver-productos .seller-sidebar nav a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 14px;
    border-radius:14px;
    text-decoration:none;
    color:var(--text);
    font-weight:800;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(0,217,255,.14);
}

.page-ver-productos .seller-sidebar nav a.active,
.page-ver-productos .seller-sidebar nav a:hover{
    color:var(--cyan);
    border-color:rgba(0,217,255,.34);
    box-shadow:0 0 18px rgba(0,217,255,.12);
}

.page-ver-productos .seller-sidebar nav .logout-btn{
    color:#fff;
    background:linear-gradient(135deg,rgba(255,48,79,.85),rgba(157,16,38,.9));
    border-color:rgba(255,48,79,.35);
}

.page-ver-productos .seller-content{
    padding:28px;
}

.page-ver-productos .seller-content .main-title{
    color:var(--cyan);
}

.page-ver-productos .seller-content .main-title::before{
    content:"📦";
}

.page-ver-productos .product-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    gap:20px;
}

.page-ver-productos .product-card{
    padding:20px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.22);
    box-shadow:var(--shadow);
    transition:.22s;
}

.page-ver-productos .product-card:hover{
    transform:translateY(-4px);
    border-color:rgba(0,255,136,.35);
}

.page-ver-productos .product-logo-container{
    text-align:center;
    margin-bottom:16px;
}

.page-ver-productos .product-icon-large{
    width:110px;
    height:90px;
    object-fit:contain;
    padding:10px;
    border-radius:18px;
    background:rgba(255,255,255,.06);
}

.page-ver-productos .product-detail{
    display:grid;
    gap:6px;
    margin:0 0 12px;
    padding-bottom:10px;
    border-bottom:1px solid rgba(255,255,255,.07);
}

.page-ver-productos .product-detail strong{
    color:var(--cyan);
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:.06em;
}

.page-ver-productos .copyable-text{
    color:var(--text);
    font-family:var(--font-mono);
    cursor:pointer;
    overflow-wrap:anywhere;
}

.page-ver-productos .copyable-text:hover{
    color:var(--green);
}

.page-ver-productos .account-status-info{
    margin-top:14px;
    padding:12px;
    border-radius:16px;
    background:rgba(0,0,0,.28);
    border:1px solid rgba(0,217,255,.15);
}

.page-ver-productos .account-status-info p{
    margin:6px 0;
}

.page-ver-productos .days-remaining-status{
    font-weight:900;
}

.page-ver-productos .pausada,
.page-ver-productos .vencido,
.page-ver-productos .le-quedan{
    display:inline-flex;
    padding:6px 10px;
    border-radius:999px;
    font-size:12px;
    font-weight:900;
}

.page-ver-productos .pausada{
    color:#00140b;
    background:var(--yellow);
}

.page-ver-productos .vencido,
.page-ver-productos .critico{
    color:#fff;
    background:var(--red);
}

.page-ver-productos .advertencia{
    color:#00140b;
    background:var(--yellow);
}

.page-ver-productos .normal{
    color:#00140b;
    background:var(--green);
}
/* ==================================================
   VER PRODUCTOS - CELULAR
================================================== */

@media(max-width:768px){

    .page-ver-productos .seller-products-layout{
        grid-template-columns:1fr;
    }

    .page-ver-productos .seller-sidebar{
        position:relative;
        height:auto;
        border-right:none;
        border-bottom:1px solid rgba(0,217,255,.22);
    }

    .page-ver-productos .seller-sidebar nav a{
        justify-content:center;
    }

    .page-ver-productos .seller-content,
    .page-ver-productos .admin-main-content{
        padding:12px;
    }

    .page-ver-productos .filter-group-admin,
    .page-ver-productos .filter-group-seller{
        grid-template-columns:1fr;
    }

    .page-ver-productos .table-scroll-container{
        overflow-x:hidden;
    }

    .page-ver-productos .table-products,
    .page-ver-productos .table-products thead,
    .page-ver-productos .table-products tbody,
    .page-ver-productos .table-products tr,
    .page-ver-productos .table-products td{
        display:block;
        width:100%;
        box-sizing:border-box;
    }

    .page-ver-productos .table-products thead{
        display:none;
    }

    .page-ver-productos .table-products tr{
        margin-bottom:14px;
        padding:14px;
        border-radius:18px;
        background:rgba(5,10,16,.86);
        border:1px solid rgba(0,217,255,.18);
    }

    .page-ver-productos .table-products td{
        display:grid;
        grid-template-columns:110px minmax(0,1fr);
        gap:10px;
        padding:10px 0;
        border-top:none;
        border-bottom:1px solid rgba(255,255,255,.07);
        white-space:normal;
        overflow-wrap:anywhere;
    }

    .page-ver-productos .table-products td:last-child{
        border-bottom:none;
    }

    .page-ver-productos .table-products td::before{
        content:attr(data-label);
        color:var(--cyan);
        font-size:11px;
        font-weight:800;
        text-transform:uppercase;
    }

    .page-ver-productos .actions-admin,
    .page-ver-productos .button-container-admin{
        display:grid;
        grid-template-columns:1fr;
    }

    .page-ver-productos .action-btn{
        width:100%;
        min-height:42px;
    }

    .page-ver-productos .product-grid{
        grid-template-columns:1fr;
    }

    .page-ver-productos .product-card{
        padding:16px;
        border-radius:18px;
    }
}

/* ==================================================
   CAMBIAR CONTRASEÑA VENDEDOR
================================================== */

body.page-cambiar-contrasena{
    min-height:100vh;
    background:
        radial-gradient(circle at 14% 12%, rgba(0,217,255,.15), transparent 28%),
        radial-gradient(circle at 88% 82%, rgba(0,255,136,.10), transparent 30%),
        linear-gradient(135deg,#020406,#08111a 48%,#020406);
    color:var(--text);
}

.page-cambiar-contrasena .change-password-layout{
    min-height:100vh;
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
}

.page-cambiar-contrasena .seller-sidebar{
    position:sticky;
    top:0;
    height:100vh;
    padding:22px 16px;
    background:linear-gradient(180deg,rgba(5,10,16,.98),rgba(8,16,25,.96));
    border-right:1px solid rgba(0,217,255,.22);
    box-shadow:12px 0 35px rgba(0,0,0,.35);
}

.page-cambiar-contrasena .logo-container{
    text-align:center;
    margin-bottom:24px;
}

.page-cambiar-contrasena .logo{
    width:120px;
    max-width:80%;
    filter:drop-shadow(0 0 16px rgba(0,217,255,.35));
}

.page-cambiar-contrasena .seller-sidebar nav ul{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    gap:12px;
}

.page-cambiar-contrasena .seller-sidebar nav a{
    display:flex;
    align-items:center;
    min-height:46px;
    padding:0 14px;
    border-radius:14px;
    text-decoration:none;
    color:var(--text);
    font-weight:800;
    background:rgba(255,255,255,.045);
    border:1px solid rgba(0,217,255,.14);
    transition:.22s;
}

.page-cambiar-contrasena .seller-sidebar nav a.active,
.page-cambiar-contrasena .seller-sidebar nav a:hover{
    color:var(--cyan);
    border-color:rgba(0,217,255,.34);
    box-shadow:0 0 18px rgba(0,217,255,.12);
}

.page-cambiar-contrasena .seller-sidebar nav .logout-btn{
    color:white;
    background:linear-gradient(135deg,rgba(255,48,79,.85),rgba(157,16,38,.9));
    border-color:rgba(255,48,79,.35);
}

.page-cambiar-contrasena .password-panel{
    padding:28px;
}

.page-cambiar-contrasena .password-panel{
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
}

.page-cambiar-contrasena .password-panel > form,
.page-cambiar-contrasena .form-message,
.page-cambiar-contrasena .btn-back{
    max-width:620px;
}

.page-cambiar-contrasena .main-title{
    max-width:620px;
    color:var(--cyan);
}

.page-cambiar-contrasena .main-title::before{
    content:"🔑";
}

.page-cambiar-contrasena form{
    display:grid;
    gap:16px;
    padding:24px;
    border-radius:24px;
    background:linear-gradient(180deg,rgba(16,30,43,.96),rgba(5,10,16,.98));
    border:1px solid rgba(0,217,255,.22);
    box-shadow:var(--shadow);
}

.page-cambiar-contrasena .form-group{
    display:grid;
    gap:8px;
}

.page-cambiar-contrasena label{
    color:var(--green);
    font-weight:900;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.page-cambiar-contrasena input{
    width:100%;
    min-height:48px;
    padding:0 14px;
    border-radius:12px;
    border:1px solid rgba(0,217,255,.22);
    background:#050a10;
    color:var(--text);
    font-family:var(--font-mono);
    box-sizing:border-box;
}

.page-cambiar-contrasena input:focus{
    outline:none;
    border-color:var(--green);
    box-shadow:0 0 0 3px rgba(0,255,136,.12);
}

.page-cambiar-contrasena .submit-btn{
    min-height:52px;
    border:none;
    border-radius:15px;
    cursor:pointer;
    color:#00140b;
    background:linear-gradient(135deg,var(--green),var(--cyan));
    font-family:var(--font-title);
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.07em;
}

.page-cambiar-contrasena .form-message{
    padding:14px 16px;
    border-radius:16px;
    font-weight:800;
}

.page-cambiar-contrasena .form-message.success{
    color:var(--green);
    background:rgba(0,255,136,.10);
    border:1px solid rgba(0,255,136,.30);
}

.page-cambiar-contrasena .form-message.error{
    color:var(--red);
    background:rgba(255,48,79,.10);
    border:1px solid rgba(255,48,79,.30);
}

.page-cambiar-contrasena .btn-back{
    margin-top:20px;
    min-height:44px;
    padding:0 16px;
    border-radius:13px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    font-weight:900;
    color:var(--cyan);
    border:1px solid rgba(0,217,255,.28);
    background:rgba(255,255,255,.04);
}

/* ==================================================
   CAMBIAR CONTRASEÑA - CELULAR
================================================== */

@media(max-width:768px){

    .page-cambiar-contrasena .change-password-layout{
        grid-template-columns:1fr;
    }

    .page-cambiar-contrasena .seller-sidebar{
        position:relative;
        height:auto;
        border-right:none;
        border-bottom:1px solid rgba(0,217,255,.22);
    }

    .page-cambiar-contrasena .seller-sidebar nav a{
        justify-content:center;
    }

    .page-cambiar-contrasena .password-panel{
        padding:14px;
    }

    .page-cambiar-contrasena .main-title{
        text-align:center;
        font-size:1.35rem;
    }

    .page-cambiar-contrasena form{
        padding:16px;
        border-radius:18px;
    }

    .page-cambiar-contrasena .btn-back{
        width:100%;
    }
}

/* ===== GESTIÓN YOUTUBE COMPLETO - CUENTAS VINCULADAS ===== */

.page-youtube .youtube-linked-profiles {
    margin: 12px 0 8px;
}

.page-youtube .youtube-linked-btn {
    width: 100%;
    border: 1px solid rgba(0, 255, 170, 0.35);
    background: linear-gradient(135deg, rgba(0, 255, 170, 0.14), rgba(0, 120, 255, 0.12));
    color: #d9fff4;
    padding: 10px 12px;
    border-radius: 12px;
    font-weight: 800;
    letter-spacing: 0.4px;
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: inset 0 0 18px rgba(0, 255, 170, 0.08), 0 0 18px rgba(0, 255, 170, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.page-youtube .youtube-linked-btn i {
    margin-right: 8px;
    color: #00ffaa;
}

.page-youtube .youtube-linked-btn:hover {
    transform: translateY(-2px);
    border-color: rgba(0, 255, 170, 0.75);
    box-shadow: inset 0 0 22px rgba(0, 255, 170, 0.14), 0 0 26px rgba(0, 255, 170, 0.18);
}

.youtube-linked-modal-list {
    display: grid;
    gap: 10px;
    text-align: left;
}

.youtube-linked-item {
    border: 1px solid rgba(0, 255, 170, 0.25);
    background: rgba(5, 12, 22, 0.92);
    color: #eafff8;
    border-radius: 12px;
    padding: 12px;
    box-shadow: inset 0 0 14px rgba(0, 255, 170, 0.08);
}

.youtube-linked-item strong {
    color: #00ffaa;
}

.youtube-disponible {
    color: #00ff88;
    font-weight: 900;
}

.youtube-cliente {
    color: #45a3ff;
    font-weight: 900;
}

.youtube-linked-empty {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 193, 7, 0.12);
    color: #ffe08a;
    font-weight: 800;
    text-align: center;
}
/* ===== ALERTAS INTELIGENTES - CUENTAS MAESTRAS ===== */

.page-gestion-maestras .fila-requiere-eliminacion {
    background: linear-gradient(90deg, rgba(255, 49, 49, 0.28), rgba(18, 24, 38, 0.96)) !important;
    box-shadow: inset 4px 0 0 #ff3131;
}

.page-gestion-maestras .mini-alerta-eliminar {
    margin-top: 7px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255, 49, 49, 0.16);
    border: 1px solid rgba(255, 49, 49, 0.55);
    color: #ffd6d6;
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.page-gestion-maestras .mini-alerta-eliminar i {
    color: #ff4d4d;
}

.page-gestion-maestras .perfiles-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    padding: 7px 11px;
    border-radius: 999px;
    background: rgba(0, 255, 170, 0.12);
    border: 1px solid rgba(0, 255, 170, 0.45);
    color: #bfffee;
    font-weight: 900;
    text-decoration: none;
}

.page-gestion-maestras .perfiles-link:hover {
    background: rgba(0, 255, 170, 0.22);
    color: #ffffff;
    box-shadow: 0 0 18px rgba(0, 255, 170, 0.25);
}

.page-gestion-maestras .btn-gestionar-mini {
    padding: 6px 8px !important;
    font-size: 12px !important;
    margin-left: 6px !important;
}

.maestra-modal-list {
    display: grid;
    gap: 10px;
    text-align: left;
}

.maestra-modal-item {
    padding: 12px;
    border-radius: 12px;
    background: rgba(8, 15, 27, 0.94);
    border: 1px solid rgba(0, 255, 170, 0.25);
    color: #eafff8;
    box-shadow: inset 0 0 14px rgba(0, 255, 170, 0.08);
}

.maestra-modal-item strong {
    color: #00ffaa;
}
/* ===== CHECKBOX Y ELIMINACIÓN MASIVA - CUENTAS MAESTRAS ===== */

.page-gestion-maestras .check-maestra,
.page-gestion-maestras #checkAllMaestras {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #ff3131;
}

.page-gestion-maestras .bulk-delete-btn {
    border: 1px solid rgba(255, 49, 49, 0.65);
    background: linear-gradient(135deg, rgba(255, 49, 49, 0.25), rgba(80, 0, 0, 0.45));
    color: #ffe1e1;
    padding: 10px 16px;
    border-radius: 12px;
    font-weight: 900;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.page-gestion-maestras .bulk-delete-btn:hover {
    background: linear-gradient(135deg, rgba(255, 49, 49, 0.45), rgba(120, 0, 0, 0.65));
    box-shadow: 0 0 22px rgba(255, 49, 49, 0.28);
}

.page-gestion-maestras .bulk-delete-btn i {
    margin-right: 8px;
}

/* ==================================================
   PANEL CLIENTE - CUENTAS
================================================== */

.cliente-portal-body {
    min-height: 100vh;
    padding: 26px;
}

.cliente-login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

.cliente-login-card {
    width: min(430px, 94vw);
    background: linear-gradient(145deg, rgba(16,25,35,.96), rgba(5,7,10,.98));
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 34px;
    box-shadow: var(--shadow);
}

.cliente-login-badge,
.cliente-chip {
    display: inline-flex;
    padding: 7px 12px;
    border: 1px solid var(--line-strong);
    border-radius: 999px;
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: 1px;
}

.cliente-login-card h1,
.cliente-topbar h1 {
    margin: 14px 0 4px;
    font-size: clamp(2rem, 5vw, 3rem);
    text-transform: uppercase;
}

.cliente-login-card p,
.cliente-topbar p {
    color: var(--muted);
    margin-top: 0;
}

.cliente-login-form {
    display: grid;
    gap: 12px;
    margin-top: 22px;
}

.cliente-login-form label {
    color: var(--cyan);
    text-transform: uppercase;
    font-size: .86rem;
}

.cliente-login-form input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 13px 14px;
    background: rgba(0,0,0,.35);
    color: var(--text);
    outline: none;
}

.cliente-login-form input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(0,217,255,.12);
}

.cliente-login-form button,
.cliente-btn {
    border: 0;
    border-radius: 12px;
    padding: 12px 16px;
    background: linear-gradient(135deg, var(--cyan), var(--green));
    color: #031014;
    font-family: var(--font-title);
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.cliente-alerta.error {
    margin: 18px 0;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,48,79,.14);
    border: 1px solid rgba(255,48,79,.45);
    color: #ff8fa0;
}

.cliente-topbar {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: center;
    margin-bottom: 24px;
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: rgba(11,17,24,.88);
    box-shadow: var(--shadow);
}

.cliente-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
}

.cliente-cuentas-grid {
    display: grid;
    gap: 18px;
}

.cliente-cuenta-card {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    background:
        linear-gradient(145deg, rgba(16,25,35,.96), rgba(5,7,10,.94));
    box-shadow: 0 16px 42px rgba(0,0,0,.42);
}

.cliente-cuenta-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-left: 5px solid var(--green);
    pointer-events: none;
}

.cliente-cuenta-card.critica::before {
    border-left-color: var(--yellow);
}

.cliente-cuenta-card.vencida::before,
.cliente-cuenta-card.eliminada::before {
    border-left-color: var(--red);
}

.cliente-cuenta-head {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: flex-start;
    margin-bottom: 18px;
}

.cliente-plataforma {
    color: var(--cyan);
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: .82rem;
}

.cliente-cuenta-head h2 {
    margin: 6px 0 0;
    font-size: 1.5rem;
    word-break: break-all;
}

.cliente-estado {
    white-space: nowrap;
    border-radius: 999px;
    padding: 8px 12px;
    font-family: var(--font-mono);
    font-size: .82rem;
    color: var(--green);
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.35);
}

.cliente-cuenta-card.critica .cliente-estado {
    color: var(--yellow);
    background: rgba(255,209,102,.12);
    border-color: rgba(255,209,102,.38);
}

.cliente-cuenta-card.vencida .cliente-estado,
.cliente-cuenta-card.eliminada .cliente-estado {
    color: var(--red);
    background: rgba(255,48,79,.12);
    border-color: rgba(255,48,79,.38);
}

.cliente-datos {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

.cliente-datos div {
    padding: 14px;
    border: 1px solid rgba(0,217,255,.16);
    border-radius: 14px;
    background: rgba(0,0,0,.24);
}

.cliente-datos small {
    display: block;
    color: var(--muted);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.cliente-datos strong {
    font-family: var(--font-mono);
    color: var(--text);
    word-break: break-word;
}

.cliente-acciones {
    display: flex;
    gap: 12px;
    margin-top: 18px;
}

.cliente-btn.codigo {
    background: linear-gradient(135deg, var(--blue), var(--cyan));
    color: #fff;
}

.cliente-btn.salir {
    background: rgba(255,48,79,.14);
    color: #ff8fa0;
    border: 1px solid rgba(255,48,79,.4);
}

.cliente-btn.bloqueado {
    background: rgba(255,48,79,.14);
    color: #ff8fa0;
    border: 1px solid rgba(255,48,79,.35);
    cursor: not-allowed;
}

.cliente-reglas {
    position: sticky;
    top: 24px;
    align-self: start;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 22px;
    background: rgba(11,17,24,.9);
    box-shadow: var(--shadow);
}

.cliente-reglas h2 {
    margin-top: 0;
    color: var(--cyan);
    text-transform: uppercase;
}

.cliente-reglas ul {
    padding-left: 18px;
    color: var(--muted);
}

.cliente-reglas li {
    margin-bottom: 12px;
}

.cliente-warning {
    margin-top: 18px;
    padding: 14px;
    border-radius: 14px;
    color: var(--yellow);
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.35);
}

.cliente-empty {
    border: 1px dashed var(--line-strong);
    border-radius: 20px;
    padding: 34px;
    text-align: center;
    background: rgba(11,17,24,.72);
}

@media (max-width: 980px) {
    .cliente-layout {
        grid-template-columns: 1fr;
    }

    .cliente-reglas {
        position: static;
    }

    .cliente-datos {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 620px) {
    .cliente-portal-body {
        padding: 14px;
    }

    .cliente-topbar,
    .cliente-cuenta-head {
        flex-direction: column;
    }

    .cliente-datos {
        grid-template-columns: 1fr;
    }

    .cliente-estado {
        white-space: normal;
    }
}
.codigo-modal {
    position: fixed;
    inset: 0;
    display: none;
    place-items: center;
    z-index: 99999;
    background: rgba(0, 0, 0, .72);
    backdrop-filter: blur(8px);
}

.codigo-modal.activo {
    display: grid;
}

.codigo-modal-card {
    position: relative;
    width: min(430px, 92vw);
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    background: linear-gradient(145deg, rgba(11,17,24,.98), rgba(3,8,13,.98));
    border: 1px solid var(--line-strong);
    box-shadow: 0 25px 80px rgba(0,0,0,.65);
}

.codigo-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.06);
    color: var(--text);
    font-size: 26px;
    cursor: pointer;
}

.codigo-modal-badge {
    display: inline-flex;
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid rgba(0,217,255,.35);
    color: var(--cyan);
    font-family: var(--font-mono);
    font-size: .78rem;
    letter-spacing: 1px;
}

.codigo-modal-card h2 {
    margin: 16px 0 6px;
    text-transform: uppercase;
}

.codigo-modal-card p {
    color: var(--muted);
    margin-bottom: 18px;
}

.codigo-numero {
    margin: 18px auto 24px;
    padding: 18px;
    border-radius: 18px;
    font-size: clamp(2.4rem, 9vw, 4rem);
    font-family: var(--font-mono);
    font-weight: 900;
    letter-spacing: 8px;
    color: var(--green);
    background: rgba(0,255,136,.08);
    border: 1px solid rgba(0,255,136,.35);
    text-shadow: 0 0 24px rgba(0,255,136,.55);
}

/* ==================================================
   ADMIN CÓDIGOS
================================================== */

.page-admin-codigos .cliente-login-shell {
    min-height: calc(100vh - 52px);
    display: grid;
    place-items: center;
    padding: 20px;
}

.page-admin-codigos .cliente-login-card {
    width: min(520px, 100%);
}

/* ==================================================
   FIX GENERAL MÓVIL - MENÚ + TARJETAS
================================================== */

@media (max-width: 900px) {
    .admin-grid-container {
        display: block;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }

    .admin-menu {
        width: 100%;
        max-width: 100vw;
        position: relative;
    }

    .admin-main-content {
        width: 100%;
        max-width: 100vw;
        padding: 12px !important;
        overflow-x: hidden;
    }

    .cliente-login-shell,
    .cliente-layout,
    .cliente-cuentas-grid,
    .cards-container,
    .grid-cards,
    .productos-grid,
    .cuentas-container,
    .content-card,
    .form-section,
    .table-container {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .cliente-login-card,
    .cliente-cuenta-card,
    .card,
    .cuenta-card,
    .producto-card,
    .content-card,
    .form-section {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow-wrap: anywhere;
    }

    input,
    select,
    textarea,
    button {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 480px) {
    .admin-main-content {
        padding: 10px !important;
    }

    .cliente-login-shell {
        padding: 10px !important;
    }

    .cliente-login-card,
    .cliente-cuenta-card,
    .content-card,
    .form-section {
        padding: 18px !important;
        border-radius: 18px !important;
    }

    .menu-items {
        grid-template-columns: 1fr !important;
    }
}
/* ==================================================
   FIX GLOBAL CELULAR - TARJETAS NO SE SALEN
================================================== */

@media (max-width: 900px) {
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden !important;
    }

    .admin-grid-container,
    .admin-main-content,
    .admin-menu,
    .menu-items,
    .submenu,
    .table-container,
    .premium-card,
    .search-panel,
    .cliente-login-shell,
    .cliente-login-card,
    .cliente-layout,
    .cliente-cuentas-grid,
    .cliente-cuenta-card,
    .guarantee-container,
    .guarantee-section,
    .account-display-card,
    .whatsapp-page-container,
    .whatsapp-content,
    .whatsapp-card,
    .form-section,
    .form-panel,
    .panel-container,
    .main-content-wrapper,
    .cuentas-container,
    .content-card,
    .card,
    .cuenta-card,
    .producto-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .admin-main-content {
        padding: 12px !important;
    }

    .premium-card,
    .cliente-login-card,
    .cliente-cuenta-card,
    .guarantee-container,
    .guarantee-section,
    .account-display-card,
    .whatsapp-content,
    .whatsapp-card,
    .form-section,
    .form-panel,
    .panel-container,
    .content-card,
    .card,
    .cuenta-card,
    .producto-card {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    table,
    tbody,
    tr,
    td,
    th {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    td,
    th,
    p,
    span,
    strong,
    div,
    a,
    input,
    textarea,
    select,
    button {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    input,
    textarea,
    select,
    button {
        width: 100% !important;
    }

    img {
        max-width: 100% !important;
        height: auto !important;
    }

    .copy-container,
    .copy-text,
    .email-perfil,
    .account-info,
    .whatsapp-text {
        max-width: 100% !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
    }

    #cuentasTable tbody tr,
    #cuentasMaestrasTable tbody tr,
    .panel-vencimientos-table tbody tr {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media (max-width: 480px) {
    .admin-main-content {
        padding: 10px !important;
    }

    .premium-card,
    .cliente-login-card,
    .cliente-cuenta-card,
    .guarantee-container,
    .guarantee-section,
    .whatsapp-content,
    .whatsapp-card,
    .form-section,
    .form-panel,
    .panel-container {
        padding: 12px !important;
        border-radius: 16px !important;
    }

    .main-title,
    .panel-header h1,
    .cliente-login-card h1 {
        font-size: 24px !important;
        line-height: 1.05 !important;
    }
}
/* ==================================================
   FIX REAL MÓVIL - CONTENIDO MISMO ANCHO QUE MENÚ
================================================== */

@media (max-width: 900px) {
    .admin-grid-container {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    .admin-menu {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .admin-main-content {
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    .admin-main-content > *,
    .premium-card,
    .cliente-login-shell,
    .cliente-login-card,
    .cliente-layout,
    .cliente-cuentas-grid,
    .cliente-cuenta-card,
    .table-container,
    .panel-vencimientos-table,
    .guarantee-container,
    .guarantee-section,
    .whatsapp-page-container,
    .whatsapp-content,
    .whatsapp-card,
    .form-section,
    .form-panel,
    .panel-container,
    .main-content-wrapper,
    .cuentas-container {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    table {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    tbody,
    tr,
    td {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    #cuentasTable tbody tr,
    #cuentasMaestrasTable tbody tr,
    .panel-vencimientos-table tbody tr {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        overflow: hidden !important;
    }

    #cuentasTable td,
    #cuentasMaestrasTable td,
    .panel-vencimientos-table td {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    input,
    select,
    textarea,
    button,
    a,
    span,
    strong,
    p,
    div {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .copy-container,
    .copy-text,
    .email-perfil,
    .account-info,
    .whatsapp-text {
        max-width: 100% !important;
        white-space: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 480px) {
    .admin-main-content {
        padding: 10px !important;
    }

    .premium-card,
    .cliente-login-card,
    .cliente-cuenta-card,
    .panel-container,
    .form-panel,
    .form-section,
    .guarantee-container,
    .guarantee-section,
    .whatsapp-content,
    .whatsapp-card {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}
/* ==================================================
   LOGO PRIME VIDEO - ADMIN CÓDIGOS
================================================== */

.codigo-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.codigo-logo {
    width: auto;
    max-width: 420px;
    max-height: 180px;
    object-fit: contain;

    filter:
        drop-shadow(0 0 22px rgba(0,217,255,.40))
        drop-shadow(0 0 45px rgba(0,217,255,.25));
}

.codigo-logo:hover {
    transform: scale(1.04);
}

@media (max-width: 768px) {
    .codigo-logo {
        max-width: 260px;
        max-height: 120px;
    }
}
.youtube-payment-email {
    margin-top: 8px;
    font-size: 13px;
}

.youtube-payment-same,
.youtube-payment-different {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: 12px;
}

.youtube-payment-same {
    color: var(--green);
    background: rgba(0,255,136,.12);
    border: 1px solid rgba(0,255,136,.35);
}

.youtube-payment-different {
    color: var(--yellow);
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.38);
}

.youtube-payment-different strong {
    color: var(--text);
}
.btn-copy-youtube {
    width: 100%;
    min-height: 42px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
    font-family: var(--font-title);
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.btn-edit-visible {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    width: auto !important;
    min-width: 130px;
    margin-bottom: 12px;
    padding: 9px 14px !important;
    border-radius: 12px;
    color: #00140b !important;
    background: linear-gradient(135deg, var(--yellow), var(--orange)) !important;
    font-weight: 800;
    cursor: pointer;
}
/* YOUTUBE ICLOUD - PLATAFORMA Y BOTÓN EDITAR EQUILIBRADO */
.page-youtube .plat-tag {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 7px 12px !important;
    border-radius: 999px;
    color: var(--cyan) !important;
    background: rgba(0,217,255,.12) !important;
    border: 1px solid rgba(0,217,255,.35) !important;
    font-family: var(--font-mono) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.page-youtube .btn-edit-visible {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    display: inline-flex !important;
    width: auto !important;
    min-width: auto !important;
    min-height: 32px !important;
    padding: 6px 10px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border-radius: 999px !important;
    border: 1px solid rgba(255,209,102,.38) !important;
    background: rgba(255,209,102,.10) !important;
    color: var(--yellow) !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    font-family: var(--font-mono) !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 5 !important;
    box-shadow: none !important;
}

.page-youtube .btn-edit-visible:hover {
    background: rgba(255,209,102,.18) !important;
    border-color: rgba(255,209,102,.65) !important;
    transform: translateY(-1px);
}

.page-youtube .card-cuenta {
    position: relative !important;
    padding-top: 48px !important;
}
/* AJUSTE BOTÓN EDITAR YOUTUBE */

.page-youtube .card-cuenta{
    position: relative;
}

.page-youtube .btn-edit-visible{
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;

    width: auto !important;
    min-width: auto !important;

    padding: 5px 10px !important;

    z-index: 20;
}
/* AJUSTE FINAL TARJETA YOUTUBE */

.page-youtube .card-cuenta {
    position: relative !important;
    padding-top: 18px !important;
}

.page-youtube .plat-tag {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 40px !important;
    padding: 8px 18px !important;
    border-radius: 999px !important;

    color: #ff304f !important;
    background: rgba(255,48,79,.13) !important;
    border: 1px solid rgba(255,48,79,.55) !important;

    font-family: var(--font-mono) !important;
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: .08em !important;
    text-transform: uppercase !important;
}

.page-youtube .btn-edit-visible {
    position: absolute !important;
    top: 20px !important;
    right: 12px !important;

    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 0 !important;
    border-radius: 50% !important;
    z-index: 20 !important;
}


/* FIX CATALOGO PUBLICO - CARRITO NO ESTORBA */

.page-catalogo-publico .catalogo-container {
    display: block !important;
    width: min(1280px, 96%) !important;
    margin: 0 auto !important;
}

.page-catalogo-publico .productos-grid {
    width: 100% !important;
}

.page-catalogo-publico .carrito {
    position: static !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 28px auto !important;
    z-index: 1 !important;
}

.page-catalogo-publico .carrito-link {
    position: relative !important;
}

/* FIX MODAL OPCIONES CATALOGO */

.page-catalogo-publico #opcionesModal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    overflow-y: auto !important;
    padding: 22px 12px !important;
    background: rgba(0,0,0,.78) !important;
}

.page-catalogo-publico #opcionesModal .modal-content {
    width: min(620px, 94vw) !important;
    max-height: 88vh !important;
    overflow-y: auto !important;
    margin: 20px auto !important;
    border-radius: 22px !important;
}

.page-catalogo-publico #opciones-container {
    max-height: 55vh !important;
    overflow-y: auto !important;
    padding-right: 6px !important;
}

.page-catalogo-publico .opcion-label {
    display: block !important;
    margin-bottom: 10px !important;
    padding: 12px !important;
    border-radius: 12px !important;
    line-height: 1.35 !important;
}
/* CATALOGO - CARRITO LATERAL PROFESIONAL */

.page-catalogo-publico .catalogo-container {
    width: min(1380px, 96%);
    margin: 0 auto;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.page-catalogo-publico .carrito-lateral {
    position: sticky !important;
    top: 18px;
    width: 100% !important;
    max-height: calc(100vh - 36px);
    overflow-y: auto;
    padding: 18px;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(16,25,35,.96), rgba(5,10,16,.98));
    border: 1px solid rgba(0,217,255,.26);
    box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.page-catalogo-publico .carrito-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0,217,255,.18);
}

.page-catalogo-publico .carrito-header h2 {
    margin: 0;
    color: var(--cyan);
    font-size: 24px;
    text-transform: uppercase;
}

.page-catalogo-publico .carrito-header span {
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 12px;
}

.page-catalogo-publico .carrito-items {
    display: grid;
    gap: 12px;
}

.page-catalogo-publico .carrito-item {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr) 32px;
    gap: 10px;
    align-items: center;
    padding: 10px;
    border-radius: 16px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.08);
}

.page-catalogo-publico .carrito-item-img {
    width: 58px;
    height: 58px;
    object-fit: contain;
    border-radius: 12px;
    background: rgba(255,255,255,.05);
    padding: 6px;
}

.page-catalogo-publico .carrito-item-info {
    min-width: 0;
}

.page-catalogo-publico .carrito-item-info strong {
    display: block;
    color: var(--text);
    font-size: 14px;
    text-transform: uppercase;
}

.page-catalogo-publico .carrito-item-info small {
    display: block;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.25;
    margin: 3px 0;
}

.page-catalogo-publico .carrito-item-info span {
    color: var(--green);
    font-family: var(--font-mono);
    font-weight: 800;
}

.page-catalogo-publico .carrito-remove {
    width: 30px !important;
    height: 30px !important;
    border: 1px solid rgba(255,48,79,.45) !important;
    border-radius: 50% !important;
    background: rgba(255,48,79,.12) !important;
    color: var(--red) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer;
}

.page-catalogo-publico .carrito-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 18px 0;
    padding-top: 14px;
    border-top: 1px solid rgba(0,217,255,.18);
}

.page-catalogo-publico .carrito-total span {
    color: var(--muted);
    text-transform: uppercase;
}

.page-catalogo-publico .carrito-total strong {
    color: var(--green);
    font-size: 24px;
    font-family: var(--font-mono);
}

.page-catalogo-publico .carrito-comprar,
.page-catalogo-publico .carrito-limpiar {
    display: flex;
    width: 100%;
    min-height: 46px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    text-decoration: none;
    font-weight: 800;
    text-transform: uppercase;
    cursor: pointer;
}

.page-catalogo-publico .carrito-comprar {
    color: #00140b;
    background: linear-gradient(135deg, var(--green), var(--cyan));
}

.page-catalogo-publico .carrito-limpiar {
    margin-top: 10px;
    border: 1px solid rgba(255,48,79,.35);
    background: rgba(255,48,79,.10);
    color: #ff8fa0;
}

.page-catalogo-publico .carrito-vacio {
    text-align: center;
    color: var(--muted);
    padding: 22px 10px;
}

/* móvil */
@media (max-width: 900px) {
    .page-catalogo-publico .catalogo-container {
        display: block !important;
        width: 94% !important;
    }

    .page-catalogo-publico .carrito-lateral {
        position: static !important;
        max-height: none;
        margin-top: 24px;
    }
}
/* CATALOGO - AJUSTE ESPACIO Y CARRITO */

.page-catalogo-publico .catalogo-container {
    width: min(1500px, 98%) !important;
    gap: 18px !important;
    grid-template-columns: minmax(0, 1fr) 330px !important;
}

.page-catalogo-publico .productos-grid {
    gap: 18px !important;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)) !important;
}

.page-catalogo-publico .producto-card {
    padding: 16px !important;
    border-radius: 20px !important;
}

.page-catalogo-publico .producto-imagen {
    max-height: 170px !important;
    width: 100% !important;
    object-fit: contain !important;
}

.page-catalogo-publico .producto-descripcion-corta {
    font-size: 18px !important;
    line-height: 1.1 !important;
    margin: 10px 0 !important;
}

.page-catalogo-publico .producto-descripcion-larga {
    font-size: 13px !important;
    line-height: 1.35 !important;
    max-height: 82px !important;
    overflow: hidden !important;
}

.page-catalogo-publico .carrito-lateral {
    top: 92px !important;
    max-height: calc(100vh - 110px) !important;
}

.page-catalogo-publico .carrito-item {
    grid-template-columns: 64px minmax(0, 1fr) 30px !important;
}

.page-catalogo-publico .carrito-item-img {
    width: 64px !important;
    height: 64px !important;
}

.page-catalogo-publico .carrito-item-info small {
    font-size: 12px !important;
    color: var(--text) !important;
}

@media (max-width: 900px) {
    .page-catalogo-publico .catalogo-container {
        display: block !important;
        width: 94% !important;
    }

    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 120px !important;
    }

    .page-catalogo-publico .producto-descripcion-corta {
        font-size: 15px !important;
    }

    .page-catalogo-publico .carrito-lateral {
        position: static !important;
        max-height: none !important;
        margin-top: 18px !important;
    }
}

@media (max-width: 480px) {
    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .page-catalogo-publico .producto-card {
        padding: 10px !important;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 100px !important;
    }
}
.carrito-descuento{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:14px;
    padding:10px 0;
    border-top:1px dashed rgba(255,255,255,.15);
    color:#9fe7c2;
    font-size:14px;
}

.carrito-descuento strong{
    color:#00ff88;
    font-size:18px;
    font-weight:800;
}
/* GESTIONAR OPCIONES - MOVER ARRIBA / ABAJO */

.catalogo-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    flex-wrap:wrap;
}

.catalogo-actions form{
    display:inline-flex;
    margin:0;
}

.btn-mover{
    width:34px;
    height:34px;
    border:none;
    border-radius:10px;
    background:rgba(0,217,255,.12);
    border:1px solid rgba(0,217,255,.30);
    color:#00d9ff;
    cursor:pointer;
    font-size:16px;
    transition:.2s;
}

.btn-mover:hover{
    background:rgba(0,217,255,.22);
    transform:translateY(-1px);
}

.editar-opcion-btn{
    min-width:90px;
}

.eliminar-btn{
    min-width:90px;
}
.opcion-texto-formateado {
    display: block;
    line-height: 1.55;
    font-weight: 700;
}

.opcion-label {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
}
.opcion-label-pro {
    display: flex !important;
    align-items: flex-start !important;
    gap: 12px !important;
}

.opcion-catalogo-info {
    display: grid;
    gap: 5px;
    line-height: 1.3;
}

.opcion-dispositivos {
    font-size: 20px;
}

.opcion-nombre {
    font-weight: 800;
}

.opcion-servicio {
    color: var(--cyan);
    font-weight: 800;
}

.opcion-precio {
    color: var(--green);
    font-weight: 900;
    font-size: 18px;
}
/* CATALOGO - OPCIONES PREVIEW EN TARJETA */

.page-catalogo-publico .producto-opciones-preview {
    display: grid;
    gap: 8px;
    margin: 12px 0;
}

.page-catalogo-publico .preview-opcion {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 8px;
    align-items: center;
    padding: 9px 10px;
    border-radius: 12px;
    background: rgba(0,0,0,.24);
    border: 1px solid rgba(255,255,255,.08);
}

.page-catalogo-publico .preview-opcion span {
    color: var(--text);
    font-weight: 800;
    font-size: 13px;
}

.page-catalogo-publico .preview-opcion small {
    color: var(--cyan);
    font-weight: 700;
    font-size: 12px;
}

.page-catalogo-publico .preview-opcion strong {
    grid-row: span 2;
    color: var(--green);
    font-family: var(--font-mono);
    font-size: 14px;
}


.page-catalogo-publico .btn-ver-opciones {
    border: 1px solid rgba(0,217,255,.35);
    background: rgba(0,217,255,.10);
    color: var(--cyan);
    border-radius: 12px;
    padding: 8px 10px;
    font-weight: 800;
    cursor: pointer;
}

.page-catalogo-publico .producto-sin-opciones {
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}
/* CATALOGO - OPCIONES AGRUPADAS POR DIAS */

.page-catalogo-publico .producto-opcion-grupo {
    display: grid;
    gap: 6px;
}

.page-catalogo-publico .producto-opcion-grupo-titulo {
    margin-top: 4px;
    padding: 7px 10px;
    border-radius: 12px;
    background: rgba(255,209,102,.12);
    border: 1px solid rgba(255,209,102,.25);
    color: var(--yellow);
    font-size: 12px;
    font-weight: 900;
    text-align: center;
    letter-spacing: .04em;
}

.page-catalogo-publico .producto-opcion-linea {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.page-catalogo-publico .producto-opcion-linea span {
    color: var(--text);
}

.page-catalogo-publico .producto-opcion-linea strong {
    color: var(--green);
    font-family: var(--font-mono);
    white-space: nowrap;
}
/* CATÁLOGO - TARJETAS MÁS PROFESIONALES Y OPCIONES ALINEADAS */

.page-catalogo-publico .productos-grid {
    align-items: stretch !important;
}

.page-catalogo-publico .producto-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    
    padding: 18px !important;
    overflow: hidden !important;
}

.page-catalogo-publico .producto-imagen {
    width: 100% !important;
    height: 145px !important;
    object-fit: contain !important;
    margin-bottom: 12px !important;
}

.page-catalogo-publico .producto-opciones-preview {
    flex: 1 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.page-catalogo-publico .producto-opcion-grupo {
    display: grid !important;
    gap: 7px !important;
}

.page-catalogo-publico .producto-opcion-grupo-titulo {
    text-align: center !important;
    font-size: 12px !important;
    font-weight: 900 !important;
    letter-spacing: .05em !important;
    white-space: nowrap !important;
}

.page-catalogo-publico .producto-opcion-linea {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
}

.page-catalogo-publico .producto-opcion-linea span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.25 !important;
    font-size: 13px !important;
}

.page-catalogo-publico .producto-opcion-linea strong {
    white-space: nowrap !important;
    font-size: 13px !important;
    text-align: right !important;
}

.page-catalogo-publico .producto-agregar {
    margin-top: 14px !important;
    width: 100% !important;
}

/* Cuando hay muchos iconos de dispositivo, que no rompan la línea feo */
.page-catalogo-publico .producto-opcion-linea span {
    display: block !important;
}

/* MÓVIL */
@media (max-width: 600px) {
    .page-catalogo-publico .producto-card {
        min-height: 360px !important;
        padding: 12px !important;
    }

    .page-catalogo-publico .producto-imagen {
        height: 105px !important;
    }

    .page-catalogo-publico .producto-opcion-linea {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    .page-catalogo-publico .producto-opcion-linea strong {
        text-align: left !important;
        font-size: 14px !important;
    }
}
/* CATÁLOGO - TARJETAS COMPACTAS PROFESIONALES */

.page-catalogo-publico .producto-card {
    min-height: auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    padding: 16px !important;
}

.page-catalogo-publico .producto-imagen {
    height: 115px !important;
    margin-bottom: 10px !important;
}

.page-catalogo-publico .producto-opciones-preview {
    flex: 0 0 auto !important;
    margin: 8px 0 12px !important;
}

.page-catalogo-publico .producto-agregar {
    margin-top: auto !important;
}

.page-catalogo-publico .productos-grid {
    align-items: start !important;
}

/* Que las opciones no hagan la tarjeta enorme */
.page-catalogo-publico .producto-opcion-grupo {
    margin-bottom: 8px !important;
}

.page-catalogo-publico .producto-opcion-linea {
    min-height: 28px !important;
    padding: 5px 8px !important;
    font-size: 12px !important;
}

.page-catalogo-publico .producto-opcion-grupo-titulo {
    padding: 5px 8px !important;
    font-size: 11px !important;
}

/* Botón más integrado */
.page-catalogo-publico .producto-agregar {
    min-height: 38px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
}
/* ===== TARJETAS CATÁLOGO ESTÁNDAR ===== */

.page-catalogo-publico .productos-grid{
    align-items:stretch !important;
}

.page-catalogo-publico .producto-card{
    display:flex !important;
    flex-direction:column !important;
    height:470px !important;
    padding:16px !important;
    overflow:hidden !important;
}

.page-catalogo-publico .producto-imagen{
    height:115px !important;
    object-fit:contain !important;
    margin-bottom:10px !important;
}

.page-catalogo-publico .producto-opciones-preview{
    flex:1 !important;
    overflow:hidden !important;
}

.page-catalogo-publico .producto-opcion-grupo{
    margin-bottom:8px !important;
}

.page-catalogo-publico .producto-opcion-linea{
    display:flex !important;
    justify-content:space-between !important;
    align-items:center !important;
    padding:4px 6px !important;
    font-size:12px !important;
}

.page-catalogo-publico .producto-agregar{
    margin-top:auto !important;
}
/* FIX VER TODAS LAS OPCIONES - CATALOGO */

.page-catalogo-publico .producto-card {
    height: auto !important;
    min-height: 430px !important;
    overflow: visible !important;
}

.page-catalogo-publico .producto-opciones-preview {
    max-height: 250px !important;
    overflow: hidden !important;
    position: relative !important;
}

.page-catalogo-publico .producto-opciones-preview.expandido {
    max-height: none !important;
    overflow: visible !important;
}

.page-catalogo-publico .btn-ver-opciones {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 12px !important;
    position: relative !important;
    z-index: 20 !important;
}
/* FIX FINAL - OPCIONES EXPANDIBLES CATÁLOGO */

.page-catalogo-publico .producto-card {
    height: auto !important;
    min-height: 430px !important;
    overflow: visible !important;
    justify-content: flex-start !important;
}

.page-catalogo-publico .producto-opciones-preview {
    max-height: none !important;
    overflow: visible !important;
    margin-bottom: 14px !important;
}

.page-catalogo-publico .producto-agregar {
    margin-top: 14px !important;
    position: static !important;
}




/* CATALOGO - OPCIONES EN AREA FIJA PROFESIONAL */

.page-catalogo-publico .producto-card {
    height: 470px !important;
    min-height: 470px !important;
    max-height: 470px !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.page-catalogo-publico .producto-imagen {
    height: 110px !important;
    flex: 0 0 auto !important;
}

.page-catalogo-publico .producto-opciones-preview {
    height: 245px !important;
    max-height: 245px !important;
    overflow: hidden !important;
    position: relative !important;
    padding-right: 2px !important;
    margin: 8px 0 10px !important;
}



/* Abierto: mismo espacio, pero con scroll interno */
.page-catalogo-publico .producto-opciones-preview.expandido {
    overflow-y: auto !important;
}


/* botón siempre visible dentro del área de opciones */
.page-catalogo-publico .btn-ver-opciones {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 10 !important;
    width: 100% !important;
    margin-top: 8px !important;
}

/* botón agregar siempre abajo */
.page-catalogo-publico .producto-agregar {
    margin-top: auto !important;
    flex: 0 0 auto !important;
}
/* ===== COLORES POR PLATAFORMA - TARJETAS YOUTUBE COMPLETO ===== */

.page-youtube .plat-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: #fff;
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 0 18px rgba(255,255,255,0.08);
}

/* Netflix */
.page-youtube .platform-tag-netflix,
.page-youtube .platform-tag-netflix-extra {
    background: linear-gradient(135deg, #e50914, #7a0007);
    box-shadow: 0 0 20px rgba(229, 9, 20, 0.42);
}

/* YouTube */
.page-youtube .platform-tag-youtube {
    background: linear-gradient(135deg, #ff0033, #990000);
    box-shadow: 0 0 20px rgba(255, 0, 51, 0.42);
}

/* Disney */
.page-youtube .platform-tag-disney,
.page-youtube .platform-tag-disneyplus {
    background: linear-gradient(135deg, #113ccf, #071733);
    box-shadow: 0 0 20px rgba(17, 60, 207, 0.45);
}

/* Max */
.page-youtube .platform-tag-max {
    background: linear-gradient(135deg, #6f4cff, #21105c);
    box-shadow: 0 0 20px rgba(111, 76, 255, 0.42);
}

/* Prime Video */
.page-youtube .platform-tag-prime-video {
    background: linear-gradient(135deg, #00a8e1, #003f5c);
    box-shadow: 0 0 20px rgba(0, 168, 225, 0.42);
}

/* Spotify */
.page-youtube .platform-tag-spotify {
    background: linear-gradient(135deg, #1db954, #063d1b);
    box-shadow: 0 0 20px rgba(29, 185, 84, 0.42);
}

/* Canva */
.page-youtube .platform-tag-canva {
    background: linear-gradient(135deg, #00c4cc, #7d2ae8);
    box-shadow: 0 0 20px rgba(0, 196, 204, 0.42);
}

/* Paramount */
.page-youtube .platform-tag-paramount {
    background: linear-gradient(135deg, #0057ff, #001d5c);
    box-shadow: 0 0 20px rgba(0, 87, 255, 0.42);
}

/* Crunchyroll */
.page-youtube .platform-tag-crunchyroll {
    background: linear-gradient(135deg, #f47521, #743100);
    box-shadow: 0 0 20px rgba(244, 117, 33, 0.42);
}

/* Apple TV */
.page-youtube .platform-tag-apple-tv {
    background: linear-gradient(135deg, #f5f5f7, #4d4d55);
    color: #111;
    box-shadow: 0 0 20px rgba(245, 245, 247, 0.32);
}

/* IPTV */
.page-youtube .platform-tag-iptv {
    background: linear-gradient(135deg, #00ffaa, #005f4f);
    color: #02110d;
    box-shadow: 0 0 20px rgba(0, 255, 170, 0.42);
}

/* VIX */
.page-youtube .platform-tag-vix {
    background: linear-gradient(135deg, #ff7a00, #6d2400);
    box-shadow: 0 0 20px rgba(255, 122, 0, 0.42);
}

/* Universal */
.page-youtube .platform-tag-universal,
.page-youtube .platform-tag-universalplus {
    background: linear-gradient(135deg, #f5c542, #12295c);
    color: #08101f;
    box-shadow: 0 0 20px rgba(245, 197, 66, 0.42);
}

/* Plex */
.page-youtube .platform-tag-plex {
    background: linear-gradient(135deg, #e5a00d, #2e2100);
    box-shadow: 0 0 20px rgba(229, 160, 13, 0.42);
}

/* Fox One */
.page-youtube .platform-tag-fox-one {
    background: linear-gradient(135deg, #ff6a00, #111827);
    box-shadow: 0 0 20px rgba(255, 106, 0, 0.42);
}

/* Fallback */
.page-youtube .plat-tag:not([class*="platform-tag-"]) {
    background: linear-gradient(135deg, #2d3436, #111827);
}
/* ===== FORZAR COLORES REALES POR PLATAFORMA ===== */

.page-youtube .plat-tag {
    color: #fff !important;
    background: #222 !important;
}

.page-youtube .platform-tag-netflix,
.page-youtube .platform-tag-netflix-extra {
    background: #e50914 !important;
    color: #fff !important;
}

.page-youtube .platform-tag-youtube {
    background: #ff0000 !important;
    color: #fff !important;
}

.page-youtube .platform-tag-disney,
.page-youtube .platform-tag-disneyplus {
    background: #113ccf !important;
    color: #dff4ff !important;
}

.page-youtube .platform-tag-max {
    background: #5f35ff !important;
    color: #fff !important;
}

.page-youtube .platform-tag-prime-video {
    background: #00a8e1 !important;
    color: #001522 !important;
}

.page-youtube .platform-tag-spotify {
    background: #1db954 !important;
    color: #03160a !important;
}

.page-youtube .platform-tag-canva {
    background: #00c4cc !important;
    color: #061316 !important;
}

.page-youtube .platform-tag-paramount {
    background: #0057ff !important;
    color: #fff !important;
}

.page-youtube .platform-tag-crunchyroll {
    background: #f47521 !important;
    color: #1b0900 !important;
}

.page-youtube .platform-tag-apple-tv {
    background: #f5f5f7 !important;
    color: #111 !important;
}

.page-youtube .platform-tag-iptv {
    background: #00ffaa !important;
    color: #02110d !important;
}

.page-youtube .platform-tag-vix {
    background: #ff7a00 !important;
    color: #1c0800 !important;
}

.page-youtube .platform-tag-universal,
.page-youtube .platform-tag-universalplus {
    background: #f5c542 !important;
    color: #08101f !important;
}

.page-youtube .platform-tag-plex {
    background: #e5a00d !important;
    color: #140c00 !important;
}

.page-youtube .platform-tag-fox-one {
    background: #ff6a00 !important;
    color: #111827 !important;
}
/* ===== REPORTE DE RECIBOS PDF ===== */

.page-reporte-comisiones .report-results-wrapper {
    background: linear-gradient(145deg, #101722, #0b111b);
    border: 1px solid rgba(0, 255, 204, 0.18);
    border-radius: 18px;
    padding: 22px;
    margin: 24px 0;
    box-shadow: 0 0 25px rgba(0, 255, 204, 0.08);
}

.page-reporte-comisiones .report-results-wrapper h3 {
    color: #00ffcc;
    font-size: 1.25rem;
    letter-spacing: 1px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.page-reporte-comisiones .report-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    border-radius: 14px;
}

.page-reporte-comisiones .report-table thead {
    background: #1e293b;
}

.page-reporte-comisiones .report-table th {
    color: #ffffff;
    padding: 13px 12px;
    font-size: 0.85rem;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.page-reporte-comisiones .report-table td {
    padding: 13px 12px;
    color: #dbeafe;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    font-size: 0.9rem;
}

.page-reporte-comisiones .report-table tbody tr:hover {
    background: rgba(0, 255, 204, 0.07);
}

.page-reporte-comisiones .button-primary,
.page-reporte-comisiones .button-secondary {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 10px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.82rem;
    transition: 0.2s ease;
}

.page-reporte-comisiones .button-primary {
    background: #00ffcc;
    color: #07111f;
}

.page-reporte-comisiones .button-secondary {
    background: #25d366;
    color: #07111f;
}

.page-reporte-comisiones .button-primary:hover,
.page-reporte-comisiones .button-secondary:hover {
    transform: translateY(-2px);
    filter: brightness(1.12);
}

.page-reporte-comisiones .no-results {
    color: #94a3b8;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.16);
    padding: 18px;
    border-radius: 14px;
    text-align: center;
}

.page-reporte-comisiones .filter-section-wrapper {
    background: #101722;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 18px;
    padding: 20px;
    margin-bottom: 24px;
}

.page-reporte-comisiones .report-filter-form {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    align-items: end;
}

.page-reporte-comisiones .report-filter-form label {
    color: #94a3b8;
    font-size: 0.78rem;
    text-transform: uppercase;
    font-weight: 700;
}

.page-reporte-comisiones .report-filter-form select,
.page-reporte-comisiones .report-filter-form input {
    width: 100%;
    background: #0b111b;
    color: #ffffff;
    border: 1px solid rgba(0,255,204,0.25);
    border-radius: 10px;
    padding: 10px;
}

.page-reporte-comisiones .button-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .page-reporte-comisiones .report-filter-form {
        grid-template-columns: 1fr;
    }

    .page-reporte-comisiones .report-table thead {
        display: none;
    }

    .page-reporte-comisiones .report-table,
    .page-reporte-comisiones .report-table tbody,
    .page-reporte-comisiones .report-table tr,
    .page-reporte-comisiones .report-table td {
        display: block;
        width: 100%;
    }

    .page-reporte-comisiones .report-table tr {
        background: rgba(255,255,255,0.04);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 14px;
        margin-bottom: 14px;
        padding: 10px;
    }

    .page-reporte-comisiones .report-table td {
        border: none;
        display: flex;
        justify-content: space-between;
        gap: 12px;
    }

    .page-reporte-comisiones .report-table td::before {
        content: attr(data-label);
        color: #00ffcc;
        font-weight: 700;
    }
}
/* ===== HISTORIAL DE RECIBOS PDF ===== */

.recibos-principal-wrapper {
    background: linear-gradient(145deg, #101722, #070d16);
    border: 1px solid rgba(0,255,204,.22);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 0 28px rgba(0,255,204,.08);
}

.recibos-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.recibo-stat-card {
    background: #0b111b;
    border: 1px solid rgba(0,255,204,.2);
    border-radius: 16px;
    padding: 18px;
}

.recibo-stat-card span {
    display: block;
    color: #94a3b8;
    font-size: .82rem;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.recibo-stat-card strong {
    color: #00ffcc;
    font-size: 1.8rem;
}

.recibos-table td strong {
    color: #ffffff;
}

.recibos-table .button-primary,
.recibos-table .button-secondary {
    display: inline-block;
    padding: 9px 13px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    font-size: .82rem;
}

.recibos-table .button-primary {
    background: #00ffcc;
    color: #07111f;
}

.recibos-table .button-secondary {
    background: #25d366;
    color: #07111f;
}
.codigo-acciones{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:15px;
}

.codigo-acciones button[type="submit"]{
    flex:1;
}

.btn-recargar-codigo{
    width:48px;
    height:48px;
    border-radius:12px;
    border:1px solid rgba(0,255,255,.25);
    background:rgba(0,20,30,.8);
    color:#00e5ff;
    font-size:24px;
    cursor:pointer;
    transition:.25s;
}

.btn-recargar-codigo:hover{
    transform:rotate(180deg);
    box-shadow:0 0 15px rgba(0,255,255,.45);
}
/*=========================================
=            IPTV - DETALLES              =
=========================================*/

.btn-detalles-iptv{
    width:100%;
    margin-top:10px;
    padding:10px 14px;

    background:linear-gradient(135deg,#0d2f45,#134e6f);
    border:1px solid rgba(80,200,255,.35);

    color:#dff8ff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

    border-radius:10px;
    cursor:pointer;

    transition:.25s;
}

.btn-detalles-iptv:hover{
    background:linear-gradient(135deg,#13557a,#1b6b97);
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(0,150,255,.25);
}

.btn-detalles-iptv:active{
    transform:scale(.98);
}

/* Caja de observaciones */

.iptv-observaciones-box{
    display:none;

    margin-top:10px;
    padding:14px;

    background:rgba(8,18,30,.92);
    border:1px solid rgba(0,180,255,.25);
    border-left:4px solid #28b6ff;

    border-radius:10px;

    color:#eef9ff;
    font-size:13px;
    line-height:1.6;

    text-align:left;

    animation:fadeDetalle .25s ease;
}

.iptv-observaciones-box.activo{
    display:block;
}

@keyframes fadeDetalle{
    from{
        opacity:0;
        transform:translateY(-5px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/*=========================================
=     Gestionar Opciones (IPTV)           =
=========================================*/

.catalogo-options-form textarea,
.page-gestionar-opciones textarea{
    width:100%;
    min-height:90px;

    margin-top:10px;
    padding:12px;

    background:#101820;
    color:#ffffff;

    border:1px solid rgba(0,180,255,.25);
    border-radius:8px;

    resize:vertical;

    font-size:13px;
    font-family:inherit;
    box-sizing:border-box;
}

.catalogo-options-form textarea:focus,
.page-gestionar-opciones textarea:focus{
    outline:none;
    border-color:#33c7ff;
    box-shadow:0 0 10px rgba(51,199,255,.25);
}

/* Columna observaciones */

td[data-label="Observaciones IPTV"] textarea{
    min-width:220px;
    min-height:70px;
}
/*=========================================
=     OBSERVACIÓN GENERAL IPTV            =
=========================================*/

.iptv-observacion-general-admin{
    margin:25px 0;
    padding:20px;

    background:linear-gradient(145deg,#101722,#182534);
    border:1px solid rgba(0,170,255,.25);
    border-left:5px solid #1db8ff;

    border-radius:14px;

    box-shadow:0 8px 20px rgba(0,0,0,.18);
}

.iptv-observacion-general-admin h3{
    margin:0 0 15px 0;
    color:#7fdcff;
    font-size:20px;
    font-weight:700;
    letter-spacing:1px;
}

.iptv-observacion-general-admin textarea{
    width:100%;
    min-height:140px;

    padding:14px;
    box-sizing:border-box;

    background:#0f1720;
    color:#ffffff;

    border:1px solid rgba(0,180,255,.25);
    border-radius:10px;

    resize:vertical;

    font-size:14px;
    line-height:1.6;
    font-family:inherit;

    transition:.25s;
}

.iptv-observacion-general-admin textarea:focus{
    outline:none;
    border-color:#35c8ff;
    box-shadow:0 0 12px rgba(53,200,255,.25);
}

.iptv-observacion-general-admin button{
    margin-top:15px;

    padding:11px 22px;

    background:linear-gradient(135deg,#0d88d7,#16b3ff);
    color:#fff;

    border:none;
    border-radius:10px;

    font-size:14px;
    font-weight:700;
    letter-spacing:1px;

    cursor:pointer;

    transition:.25s;
}

.iptv-observacion-general-admin button:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 16px rgba(0,150,255,.30);
}

.iptv-observacion-general-admin button:active{
    transform:scale(.98);
}
.btn-detalles-iptv{
    width:100%;
    margin-top:10px;
    padding:10px;
    border-radius:10px;
    border:1px solid rgba(0,180,255,.35);
    background:rgba(0,180,255,.08);
    color:#7fdcff;
    font-weight:700;
    cursor:pointer;
}

.btn-detalles-iptv:hover{
    background:rgba(0,180,255,.18);
}

.iptv-observaciones-box{
    display:none;
    margin-top:10px;
    padding:12px;
    background:rgba(10,20,30,.92);
    border-left:4px solid #25b8ff;
    border-radius:10px;
    color:#eefcff;
    line-height:1.6;
    text-align:left;
}

.iptv-observaciones-box.activo{
    display:block;
}
.btn-detalles-catalogo {
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0, 180, 255, .35);
    background: rgba(0, 180, 255, .10);
    color: #7fdcff;
    font-weight: 800;
    cursor: pointer;
}

.btn-detalles-catalogo:hover {
    background: rgba(0, 180, 255, .20);
}

.detalle-catalogo-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, .65);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.detalle-catalogo-modal.activo {
    display: flex;
}

.detalle-catalogo-burbuja {
    position: relative;
    width: min(520px, 95%);
    max-height: 75vh;
    overflow-y: auto;

    padding: 26px 24px;
    border-radius: 18px;

    background: #101820;
    border: 1px solid rgba(0, 180, 255, .35);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .45);

    color: #fff;
}
.detalle-catalogo-burbuja::-webkit-scrollbar {
    width: 8px;
}

.detalle-catalogo-burbuja::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 255, .45);
    border-radius: 10px;
}

.detalle-catalogo-burbuja::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06);
}
/* =========================================
   CATÁLOGO - GRID MEJORADO
========================================= */

.page-catalogo-publico .catalogo-container {
    display: block;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 20px;
}

.page-catalogo-publico .productos-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    width: 100%;
}

/* =========================================
   CARRITO FLOTANTE
========================================= */

.page-catalogo-publico .carrito-lateral {
    position: fixed;
    top: 0;
    right: -420px;
    width: 390px;
    max-width: 92vw;
    height: 100vh;
    z-index: 99998;

    overflow-y: auto;
    padding: 20px;

    background: rgba(10, 16, 26, 0.97);
    border-left: 1px solid rgba(0, 180, 255, 0.35);
    box-shadow: -18px 0 40px rgba(0, 0, 0, 0.55);

    transition: right 0.28s ease;
}

.page-catalogo-publico .carrito-lateral.carrito-abierto {
    right: 0;
}

.page-catalogo-publico .carrito-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99997;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(2px);
}

.page-catalogo-publico .carrito-overlay.activo {
    display: block;
}

/* Botón carrito */

.page-catalogo-publico .carrito-toggle {
    position: relative;
    cursor: pointer;
    border: none;
}

.page-catalogo-publico .carrito-toggle::after {
    content: attr(data-count);
    position: absolute;
    top: -10px;
    right: -10px;

    min-width: 22px;
    height: 22px;
    padding: 0 6px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #ff2d55;
    color: #fff;

    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
}

/* =========================================
   CELULAR - 3 PRODUCTOS POR FILA
========================================= */

@media (max-width: 768px) {
    .page-catalogo-publico .catalogo-container {
        padding: 12px 8px;
    }

    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .page-catalogo-publico .producto-card {
        padding: 8px;
        border-radius: 12px;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 78px;
        object-fit: contain;
    }

    .page-catalogo-publico .producto-opciones-preview {
        font-size: 10px;
    }

    .page-catalogo-publico .producto-opcion-grupo-titulo {
        font-size: 10px;
    }

    .page-catalogo-publico .producto-opcion-linea {
        font-size: 10px;
        gap: 4px;
    }

    .page-catalogo-publico .producto-agregar,
    .page-catalogo-publico .btn-detalles-catalogo,
    .page-catalogo-publico .btn-ver-opciones {
        font-size: 10px;
        padding: 8px 5px;
        border-radius: 8px;
    }

    .page-catalogo-publico .carrito-lateral {
        width: 86vw;
        right: -90vw;
    }

    .page-catalogo-publico .carrito-lateral.carrito-abierto {
        right: 0;
    }
}

/* Pantallas muy pequeñas */
@media (max-width: 420px) {
    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 68px;
    }
}
.page-catalogo-publico .catalogo-container {
    display: block !important;
    max-width: 1600px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 18px !important;
}

.page-catalogo-publico .productos-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
}

.page-catalogo-publico .carrito-lateral {
    position: fixed !important;
    top: 0 !important;
    right: -430px !important;
    width: 390px !important;
    max-width: 90vw !important;
    height: 100vh !important;
    z-index: 99998 !important;
    margin: 0 !important;
    padding: 20px !important;
    overflow-y: auto !important;
    background: rgba(10, 16, 26, .98) !important;
    border-left: 1px solid rgba(0, 180, 255, .35) !important;
    box-shadow: -16px 0 45px rgba(0,0,0,.55) !important;
    transition: right .25s ease !important;
}

.page-catalogo-publico .carrito-lateral.carrito-abierto {
    right: 0 !important;
}

.page-catalogo-publico .carrito-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 99997 !important;
    background: rgba(0,0,0,.42) !important;
    backdrop-filter: blur(2px) !important;
}

.page-catalogo-publico .carrito-overlay.activo {
    display: block !important;
}

.page-catalogo-publico .btn-ver-opciones,
.page-catalogo-publico .btn-detalles-catalogo {
    width: auto !important;
    margin: 6px auto 0 !important;
    padding: 5px 9px !important;
    font-size: 10px !important;
    border-radius: 999px !important;
    opacity: .82 !important;
}

@media (max-width: 768px) {
    .page-catalogo-publico .catalogo-container {
        padding: 10px 6px !important;
    }

    .page-catalogo-publico .productos-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 7px !important;
    }

    .page-catalogo-publico .producto-card {
        padding: 7px !important;
        border-radius: 12px !important;
    }

    .page-catalogo-publico .producto-imagen {
        max-height: 66px !important;
        object-fit: contain !important;
    }

    .page-catalogo-publico .producto-opciones-preview,
    .page-catalogo-publico .producto-opcion-linea,
    .page-catalogo-publico .producto-opcion-grupo-titulo {
        font-size: 9.5px !important;
    }

    .page-catalogo-publico .producto-agregar {
        font-size: 10px !important;
        padding: 7px 4px !important;
    }

    .page-catalogo-publico .carrito-lateral {
        width: 86vw !important;
        right: -90vw !important;
    }

    .page-catalogo-publico .carrito-lateral.carrito-abierto {
        right: 0 !important;
    }
}
/* Todas las opciones siempre visibles */

.page-catalogo-publico .preview-extra{
    display:flex !important;
}

.page-catalogo-publico .producto-opciones-preview{
    height:auto !important;
    overflow:visible !important;
}

.page-catalogo-publico .producto-opcion-grupo{
    margin-bottom:8px;
}
/* =========================================
   OPCIONES SIEMPRE VISIBLES CON SCROLL
========================================= */

.page-catalogo-publico .producto-opciones-preview {
    max-height: 240px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 5px !important;
}

.page-catalogo-publico .preview-extra {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    max-height: none !important;
}

/* Scroll bonito dentro de las opciones */
.page-catalogo-publico .producto-opciones-preview::-webkit-scrollbar {
    width: 6px;
}

.page-catalogo-publico .producto-opciones-preview::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 255, .45);
    border-radius: 10px;
}

.page-catalogo-publico .producto-opciones-preview::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .06);
}

/* =========================================
   BOTÓN DETALLES COMO AGREGAR
========================================= */

.page-catalogo-publico .btn-detalles-catalogo {
    width: 100% !important;
    display: block !important;
    margin-top: 10px !important;
    padding: 11px 14px !important;

    border-radius: 12px !important;
    border: 1px solid rgba(0, 180, 255, .35) !important;

    background: linear-gradient(135deg, rgba(0, 120, 190, .85), rgba(0, 180, 255, .75)) !important;
    color: #ffffff !important;

    font-size: 13px !important;
    font-weight: 900 !important;
    letter-spacing: .5px !important;
    text-align: center !important;
    cursor: pointer !important;
}

.page-catalogo-publico .btn-detalles-catalogo:hover {
    background: linear-gradient(135deg, rgba(0, 160, 230, .95), rgba(0, 210, 255, .85)) !important;
    transform: translateY(-1px);
}
.page-catalogo-publico .btn-detalles-catalogo{
    width:100% !important;
    display:block !important;

    margin-top:10px !important;
    padding:11px 14px !important;

    border-radius:12px !important;

    border:1px solid rgba(120,220,255,.35) !important;

    background:
        linear-gradient(
            145deg,
            #162231 0%,
            #20354a 40%,
            #162231 100%
        ) !important;

    color:#dff8ff !important;

    font-size:13px !important;
    font-weight:800 !important;
    letter-spacing:1px !important;

    cursor:pointer;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.08),
        0 4px 14px rgba(0,120,255,.15);

    transition:all .25s ease;
}

.page-catalogo-publico .btn-detalles-catalogo:hover{

    transform:translateY(-2px);

    background:
        linear-gradient(
            145deg,
            #1d3045 0%,
            #2a4d69 40%,
            #1d3045 100%
        ) !important;

    border-color:rgba(120,220,255,.65) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.10),
        0 8px 22px rgba(0,180,255,.28);
}

.page-catalogo-publico .btn-detalles-catalogo:active{
    transform:scale(.98);
}
.contador-codigo{
    width:180px;
    margin:0 auto 22px;

    padding:18px 20px;

    border-radius:18px;

    background:linear-gradient(
        180deg,
        rgba(5,35,55,.92),
        rgba(8,22,35,.98)
    );

    border:1px solid rgba(0,180,255,.35);

    color:#79ebff;

    font-size:52px;
    font-weight:900;
    letter-spacing:2px;

    text-align:center;

    box-shadow:
        0 0 30px rgba(0,180,255,.15),
        inset 0 0 25px rgba(0,180,255,.05);
}

.contador-codigo.vencido {
    background: rgba(255, 45, 85, .12);
    border-color: rgba(255, 45, 85, .45);
    color: #ff6b87;
}

.cliente-btn.codigo.bloqueado,
.cliente-btn.codigo:disabled {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(1);
}
.codigo-centro-panel{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    margin-top:25px;
}

.texto-tiempo{
    text-align:center;
    margin-top:20px;
    margin-bottom:18px;

    color:#9eb2c6;
    font-size:20px;
}

.btn-buscar-codigo{

    width:260px !important;

    display:flex !important;
    align-items:center;
    justify-content:center;
    gap:10px;

    margin:0 auto !important;

    padding:16px 20px !important;

    border-radius:18px !important;

    background:linear-gradient(
        135deg,
        #1574ff,
        #1fd5ff
    ) !important;

    border:none !important;

    color:#fff !important;

    font-size:24px !important;
    font-weight:900 !important;

    box-shadow:
        0 10px 25px rgba(0,180,255,.30);

    transition:.25s;
}

.btn-buscar-codigo:hover{
    transform:translateY(-2px);

    box-shadow:
        0 15px 35px rgba(0,180,255,.45);
}

.btn-buscar-codigo i{
    font-size:22px;
}
/* ======================================
   PANTALLA CÓDIGO TEMPORAL
====================================== */

.page-admin-codigos .cliente-login-card{
    text-align:center;
}

.page-admin-codigos .cliente-login-card h1{
    width:100%;
    display:block;

    margin:25px auto 15px auto !important;

    text-align:center !important;

    font-size:72px;      /* ajusta si lo quieres más grande */
    line-height:1;

    letter-spacing:2px;
}

.page-admin-codigos .texto-tiempo{
    width:100%;
    text-align:center !important;
}

.page-admin-codigos .codigo-centro-panel{
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
@media (max-width: 900px) {
    #cuentasTable td[data-label="Correo"],
    #cuentasTable td[data-label="Contraseña"],
    #cuentasTable td[data-label="Perfil"],
    #cuentasTable td[data-label="PIN"],
    #cuentasTable td[data-label="Pin"],
    #cuentasMaestrasTable td[data-label="Correo"],
    #cuentasMaestrasTable td[data-label="Contraseña"] {
        grid-template-columns: 1fr !important;
        gap: 7px !important;
        align-items: stretch !important;
        text-align: left !important;
    }

    #cuentasTable td[data-label="Correo"]::before,
    #cuentasTable td[data-label="Contraseña"]::before,
    #cuentasTable td[data-label="Perfil"]::before,
    #cuentasTable td[data-label="PIN"]::before,
    #cuentasTable td[data-label="Pin"]::before,
    #cuentasMaestrasTable td[data-label="Correo"]::before,
    #cuentasMaestrasTable td[data-label="Contraseña"]::before {
        width: 100% !important;
        display: block !important;
    }

    .copy-container {
        width: 100% !important;
        max-width: 100% !important;
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 40px !important;
        gap: 8px !important;
        justify-self: stretch !important;
    }

    .copy-text {
        max-width: none !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: initial !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        text-align: left !important;
    }

    .copy-button {
        width: 38px !important;
        min-width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
    }

    .page-agregar-cuentas .password-container {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 48px !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .page-agregar-cuentas .password-container input {
        padding-right: 15px !important;
        min-width: 0 !important;
    }

    .page-agregar-cuentas .password-container .generate-btn {
        position: static !important;
        width: 48px !important;
        height: 50px !important;
        min-height: 50px !important;
    }
}
/* ===============================
   CÓDIGO DIRECTO
================================ */

.page-admin-codigos .cliente-login-badge{
    letter-spacing: 1px;
}

.page-admin-codigos .btn-buscar-codigo{
    min-width: 240px;
}

.page-admin-codigos .codigo-modal-numero,
.page-admin-codigos .codigo-numero{
    user-select: all;
    cursor: pointer;
}
.btn-generar-link{
    background: linear-gradient(135deg,#7c3aed,#2563eb);
    color:#fff;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 0 18px rgba(124,58,237,.35);
}

.btn-generar-link:hover{
    transform:translateY(-2px);
    box-shadow:0 0 25px rgba(37,99,235,.55);
}
/* BOTÓN CONSULTA CÓDIGO */

.code-link-btn{
    background:linear-gradient(135deg,#7c3aed,#2563eb) !important;
    color:#fff !important;
    border:1px solid rgba(255,255,255,.15);
    box-shadow:0 0 15px rgba(124,58,237,.35);
    transition:.25s;
}

.code-link-btn:hover{
    transform:translateY(-2px) scale(1.06);
    box-shadow:0 0 25px rgba(37,99,235,.65);
}
/* --- CORRECCIÓN FORZADA PARA MÓVIL --- */
@media (max-width: 760px) {
    
    /* 1. Fuerza a los contenedores padres a no colapsar el ancho */
    .action-options, 
    .action-options label, 
    .guarantee-section {
        display: block !important; /* Cambiamos de flex a block para evitar el apilado */
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }

    /* 2. Aseguramos que el radio button y el texto se vean bien */
    .action-options label {
        display: flex !important; /* Usamos flex solo aquí, pero con control */
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 15px !important;
        padding: 15px !important;
        margin-bottom: 10px !important;
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(255,255,255,0.1);
        border-radius: 8px;
    }

    /* 3. Evitamos que el input (check) se deforme */
    .action-options input[type="radio"] {
        flex: 0 0 auto !important;
        width: 20px !important;
        height: 20px !important;
        margin: 0 !important;
    }

    /* 4. Evitamos el efecto de letras verticales */
    .action-options span, 
    .action-options label {
        white-space: normal !important;
        word-break: keep-all !important; /* Importante: evita romper letras */
        overflow-wrap: break-word !important;
        display: inline-block !important;
    }
}