/* ===== MOOVE SHARED STYLES ===== */
/*
 * Typography scale (rem-based, scales with user preferences):
 *   Display:    1.875rem (30px)  — stat numbers, hero metrics
 *   Body:       0.875rem (14px)  — table cells, main content
 *   Secondary:  0.8125rem (13px) — subtitles, metadata, inputs
 *   Caption:    0.75rem  (12px)  — labels, badges, headers, buttons
 *   Micro:      0.6875rem (11px) — date badge month (only exception)
 */

/* ===== CUSTOM PROPERTIES ===== */

:root {
    /* Brand (logo_dark.svg gradient: blue → plum → coral) */
    --brand-blue: #556AA4;
    --brand-blue-hover: #495d91;
    --brand-plum: #AB5188;
    --brand-mid: #7E5D96;
    --brand-coral: #E1424C;

    /* Grays (Tailwind scale) */
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;

    /* Semantic */
    --color-success: #22c55e;
    --color-success-dark: #166534;
    --color-warning-bg: #fef3c7;
    --color-warning-border: #fde68a;
    --color-warning-text: #92400e;
    --color-warning-icon: #f59e0b;
    --color-danger-bg: #fee2e2;
    --color-danger-text: #991b1b;
}

/* ===== CARDS ===== */

.dash-card {
    background: #fff;
    border-radius: 12px;
    border: 1px solid var(--gray-100);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    padding: 1.25rem;
    margin-bottom: 1rem;
}
.dash-card-flush  { padding: 0; overflow: hidden; }
.dash-card-scroll { height: 400px; overflow-y: auto; }

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

.dash-container {
    max-width: 1200px; padding-top: 5rem !important; padding-bottom: 2rem;
}

/* ===== ICONS ===== */

.icon-box {
    width: 40px; height: 40px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.icon-box-sm { width: 32px; height: 32px; }
.icon-sm     { font-size: 0.875rem; }
.icon-xs     { font-size: 0.5625rem; }

.icon-blue-bg  { background: rgba(85,106,164,0.07); }
.icon-plum-bg  { background: rgba(171,81,136,0.07); }
.icon-mid-bg   { background: rgba(126,93,150,0.07); }

/* ===== BRAND COLORS ===== */

.brand-blue { color: var(--brand-blue); }
.brand-plum { color: var(--brand-plum); }
.brand-mid  { color: var(--brand-mid); }

/* ===== TYPOGRAPHY ===== */

.section-label {
    font-size: 0.75rem; font-weight: 600; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--gray-500); margin-bottom: 12px;
}

.stat-number { font-size: 1.875rem; font-weight: 700; margin: 0; line-height: 1.2; }
.stat-label  { font-size: 0.8125rem; color: var(--gray-500); margin: 4px 0 0; }
.stat-sub    { font-size: 0.8125rem; color: var(--gray-500); margin: 4px 0 0; }

/* ===== TABLE ===== */

.dash-table              { font-size: 0.875rem; }
.dash-table thead tr     { color: var(--gray-500); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em; }
.dash-table th           { border: 0; padding: 6px 8px; }
.dash-table td           { padding: 8px; border-color: var(--gray-100); }
.dash-table tbody tr     { border-bottom: 1px solid var(--gray-100); }
.dash-table tbody tr:hover { background: rgba(85,106,164,0.03); }
.text-playing            { color: var(--color-success); font-weight: 700; }

/* ===== TABLE SORTING ===== */

.sortable { cursor: pointer; user-select: none; }
.sortable:hover { color: var(--brand-blue); }
.sort-icon { font-size: 0.625rem; margin-left: 4px; opacity: 0.4; transition: opacity 0.15s; }
.sortable:hover .sort-icon { opacity: 0.7; }
.sortable.sort-asc .sort-icon, .sortable.sort-desc .sort-icon { opacity: 1; color: var(--brand-blue); }

/* ===== TABLE INTERACTIVITY ===== */

.dash-table tbody tr.clickable-row { cursor: pointer; }
.dash-table tbody tr.clickable-row:hover { background: rgba(85,106,164,0.06); }
.dash-table .cell-truncate {
    max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ===== BADGES ===== */

.badge-status {
    font-size: 0.75rem; font-weight: 600; padding: 2px 8px;
    border-radius: 9999px; display: inline-block;
}
.badge-success { background: rgba(34,197,94,0.1); color: var(--color-success-dark); }
.badge-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-danger  { background: var(--color-danger-bg); color: var(--color-danger-text); }
.badge-muted   { color: var(--gray-300); }

/* ===== BUTTONS ===== */

.btn-brand {
    background: var(--brand-blue); color: #fff; border: none;
    border-radius: 6px; font-size: 0.8125rem; padding: 6px 14px;
    transition: background 0.15s; white-space: nowrap; cursor: pointer;
}
.btn-brand:hover { background: var(--brand-blue-hover); color: #fff; text-decoration: none; }
.btn-brand-sm { font-size: 0.75rem; padding: 4px 12px; }

.btn-outline-subtle {
    border: 1px solid var(--gray-200); border-radius: 6px; font-size: 0.75rem;
    padding: 4px 10px; color: var(--brand-blue); background: transparent;
    transition: all 0.15s; display: inline-block;
}
.btn-outline-subtle:hover { background: rgba(85,106,164,0.06); border-color: var(--brand-blue); color: var(--brand-blue); text-decoration: none; }

/* ===== PERIOD FILTER ===== */

.period-btn {
    padding: 3px 12px; border-radius: 9999px; font-size: 0.75rem;
    font-weight: 500; border: 1px solid var(--gray-200); cursor: pointer;
    background: #fff; color: var(--gray-500); transition: all 0.15s;
    display: inline-block; margin-left: 2px; text-decoration: none;
}
.period-btn:hover { background: var(--gray-100); text-decoration: none; color: var(--gray-500); }
.period-btn.active { background: var(--brand-blue); color: #fff; border-color: var(--brand-blue); }

.period-bar {
    position: sticky; top: 56px; z-index: 10;
    background: #fff; padding: 12px 0; margin: 0 -15px;
    padding-left: 15px; padding-right: 15px;
    border-bottom: 1px solid var(--gray-100);
}

/* ===== SEARCH ===== */

.search-box { position: relative; }
.search-box .search-icon {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--gray-500); font-size: 0.8125rem; pointer-events: none;
}
.search-box input {
    padding-left: 36px; border-radius: 8px; border: 1px solid var(--gray-200);
    font-size: 0.875rem; height: 40px; width: 100%;
}
.search-box input:focus { border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(85,106,164,0.1); outline: none; }

/* ===== EVENTS ===== */

.event-row { display: flex; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.event-row:last-child { border-bottom: none; }

.event-date-badge {
    min-width: 48px; text-align: center; padding: 6px 8px;
    border-radius: 8px; background: rgba(85,106,164,0.07);
}
.event-date-badge .day { font-size: 1.125rem; font-weight: 700; color: var(--brand-blue); line-height: 1; }
.event-date-badge .month { font-size: 0.6875rem; font-weight: 600; color: var(--brand-mid); text-transform: uppercase; }

/* ===== LINKS ===== */

.dash-link { font-size: 0.8125rem; font-weight: 500; text-decoration: none; }
.dash-link:hover { text-decoration: underline; }
.clickable { cursor: pointer; }

/* ===== COUNTRY LIST ===== */

.country-row     { padding: 8px 0; border-bottom: 1px solid var(--gray-100); cursor: pointer; }
.country-header  { display: flex; justify-content: space-between; align-items: center; }
.country-name    { font-size: 0.875rem; font-weight: 500; color: var(--gray-700); }
.country-badge   { font-size: 0.75rem; font-weight: 600; background: rgba(85,106,164,0.1); color: var(--brand-blue); padding: 2px 8px; border-radius: 9999px; }
.state-list      { display: none; padding-left: 16px; margin-top: 6px; }
.state-row       { display: flex; justify-content: space-between; padding: 3px 0; font-size: 0.8125rem; color: var(--gray-500); }
.state-count     { font-weight: 600; color: var(--brand-mid); }

a.country-badge:hover { background: rgba(85,106,164,0.18); text-decoration: none; }
a.country-badge:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }

/* ===== ALERTS ===== */

.low-credits-alert {
    display: inline-block;
    background: var(--color-warning-bg); color: var(--color-warning-text);
    font-size: 0.8125rem; font-weight: 600;
    padding: 6px 12px; border-radius: 6px;
    border: 1px solid var(--color-warning-border);
}
.low-credits-alert i { color: var(--color-warning-icon); margin-right: 4px; }

.dash-warning, .dash-success {
    font-size: 0.8125rem; padding: 8px 12px; border-radius: 6px; border: 1px solid transparent;
}
.dash-warning { background: var(--color-warning-bg); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.dash-warning i { color: var(--color-warning-icon); }
.dash-success { background: rgba(34,197,94,0.1); border-color: rgba(34,197,94,0.3); color: var(--color-success-dark); }
.dash-success i { color: var(--color-success); }

/* ===== STATUS ===== */

.status-online {
    display: inline-flex; align-items: center; gap: 4px;
    color: var(--color-success); font-weight: 600;
}

/* ===== LIVE INDICATOR ===== */

.live-pulse {
    width: 8px; height: 8px; border-radius: 50%; background: var(--color-success);
    display: inline-block; animation: pulse 2s infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* ===== LOADING ===== */

.dash-loading {
    display: none; text-align: center; padding: 2rem 0; color: var(--gray-500); font-size: 0.8125rem;
}
.dash-loading.active { display: block; }

/* ===== HEATMAP FALLBACK ===== */

.heatmap-fallback { display: flex; align-items: center; justify-content: center; color: var(--gray-500); font-size: 0.8125rem; }

/* ===== TABS ===== */

.admin-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--gray-100); margin-bottom: 1.5rem; }
.admin-tabs a, .admin-tabs span {
    padding: 8px 16px; font-size: 0.8125rem; font-weight: 500;
    color: var(--gray-500); text-decoration: none; border-bottom: 2px solid transparent;
    margin-bottom: -2px; transition: all 0.15s;
}
.admin-tabs a:hover { color: var(--brand-blue); border-bottom-color: var(--gray-300); text-decoration: none; }
.admin-tabs .active { color: var(--brand-blue); border-bottom-color: var(--brand-blue); font-weight: 600; }

/* ===== DETAIL LIST ===== */

.detail-list dt {
    font-size: 0.75rem; color: var(--gray-500); text-transform: uppercase;
    letter-spacing: 0.03em; margin-bottom: 2px; font-weight: 600;
}
.detail-list dd { font-size: 0.875rem; color: var(--gray-700); margin-bottom: 1rem; margin-left: 0; }

/* ===== ADMIN FORMS ===== */

.admin-fieldset { border: none; padding: 0; margin: 0; }
.admin-fieldset label {
    font-size: 0.8125rem; font-weight: 500; color: var(--gray-700);
    margin-bottom: 4px; display: block;
}
.admin-fieldset input[type="text"],
.admin-fieldset input[type="email"],
.admin-fieldset input[type="password"],
.admin-fieldset textarea {
    border: 1px solid var(--gray-200); border-radius: 8px; padding: 8px 12px;
    font-size: 0.875rem; width: 100%; max-width: 400px;
}
.admin-fieldset input[type="text"]:focus,
.admin-fieldset input[type="email"]:focus,
.admin-fieldset input[type="password"]:focus,
.admin-fieldset textarea:focus {
    border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(85,106,164,0.1); outline: none;
}
.admin-fieldset textarea { min-height: 80px; resize: vertical; }

/* ===== PAGER ===== */

.pager-simple { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; }
.pager-simple .pager-info { font-size: 0.8125rem; color: var(--gray-500); }
.pager-simple button:disabled { opacity: 0.4; cursor: default; pointer-events: none; }

/* ===== BACK LINK ===== */

.back-link {
    display: inline-block; font-size: 0.8125rem; color: var(--gray-500);
    text-decoration: none; margin-bottom: 1rem;
}
.back-link:hover { color: var(--brand-blue); text-decoration: none; }
.back-link i { margin-right: 4px; }

/* ===== ROLE LIST ===== */

.role-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--gray-100);
}
.role-item:last-child { border-bottom: none; }
.role-item .role-name { font-size: 0.875rem; font-weight: 500; color: var(--gray-700); }

.roles-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.role-chip {
    display: flex; align-items: center; gap: 6px;
    background: var(--gray-100); border-radius: 8px; padding: 6px 12px;
}

/* ===== CHECKBOX ===== */

.admin-check { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.admin-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--brand-blue); }
.admin-check label { font-size: 0.875rem; color: var(--gray-700); margin: 0; cursor: pointer; }

/* ===== DANGER ZONE ===== */

.btn-danger-subtle {
    border: 1px solid var(--color-danger-text); border-radius: 6px; font-size: 0.75rem;
    padding: 4px 10px; color: var(--color-danger-text); background: transparent;
    transition: all 0.15s; cursor: pointer;
}
.btn-danger-subtle:hover { background: var(--color-danger-bg); text-decoration: none; }

/* ===== PASSWORD REQUIREMENTS ===== */

.pwd-requirements {
    background: var(--gray-100); border-radius: 8px; padding: 12px 16px;
}
.pwd-req-title {
    font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); margin-bottom: 8px;
}
.pwd-req-list { list-style: none; padding: 0; margin: 0; }
.pwd-req-item {
    font-size: 0.8125rem; color: var(--gray-500); padding: 2px 0;
    display: flex; align-items: center; gap: 6px;
}
.pwd-req-icon { font-size: 0.5rem; color: var(--gray-300); transition: color 0.15s; }
.pwd-req-pass .pwd-req-icon { color: var(--color-success); font-size: 0.75rem; }
.pwd-req-pass { color: var(--color-success-dark); }
.pwd-req-fail { color: var(--gray-500); }

/* ===== UTILITY ===== */

.text-gray-700  { color: var(--gray-700); }
.text-gray-500  { color: var(--gray-500); }
.no-underline   { text-decoration: none; }
.no-margin      { margin: 0; }
.gap-sm         { gap: 6px; }
.gap-md         { gap: 8px; }
.separator-top  { border-top: 1px solid var(--gray-100); padding-top: 12px; }
.role-input     { max-width: 200px; border-radius: 8px; border: 1px solid var(--gray-200); }

/* ===== ACCESSIBILITY ===== */

.btn-brand:focus-visible, .btn-outline-subtle:focus-visible, .btn-danger-subtle:focus-visible, .period-btn:focus-visible, .form-control:focus-visible, .admin-tabs a:focus-visible {
    outline: 2px solid var(--brand-blue); outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .live-pulse { animation: none; }
    .fa-spin { animation: none; }
}

/* ===== CHROME · NAVBAR + DROPDOWNS + SUBHEADER ===== */
/*
 * Patrón cromático: los 3 colores brand del dashboard repartidos por función:
 *   blue = acción primaria / nav links / search / foco
 *   plum = featured / premium / admin / Wizard / corona
 *   mid  = secundario / ayuda / informativo / live
 * Navbar: fondo blanco con franja inferior degradada blue→mid→plum (firma del sistema).
 */

.moove-navbar {
    background: #fff !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    padding: 0.5rem 1rem;
    min-height: 56px;
}
.moove-navbar::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
    background: linear-gradient(90deg, var(--brand-blue) 0%, var(--brand-mid) 35%, var(--brand-plum) 70%, var(--brand-coral) 100%);
    pointer-events: none;
}
.moove-navbar .navbar-brand {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 4px 6px;
    margin-right: 16px;
    border-radius: 8px;
    transition: transform 0.15s, background 0.15s;
}
.moove-navbar .navbar-brand:hover {
    background: rgba(85,106,164,0.06);
    transform: translateY(-1px);
}
.moove-navbar .navbar-brand img { height: 22px; width: auto; display: block; }

/* spacing entre ULs del navbar (LogOn + menuAdmin + menuLanguage) */
.moove-navbar .navbar-collapse { gap: 10px; }
.moove-navbar .navbar-collapse > ul,
.moove-navbar .navbar-collapse > div { margin-bottom: 0; }
.moove-navbar .navbar-nav.mr-auto { gap: 4px; }
.moove-navbar .navbar-toggler {
    border-color: var(--gray-200);
    padding: 4px 8px;
}
.moove-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='%23556AA4' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* nav links — base gris, hover azul, active azul bold */
.moove-nav-link {
    color: var(--gray-700) !important;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 8px 12px !important;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.moove-nav-link:hover, .moove-nav-link:focus {
    color: var(--brand-blue) !important;
    background: rgba(85,106,164,0.06);
    text-decoration: none;
}
.moove-navbar .nav-item.active > .moove-nav-link {
    color: var(--brand-blue) !important;
    font-weight: 600;
    background: rgba(85,106,164,0.08);
}
.moove-nav-link-featured {
    color: var(--brand-plum) !important;
}
.moove-nav-link-featured:hover, .moove-nav-link-featured:focus {
    color: var(--brand-plum) !important;
    background: rgba(171,81,136,0.08);
}
.moove-nav-link-featured i { color: var(--brand-plum); }

/* botones circulares (ayuda / idioma / admin shield) */
.moove-icon-btn {
    width: 36px; height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-700);
    font-size: 0.875rem;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    text-decoration: none !important;
    padding: 0;
    line-height: 1;
}
.moove-icon-btn:hover, .moove-icon-btn:focus,
.moove-icon-btn[aria-expanded="true"] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    background: rgba(85,106,164,0.06);
    outline: none;
}
.moove-icon-btn-mid:hover, .moove-icon-btn-mid:focus,
.moove-icon-btn-mid[aria-expanded="true"] {
    border-color: var(--brand-mid); color: var(--brand-mid); background: rgba(126,93,150,0.08);
}
.moove-icon-btn-plum:hover, .moove-icon-btn-plum:focus,
.moove-icon-btn-plum[aria-expanded="true"] {
    border-color: var(--brand-plum); color: var(--brand-plum); background: rgba(171,81,136,0.08);
}
.moove-icon-btn.dropdown-toggle::after { display: none; }

/* user chip (dropdown trigger con nombre/avatar) */
.moove-user-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: 9999px;
    border: 1px solid var(--gray-200);
    background: #fff;
    color: var(--gray-700);
    font-size: 0.8125rem;
    font-weight: 500;
    line-height: 1.2;
    transition: all 0.15s;
    text-decoration: none !important;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.moove-user-chip:hover, .moove-user-chip:focus,
.moove-user-chip[aria-expanded="true"] {
    border-color: var(--brand-blue);
    color: var(--brand-blue);
    background: rgba(85,106,164,0.05);
    outline: none;
}
.moove-user-chip.is-premium {
    border-color: rgba(171,81,136,0.4);
    background: rgba(171,81,136,0.06);
    color: var(--brand-plum);
}
.moove-user-chip.is-premium:hover, .moove-user-chip.is-premium:focus,
.moove-user-chip.is-premium[aria-expanded="true"] {
    border-color: var(--brand-plum);
    background: rgba(171,81,136,0.1);
    color: var(--brand-plum);
}
.moove-user-chip .fa-crown { color: var(--brand-plum); }
.moove-user-chip.dropdown-toggle::after {
    margin-left: 4px;
    border-top-color: currentColor;
    opacity: 0.5;
    vertical-align: middle;
}

/* dropdown menus — sobreescribe el default Bootstrap 4 */
.moove-dropdown-menu {
    border: 1px solid var(--gray-200) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important;
    padding: 6px !important;
    margin-top: 8px !important;
    min-width: 220px;
    font-size: 0.8125rem;
}
.moove-dropdown-menu .dropdown-item {
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 0.8125rem;
    color: var(--gray-700);
    transition: background 0.1s, color 0.1s;
}
.moove-dropdown-menu .dropdown-item:hover,
.moove-dropdown-menu .dropdown-item:focus {
    background: rgba(85,106,164,0.07);
    color: var(--brand-blue);
}
.moove-dropdown-menu .dropdown-item.is-plum:hover,
.moove-dropdown-menu .dropdown-item.is-plum:focus {
    background: rgba(171,81,136,0.08); color: var(--brand-plum);
}
.moove-dropdown-menu .dropdown-item.is-mid:hover,
.moove-dropdown-menu .dropdown-item.is-mid:focus {
    background: rgba(126,93,150,0.08); color: var(--brand-mid);
}
.moove-dropdown-menu .dropdown-divider {
    border-color: var(--gray-100);
    margin: 6px 4px;
}
.moove-dropdown-menu .dropdown-item.is-logoff {
    color: var(--color-danger-text);
}
.moove-dropdown-menu .dropdown-item.is-logoff:hover,
.moove-dropdown-menu .dropdown-item.is-logoff:focus {
    background: var(--color-danger-bg);
    color: var(--color-danger-text);
}
.moove-dropdown-menu .dropdown-item-meta {
    font-size: 0.75rem;
    color: var(--gray-500);
    padding: 6px 12px 4px;
}

/* sub-header de página (reemplaza el `_subheader.cshtml` con bg-light) */
.moove-subheader {
    position: sticky; top: 56px; z-index: 9;
    background: #fff;
    border-bottom: 1px solid var(--gray-100);
    padding: 10px 1.25rem;
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.moove-subheader-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--gray-500);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.moove-subheader-actions { display: inline-flex; align-items: center; gap: 8px; }

/* ===== STYLE PASS 2 · personalidad cromática (opt-in) ===== */

/* (1) global body — gris-azulado muy sutil para que las cards blancas respiren */
body {
    background: #fafbfc;
    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-feature-settings: "ss01", "cv11";
}

/* (2) section-label con barra vertical de color contextual — opt-in via modifier */
.section-label-blue, .section-label-plum, .section-label-mid, .section-label-success {
    padding-left: 10px;
    border-left: 3px solid var(--brand-blue);
}
.section-label-plum    { border-left-color: var(--brand-plum); }
.section-label-mid     { border-left-color: var(--brand-mid); }
.section-label-success { border-left-color: var(--color-success); }

/* (3) dash-card con border-top de color brand — opt-in para stat cards principales */
.dash-card-accent-blue, .dash-card-accent-plum, .dash-card-accent-mid {
    border-top: 3px solid var(--brand-blue);
}
.dash-card-accent-plum { border-top-color: var(--brand-plum); }
.dash-card-accent-mid  { border-top-color: var(--brand-mid); }

/* (4) CTA destacado: gradient brand-blue → brand-plum (uno por página máximo) */
.btn-brand-gradient {
    background: linear-gradient(135deg, var(--brand-blue) 0%, var(--brand-plum) 100%);
    color: #fff; border: none;
    border-radius: 6px; font-size: 0.8125rem; padding: 6px 14px;
    transition: filter 0.15s, box-shadow 0.15s, transform 0.15s;
    white-space: nowrap; cursor: pointer;
    box-shadow: 0 1px 2px rgba(85,106,164,0.2);
    text-decoration: none;
    display: inline-block;
}
.btn-brand-gradient:hover, .btn-brand-gradient:focus {
    filter: brightness(1.05);
    box-shadow: 0 3px 10px rgba(171,81,136,0.25);
    color: #fff; text-decoration: none;
    transform: translateY(-1px);
}
.btn-brand-gradient:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
.btn-brand-gradient-sm { font-size: 0.75rem; padding: 4px 12px; }

/* (5) user chip — avatar circular con inicial */
.moove-user-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--brand-blue);
    color: #fff;
    font-size: 0.6875rem; font-weight: 700;
    text-transform: uppercase;
    flex-shrink: 0;
    line-height: 1;
}
.moove-user-chip.is-premium .moove-user-avatar { background: var(--brand-plum); }

/* (6) subheader title — barra vertical de color al título (default blue) */
.moove-subheader-title {
    padding-left: 10px;
    border-left: 3px solid var(--brand-blue);
}
.moove-subheader-plum .moove-subheader-title { border-left-color: var(--brand-plum); }
.moove-subheader-mid  .moove-subheader-title { border-left-color: var(--brand-mid); }

/* (8) dash-table hover variants — opt-in para listas de "featured" o "live" */
.dash-table-plum tbody tr:hover { background: rgba(171,81,136,0.05); }
.dash-table-mid  tbody tr:hover { background: rgba(126,93,150,0.05); }

/* (7) login shell — split-panel layout (hero illustration + form) */
.login-shell {
    position: relative;
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background: #f7f8fb;
    overflow: hidden;
}
.login-shell::before,
.login-shell::after {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.18;
    filter: blur(1.5px);
    pointer-events: none;
    z-index: 0;
}
.login-shell::before {
    background-image: url('v2/img/login_bg_2.svg');
    top: -140px; left: -160px;
    transform: rotate(-12deg);
}
.login-shell::after {
    background-image: url('v2/img/login_bg_1.svg');
    bottom: -160px; right: -180px;
    transform: rotate(8deg);
}
.login-shell > .login-card { position: relative; z-index: 1; }
.login-card {
    width: 100%; max-width: min(1280px, 92vw); min-height: 560px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 30px 80px rgba(85,106,164,0.12), 0 4px 16px rgba(17,24,39,0.04);
    display: grid;
    grid-template-columns: 1.05fr 1fr;
}
.login-hero {
    position: relative;
    padding: 2.25rem 2rem 0;
    display: flex; flex-direction: column;
    background: linear-gradient(180deg, #eef1fa 0%, #dfe6f3 100%);
    overflow: hidden;
    border-radius: 20px 0 0 20px;
}
.login-hero-content {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; gap: 6px;
}
.login-hero-logo {
    height: 30px; width: auto; align-self: flex-start;
    opacity: 0; animation: lh-fade-in 0.5s 0.05s ease-out forwards;
}
.login-hero-tag {
    font-size: 0.75rem; color: var(--brand-plum);
    font-weight: 600; letter-spacing: 0.02em;
    margin: 0;
    opacity: 0; animation: lh-fade-in 0.5s 0.18s ease-out forwards;
}
.login-hero-tag i { margin-right: 6px; color: var(--brand-coral); }
.login-hero-img-wrap {
    position: relative; z-index: 1;
    margin: auto -2rem 0;
    display: block;
    opacity: 0; animation: lh-fade-in 0.7s 0.3s ease-out forwards;
}
.login-hero-img {
    width: 100%; height: auto; max-width: none;
    display: block;
}

@keyframes lh-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.login-body {
    padding: 3rem 2.75rem 1.5rem;
    display: flex; flex-direction: column;
    border-radius: 0 20px 20px 0;
}
.login-banner { display: none; }
.login-logo { height: 32px; margin-bottom: 1.5rem; align-self: flex-start; }
.login-title {
    font-size: 1.5rem; font-weight: 700; color: var(--gray-700);
    margin: 0 0 6px;
}
.login-tagline {
    font-size: 0.875rem; color: var(--gray-500); margin: 0 0 1.5rem;
}
.login-field {
    width: 100%; border: 1px solid var(--gray-200); border-radius: 10px;
    padding: 11px 14px; font-size: 0.9375rem; margin-bottom: 12px;
    background: #fff;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
.login-field:focus {
    border-color: var(--brand-blue);
    box-shadow: 0 0 0 3px rgba(85,106,164,0.18); outline: none;
}
.login-checkbox {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8125rem; color: var(--gray-700);
    margin: 6px 0 18px; text-align: left;
}
.login-checkbox input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--brand-blue); }
.login-submit {
    width: 100%;
    padding: 12px 16px;
    font-size: 0.9375rem; font-weight: 600;
    margin-bottom: 14px;
    background: var(--brand-blue);
    box-shadow: 0 1px 2px rgba(85,106,164,0.20);
}
.login-submit:hover, .login-submit:focus {
    background: var(--brand-blue-hover);
    box-shadow: 0 4px 12px rgba(85,106,164,0.28);
    transform: none;
}
.login-forgot {
    display: block; font-size: 0.8125rem; color: var(--gray-500);
    text-decoration: none; margin-bottom: 1rem;
    text-align: center;
}
.login-forgot:hover { color: var(--brand-blue); text-decoration: none; }
.login-footer {
    margin-top: auto;
    border-top: 1px solid var(--gray-100);
    padding-top: 14px;
    display: flex; align-items: center; justify-content: center;
}

@media (max-width: 820px) {
    .login-card { grid-template-columns: 1fr; min-height: 0; max-width: 460px; }
    .login-hero { padding: 1.75rem 1.5rem 0; min-height: 220px; border-radius: 20px 20px 0 0; }
    .login-hero-img-wrap { margin: auto -1.5rem 0; }
    .login-body { padding: 2rem 1.75rem 1.25rem; border-radius: 0 0 20px 20px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-hero-logo,
    .login-hero-tag,
    .login-hero-img-wrap { animation: none; opacity: 1; }
}

/* ===== STYLE PASS 3 · foundations + consistency =====
 * Tokens de diseño, fixes a11y, focus ring unificado, microinteracciones,
 * componentes que faltaban (skeleton, empty, premium CTA), warm accent.
 * Las clases nuevas son opt-in; los fixes refinan reglas anteriores.
 */

/* ----- DESIGN TOKENS ----- */
:root {
    /* shadows */
    --shadow-sm: 0 1px 2px rgba(17,24,39,0.04);
    --shadow-md: 0 1px 3px rgba(17,24,39,0.06), 0 1px 2px rgba(17,24,39,0.04);
    --shadow-lg: 0 8px 24px rgba(17,24,39,0.08);
    --shadow-hover: 0 6px 18px rgba(85,106,164,0.10);

    /* radii */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 9999px;

    /* spacing (escala 4-base) */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    /* easing */
    --ease-fast: 100ms ease-out;
    --ease-base: 160ms ease-out;
    --ease-slow: 240ms ease-out;

    /* focus ring (alpha 0.25 — visible AA, no la 0.1 tímida anterior) */
    --focus-ring: 0 0 0 3px rgba(85,106,164,0.25);
    --focus-ring-plum: 0 0 0 3px rgba(171,81,136,0.25);

    /* warm accent — energía / live / streak / nuevo.
     * NO es CTA primario (eso sigue siendo blue/plum). Uso restringido:
     * live-pulse-warm, badge "NUEVO", rachas, achievements. */
    --brand-warm: #E58A4E;
    --brand-warm-soft: rgba(229,138,78,0.12);
    --brand-warm-bg:   rgba(229,138,78,0.06);
    --brand-warm-text: #b8530e;
}

/* ----- A11Y FIXES (refinan reglas anteriores) ----- */

/* badge-muted: gray-300 sobre blanco daba 1.6:1 (WCAG fail).
 * gray-500 = 4.83:1 (AA pass para texto small). */
.badge-muted { color: var(--gray-500); }

/* pwd-req-fail: el "no cumplido" debe leerse como warning, no como placeholder gris. */
.pwd-req-fail { color: var(--color-warning-text); }
.pwd-req-fail .pwd-req-icon { color: var(--color-warning-icon); }

/* ----- FOCUS RING UNIFICADO ----- */

.moove-nav-link:focus-visible,
.moove-icon-btn:focus-visible,
.moove-user-chip:focus-visible,
.moove-dropdown-menu .dropdown-item:focus-visible,
.sortable:focus-visible,
.dash-link:focus-visible,
.back-link:focus-visible,
.dash-table tbody tr.clickable-row:focus-visible,
.pager-simple button:focus-visible,
.role-chip:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: var(--radius-sm);
}

/* inputs: subir alpha de 0.1 (apenas visible) a 0.25 — alineado con --focus-ring */
.search-box input:focus,
.admin-fieldset input[type="text"]:focus,
.admin-fieldset input[type="email"]:focus,
.admin-fieldset input[type="password"]:focus,
.admin-fieldset textarea:focus,
.login-field:focus {
    box-shadow: var(--focus-ring);
}

/* ----- HOVER AFFORDANCE ----- */

/* row hover en mid (no en blue) — separa "manipular fila" de "ejecutar acción".
 * Sustituye los 3% azules tímidos por 4-8% mid, más legible. */
.dash-table tbody tr:hover                 { background: rgba(126,93,150,0.04); }
.dash-table tbody tr.clickable-row:hover   { background: rgba(126,93,150,0.08); }

/* dash-card interactivo opt-in — lift al hover para tiles que llevan a algo */
.dash-card-interactive {
    transition: box-shadow var(--ease-base), transform var(--ease-base);
    cursor: pointer;
}
.dash-card-interactive:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

/* press feedback global en botones — sensación táctil sin librería */
.btn-brand:active,
.btn-outline-subtle:active,
.btn-danger-subtle:active,
.btn-brand-gradient:active,
.btn-brand-premium:active,
.period-btn:active {
    transform: scale(0.97);
}

/* ----- PREMIUM CTA — plum como acción real, no solo decoración ----- */

.btn-brand-premium {
    background: var(--brand-plum);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    padding: 6px 14px;
    transition: background var(--ease-base);
    white-space: nowrap;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}
.btn-brand-premium:hover,
.btn-brand-premium:focus {
    background: #94406f;
    color: #fff;
    text-decoration: none;
}
.btn-brand-premium-sm { font-size: 0.75rem; padding: 4px 12px; }
.btn-brand-premium:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring-plum);
}

/* ----- WARM ACCENT — live energy / streak / nuevo ----- */

/* variante opt-in: "esto está pasando AHORA" cuando no es semánticamente success.
 * El .live-pulse verde se mantiene para éxito real. */
.live-pulse-warm {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--brand-warm);
    display: inline-block;
    animation: pulse 2s infinite;
}

.text-warm { color: var(--brand-warm-text); }

.badge-warm {
    font-size: 0.75rem; font-weight: 600;
    padding: 2px 8px; border-radius: var(--radius-pill);
    display: inline-block;
    background: var(--brand-warm-soft);
    color: var(--brand-warm-text);
}

/* ----- SKELETON LOADERS ----- */

.moove-skeleton {
    display: inline-block;
    background: linear-gradient(90deg,
        var(--gray-100) 0%,
        var(--gray-200) 50%,
        var(--gray-100) 100%);
    background-size: 200% 100%;
    border-radius: var(--radius-sm);
    animation: mooveSkeletonShimmer 1.4s linear infinite;
    color: transparent;
    user-select: none;
}
.moove-skeleton-text   { height: 0.875rem; width: 60%; vertical-align: middle; }
.moove-skeleton-title  { height: 1.125rem; width: 40%; }
.moove-skeleton-block  { height: 80px; width: 100%; border-radius: var(--radius-md); display: block; }
.moove-skeleton-circle { border-radius: 50%; }
.moove-skeleton-row    { height: 36px; width: 100%; margin-bottom: var(--space-2); display: block; }

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

/* ----- EMPTY STATE CANÓNICO ----- */

.moove-empty {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--space-3);
    padding: 2.5rem var(--space-4);
    text-align: center;
    color: var(--gray-500);
}
.moove-empty-icon {
    font-size: 2.25rem;
    color: var(--gray-300);
    margin-bottom: var(--space-1);
    line-height: 1;
}
.moove-empty-title {
    font-size: 0.9375rem; font-weight: 600;
    color: var(--gray-700);
    margin: 0;
}
.moove-empty-text {
    font-size: 0.8125rem;
    color: var(--gray-500);
    margin: 0;
    max-width: 360px;
    line-height: 1.5;
}
.moove-empty-rule {
    width: 64px; height: 2px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, var(--brand-blue), var(--brand-mid), var(--brand-plum));
    margin-top: var(--space-2);
}
.moove-empty .btn-brand,
.moove-empty .btn-brand-gradient,
.moove-empty .btn-brand-premium,
.moove-empty .btn-outline-subtle {
    margin-top: var(--space-3);
}

/* ----- NAVBAR GRADIENT DRIFT (firma viva, casi imperceptible) ----- */

.moove-navbar::after {
    background: linear-gradient(90deg,
        var(--brand-blue) 0%,
        var(--brand-mid) 50%,
        var(--brand-plum) 100%);
    background-size: 200% 100%;
    animation: mooveGradientDrift 30s linear infinite;
}
@keyframes mooveGradientDrift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ----- DROPDOWN SLIDE (reemplaza el flash brusco) ----- */

@keyframes mooveDropdownSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}
.moove-dropdown-menu.show {
    animation: mooveDropdownSlide var(--ease-base) both;
    transform-origin: top right;
}

/* ----- REDUCED MOTION (extiende el bloque ya existente) ----- */

@media (prefers-reduced-motion: reduce) {
    .dash-card-interactive,
    .btn-brand, .btn-outline-subtle, .btn-danger-subtle,
    .btn-brand-gradient, .btn-brand-premium, .period-btn,
    .moove-skeleton, .live-pulse-warm,
    .moove-navbar::after, .moove-dropdown-menu.show {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    .dash-card-interactive:hover {
        box-shadow: var(--shadow-md);
        transform: none;
    }
}