/* ── Modo claro ───────-────────────────────────────────────── */
:root {
    /* Login */
    --bg-body-login:         #ececec75;
    --bg-container-login:    rgb(255, 255, 255);
    --logo-url:              url(../images/logo-azul.png);
    --a-color:               #0a0a0a;
    --accent-glow:           rgba(0, 0, 0, 0.1);
    --social-icon-bg:        #a0a0a0;
    --social-icon-hover:     var(--accent-secondary);

    /*  Base  */
    --bg-body:           #ffffff;
    --bg-page:           #f5f5f5;
    --bg-container:      #eeeeee;
    --bg-drop-zone:      #ffffff;
    --text-color:        #0a0a0a;
    --text-secondary:    #666666;
    --border-color:      #dddddd;
    --border-dashed:     #cccccc;
    --input-bg:          #f0f0f0;
    --input-border:      #bbbbbb;
    --hover-bg:          #e5e5e5;
    --button-bg:         #0a0a0a;
    --button-hover:      #2a2a2a;
    --accent-color:      #0a0a0a;
    --header:            #0a0a0a;

    /* Color acento violeta/índigo */
    --brand-violet:          #6C63FF;
    --brand-violet-dark:     #5A52D5;
    --brand-violet-glow:     rgba(108, 99, 255, 0.25);
    --brand-violet-subtle:   rgba(108, 99, 255, 0.08);
    --brand-violet-gradient: linear-gradient(135deg, #6C63FF 0%, #8B85FF 100%);

    /* Acento secundario (gris medio) */
    --accent-secondary:       #555555;
    --accent-secondary-hover: #333333;

    /*  Éxito  */
    --color-success:          #4cb979;
    --color-success-text:     #2d7a4f;
    --color-success-bg:       rgba(76, 185, 121, 0.12);
    --color-success-bg-muted: rgba(76, 185, 121, 0.15);

    /*  Error  */
    --color-error:            #ff4444;
    --color-error-text:       #cc0000;
    --color-error-bg:         rgba(255, 68, 68, 0.12);
    --color-error-bg-muted:   rgba(255, 68, 68, 0.1);

    /*  Advertencia  */
    --color-warning:          #e4eb60;
    --color-warning-text:     #b8bf4d;
    --color-warning-bg:       rgba(228, 235, 96, 0.15);

    /*  Overlay  */
    --overlay-bg:        rgba(0, 0, 0, 0.6);

    /*  Modal  */
    --modal-close-danger: #d51313;

    /*  Badge bloqueado  */
    --badge-blocked-bg:     #f0f0f0;
    --badge-blocked-color:  #333333;
    --badge-blocked-border: #cccccc;

    /*  Avatar  */
    --avatar-bg: #0a0a0a;

    /*  Nav / header panel  */
    --nav-panel-bg:           #0a0a0a;
    --nav-text:               #f5f5f5;
    --cerrar-sesion-bg:       #2a2a2a;
    --cerrar-sesion-hover-bg: #3a3a3a;

    /*  Tarjetas inicio  */
    --card-blue-bg:        rgba(0, 0, 0, 0.03);
    --card-orange-bg:      rgba(0, 0, 0, 0.05);
    --card-blue-icon-bg:   rgba(0, 0, 0, 0.08);
    --card-orange-icon-bg: rgba(0, 0, 0, 0.06);

    /*  Status badges tabla  */
    --status-success-bg:     rgba(76, 185, 121, 0.15);
    --status-success-color:  #4cb979;
    --status-warning-bg:     rgba(228, 235, 96, 0.15);
    --status-warning-color:  #b8bf4d;
    --status-warning-border: #e4eb60;
    --status-error-bg:       rgba(0, 0, 0, 0.08);
    --status-error-color:    #333333;

    /*  Cerrar sesión hover  */
    --cerrar-sesion-hover: #3a3a3a;
}

/* ── Modo oscuro ───────────────────────────────────────────── */
body.dark-mode {
    /* Login */
    --bg-body-login:      #0a0a0a;
    --bg-container-login: #141414;
    --logo-url:           url(../images/logo-blanco.png);
    --a-color:            #f5f5f5;
    --accent-glow:        rgba(255, 255, 255, 0.08);
    --social-icon-bg:     var(--bg-container);

    /*  Base  */
    --bg-body:        #0a0a0a;
    --bg-page:        #0a0a0a;
    --bg-container:   #141414;
    --header:         #141414;
    --bg-drop-zone:   #1e1e1e;
    --text-color:     #f5f5f5;
    --text-secondary: #999999;
    --border-color:   #2a2a2a;
    --border-dashed:  #333333;
    --input-bg:       #1e1e1e;
    --input-border:   #3a3a3a;
    --hover-bg:       #242424;
    --button-bg:      #f5f5f5;
    --button-hover:   #dddddd;
    --accent-color:   #f5f5f5;
    --cerrar-sesion-hover: #242424;

    /* Color acento violeta/índigo dark */
    --brand-violet:          #7B73FF;
    --brand-violet-dark:     #6C63FF;
    --brand-violet-glow:     rgba(123, 115, 255, 0.3);
    --brand-violet-subtle:   rgba(123, 115, 255, 0.12);
    --brand-violet-gradient: linear-gradient(135deg, #7B73FF 0%, #9B95FF 100%);

    /* Éxito dark */
    --color-success-text:     #5cd68d;
    --color-success-bg:       rgba(76, 185, 121, 0.18);
    --color-success-bg-muted: rgba(76, 185, 121, 0.2);

    /* Error dark */
    --color-error-text:       #ff8888;
    --color-error-bg:         rgba(204, 0, 0, 0.18);
    --color-error-bg-muted:   rgba(255, 68, 68, 0.15);

    /* Advertencia dark */
    --color-warning-text: #e4eb60;

    /* Overlay dark */
    --overlay-bg: rgba(0, 0, 0, 0.85);

    /* Modal dark */
    --modal-close-danger: var(--accent-color);

    /* Badge bloqueado dark */
    --badge-blocked-bg: #1e1e1e;

    /* Nav dark */
    --nav-panel-bg:     #000000;
    --cerrar-sesion-bg: #2a2a2a;

    /* Tarjetas dark */
    --card-blue-bg:        rgba(255, 255, 255, 0.04);
    --card-orange-bg:      rgba(255, 255, 255, 0.06);
    --card-blue-icon-bg:   rgba(255, 255, 255, 0.08);
    --card-orange-icon-bg: rgba(255, 255, 255, 0.06);

    /* Status badges dark */
    --status-success-color: #5cd68d;
    --status-success-bg:    rgba(76, 185, 121, 0.2);
    --status-error-color:   #aaaaaa;
    --status-error-bg:      rgba(255, 255, 255, 0.08);
}
/* ── Base ──────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html {
    background-color: var(--bg-body);
    min-height: 100vh;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    color: var(--text-color);
    margin: 0;
    padding: 0;
    min-height: 100vh;
    transition: background-color 0.3s ease, color 0.3s ease;
}

a, h1, h2, h3, h4, h5, p {
    transition: color 0.3s ease;
}

::-webkit-scrollbar              { width: 6px; }
::-webkit-scrollbar-track        { background: transparent; }
::-webkit-scrollbar-thumb        { background: rgba(0,0,0,0.3); border-radius: 20px; }
::-webkit-scrollbar-thumb:hover  { background: rgba(0,0,0,0.5); }

body.dark-mode::-webkit-scrollbar-track      { background: #605f80; }
body.dark-mode::-webkit-scrollbar-thumb      { background: rgb(42 42 78); }
body.dark-mode::-webkit-scrollbar-thumb:hover{ background: rgb(26 26 62); }