/* ================== TOKENS / TEMA ================== */
:root {
    /* Fondos */
    --bg-base: #0a0a0f;
    --bg-sidebar: #0d0d15;
    --bg-panel: #12121b;
    --bg-input: #15151f;
    --bg-hover: #1a1a26;
    --bg-elevated: #1f1f2e;

    /* Bordes */
    --border-soft: #1f1f2e;
    --border-mid: #363649;

    /* Texto */
    --text-base: #e6e6f0;
    --text-muted: #aaaaaa;
    --text-dim: #888888;
    --text-soft: #777777;

    /* Primario (brand) — solo es --primary, en gradiente va --primary -> --primary-to */
    --primary:      #d946ef;
    --primary-to:   #8b5cf6;
    --primary-hover:#f0a6ff;
    --primary-rgb:  217, 70, 239;

    /* Acentos semánticos (no cambian con el tema) */
    --success: #22c55e;
    --warn:    #f59e0b;
    --danger:  #ef4444;
    --info:    #3b82f6;

    /* Tipografía y densidad */
    --font-base: 14px;
    --row-pad-y: 12px;
    --row-pad-x: 12px;
}

/* Tema claro */
:root[data-theme="light"] {
    --bg-base:     #f5f5f8;
    --bg-sidebar:  #ffffff;
    --bg-panel:    #ffffff;
    --bg-input:    #f0f0f4;
    --bg-hover:    #e8e8ee;
    --bg-elevated: #dcdce4;

    --border-soft: #e0e0e8;
    --border-mid:  #c8c8d0;

    --text-base:  #1a1a26;
    --text-muted: #555555;
    --text-dim:   #707070;
    --text-soft:  #808080;
}

/* Color primario - presets */
:root[data-primary="red"]    { --primary:#ef4444; --primary-to:#f97316; --primary-hover:#fca5a5; --primary-rgb: 239, 68, 68; }
:root[data-primary="teal"]   { --primary:#14b8a6; --primary-to:#10b981; --primary-hover:#5eead4; --primary-rgb: 20, 184, 166; }
:root[data-primary="cyan"]   { --primary:#06b6d4; --primary-to:#0891b2; --primary-hover:#67e8f9; --primary-rgb: 6, 182, 212; }

/* Tamaño de fuente */
:root[data-font="sm"] { --font-base: 13px; }
:root[data-font="md"] { --font-base: 14px; }
:root[data-font="lg"] { --font-base: 16px; }

/* Densidad de tabla */
:root[data-density="compact"] { --row-pad-y: 6px;  --row-pad-x: 10px; }
:root[data-density="normal"]  { --row-pad-y: 12px; --row-pad-x: 18px; }

/* ================== RESET ================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
html { font-size: var(--font-base); }
body {
    font-family: 'Segoe UI', Tahoma, sans-serif;
    background: var(--bg-base);
    color: var(--text-base);
    /* font-size se hereda de html para que los rem escalen con el setting */
}
a { color: inherit; text-decoration: none; cursor: pointer; }
button { font-family: inherit; cursor: pointer; border: none; }
input, select, textarea {
    font-family: inherit;
    background: var(--bg-input);
    color: var(--text-base);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    padding: 8px 10px;
    outline: none;
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

/* ================== LOGIN ================== */
.login-body {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh;
    background: radial-gradient(circle at 30% 20%, #2a0a3a 0%, var(--bg-base) 60%);
}
.login-card {
    width: 360px;
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(var(--primary-rgb), 0.15);
}
.login-logo {
    display: flex; align-items: center; justify-content: center; gap: 10px;
    margin-bottom: 24px;
}
.login-card h2 { text-align: center; margin-bottom: 20px; font-weight: 600; }
.login-card label { display: block; font-size: 0.857rem; margin: 12px 0 6px; color: var(--text-muted); }
.login-hint { margin-top: 16px; font-size: 0.857rem; color: var(--text-soft); text-align: center; }
.alert {
    background: #4a1020; color: #ff8aa0;
    padding: 10px; border-radius: 6px; margin-bottom: 12px; font-size: 0.928rem; text-align: center;
}
.btn-primary {
    width: 100%; margin-top: 18px;
    background: linear-gradient(90deg, var(--primary), var(--primary-to));
    color: #fff; padding: 11px; border-radius: 8px; font-weight: 600;
    transition: transform .12s ease, box-shadow .18s ease, filter .15s ease;
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--primary-rgb),.3); }
.btn-primary:active, .btn-cancel:active, .btn-add-profile:active, .btn-new:active, .btn-export:active, .btn-copy:active, .btn-notify:active { transform: scale(.97); }

/* ================== LOGO ================== */
.logo-mark {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-to));
    color: #fff; font-weight: 700; font-size: 1.286rem;
    border-radius: 8px;
    box-shadow: 0 0 12px rgba(var(--primary-rgb),.5);
}
.logo-text {
    font-size: 1.286rem; font-weight: 700; letter-spacing: 2px;
    background: linear-gradient(90deg, var(--primary), var(--primary-to));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ================== APP LAYOUT ================== */
.app { display: flex; min-height: 100vh; }
.sidebar {
    width: 240px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-soft);
    display: flex; flex-direction: column;
    padding: 20px 0;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 0 20px 24px; }
.nav { flex: 1; padding: 0 12px; }
.nav-item {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px;
    border-radius: 8px;
    color: var(--text-muted); font-weight: 500;
    margin-bottom: 4px;
    transition: background .15s, color .15s;
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-base); }
.nav-item.active {
    background: linear-gradient(90deg, rgba(var(--primary-rgb),.15), rgba(var(--primary-rgb),.05));
    color: var(--text-base);
    border-left: 3px solid var(--primary);
}
.nav-item .ic { width: 20px; text-align: center; }
.sidebar-footer { padding: 12px; border-top: 1px solid var(--border-soft); margin-top: 12px; }
.user-pill { display: flex; align-items: center; gap: 10px; padding: 6px 8px; }
.user-avatar {
    width: 36px; height: 36px;
    background: linear-gradient(135deg, var(--primary), var(--primary-to));
    color: #fff; font-weight: 700;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
}
.user-name { font-weight: 600; font-size: 0.928rem; }
.user-role { font-size: 0.785rem; color: var(--text-soft); text-transform: uppercase; }
.logout-btn {
    display: block; text-align: center;
    margin-top: 10px; padding: 8px;
    border-radius: 6px;
    background: var(--bg-hover);
    color: var(--text-muted); font-size: 0.857rem;
}
.logout-btn:hover { background: var(--border-mid); color: var(--text-base); }

.main { flex: 1; padding: 24px; overflow-x: hidden; }

/* ================== TOPBAR / FILTROS ================== */
.topbar { margin-bottom: 20px; }
.filters {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 16px;
}
.field label { display: block; font-size: 0.785rem; color: var(--text-dim); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.search-field input { padding-left: 32px; background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 10px center; }

/* ================== PANEL ================== */
.panel {
    background: var(--bg-panel);
    border: 1px solid var(--border-soft);
    border-radius: 12px;
    padding: 20px;
}
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px;
}
.panel-head h2 { font-size: 1.286rem; font-weight: 600; }
.panel-actions { display: flex; gap: 8px; }
.btn-export {
    background: var(--bg-hover);
    color: #88ddff; border: 1px solid #224466;
    padding: 8px 14px; border-radius: 8px; font-weight: 500;
    transition: background .15s;
}
.btn-export:hover { background: #1f2a40; }
.btn-new {
    background: linear-gradient(90deg, #10b981, #22c55e);
    color: #fff;
    padding: 8px 14px; border-radius: 8px; font-weight: 600;
    box-shadow: 0 4px 12px rgba(34,197,94,.25);
}
.btn-new:hover { transform: translateY(-1px); }

/* ================== TABLA ================== */
.table-wrap { overflow-x: auto; }
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.928rem;
}
.data-table th {
    text-align: left; padding: 10px 12px;
    color: var(--text-dim); font-weight: 500; font-size: 0.785rem; text-transform: uppercase; letter-spacing: 0.5px;
    border-bottom: 1px solid var(--border-soft);
}
.data-table td {
    padding: var(--row-pad-y) var(--row-pad-x);
    border-bottom: 1px solid var(--bg-hover);
    vertical-align: middle;
}
.data-table tr:hover td { background: var(--bg-input); }
.data-table td.empty { text-align: center; color: var(--text-soft); padding: 40px; }

.cell-account { display: flex; align-items: center; gap: 12px; }
.svc-logo {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.928rem; color: #fff;
    flex-shrink: 0;
}
.cell-account-text .svc-name { font-weight: 600; }
.cell-account-text .svc-email { font-size: 0.785rem; color: var(--text-dim); }
.password-dot { color: #555; }

.profiles-icons {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding: 12px 16px 8px 16px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
}
.profiles-icons::-webkit-scrollbar { display: none; }
.profile-slot { flex-shrink: 0; }
.profile-dot {
    width: 22px; height: 22px;
    background: #2a1019;
    color: #ff5577;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.785rem;
}
.profile-dot.expired { background: #2a1019; color: #ff3355; }
.profile-dot.ok      { background: #102a19; color: #33ff77; }
.profile-dot.warn    { background: #2a2410; color: #ffcc55; }

.badge-days {
    display: inline-block; padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.857rem; font-weight: 600;
    background: #2a1019; color: #ff5577;
}
.badge-days.ok   { background: #102a19; color: #33ff77; }
.badge-days.warn { background: #2a2410; color: #ffcc55; }

.actions { display: flex; gap: 6px; }
.action-btn {
    width: 30px; height: 30px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    transition: background .15s;
    font-size: 1rem;
}
.action-btn:hover { background: var(--border-soft); }
.action-btn.view   { color: #FFE600; }
.action-btn.edit   { color: #00C2FF; }
.action-btn.delete { color: #FF2052; }
.action-btn.add    { color: #00FF7F; }

/* ================== SERVICIOS GRID ================== */
.grid-services {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.service-card {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    position: relative;
}
.service-card .svc-logo { margin: 0 auto 10px; width: 50px; height: 50px; font-size: 1.143rem; }
.service-card .name { font-weight: 600; }
.service-card .actions {
    position: absolute; top: 8px; right: 8px;
    opacity: 0; transition: opacity .15s;
}
.service-card:hover .actions { opacity: 1; }

/* ================== MODAL ================== */
.modal {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.7);
    display: flex;
    align-items: center; justify-content: center;
    z-index: 100;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.modal.open { opacity: 1; pointer-events: auto; }
.modal-card {
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    width: 100%; max-width: 480px;
    max-height: 90vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    transform: scale(.96) translateY(8px);
    opacity: 0;
    transition: transform .2s ease, opacity .2s ease;
}
.modal.open .modal-card { transform: scale(1) translateY(0); opacity: 1; }
.modal-card.large { max-width: 900px; }
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-soft);
}
.modal-head h3 { font-size: 1.143rem; font-weight: 600; }
.modal-close {
    background: transparent; color: var(--text-dim);
    font-size: 1.571rem; padding: 0 6px;
}
.modal-close:hover { color: var(--text-base); }
.modal-body { padding: 20px; overflow-y: auto; flex: 1; }
.modal-foot {
    padding: 12px 20px;
    border-top: 1px solid var(--border-soft);
    display: flex; justify-content: flex-end; gap: 10px;
}
/* Botones del footer de modal: altura/padding consistentes esten o no en un <form> */
.modal-foot .btn-primary {
    width: auto;
    margin-top: 0;
    padding: 10px 18px;
    border: 1px solid transparent;
}

/* ================== FORM ================== */
.form { padding: 20px; overflow-y: auto; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; font-size: 0.857rem; color: var(--text-muted); margin-bottom: 6px; }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--border-soft); }
.btn-cancel {
    background: transparent; color: var(--text-muted);
    padding: 9px 16px; border-radius: 8px;
    border: 1px solid var(--border-mid);
}
.btn-cancel:hover { background: var(--border-soft); color: var(--text-base); }
.form .btn-primary { width: auto; padding: 9px 18px; margin: 0; }

.btn-add-profile {
    background: linear-gradient(90deg, #10b981, #22c55e);
    color: #fff;
    padding: 8px 14px; border-radius: 8px; font-weight: 600;
    margin-right: auto;
}

/* ================== PERFIL CARDS (modal detail) ================== */
.profile-card {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px;
    display: grid;
    grid-template-columns: 60px 1fr auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 10px;
}
@media (max-width: 600px) {
    .profile-card {
        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "ring info"
            "actions actions";
        gap: 10px 12px;
    }
    .profile-card > .ring         { grid-area: ring; }
    .profile-card > .profile-info { grid-area: info; min-width: 0; }
    .profile-card > .actions {
        grid-area: actions;
        justify-content: flex-end;
        padding-top: 8px;
        border-top: 1px solid var(--border-soft);
    }
}
.ring {
    width: 60px; height: 60px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 3px solid #444;
    font-size: 0.785rem; font-weight: 600; text-align: center;
    color: #ff5566;
}
.ring.ok   { border-color: #22c55e; color: #33ff77; }
.ring.warn { border-color: #f59e0b; color: #ffcc55; }
.ring.expired { border-color: #ef4444; color: #ff5566; }
.profile-info .pname { font-weight: 600; margin-bottom: 4px; }
.profile-info .pmeta { font-size: 0.857rem; color: var(--text-dim); }
.profile-info .pmeta span { margin-right: 12px; }
.profile-info a { color: #25d366; }

.account-detail-head {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 16px;
}
.account-detail-head .svc-logo { width: 50px; height: 50px; font-size: 1rem; }
.account-detail-head .info h4 { font-size: 1.143rem; margin-bottom: 4px; }
.account-detail-head .info .sub { font-size: 0.857rem; color: var(--text-dim); }

/* ================== TOAST ================== */
.toast {
    position: fixed;
    bottom: 24px; right: 24px;
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    color: var(--text-base);
    padding: 12px 18px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    transform: translateY(20px);
    opacity: 0;
    transition: all .25s;
    pointer-events: none;
    z-index: 200;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast.error { border-color: #ef4444; }
.toast.success { border-color: #22c55e; }

/* ================== UNDO TOAST (DESHACER) ================== */
.undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    color: var(--text-base);
    padding: 12px 16px 16px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    gap: 14px;
    z-index: 250;
    opacity: 0;
    transition: opacity .25s, transform .25s;
}
.undo-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.undo-toast .undo-msg { font-weight: 500; }
.undo-toast .undo-btn {
    background: transparent;
    border: none;
    color: var(--primary, #e50914);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-size: 13px;
    cursor: pointer;
    padding: 4px 8px;
}
.undo-toast .undo-btn:hover { opacity: .8; }
.undo-toast .undo-bar {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: rgba(255,255,255,.08);
    border-radius: 0 0 8px 8px;
    overflow: hidden;
}
.undo-toast .undo-bar-fill {
    height: 100%;
    background: var(--primary, #e50914);
    width: 100%;
}

/* ================== VIEWS ================== */
section.view { display: none; }
section.view.active {
    display: block;
    animation: viewFadeIn .22s ease;
}
@keyframes viewFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================== RESPONSIVE ================== */
/* Hamburger, FAB, filtros toggle ocultos en desktop */
.btn-burger, .fab, .btn-filters { display: none; }
.drawer-overlay { display: none; }

@media (max-width: 768px) {
    /* SIDEBAR -> DRAWER */
    .sidebar {
        position: fixed; top: 0; left: 0;
        width: 250px; height: 100vh;
        z-index: 300;
        transform: translateX(-100%);
        transition: transform .25s ease;
        box-shadow: 4px 0 20px rgba(0,0,0,.5);
    }
    .sidebar.open { transform: translateX(0); }

    .drawer-overlay {
        display: block;
        position: fixed; inset: 0;
        background: rgba(0,0,0,.5);
        z-index: 250;
        opacity: 0; pointer-events: none;
        transition: opacity .2s;
    }
    .drawer-overlay.open { opacity: 1; pointer-events: auto; }

    /* HAMBURGER: anclada arriba-izquierda igual que los 2 botones rojos a la derecha */
    .btn-burger {
        display: flex; flex-direction: column; justify-content: space-between;
        width: 40px; height: 40px; padding: 10px;
        background: var(--bg-input); border: 1px solid var(--border-mid); border-radius: 8px;
        cursor: pointer;
        flex-shrink: 0;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        box-shadow: 0 4px 12px rgba(0,0,0,.4);
    }
    .btn-burger span {
        display: block; width: 100%; height: 2px;
        background: var(--text-base); border-radius: 2px;
    }

    .main { padding: 12px; padding-bottom: 16px; }

    /* TOPBAR: filtros siempre visibles, hamburguesa arriba */
    .topbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 14px;
        padding-top: 50px;
    }
    .btn-filters { display: none !important; }
    .filters {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 10px;
        flex: none;
        width: 100%;
    }
    .field label { font-size: 0.714rem; }

    /* PANEL HEAD */
    .panel-head { flex-direction: column; align-items: stretch; gap: 10px; }
    .panel-head h2 { font-size: 1.143rem; }
    .panel-actions { width: 100%; flex-wrap: wrap; }
    .panel-actions input[type="text"] { width: 100%; min-width: 0; }
    .btn-export, .btn-new { flex: 1; padding: 10px 12px; }

    /* TABLA: scroll horizontal con primera columna sticky */
    .data-table { min-width: 720px; font-size: 0.928rem; }
    .data-table th, .data-table td { padding: 10px 8px; }
    /* Ocultar columna # en mobile */
    .data-table thead th:first-child,
    .data-table tbody td:first-child { display: none; }
    /* TOUCH TARGETS */
    .action-btn { width: 40px; height: 40px; font-size: 1.143rem; }
    .profile-slot { width: 28px; height: 28px; }
    .profile-slot svg { width: 14px; height: 14px; }

    /* MODAL FULL-WIDTH */
    .modal { padding: 0; align-items: stretch; }
    .modal-card, .modal-card.tall, .modal-card.large {
        max-width: 100%;
        border-radius: 0;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
    }
    .modal-body { flex: 1 1 auto; min-height: 0; }
    .modal-foot { flex-shrink: 0; }
    .modal-body, .form { padding: 16px; }
    .form-row { margin-bottom: 12px; }
    input, select, textarea { font-size: 16px; /* iOS no hace zoom */ }
    .modal-head { padding: 14px 16px; }

    /* FAB oculto: el boton "+ Nuevo" del panel-head ya cumple la accion primaria */
    .fab { display: none !important; }
}

/* phones muy chicos */
@media (max-width: 400px) {
    .btn-export, .btn-new { font-size: 0.928rem; }
    .data-table td { font-size: 0.857rem; }
    .panel { padding: 10px; }
}

/* ================== SLOTS DE PERFIL ================== */
.profile-slot {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    border: 1.5px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background .12s, border-color .12s, color .12s;
}
.profile-slot svg { display: block; }
.profile-slot:hover { transform: scale(1.12); }

/* Estados con color tintado (paleta fluo) */
.profile-slot.filled.ok       { background: rgba(34,255,126,.18);  color: #22ff7e; border-color: rgba(34,255,126,.5); }
.profile-slot.filled.ok:hover { background: rgba(34,255,126,.28);  box-shadow: 0 0 0 3px rgba(34,255,126,.2); }

.profile-slot.filled.warn       { background: rgba(255,184,0,.18); color: #ffb800; border-color: rgba(255,184,0,.55); }
.profile-slot.filled.warn:hover { background: rgba(255,184,0,.28); box-shadow: 0 0 0 3px rgba(255,184,0,.2); }

.profile-slot.filled.expired       { background: rgba(255,59,92,.18);  color: #ff3b5c; border-color: rgba(255,59,92,.55); }
.profile-slot.filled.expired:hover { background: rgba(255,59,92,.28);  box-shadow: 0 0 0 3px rgba(255,59,92,.2); }

/* Slot vacio: persona blanca con aro tenue */
.profile-slot.empty       { background: transparent; color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.18); border-style: solid; }
.profile-slot.empty:hover { color: #fff; border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.06); }

#profileFormHeader { display: flex; align-items: center; gap: 12px; }
#profileFormHeader .svc-logo { width: 36px; height: 36px; }
#profileFormHeader h3 { font-size: 1.143rem; font-weight: 600; }

/* ================== MODAL ENTREGA ================== */
.delivery-body { text-align: center; padding: 24px; }
.delivery-check {
    width: 64px; height: 64px; margin: 0 auto 12px;
    border: 3px solid #22c55e; color: #22c55e;
    border-radius: 50%; font-size: 2.571rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}
.delivery-body h3 { margin-bottom: 14px; font-size: 1.428rem; }
.delivery-body pre {
    text-align: left;
    background: var(--bg-input); border: 1px solid var(--border-soft);
    border-radius: 8px; padding: 14px;
    font-family: inherit; font-size: 0.928rem;
    white-space: pre-wrap; word-break: break-word;
    max-height: 280px; overflow-y: auto;
    color: var(--text-base);
}
.delivery-foot { justify-content: center; gap: 12px; }
.btn-copy {
    background: #1c93d6; color: #fff;
    padding: 10px 22px; border-radius: 8px; font-weight: 600;
    transition: transform .1s, box-shadow .15s;
}
.btn-copy:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(28,147,214,.3); }
.btn-notify {
    background: #25d366; color: #fff;
    padding: 10px 22px; border-radius: 8px; font-weight: 600;
    transition: transform .1s, box-shadow .15s;
}
.btn-notify:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37,211,102,.3); }
.btn-notify[disabled] { background: #444; cursor: not-allowed; opacity: .6; }

/* ================== SERVICIOS v2 ================== */
.svc-logo-img {
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
}
.svc-logo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}
.action-btn.notify { color: #FFC400; }
.action-btn.notify:hover { background: rgba(255,196,0,.12); }
.action-btn.delivery { color: #00FF7F; }
.action-btn.delivery:hover { background: rgba(0,255,127,.12); }
.modal-card.tall { max-width: 600px; }
.modal-card.tall textarea { width: 100%; min-height: 180px; resize: vertical; }

/* ================== CLIENTES ================== */
.client-picker { display: flex; gap: 8px; align-items: center; }
.client-picker select { flex: 1; }
.btn-link {
    background: transparent;
    color: var(--primary);
    border: 1px solid var(--border-mid);
    cursor: pointer;
    font-size: 0.857rem;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: nowrap;
}
.btn-link:hover { background: var(--bg-hover); color: var(--primary-hover); }

.panel-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.panel-actions input[type="text"] {
    background: var(--bg-hover);
    border: 1px solid var(--border-mid);
    color: var(--text-base);
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 0.928rem;
    min-width: 0;
    flex: 1 1 180px;
    outline: none;
}
.panel-actions input[type="text"]:focus { border-color: var(--primary); }
.panel-actions .btn-new,
.panel-actions .btn-export { flex-shrink: 0; white-space: nowrap; }

/* ================== EDITOR DE PLANTILLA ================== */
.tpl-info {
    display: flex; align-items: center; gap: 10px;
    background: rgba(28,147,214,.1);
    border: 1px solid rgba(28,147,214,.35);
    color: #88ccee;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.857rem;
    margin-bottom: 14px;
}
.tpl-info-ic {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(28,147,214,.25);
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-style: normal;
}

.tpl-chips {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px;
    border: 1px dashed var(--border-mid);
    border-radius: 10px;
    margin-bottom: 14px;
}
.tpl-chip {
    color: #fff;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.857rem; font-weight: 600;
    border: none;
    cursor: pointer;
    transition: transform .1s, filter .15s;
}
.tpl-chip:hover { filter: brightness(1.15); transform: translateY(-1px); }
.tpl-chip:active { transform: translateY(0); }
.tpl-chip.c-orange { background: #f59e0b; }
.tpl-chip.c-green  { background: #22c55e; }
.tpl-chip.c-blue   { background: #3b82f6; }
.tpl-chip.c-violet { background: var(--primary-to); }
.tpl-chip.c-red    { background: #ef4444; }
.tpl-chip.c-gray   { background: #6b7280; }
.tpl-chip.c-yellow { background: #eab308; color: var(--bg-hover); }
.tpl-chip.c-cyan   { background: #06b6d4; }
.tpl-chip.c-pink   { background: #ec4899; }

.tpl-preview {
    background: var(--bg-input); border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 14px;
    font-family: inherit; font-size: 0.928rem;
    white-space: pre-wrap; word-break: break-word;
    min-height: 200px; max-height: 300px;
    overflow-y: auto;
    color: var(--text-base);
    margin: 0;
}

.btn-preview {
    background: #f59e0b; color: var(--bg-hover);
    padding: 9px 16px; border-radius: 8px; font-weight: 600;
    margin-right: auto;
    transition: filter .15s;
}
.btn-preview:hover { filter: brightness(1.1); }

/* ================== PAGINADOR ================== */
.pager {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    padding: 12px; margin-top: 8px;
    border-top: 1px solid var(--border-soft);
    font-size: 0.857rem; color: var(--text-muted);
}
.pager:empty { display: none; }
.pager-info { display: flex; align-items: center; gap: 8px; }
.pager-perpage {
    background: var(--bg-input); border: 1px solid var(--border-mid); color: var(--text-base);
    padding: 4px 8px; border-radius: 6px; font-size: 0.857rem;
    width: auto;
}
.pager-nav { display: flex; gap: 6px; margin-left: auto; }
.pager-btn {
    width: 32px; height: 32px;
    background: var(--bg-input); border: 1px solid var(--border-mid); color: var(--text-base);
    border-radius: 6px; font-size: 1.143rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.pager-btn:hover:not([disabled]) { background: var(--border-soft); border-color: var(--primary); }
.pager-btn[disabled] { opacity: .35; cursor: not-allowed; }
@media (max-width: 768px) {
    .pager { padding: 10px; gap: 8px; }
    .pager-btn { width: 40px; height: 40px; }
}

/* ================== CHOICES.JS (autocomplete selects) ================== */
.netfly-choices.choices { margin-bottom: 0; width: 100%; }
.netfly-choices .choices__inner {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--pill-border);
    border-radius: 0;
    color: var(--text-base);
    min-height: 38px;
    padding: 6px 0;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .2s;
}
.netfly-choices.is-focused .choices__inner,
.netfly-choices.is-open .choices__inner {
    border-bottom-color: var(--primary);
    box-shadow: 0 1px 0 0 var(--primary);
}
.netfly-choices .choices__list--single { padding: 0; }
.netfly-choices .choices__list--single .choices__item { color: var(--text-base); opacity: 1; }
.netfly-choices .choices__placeholder { color: var(--text-dim); opacity: 1; }

.netfly-choices .choices__list--dropdown,
.netfly-choices .choices__list[aria-expanded] {
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-radius: 6px;
    color: var(--text-base);
    margin-top: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,.5);
    z-index: 200;
}
.netfly-choices .choices__list--dropdown .choices__item,
.netfly-choices .choices__list[aria-expanded] .choices__item,
.netfly-choices .choices__list--dropdown .choices__item--selectable,
.netfly-choices .choices__list[aria-expanded] .choices__item--selectable {
    color: var(--text-base);
    opacity: 1;
    padding: 10px 12px;
    background: transparent;
}
.netfly-choices .choices__list--dropdown .choices__placeholder,
.netfly-choices .choices__list[aria-expanded] .choices__placeholder {
    color: var(--text-dim);
    opacity: 1;
}
.netfly-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.netfly-choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: linear-gradient(90deg, rgba(var(--primary-rgb),.25), rgba(var(--primary-rgb),.25));
    color: #fff;
}
.netfly-choices .choices__list--dropdown .choices__item--selectable::after,
.netfly-choices .choices__list[aria-expanded] .choices__item--selectable::after {
    content: '';
    display: none;
}
.netfly-choices .choices__list--dropdown .choices__item--selectable {
    padding-right: 12px;
}

.netfly-choices .choices__input,
.netfly-choices .choices__input--cloned,
.netfly-choices .choices__list--dropdown .choices__input,
.netfly-choices .choices__list[aria-expanded] .choices__input {
    background: var(--bg-input) !important;
    color: var(--text-base) !important;
    -webkit-text-fill-color: var(--text-base) !important;
    caret-color: var(--text-base);
    border: none;
    border-bottom: 1px solid var(--border-mid);
    padding: 10px 12px;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
}
.netfly-choices .choices__input::placeholder,
.netfly-choices .choices__input--cloned::placeholder {
    color: var(--text-dim);
    opacity: 1;
}

.netfly-choices[data-type*="select-one"]::after {
    border-color: var(--text-dim) transparent transparent transparent;
}
.netfly-choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent var(--primary) transparent;
}

.client-picker .netfly-choices { flex: 1; min-width: 0; }

@media (max-width: 600px) {
    .netfly-choices .choices__inner { min-height: 44px; font-size: 16px; padding: 10px 12px; }
    .netfly-choices .choices__list--dropdown .choices__item,
    .netfly-choices .choices__list[aria-expanded] .choices__item { padding: 14px 12px; font-size: 15px; }
    .netfly-choices .choices__input { font-size: 16px; padding: 12px; }
}

/* Filas con logo/icono + texto secundario (filtros topbar) */
.dd-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-width: 0;
}
.dd-logo {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.785rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
}
img.dd-logo, .dd-logo.dd-logo-img { object-fit: cover; }
.dd-name {
    flex: 1;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dd-meta {
    color: var(--text-dim);
    font-size: 0.857rem;
    flex-shrink: 0;
    margin-left: auto;
}
.dd-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    color: #c5c5d0;
}
.dd-icon svg { width: 18px; height: 18px; }

/* Estado activo: label rojo + linea roja debajo del header del select */
.field, .form-row { transition: color .15s; }
.field:has(.netfly-choices.is-open) > label,
.form-row:has(.netfly-choices.is-open) > label { color: #ef4444; }
.netfly-choices.is-open .choices__inner {
    border-color: var(--border-mid);
    box-shadow: inset 0 -2px 0 #ef4444;
}

/* ================== FLATPICKR (calendario) ================== */
.flatpickr-calendar {
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.5);
    max-width: 95vw;
}
.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after { border-bottom-color: var(--border-mid); }
.flatpickr-months,
.flatpickr-month,
.flatpickr-current-month,
.flatpickr-weekdays,
.flatpickr-weekday {
    background: transparent;
    color: var(--text-base);
}
.flatpickr-day {
    color: var(--text-base);
    border-radius: 8px;
}
.flatpickr-day.today { border-color: var(--primary); }
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: linear-gradient(90deg, var(--primary), var(--primary-to));
    border-color: transparent;
    color: #fff;
}
.flatpickr-day:hover:not(.flatpickr-disabled) {
    background: var(--border-soft);
    border-color: var(--border-mid);
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: #555; }
@media (max-width: 600px) {
    .flatpickr-calendar { font-size: 16px; }
    .flatpickr-day { height: 40px; line-height: 40px; max-width: 40px; }
    /* Backdrop oscuro detras del calendar (se activa via clase del <html>) */
    html.fp-modal-open::before {
        content: '';
        position: fixed; inset: 0;
        background: rgba(0,0,0,.6);
        z-index: 9998;
        pointer-events: none;
    }
    /* Calendar centrado tipo modal */
    .flatpickr-calendar.open {
        position: fixed !important;
        top: 50% !important; left: 50% !important;
        transform: translate(-50%, -50%) !important;
        z-index: 9999 !important;
        width: min(360px, 92vw) !important;
        box-shadow: 0 20px 60px rgba(0,0,0,.6);
    }
}

/* ================== DATE INPUT (PC: input + boton calendario) ================== */
.date-input-wrap {
    display: flex;
    align-items: center;
    gap: 0;
    border-bottom: 1px solid var(--pill-border);
    transition: border-color .15s, box-shadow .2s;
}
.date-input-wrap:focus-within {
    border-bottom-color: var(--primary);
    box-shadow: 0 1px 0 0 var(--primary);
}
.date-input-wrap > input.flatpickr-alt-input,
.date-input-wrap > input.flatpickr-input,
.date-input-wrap > input {
    flex: 1;
    min-width: 0;
    border-bottom: none !important;
    box-shadow: none !important;
}
.date-cal-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
    font-size: 1.05rem;
    padding: 0;
}
.date-cal-btn:hover {
    background: rgba(255,255,255,.06);
    color: var(--primary);
}
.date-cal-btn:focus-visible {
    outline: none;
    color: var(--primary);
}

/* ================== TAG SERVICIO GLOBAL ================== */
.svc-global-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.785rem;
    font-weight: 600;
    background: var(--bg-input);
    color: var(--text-dim);
    border: 1px solid var(--border-mid);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ================== SCROLLBARS ================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-sidebar); }
::-webkit-scrollbar-thumb {
    background: var(--border-mid);
    border-radius: 8px;
    border: 2px solid var(--bg-sidebar);
}
::-webkit-scrollbar-thumb:hover { background: var(--border-mid); filter: brightness(1.2); }
::-webkit-scrollbar-corner { background: transparent; }

html { scrollbar-width: thin; scrollbar-color: var(--border-mid) var(--bg-sidebar); }

/* ===================== MOVIMIENTOS ===================== */
.mov-toolbar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: end;
    margin-bottom: 16px;
}
.mov-toolbar .field { min-width: 150px; }
.mov-toolbar .field label {
    display: block;
    font-size: 0.785rem;
    color: var(--text-dim);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mov-toolbar input[type="date"] {
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    color: var(--text-base);
    padding: 8px 10px;
    border-radius: 6px;
    width: 100%;
}
.mov-toolbar .btn-primary { width: auto; padding: 9px 18px; margin: 0; }

.mov-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 18px;
}
.mov-card {
    background: var(--bg-hover);
    padding: 16px 18px;
    border-radius: 10px;
    border-left: 4px solid;
}
.mov-card.ventas   { border-color: #33ff77; }
.mov-card.ingresos { border-color: #3ba0ff; }
.mov-card.gastos   { border-color: #ff5566; }
.mov-card.balance  { border-color: #f59e0b; }
.mov-card .label {
    font-size: 0.785rem;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mov-card .value {
    font-size: 1.571rem;
    font-weight: 700;
    margin-top: 4px;
    color: var(--text-base);
}

.tipo-pill {
    padding: 3px 10px;
    border-radius: 10px;
    font-size: 0.785rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.tipo-pill.venta   { background: rgba(51,255,119,.15);  color: #33ff77; }
.tipo-pill.ingreso { background: rgba(59,160,255,.15);  color: #3ba0ff; }
.tipo-pill.gasto   { background: rgba(255,85,102,.15);  color: #ff5566; }

/* Tabs del modal de movimiento */
.mov-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-mid);
}
.mov-tab {
    flex: 1;
    background: transparent;
    border: 0;
    color: var(--text-dim);
    padding: 12px 18px;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    font-size: 0.928rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: color .15s, border-color .15s, background .15s;
}
.mov-tab:hover { color: #ccc; background: rgba(255,255,255,.03); }
.mov-tab.active[data-tab="venta"],
.mov-tab.active[data-tab="ingreso"] { color: #33ff77; border-color: #33ff77; }
.mov-tab.active[data-tab="gasto"]   { color: #ff5566; border-color: #ff5566; }

.mov-tab-pane { display: none; }
.mov-tab-pane.active { display: block; }

.mov-venta-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 18px;
}
.mov-venta-form,
.mov-venta-profiles {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 16px;
}
.mov-simple-form {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 8px;
    padding: 16px;
    max-width: 480px;
}

.mov-profiles-table th,
.mov-profiles-table td {
    padding: 8px 6px;
    font-size: 0.857rem;
}
.mov-profiles-table input[type="date"],
.mov-profiles-table input[type="number"] {
    background: var(--bg-base);
    border: 1px solid var(--border-mid);
    color: var(--text-base);
    padding: 5px 7px;
    border-radius: 4px;
    font-size: 0.857rem;
}
.mov-profiles-table input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
    accent-color: #33ff77;
}
#movProfileSearch {
    width: 100%;
    background: var(--bg-base);
    border: 1px solid var(--border-mid);
    color: var(--text-base);
    padding: 8px 12px;
    border-radius: 6px;
}

@media (max-width: 768px) {
    .mov-cards { grid-template-columns: repeat(2, 1fr); }
    .mov-venta-grid { grid-template-columns: 1fr; }
    .mov-toolbar .field { flex: 1; min-width: 130px; }

    /* Tabla de perfiles del modal Venta -> tarjetas verticales (sin scroll horizontal) */
    .mov-profiles-table { min-width: 0; }
    .mov-profiles-table thead { display: none; }
    .mov-profiles-table,
    .mov-profiles-table tbody,
    .mov-profiles-table tr,
    .mov-profiles-table td { display: block; width: 100%; }
    .mov-profiles-table tr {
        background: var(--bg-base);
        border: 1px solid var(--border-soft);
        border-radius: 10px;
        margin-bottom: 10px;
        padding: 10px 12px;
        position: relative;
    }
    .mov-profiles-table td {
        padding: 6px 0;
        border-bottom: none;
    }
    .mov-profiles-table td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.72rem;
        font-weight: 600;
        color: var(--text-dim);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 4px;
    }
    .mov-profiles-table td:first-child {
        position: absolute;
        top: 10px; right: 10px;
        padding: 0;
        width: auto;
    }
    .mov-profiles-table td:first-child::before { display: none; }
    .mov-profiles-table input[type="date"],
    .mov-profiles-table input[type="number"] {
        width: 100%;
        font-size: 16px;
    }
    .mov-profiles-table td.empty { text-align: center; padding: 20px; }
    .mov-profiles-table td.empty::before { display: none; }
}

/* ===================== TOGGLE "GENERAR PAGO" (modal perfil) ===================== */
.profile-payment-block {
    border: 1px dashed var(--border-mid);
    border-radius: 10px;
    padding: 14px;
    margin-top: 8px;
    background: rgba(255,255,255,.01);
}
label.toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    margin: 0;
    padding: 0;
    font-size: inherit;
    color: inherit;
}
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}
.toggle-slider {
    position: absolute;
    inset: 0;
    background: var(--border-mid);
    border-radius: 24px;
    transition: background .2s;
    cursor: pointer;
}
.toggle-slider::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    background: var(--text-base);
    border-radius: 50%;
    transition: transform .2s;
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
}
.toggle-switch input:checked + .toggle-slider { background: #22c55e; }
.toggle-switch input:checked + .toggle-slider::before { transform: translateX(20px); }
.toggle-switch input:focus + .toggle-slider { box-shadow: 0 0 0 2px rgba(34,197,94,.25); }

.toggle-label {
    font-size: 0.928rem;
    font-weight: 500;
    color: var(--text-base);
    line-height: 24px;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.payment-monto-row label {
    color: var(--text-muted);
    font-size: 0.857rem;
    display: block;
    margin-bottom: 6px;
}
.payment-monto-row input[type="number"] {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--pill-border);
    border-radius: 0;
    color: var(--text-base);
    padding: 8px 2px;
    width: 100%;
    font-size: 1rem;
    transition: border-color .15s, box-shadow .2s;
}
.payment-monto-row input[type="number"]:focus {
    outline: none;
    border-bottom-color: var(--primary);
    box-shadow: 0 1px 0 0 var(--primary);
}

/* ================== PHOSPHOR ICONS ================== */
.nav-item i.ph-fill {
    font-size: 18px;
    width: 20px;
    text-align: center;
    transition: transform .15s ease;
}
.nav-item:hover i.ph-fill { transform: scale(1.1); }
.nav-item[data-view="cuentas"]     i.ph-fill { color: var(--primary); }
.nav-item[data-view="clientes"]    i.ph-fill { color: #3b82f6; }
.nav-item[data-view="servicios"]   i.ph-fill { color: #22c55e; }
.nav-item[data-view="movimientos"] i.ph-fill { color: #f59e0b; }
.nav-item[data-view="usuarios"]    i.ph-fill { color: var(--primary-to); }
.nav-item.active i.ph-fill {
    filter: brightness(1.2) drop-shadow(0 0 6px currentColor);
}

/* Iconos en botones de accion (tablas, perfiles) - heredan color del .action-btn */
.action-btn i.ph-fill { font-size: 16px; line-height: 1; }

/* Tabs de movimientos */
.mov-tab i.ph-fill { font-size: 16px; margin-right: 4px; }
.mov-tab[data-tab="venta"]   i.ph-fill { color: var(--primary); }
.mov-tab[data-tab="ingreso"] i.ph-fill { color: #22c55e; }
.mov-tab[data-tab="gasto"]   i.ph-fill { color: #ef4444; }

/* Botones COPIAR / NOTIFICAR / Previsualizar */
.btn-copy i.ph-fill, .btn-notify i.ph-fill, .btn-preview i.ph-fill {
    font-size: 15px;
    margin-right: 4px;
    vertical-align: middle;
}
.btn-notify i.ph-fill { color: #25d366; }

/* Icono de check en delivery / bell en reminder */
.delivery-check i.ph-fill { font-size: 36px; color: #fff; line-height: 1; }

/* Icono "i" en plantilla */
.tpl-info i.tpl-info-ic { font-size: 16px; color: #60a5fa; vertical-align: middle; margin-right: 4px; }

/* Icono filtros (topbar mobile) */
.btn-filters i.ph-fill { font-size: 15px; margin-right: 4px; color: var(--primary); vertical-align: middle; }

/* ================== FILAS DE TABLA: FADE-IN ================== */
.data-table tbody tr {
    animation: rowIn .22s ease both;
}
@keyframes rowIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ================== MIS TAREAS ================== */
.topbar {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    position: relative;
}
.topbar .filters { flex: 1 1 auto; min-width: 0; }
.btn-tasks {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    position: relative;
    width: 38px; height: 38px;
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-radius: 10px;
    color: var(--text-base);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
    z-index: 5;
}
.btn-tasks i.ph-fill { font-size: 18px; color: var(--primary); }
.btn-tasks:hover  { background: var(--border-soft); border-color: var(--primary); }
.btn-tasks:active { transform: scale(.95); }
.tasks-badge {
    position: absolute;
    top: -4px; right: -4px;
    min-width: 18px; height: 18px;
    padding: 0 5px;
    background: linear-gradient(90deg, #ef4444, #f97316);
    color: #fff;
    font-size: 11px; font-weight: 700;
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(239,68,68,.4);
}

.tasks-panel {
    position: fixed;
    top: 70px;
    right: 16px;
    width: 380px;
    max-height: 75vh;
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    display: flex; flex-direction: column;
    z-index: 1200;
    opacity: 0; transform: translateY(-8px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}
.tasks-panel.open { opacity: 1; transform: translateY(0) scale(1); }
.tasks-panel[hidden] { display: none; }

.tasks-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-mid);
}
.tasks-head h3 { margin: 0; font-size: 1.071rem; font-weight: 600; color: var(--text-base); }
.tasks-head .modal-close {
    background: transparent; color: var(--text-dim);
    border: none; cursor: pointer;
    font-size: 1.571rem; line-height: 1;
    padding: 0 4px;
}
.tasks-head .modal-close:hover { color: var(--text-base); }

.tasks-section { padding: 8px 12px 4px; border-bottom: 1px solid var(--border-soft); }
.tasks-section:last-child { border-bottom: none; flex: 1 1 auto; overflow-y: auto; }
.tasks-section[data-section="pendientes"] { max-height: 38vh; overflow-y: auto; }

.tasks-section-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 6px 8px;
    position: sticky; top: 0;
    background: var(--bg-panel);
    z-index: 1;
}
.tasks-section-title {
    color: var(--text-base); font-size: 0.928rem; font-weight: 600;
    letter-spacing: .3px;
}
.tasks-section-title em {
    font-style: normal;
    color: var(--text-dim); font-weight: 500;
    margin-left: 4px;
}
.tasks-section-actions { display: inline-flex; gap: 4px; }
.ts-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    background: var(--bg-hover);
    border: 1px solid var(--border-mid);
    border-radius: 8px;
    cursor: pointer;
    color: var(--text-base);
    transition: background .12s, transform .1s, border-color .12s, color .12s;
}
.ts-btn i.ph-fill { font-size: 14px; }
.ts-btn:hover  { background: var(--border-soft); }
.ts-btn:active { transform: scale(.92); }
.ts-btn.add        { color: #33ff77; }
.ts-btn.add:hover  { border-color: #22c55e; background: #14281c; }
.ts-btn.move:hover { border-color: var(--primary); color: var(--primary-hover); }
.ts-btn.del        { color: #ff5566; }
.ts-btn.del:hover  { border-color: #ef4444; background: #2a1019; }

.tasks-list { padding: 4px 4px 8px; }
.task-empty {
    padding: 16px 8px;
    text-align: center;
    color: #666;
    font-size: 0.928rem;
    font-style: italic;
}
.task-item {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 8px;
    border-radius: 8px;
    transition: background .1s;
}
.task-item:hover { background: var(--bg-hover); }
.task-item.done .task-text {
    text-decoration: line-through;
    color: var(--text-soft);
}
.task-check {
    flex-shrink: 0;
    width: 16px; height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
}
.task-text {
    flex: 1 1 auto;
    color: var(--text-base);
    font-size: 1rem;
    word-break: break-word;
}
.task-edit {
    flex: 1 1 auto;
    background: var(--bg-base);
    border: 1px solid var(--primary);
    border-radius: 6px;
    padding: 6px 8px;
    color: var(--text-base);
    font-size: 1rem;
    outline: none;
}
.task-edit-btn {
    flex-shrink: 0;
    background: transparent;
    border: none;
    color: #666;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .12s, background .12s, color .12s;
}
.task-item:hover .task-edit-btn { opacity: 1; }
.task-edit-btn:hover { background: var(--border-mid); color: #5599ff; }
.task-del-btn:hover  { color: #ff5566; }
.task-edit-btn i.ph-fill { font-size: 14px; }

@media (max-width: 768px) {
    .tasks-panel {
        top: 60px;
        right: 8px; left: 8px;
        width: auto;
        max-height: 80vh;
    }
    /* Tamano touch-friendly en mobile (la posicion la maneja .topbar-actions) */
    .btn-tasks {
        width: 40px; height: 40px;
        z-index: 5;
        background: var(--bg-input);
        box-shadow: 0 4px 12px rgba(0,0,0,.4);
        margin-left: 0;
    }
    .btn-tasks i.ph-fill { font-size: 18px; }
    .task-edit-btn { opacity: 1; }
}

/* ================== PANEL DE CONFIGURACION ================== */
.settings-panel {
    position: fixed;
    top: 70px;
    right: 16px;
    width: 340px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bg-panel);
    border: 1px solid var(--border-mid);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.6);
    z-index: 1200;
    opacity: 0; transform: translateY(-8px) scale(.98);
    transition: opacity .18s ease, transform .18s ease;
}
.settings-panel.open { opacity: 1; transform: translateY(0) scale(1); }
.settings-panel[hidden] { display: none; }

.settings-head {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--border-mid);
}
.settings-head h3 { margin: 0; font-size: 1.071rem; font-weight: 600; color: var(--text-base); }
.settings-back {
    background: transparent; color: var(--text-dim);
    border: none; cursor: pointer;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .12s, color .12s;
}
.settings-back i.ph-fill { font-size: 18px; }
.settings-back:hover { background: var(--bg-hover); color: var(--text-base); }

.settings-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 18px; }

.settings-group { display: flex; flex-direction: column; gap: 8px; }
.settings-label {
    font-size: 0.857rem; font-weight: 500;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
}

.settings-toggle {
    display: flex; gap: 8px;
}
.settings-toggle .opt {
    flex: 1 1 0;
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 11px 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-mid);
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.928rem; font-weight: 600;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
}
.settings-toggle .opt i.ph-fill { font-size: 15px; }
.settings-toggle .opt:hover { background: var(--bg-hover); }
.settings-toggle .opt.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
    color: var(--primary);
}
.settings-toggle .opt.active i.ph-fill { color: var(--primary); }

/* Botones de tamaño con la "A" en distinto tamaño */
.settings-toggle .opt .font-sm { font-size: 0.857rem; }
.settings-toggle .opt .font-md { font-size: 1.143rem; }
.settings-toggle .opt .font-lg { font-size: 1.571rem; }

/* Color primario - swatches */
.settings-colors { display: flex; gap: 10px; }
.settings-colors .swatch {
    flex: 1 1 0;
    height: 44px;
    border-radius: 12px;
    border: 1px solid var(--border-mid);
    cursor: pointer;
    position: relative;
    transition: transform .12s, box-shadow .12s, border-color .12s;
}
.settings-colors .swatch::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
}
.settings-colors .swatch:hover { transform: translateY(-1px); }
.settings-colors .swatch.active {
    border-color: var(--text-base);
    box-shadow: 0 0 0 2px var(--bg-panel), 0 0 0 4px var(--text-base);
}
.settings-colors .swatch::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.5);
    transition: opacity .15s, transform .15s;
}
.settings-colors .swatch.active::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }

.settings-colors .sw-red    { background: linear-gradient(135deg, #ef4444, #f97316); }
.settings-colors .sw-purple { background: linear-gradient(135deg, #d946ef, #8b5cf6); }
.settings-colors .sw-teal   { background: linear-gradient(135deg, #14b8a6, #10b981); }
.settings-colors .sw-cyan   { background: linear-gradient(135deg, #06b6d4, #0891b2); }

@media (max-width: 768px) {
    .settings-panel {
        top: 60px;
        right: 8px; left: 8px;
        width: auto;
    }
}

/* ================== OCULTAR CUENTAS ================== */
.toggle-hidden {
    display: inline-flex; align-items: center; gap: 6px;
    cursor: pointer; user-select: none;
    color: var(--text-soft); font-size: 0.9rem;
    padding: 6px 10px;
    border-radius: 8px;
    transition: background .15s;
}
.toggle-hidden:hover { background: var(--border-soft); }
.toggle-hidden input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 16px;
    height: 16px;
    padding: 0;
    background: var(--bg-base);
    border: 1.5px solid var(--border-mid);
    border-radius: 4px;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: background .15s, border-color .15s;
    margin: 0;
}
.toggle-hidden input[type="checkbox"]:hover { border-color: var(--primary); }
.toggle-hidden input[type="checkbox"]:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .15);
}
.toggle-hidden input[type="checkbox"]:checked {
    background: var(--primary);
    border-color: var(--primary);
}
.toggle-hidden input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 0;
    width: 4px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.btn-hide {
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    border: 0;
    background: #f59e0b;
    color: #1a1a1a;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s, transform .05s;
}
.btn-hide:hover { filter: brightness(1.05); }
.btn-hide:active { transform: scale(.99); }
.btn-hide--restore { background: #10b981; color: #fff; }

/* ================== BADGE SUSCRIPCION (topbar) ================== */
.sub-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    background: #102a19;
    color: #33ff77;
    border: 1px solid transparent;
    user-select: none;
    white-space: nowrap;
}
.sub-badge.warn    { background: #2a2410; color: #ffcc55; }
.sub-badge.expired { background: #2a1019; color: #ff5577; }
.sub-badge i       { font-size: 16px; }
.sub-badge[hidden] { display: none !important; }

/* Lockout cuando la suscripcion esta vencida: atenuar todo menos el modal de aviso */
.app.locked > * {
    pointer-events: none;
    opacity: .25;
    user-select: none;
    filter: blur(1px);
}
#modalSubExpired.open {
    pointer-events: auto;
    opacity: 1;
    filter: none;
}
.sub-expired-body {
    padding: 24px 20px;
    text-align: center;
}
.sub-expired-body p {
    margin: 10px 0;
    color: var(--text-base, #e5e5e5);
}
.sub-expired-icon {
    font-size: 64px;
    color: #ff5577;
    line-height: 1;
    margin-bottom: 8px;
}

/* Form de configuracion en panel admin */
.settings-sub-form {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 14px;
    align-items: end;
    padding: 4px 0;
}
.settings-sub-form .form-row { margin-bottom: 0; }
.settings-sub-actions { align-self: end; }

@media (max-width: 768px) {
    .sub-badge {
        align-self: flex-start;
        font-size: 12px;
        padding: 6px 10px;
    }
    .settings-sub-form {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   ============== LIBRETA DIGITAL · CAPA VISUAL (REDISEÑO) ==============
   ===================================================================== */

/* ---------- Tokens de glow (paleta fluo) ---------- */
:root {
    --glow-ok:       0 0 10px rgba(34,255,126,.55), 0 0 22px rgba(34,255,126,.22);
    --glow-warn:     0 0 10px rgba(255,184,0,.55),  0 0 22px rgba(255,184,0,.22);
    --glow-expired:  0 0 10px rgba(255,59,92,.55),  0 0 22px rgba(255,59,92,.22);
    --glow-primary:  0 0 14px rgba(var(--primary-rgb),.5), 0 0 28px rgba(var(--primary-rgb),.22);
    --glow-success:  0 0 16px rgba(34,255,126,.6),  0 0 36px rgba(34,255,126,.28);
}
:root[data-theme="light"] {
    --glow-ok:       0 0 8px rgba(34,255,126,.4);
    --glow-warn:     0 0 8px rgba(255,184,0,.4);
    --glow-expired:  0 0 8px rgba(255,59,92,.4);
    --glow-primary:  0 0 10px rgba(var(--primary-rgb),.3);
    --glow-success:  0 0 12px rgba(34,255,126,.42);
}

/* ---------- Profile slot: anillo dinámico de progreso ---------- */
.profile-slot { position: relative; overflow: visible; }
.profile-slot .profile-ring {
    position: absolute;
    inset: -4px;
    width: calc(100% + 8px);
    height: calc(100% + 8px);
    pointer-events: none;
    transform: rotate(-90deg);
}
.profile-slot .ring-track {
    fill: none;
    stroke: rgba(255,255,255,.14);
    /* stroke-width se setea inline por buildRing para escalar */
}
.profile-slot .ring-progress {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease, stroke .25s ease;
}
.profile-slot.filled.ok       .ring-progress { stroke: #22ff7e; }
.profile-slot.filled.warn     .ring-progress { stroke: #ffb800; }
.profile-slot.filled.expired  .ring-progress { stroke: #ff3b5c; }

/* Glow sobre el avatar ocupado: doble halo más prominente, paleta fluo */
.profile-slot.filled.ok       { box-shadow: 0 0 10px rgba(34,255,126,.55), 0 0 18px rgba(34,255,126,.22); }
.profile-slot.filled.warn     { box-shadow: 0 0 10px rgba(255,184,0,.55),  0 0 18px rgba(255,184,0,.22); }
.profile-slot.filled.expired  { box-shadow: 0 0 10px rgba(255,59,92,.55),  0 0 18px rgba(255,59,92,.22); }
.profile-slot.filled:hover    { transform: scale(1.18); }

/* Badge flotante "30D" arriba a la derecha del slot — discreto, con borde-corte */
.profile-day-badge {
    position: absolute;
    top: -7px; right: -7px;
    min-width: 16px;
    padding: 0 4px;
    font-size: 8.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .2px;
    border-radius: 999px;
    color: #0a0a0f;
    background: #22ff7e;
    border: 1.5px solid var(--bg-base);
    box-shadow: 0 2px 4px rgba(0,0,0,.35);
    pointer-events: none;
    text-align: center;
    z-index: 2;
}
.profile-slot.warn    .profile-day-badge { background: #ffb800; }
.profile-slot.expired .profile-day-badge { background: #ff3b5c; color: #fff; }
.profile-slot.empty   .profile-day-badge { display: none; }

.profiles-icons .profile-slot { margin-right: 6px; }

/* ---------- Tabla de cuentas: hover con glow sutil ---------- */
.data-table tbody tr {
    transition: background .15s ease, box-shadow .2s ease;
}
.data-table tbody tr:hover {
    box-shadow: inset 0 0 0 1px rgba(var(--primary-rgb), .18),
                inset 0 0 18px rgba(var(--primary-rgb), .06);
}
.data-table tbody tr:hover td:first-child {
    box-shadow: inset 3px 0 0 var(--primary);
}

/* Action buttons con glow al hover (paleta neón pura) */
.action-btn { transition: background .15s, transform .12s, box-shadow .2s; }
.action-btn.view:hover    { box-shadow: var(--glow-warn);    color: #FFE600; }
.action-btn.edit:hover    { box-shadow: var(--glow-primary); color: #00C2FF; }
.action-btn.delete:hover  { box-shadow: var(--glow-expired); color: #FF2052; }
.action-btn.add:hover     { box-shadow: var(--glow-ok);      color: #00FF7F; }
.action-btn.notify:hover  { box-shadow: var(--glow-warn); }
.action-btn.delivery:hover{ box-shadow: var(--glow-ok); }

/* ---------- Sidebar: item activo con glow interno ---------- */
.nav-item {
    position: relative;
    transition: background .15s, color .15s, box-shadow .2s;
}
.nav-item.active {
    box-shadow: inset 4px 0 16px rgba(var(--primary-rgb), .25);
}
.nav-item:hover i.ph-fill {
    filter: drop-shadow(0 0 6px currentColor);
}

/* ---------- Topbar: botones de tareas/configuración con glow ---------- */
.btn-tasks { transition: background .15s, border-color .15s, transform .1s, box-shadow .2s; }
.btn-tasks:hover { box-shadow: var(--glow-primary); }

/* Pulso sutil del badge de notificaciones cuando hay pendientes */
.tasks-badge { animation: badgePulse 2.4s ease-in-out infinite; }
@keyframes badgePulse {
    0%, 100% { box-shadow: 0 2px 6px rgba(239,68,68,.4); }
    50%      { box-shadow: 0 2px 6px rgba(239,68,68,.4), 0 0 14px rgba(239,68,68,.55); }
}

/* Sub-badge: glow según estado */
.sub-badge { transition: box-shadow .25s; }
.sub-badge:not(.warn):not(.expired) { box-shadow: 0 0 12px rgba(34,197,94,.18); }
.sub-badge.warn    { box-shadow: 0 0 12px rgba(245,158,11,.22); }
.sub-badge.expired { box-shadow: 0 0 14px rgba(239,68,68,.32); animation: badgePulse 2s ease-in-out infinite; }

/* ---------- Login: glow más intenso + branding ---------- */
.login-body {
    background:
        radial-gradient(circle at 25% 15%, rgba(var(--primary-rgb), .28) 0%, transparent 55%),
        radial-gradient(circle at 75% 85%, rgba(139, 92, 246, .18) 0%, transparent 50%),
        var(--bg-base);
}
.login-card {
    position: relative;
    box-shadow:
        0 20px 60px rgba(var(--primary-rgb), .18),
        0 0 0 1px rgba(var(--primary-rgb), .12),
        0 0 80px rgba(var(--primary-rgb), .15);
}
.login-card::before {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .4), transparent 50%, rgba(var(--primary-rgb), .2));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
}
.login-tagline {
    text-align: center;
    color: var(--text-soft);
    font-size: .857rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 4px;
    margin-bottom: 8px;
}
.login-logo .logo-mark {
    box-shadow: 0 0 20px rgba(var(--primary-rgb), .55), 0 0 40px rgba(var(--primary-rgb), .25);
}

/* ---------- MODAL VENTA EXITOSA (rediseño) ---------- */
.delivery-success {
    text-align: center;
    padding: 28px 22px 20px;
}
.delivery-shield {
    width: 96px; height: 96px;
    margin: 0 auto 18px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(34,197,94,.18), rgba(16,185,129,.08));
    border: 2px solid rgba(34,197,94,.55);
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--glow-success);
    animation: shieldPulse 2.4s ease-in-out infinite;
    position: relative;
}
.delivery-shield i.ph-fill {
    font-size: 52px;
    color: #4ade80;
    filter: drop-shadow(0 0 8px rgba(34,197,94,.7));
    line-height: 1;
}
@keyframes shieldPulse {
    0%, 100% { box-shadow: 0 0 16px rgba(34,197,94,.6),  0 0 36px rgba(34,197,94,.28); }
    50%      { box-shadow: 0 0 22px rgba(34,197,94,.7),  0 0 56px rgba(34,197,94,.4); }
}
.delivery-shield.warn {
    background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(245,158,11,.08));
    border-color: rgba(245,158,11,.55);
    box-shadow: 0 0 16px rgba(245,158,11,.6), 0 0 36px rgba(245,158,11,.28);
    animation: shieldPulseWarn 2.4s ease-in-out infinite;
}
.delivery-shield.warn i.ph-fill { color: #fbbf24; filter: drop-shadow(0 0 8px rgba(245,158,11,.7)); }
@keyframes shieldPulseWarn {
    0%, 100% { box-shadow: 0 0 16px rgba(245,158,11,.6), 0 0 36px rgba(245,158,11,.28); }
    50%      { box-shadow: 0 0 22px rgba(245,158,11,.7), 0 0 56px rgba(245,158,11,.4); }
}

.delivery-title {
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: .5px;
    background: linear-gradient(90deg, #4ade80, #22c55e);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.delivery-title.warn {
    background: linear-gradient(90deg, #fbbf24, #f59e0b);
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.delivery-subtitle {
    font-size: .857rem;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.delivery-text-block {
    background: var(--bg-input);
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    padding: 14px;
    text-align: left;
    font-family: inherit;
    font-size: .928rem;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 260px;
    overflow-y: auto;
    color: var(--text-base);
    margin: 0 0 8px;
    box-shadow: inset 0 0 24px rgba(0,0,0,.25);
}
.delivery-protocol {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 14px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), .08);
    border: 1px solid rgba(var(--primary-rgb), .25);
    font-size: .75rem;
    color: var(--text-dim);
    letter-spacing: 2px;
    text-transform: uppercase;
}
.delivery-protocol i.ph-fill { color: var(--primary); font-size: 12px; }

/* Footer: botón WhatsApp full-width destacado */
.delivery-foot.foot-stacked {
    flex-direction: column;
    gap: 10px;
    padding: 16px 22px 22px;
}
.delivery-foot.foot-stacked .btn-notify {
    width: 100%;
    padding: 14px;
    font-size: 1rem;
    box-shadow: 0 6px 20px rgba(37,211,102,.35);
}
.delivery-foot.foot-stacked .btn-notify:hover:not([disabled]) {
    box-shadow: 0 8px 28px rgba(37,211,102,.5);
}
.delivery-foot.foot-stacked .btn-copy {
    width: 100%;
    padding: 12px;
    background: var(--bg-input);
    color: var(--text-base);
    border: 1px solid var(--border-mid);
}
.delivery-foot.foot-stacked .btn-copy:hover { background: var(--bg-hover); }

@media (max-width: 600px) {
    .delivery-title { font-size: 1.5rem; }
    .delivery-shield { width: 80px; height: 80px; }
    .delivery-shield i.ph-fill { font-size: 42px; }
}

/* ===== Iter 2: Anillo SVG grande dentro de .profile-card .ring ===== */
.profile-card .ring.has-progress {
    position: relative;
    border: none;
    overflow: visible;
    background: transparent;
}
.profile-card .ring.has-progress .profile-ring {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    transform: rotate(-90deg);
    pointer-events: none;
}
.profile-card .ring.has-progress .ring-track {
    fill: none;
    stroke: rgba(255,255,255,.1);
}
.profile-card .ring.has-progress .ring-progress {
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    transition: stroke-dashoffset .6s ease, stroke .25s ease;
}
.profile-card .ring.has-progress .ring-label {
    position: relative; z-index: 1;
    font-size: .785rem; font-weight: 700;
}
.profile-card .ring.ok      { color: #22ff7e; }
.profile-card .ring.warn    { color: #ffb800; }
.profile-card .ring.expired { color: #ff3b5c; }
.profile-card .ring.has-progress.ok      { box-shadow: 0 0 12px rgba(34,255,126,.32); border-radius: 50%; }
.profile-card .ring.has-progress.warn    { box-shadow: 0 0 12px rgba(255,184,0,.32);  border-radius: 50%; }
.profile-card .ring.has-progress.expired { box-shadow: 0 0 12px rgba(255,59,92,.32);  border-radius: 50%; }

/* ============================================================
   ============== LIBRETA DIGITAL · SISTEMA VISUAL V2 ==========
   ============================================================ */

/* ---------- Tokens base ---------- */
:root {
    --radius-pill:    999px;
    --radius-card:    14px;
    --radius-input:   10px;
    --space-card-pad: 18px;
    --pill-bg:        rgba(255,255,255,.04);
    --pill-bg-hover:  rgba(255,255,255,.07);
    --pill-border:    rgba(255,255,255,.08);
}
:root[data-theme="light"] {
    --pill-bg:        rgba(0,0,0,.04);
    --pill-bg-hover:  rgba(0,0,0,.07);
    --pill-border:    rgba(0,0,0,.08);
}

/* ---------- Componente .pill ---------- */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    border-radius: var(--radius-pill);
    padding: 8px 14px;
    color: var(--text-base);
    font-size: .92rem;
    transition: background .15s, border-color .15s;
    max-width: 100%;
    min-width: 0;
}
.pill:hover { background: var(--pill-bg-hover); }
.pill > .pill-ic {
    color: var(--primary);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    font-size: 1.05em;
}
.pill > .pill-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.pill > .pill-copy {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-dim);
    padding: 4px;
    border-radius: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    transition: color .15s, background .15s;
}
.pill > .pill-copy:hover { color: var(--text-base); background: var(--pill-bg-hover); }
.pill > .pill-copy i.ph-fill { font-size: 14px; }

/* ---------- Componente .pill-status (badges OK / WARN / EXPIRED / NEUTRAL) ---------- */
.pill-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 700;
    font-size: .82rem;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    line-height: 1.4;
    letter-spacing: .3px;
    white-space: nowrap;
}
.pill-status.ok      { background: rgba(34,255,126,.15);  color: #22ff7e; border: 1px solid rgba(34,255,126,.4); }
.pill-status.warn    { background: rgba(255,184,0,.15);   color: #ffb800; border: 1px solid rgba(255,184,0,.45); }
.pill-status.expired { background: rgba(255,59,92,.15);   color: #ff3b5c; border: 1px solid rgba(255,59,92,.45); }
.pill-status.neutral { background: var(--pill-bg);        color: var(--text-muted); border: 1px solid var(--pill-border); }
.pill-status.primary { background: rgba(var(--primary-rgb),.12); color: var(--primary); border: 1px solid rgba(var(--primary-rgb),.3); }

/* ---------- Componente .btn-outline ---------- */
.btn-outline {
    background: transparent;
    border: 1px solid var(--border-mid);
    color: var(--text-base);
    padding: 9px 16px;
    border-radius: var(--radius-input);
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s, color .15s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.btn-outline:hover { background: var(--pill-bg-hover); border-color: var(--primary); color: var(--text-base); }
.btn-outline i.ph-fill { font-size: 15px; }

/* ---------- Refresh Sidebar ---------- */
.nav { padding: 0 8px; }
.nav-item {
    border-radius: var(--radius-input);
    margin: 0 0 4px;
    padding: 11px 14px;
    border-left: none !important;
}
.nav-item.active {
    background: linear-gradient(90deg, rgba(var(--primary-rgb),.22), rgba(var(--primary-rgb),.06));
    color: var(--text-base);
    box-shadow: inset 0 0 24px rgba(var(--primary-rgb),.12);
}
.nav-item.active i.ph-fill {
    filter: drop-shadow(0 0 8px currentColor) brightness(1.15);
}

.brand .logo-mark {
    box-shadow: 0 0 16px rgba(var(--primary-rgb),.5), 0 0 32px rgba(var(--primary-rgb),.18);
}

.user-avatar {
    box-shadow: 0 0 12px rgba(var(--primary-rgb),.35);
}
.logout-btn {
    border-radius: var(--radius-input);
    transition: background .15s, color .15s, border-color .15s;
}

/* ---------- Refresh Topbar ---------- */
.topbar-field { position: relative; min-width: 0; }
.topbar-field > label {
    display: block;
    font-size: .72rem;
    letter-spacing: 1px;
    color: var(--text-dim);
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 6px;
}
.topbar-field > select,
.topbar-field > input {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--pill-border);
    border-radius: 0;
    padding: 10px 0;
    color: var(--text-base);
    font-size: .95rem;
    width: 100%;
    transition: border-color .15s, box-shadow .2s;
}
.topbar-field > select:hover,
.topbar-field > input:hover { border-bottom-color: var(--text-dim); }
.topbar-field > select:focus,
.topbar-field > input:focus {
    border-bottom-color: var(--primary);
    box-shadow: 0 1px 0 0 var(--primary);
    background: transparent;
}

/* Choices.js dentro del topbar: misma vibra underline */
.topbar-field .netfly-choices .choices__inner {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--pill-border);
    border-radius: 0;
    padding: 10px 0;
    min-height: auto;
    transition: border-color .15s, box-shadow .2s;
}
.topbar-field .netfly-choices.is-focused .choices__inner,
.topbar-field .netfly-choices.is-open .choices__inner {
    border-bottom-color: var(--primary);
    box-shadow: 0 1px 0 0 var(--primary);
    background: transparent;
}

/* Botones tareas/configuración: tamaño un toque mayor y radius sistémico */
.btn-tasks {
    width: 42px;
    height: 42px;
    border-radius: var(--radius-input);
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
}
.btn-tasks:hover { background: var(--pill-bg-hover); border-color: var(--primary); }

/* ---------- Refresh Tabla cuentas ---------- */
.data-table td .pill {
    max-width: 320px;
    padding: 6px 10px;
    font-size: .88rem;
    background: var(--pill-bg);
}
.data-table .pill-status { vertical-align: middle; }
.data-table td.td-profiles { vertical-align: middle; }

/* Botón Exportar CSV → outline coherente */
.btn-export {
    background: transparent;
    color: var(--text-base);
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-input);
    padding: 9px 16px;
    font-weight: 500;
    transition: background .15s, border-color .15s, color .15s;
}
.btn-export:hover {
    background: var(--pill-bg-hover);
    border-color: var(--primary);
    color: var(--text-base);
}

/* Botón "+ Nueva cuenta" — gradient púrpura, no verde, para coherencia con primary */
.btn-new {
    background: linear-gradient(90deg, var(--primary), var(--primary-to));
    color: #fff;
    border-radius: var(--radius-input);
    padding: 10px 16px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), .25);
    transition: transform .12s ease, box-shadow .2s ease;
}
.btn-new:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), .4);
}

/* ---------- Refresh Modales / Forms ---------- */
.modal-card { border-radius: var(--radius-card); }

.form input[type="text"],
.form input[type="number"],
.form input[type="email"],
.form input[type="password"],
.form input[type="date"],
.form select,
.form textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--pill-border);
    border-radius: 0;
    padding: 8px 2px;
    color: var(--text-base);
    transition: border-color .15s, box-shadow .2s;
}
.form input[type="text"]:hover,
.form input[type="number"]:hover,
.form input[type="email"]:hover,
.form input[type="password"]:hover,
.form input[type="date"]:hover,
.form select:hover,
.form textarea:hover { border-bottom-color: var(--text-muted); }
.form input:focus,
.form select:focus,
.form textarea:focus {
    outline: none;
    border-bottom-color: var(--primary);
    box-shadow: 0 1px 0 0 var(--primary);
    background: transparent;
}
.form input[type="color"] {
    padding: 4px;
    height: 42px;
    border: 1px solid var(--pill-border);
    border-radius: var(--radius-input);
}

.btn-cancel {
    background: transparent;
    border: 1px solid var(--border-mid);
    border-radius: var(--radius-input);
    padding: 10px 18px;
    color: var(--text-base);
    transition: background .15s, border-color .15s, color .15s;
}
.btn-cancel:hover { background: var(--pill-bg-hover); border-color: var(--primary); color: var(--text-base); }

.btn-primary {
    border-radius: var(--radius-input);
    box-shadow: 0 4px 14px rgba(var(--primary-rgb), .25);
}
.btn-primary:hover {
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), .42);
}

/* Header del modal de detalle: pill de estado al lado del nombre */
.account-detail-head {
    gap: 16px;
    padding: 4px 4px 16px;
    align-items: center;
}
.account-detail-head .svc-logo {
    width: 56px; height: 56px; font-size: 1.143rem;
    box-shadow: 0 0 12px rgba(var(--primary-rgb),.18);
}
.account-detail-head .info { flex: 1; min-width: 0; }
.account-detail-head .info .name-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.account-detail-head .info .name-row h4 { margin: 0; font-size: 1.214rem; }

/* Texto plano del modal delivery → estilo pill grande */
.delivery-text-block {
    border-radius: var(--radius-card);
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    box-shadow: inset 0 0 24px rgba(0,0,0,.18);
}

/* ---------- Refresh Login ---------- */
.login-card { border-radius: var(--radius-card); }
.login-card input[type="text"],
.login-card input[type="password"] {
    background: var(--pill-bg);
    border: 1px solid var(--pill-border);
    border-radius: var(--radius-input);
    padding: 12px 14px;
    margin-top: 2px;
    transition: background .15s, border-color .15s, box-shadow .2s;
}
.login-card input[type="text"]:hover,
.login-card input[type="password"]:hover { background: var(--pill-bg-hover); }
.login-card input[type="text"]:focus,
.login-card input[type="password"]:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .12);
    background: var(--pill-bg-hover);
}
.login-card .btn-primary {
    border-radius: var(--radius-input);
    margin-top: 22px;
}

/* ---------- Mobile adjustments del sistema V2 ---------- */
@media (max-width: 768px) {
    .data-table td .pill { padding: 5px 8px; font-size: .82rem; }
    .data-table td .pill-status { font-size: .75rem; padding: 4px 10px; }
    .nav-item { padding: 12px 14px; }
    .topbar-field > select,
    .topbar-field > input { font-size: 16px; padding: 12px; }
    .btn-tasks { width: 40px; height: 40px; }
}

/* ---------- Texto copyable: hover sutil, click copia ---------- */
.copyable {
    cursor: pointer;
    transition: color .15s, background .15s;
    border-radius: 4px;
    padding: 2px 4px;
    margin: -2px -4px;
    display: inline-block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}
.copyable:hover {
    color: var(--primary);
    background: rgba(var(--primary-rgb), .08);
}
.copyable:active {
    background: rgba(var(--primary-rgb), .15);
}

/* Celda de contraseña: limpia, sin pill, sin borde */
.td-password {
    font-size: .92rem;
    color: var(--text-base);
}
.td-password .text-muted { color: var(--text-soft); }

/* svc-email también es copyable: respeta su color base dim, brilla al hover */
.svc-email.copyable { color: var(--text-dim); max-width: 280px; }
.svc-email.copyable:hover { color: var(--primary); }

/* Max-width para que un correo o contraseña muy largos no estiren la columna */
.td-password .copyable { max-width: 260px; }

@media (max-width: 768px) {
    .svc-email.copyable    { max-width: 200px; }
    .td-password .copyable { max-width: 180px; }
}

/* ===== Modal activacion / renovacion de suscripcion ===== */
.modal-card-wide { max-width: 560px; }

.act-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 12px; padding: 12px 14px;
    background: var(--bg-input); border: 1px solid var(--border-soft);
    border-radius: 10px; margin-bottom: 14px;
}
.act-vendor {
    display: inline-flex; align-items: center; gap: 8px;
    font-weight: 600; color: var(--text-base);
}
.act-vendor i { color: var(--primary); font-size: 1.1rem; }
.act-current {
    display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
    font-size: .85rem;
}
.act-current-label {
    color: var(--text-muted); font-size: .7rem;
    text-transform: uppercase; letter-spacing: .5px;
}
.act-current-date { font-weight: 600; color: var(--text-base); }

.act-preview {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), .14), rgba(var(--primary-rgb), .04));
    border: 1px solid rgba(var(--primary-rgb), .35);
    border-radius: 12px;
    padding: 16px 18px; margin-bottom: 16px; text-align: center;
}
.act-preview-label {
    font-size: .75rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .5px;
}
.act-preview-date {
    font-size: 1.55rem; font-weight: 700; color: var(--primary);
    margin: 6px 0 4px; line-height: 1.2;
}
.act-preview-sub { font-size: .85rem; color: var(--text-muted); }
.act-preview.is-empty .act-preview-date {
    color: var(--text-muted); font-size: 1.1rem;
}

.act-section {
    border: 1px solid var(--border-soft); border-radius: 10px;
    padding: 12px 14px; margin-bottom: 12px;
    transition: border-color .15s, background .15s;
}
.act-section.is-active {
    border-color: var(--primary);
    background: rgba(var(--primary-rgb), .04);
}
.act-section-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: .82rem; font-weight: 600;
    color: var(--text-muted); margin-bottom: 10px;
}
.act-section-title i { color: var(--primary); }

.act-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.act-chip {
    background: var(--bg-elevated); color: var(--text-base);
    border: 1px solid var(--border-soft); border-radius: 999px;
    padding: 7px 14px; font-size: .9rem; font-weight: 600; cursor: pointer;
    transition: transform .1s, background .15s, border-color .15s, box-shadow .15s;
}
.act-chip:hover { background: var(--border-soft); transform: translateY(-1px); }
.act-chip.is-active {
    background: var(--primary); color: #fff; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .25);
}
.act-chip-hot::after { content: ' \2605'; color: #fbbf24; }

.act-row { display: flex; align-items: center; gap: 8px; }
.act-input-days, .act-input-date {
    flex: 1; min-width: 0;
    background: var(--bg-input); border: 1px solid var(--border-soft);
    border-radius: 8px; padding: 10px 12px;
    color: var(--text-base); font-size: .95rem;
}
.act-input-days:focus, .act-input-date:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .15);
}
.act-row-hint { color: var(--text-muted); font-size: .9rem; }
.act-hint-muted {
    display: block; font-size: .78rem;
    color: var(--text-muted); margin-top: 6px;
}
.act-clear {
    background: transparent; border: 1px solid var(--border-soft);
    border-radius: 8px; padding: 8px 10px; cursor: pointer;
    color: var(--text-muted); transition: color .15s, border-color .15s;
}
.act-clear:hover { color: var(--text-base); border-color: var(--primary); }

.act-error {
    background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.4);
    color: #ff8a8a; border-radius: 8px; padding: 10px 12px;
    font-size: .88rem; margin: 8px 0 12px;
}

#actSubmitBtn:disabled {
    opacity: .5; cursor: not-allowed; filter: grayscale(.3);
}
#actSubmitBtn:disabled:hover { transform: none; box-shadow: none; }

@media (max-width: 540px) {
    .act-header { flex-direction: column; align-items: flex-start; }
    .act-current { align-items: flex-start; }
    .act-preview-date { font-size: 1.3rem; }
}

/* ===================== MI PERFIL (avatar + cambio contraseña) ===================== */
/* User-pill del sidebar es ahora clickeable */
.user-pill {
    cursor: pointer;
    border-radius: var(--radius-input);
    padding: 6px 8px;
    transition: background .15s;
}
.user-pill:hover { background: var(--bg-hover); }
.user-pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), .35);
}

/* Avatar con foto: la imagen reemplaza la inicial */
.user-avatar.has-img {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: transparent;
}

/* Modal Mi Perfil */
#modalMe .profile-section {
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--border-soft);
}
#modalMe .profile-section:last-child {
    border-bottom: none;
    padding-bottom: 0;
    margin-bottom: 0;
}
.profile-section-title {
    font-size: .82rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
    margin-bottom: 12px;
}

.profile-avatar-row {
    display: flex;
    align-items: center;
    gap: 18px;
}
.profile-avatar-preview {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--primary-to));
    color: #fff;
    font-weight: 700;
    font-size: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 16px rgba(var(--primary-rgb), .35);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.profile-avatar-preview.has-img > #profileAvatarInitial { display: none; }

.profile-avatar-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}
.profile-avatar-actions .btn-primary,
.profile-avatar-actions .btn-outline {
    width: auto;
    margin: 0;
    padding: 9px 14px;
    justify-content: center;
}
.profile-hint {
    color: var(--text-dim);
    font-size: .785rem;
    margin-top: 2px;
}

/* El form de password dentro del modal: sin padding extra (el modal-body ya tiene) */
#modalMe #profilePasswordForm {
    padding: 0;
}
#modalMe #profilePasswordForm .form-actions {
    margin-top: 14px;
    padding-top: 14px;
}

@media (max-width: 480px) {
    .profile-avatar-row { flex-direction: column; align-items: stretch; gap: 14px; }
    .profile-avatar-preview { align-self: center; }
}

/* ===== Wrapper de botones de la topbar (tareas + config) =====
   Garantiza que los botones queden alineados horizontalmente,
   sobreescribiendo cualquier regla anterior con !important. */
.topbar-actions {
    display: flex;
    align-items: stretch;
    gap: 8px;
    flex-shrink: 0;
    line-height: 1;
}
.topbar-actions > .btn-tasks {
    margin: 0 !important;
    transform: none !important;
    box-sizing: border-box !important;
    flex: 0 0 auto;
    align-self: stretch;
}

@media (max-width: 768px) {
    .topbar-actions {
        position: absolute !important;
        top: 0 !important;
        right: 0 !important;
        z-index: 10;
    }
    .topbar-actions > .btn-tasks {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        bottom: auto !important;
        width: 40px !important;
        height: 40px !important;
    }
    /* Reset del hover/active transform que podria descuadrar un boton */
    .topbar-actions > .btn-tasks:hover,
    .topbar-actions > .btn-tasks:active {
        transform: none !important;
    }
}

/* La badge "0" del boton de tareas no debe verse cuando no hay pendientes.
   El atributo HTML [hidden] por si solo no gana contra .tasks-badge { display: inline-flex }. */
.tasks-badge[hidden] {
    display: none !important;
}

/* ===== Logo image (reemplaza la "L" por la imagen real del logo) ===== */
.logo-mark.logo-mark-img {
    background: transparent;
    box-shadow: none;
    overflow: visible;
    padding: 0;
}
.logo-mark.logo-mark-img .logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 10px rgba(var(--primary-rgb), .35));
}
/* Por defecto (tema oscuro): logo blanco visible, negro oculto */
.logo-mark.logo-mark-img .logo-img-black { display: none; }
/* Tema claro: invertir */
:root[data-theme="light"] .logo-mark.logo-mark-img .logo-img-white { display: none; }
:root[data-theme="light"] .logo-mark.logo-mark-img .logo-img-black { display: block; }