/* ==========================================================
   LIVECUE - SISTEMA DE DISEÑO NEUMÓRFICO (modo oscuro)
   Colores de marca: morado #9b51e0 sobre fondo oscuro.
   Luz desde arriba-izquierda: sombra clara arriba-izq, oscura abajo-der.
   ========================================================== */

:root {
    /* --- Superficie (el neumorfismo necesita un fondo que no sea negro puro) --- */
    --bg: #1b1b20;
    --bg-deep: #16161a;          /* zonas hundidas (inputs, tracks) */
    --shadow-dark: #0e0e11;
    --shadow-light: #282830;

    /* --- Marca --- */
    --primary: #9b51e0;
    --primary-rgb: 155, 81, 224; /* para transparencias: rgba(var(--primary-rgb), .2) */
    --primary-light: #8b45d4;    /* inicio del degradado de botones */
    --primary-strong: #7633bd;   /* hover / pressed */
    --primary-soft: #b98af0;     /* texto morado sobre fondo oscuro (contraste AA) */
    --primary-glow: rgba(var(--primary-rgb), 0.45);
    --on-primary: #ffffff;
    --scrim: rgba(10, 10, 12, 0.7); /* fondo detrás de ventanas y menú */
    --mapa-filtro: invert(0.92) hue-rotate(200deg) brightness(0.95) saturate(0.6); /* mapas en tono oscuro */
    /* Los temas (lib/temas.js → /css/temas.css) redefinen estos tokens con [data-tema="…"] */

    /* --- Texto --- */
    --text: #f2f2f5;
    --text-dim: #a1a1aa;         /* 4.5:1+ sobre --bg */
    --text-faint: #71717a;       /* solo texto decorativo / deshabilitado */

    /* --- Estados --- */
    --success: #34d399;
    --danger: #f87171;
    --amber: #fbbf24;

    /* --- Sombras neumórficas --- */
    --neu-sm: 3px 3px 6px var(--shadow-dark), -3px -3px 6px var(--shadow-light);
    --neu: 6px 6px 14px var(--shadow-dark), -6px -6px 14px var(--shadow-light);
    --neu-lg: 12px 12px 28px var(--shadow-dark), -10px -10px 24px var(--shadow-light);
    --neu-inset-sm: inset 2px 2px 5px var(--shadow-dark), inset -2px -2px 5px var(--shadow-light);
    --neu-inset: inset 5px 5px 10px var(--shadow-dark), inset -5px -5px 10px var(--shadow-light);
    --glow: 0 0 18px var(--primary-glow);

    /* --- Forma y espacio --- */
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-pill: 999px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
    --space-6: 32px;
    --space-7: 48px;

    /* --- Tipografía --- */
    --font-main: 'Inter', system-ui, sans-serif;
    --font-brand: 'Syncopate', sans-serif;
    --font-mono: 'Space Mono', monospace;

    /* --- Movimiento --- */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --t-fast: 150ms;
    --t: 250ms;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html { color-scheme: dark; }

/* Comportamiento de app nativa: sin seleccionar texto, sin menú al mantener presionado (iOS),
   sin arrastrar imágenes, sin rebote/recarga al jalar la página y sin zoom por doble toque.
   Los campos de texto conservan selección y menú (copiar/pegar). El pellizco para zoom sigue disponible. */
html {
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
    overscroll-behavior: none;
    touch-action: manipulation;
}
img { -webkit-user-drag: none; }
input, textarea, select, [contenteditable="true"] {
    -webkit-user-select: text; user-select: text;
    -webkit-touch-callout: default;
}

/* El atributo hidden siempre oculta, aunque el componente defina display:flex/grid */
[hidden] { display: none !important; }

body {
    margin: 0;
    min-height: 100dvh;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-main);
    font-size: 16px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { margin: 0 0 var(--space-3); line-height: 1.2; font-weight: 700; }
p { margin: 0 0 var(--space-3); }
a { color: var(--primary-soft); }
img { max-width: 100%; display: block; }

/* Foco visible SIEMPRE (el neumorfismo por sí solo no lo comunica) */
:focus-visible {
    outline: 2px solid var(--primary-soft);
    outline-offset: 3px;
}

.brand { font-family: var(--font-brand); letter-spacing: -1px; }
.brand .accent { color: var(--primary); }
.text-dim { color: var(--text-dim); }
.mono { font-family: var(--font-mono); }

/* ---------- Superficies ---------- */
.neu-card {
    background: var(--bg);
    border-radius: var(--radius-lg);
    box-shadow: var(--neu);
    padding: var(--space-5);
}
.neu-card.lg { box-shadow: var(--neu-lg); }

.neu-inset {
    background: var(--bg-deep);
    border-radius: var(--radius);
    box-shadow: var(--neu-inset);
    padding: var(--space-4);
}

/* ---------- Botones ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    min-height: 48px; padding: 0 var(--space-5);
    border: none; border-radius: var(--radius);
    background: var(--bg); color: var(--text);
    font: 600 1rem var(--font-main);
    box-shadow: var(--neu);
    cursor: pointer; text-decoration: none;
    transition: box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast);
}
.btn:hover { color: var(--primary-soft); }
.btn:active, .btn.is-pressed { box-shadow: var(--neu-inset); transform: scale(0.98); }
.btn:disabled { color: var(--text-faint); box-shadow: var(--neu-sm); cursor: not-allowed; transform: none; }
.btn.block { width: 100%; }

.btn-primary {
    background: linear-gradient(145deg, var(--primary-light), var(--primary-strong));
    color: var(--on-primary);
    box-shadow: var(--neu), 0 6px 18px rgba(var(--primary-rgb), 0.25);
}
.btn-primary:hover { color: var(--on-primary); box-shadow: var(--neu), var(--glow); }
.btn-primary:active { box-shadow: inset 4px 4px 10px rgba(0,0,0,0.35), inset -3px -3px 8px rgba(255,255,255,0.12); }

.btn-danger { color: var(--danger); }
.btn-danger:hover { color: var(--danger); }

/* Botón de icono circular (44px mínimo táctil) */
.btn-icon {
    width: 48px; height: 48px; padding: 0;
    border-radius: 50%;
    font-size: 1.1rem;
}
.btn-icon.sm { width: 44px; height: 44px; font-size: 1rem; }

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); text-align: left; }
.field label { font-size: 0.875rem; font-weight: 600; color: var(--text-dim); padding-left: var(--space-1); }
.field .hint { font-size: 0.8rem; color: var(--text-dim); padding-left: var(--space-1); }
.field .error { font-size: 0.8rem; color: var(--danger); padding-left: var(--space-1); }

.input, .select, .textarea {
    width: 100%; min-height: 50px;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-deep); color: var(--text);
    border: 1px solid transparent; border-radius: var(--radius);
    box-shadow: var(--neu-inset);
    font: 1rem var(--font-main);
    outline: none;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.textarea { min-height: 110px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-faint); }
.input:focus, .select:focus, .textarea:focus {
    border-color: rgba(var(--primary-rgb), 0.6);
    box-shadow: var(--neu-inset), 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}
.input.is-invalid { border-color: rgba(248, 113, 113, 0.6); }

/* Input con icono / botón a la derecha (ej. ver contraseña) */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 52px; }
.input-wrap .input-action {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    width: 44px; height: 44px; border: none; background: none;
    color: var(--text-dim); cursor: pointer; border-radius: 50%;
}
.input-wrap .input-action:hover { color: var(--primary-soft); }

/* ---------- Toggle (switch) ---------- */
.toggle { display: inline-flex; align-items: center; gap: var(--space-3); cursor: pointer; min-height: 44px; user-select: none; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle .track {
    position: relative; width: 56px; height: 30px; flex-shrink: 0;
    background: var(--bg-deep); border-radius: var(--radius-pill);
    box-shadow: var(--neu-inset-sm);
    transition: background var(--t) var(--ease);
}
.toggle .track::after {
    content: ''; position: absolute; top: 4px; left: 4px;
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--bg); box-shadow: var(--neu-sm);
    transition: transform var(--t) var(--ease), background var(--t);
}
.toggle input:checked + .track { background: rgba(var(--primary-rgb), 0.25); }
.toggle input:checked + .track::after { transform: translateX(26px); background: var(--primary); box-shadow: var(--glow); }
.toggle input:focus-visible + .track { outline: 2px solid var(--primary-soft); outline-offset: 3px; }

/* ---------- Tabs / control segmentado ---------- */
.tabs {
    display: flex; gap: var(--space-1); padding: var(--space-1);
    background: var(--bg-deep); border-radius: var(--radius);
    box-shadow: var(--neu-inset);
}
.tab {
    flex: 1; min-height: 44px; border: none; background: transparent;
    color: var(--text-dim); font: 600 0.9rem var(--font-main);
    border-radius: calc(var(--radius) - 4px); cursor: pointer;
    transition: all var(--t) var(--ease);
}
.tab:hover { color: var(--text); }
.tab.active, .tab[aria-selected="true"] { background: var(--bg); color: var(--primary-soft); box-shadow: var(--neu-sm); }

/* ---------- Chips / badges ---------- */
.chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 12px; border-radius: var(--radius-pill);
    background: var(--bg); box-shadow: var(--neu-sm);
    font-size: 0.8rem; font-weight: 600; color: var(--text-dim); white-space: nowrap;
}
.chip.primary { color: var(--primary-soft); }
.chip.success { color: var(--success); }
.chip.danger { color: var(--danger); }
.chip.amber { color: var(--amber); }
.chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.chip.live .dot { box-shadow: 0 0 8px currentColor; animation: pulse 1.6s infinite; }

/* ---------- Alertas / toast ---------- */
.alert {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-4); border-radius: var(--radius);
    background: var(--bg); box-shadow: var(--neu);
    border-left: 4px solid var(--primary);
    font-size: 0.9rem; color: var(--text);
}
.alert i { margin-top: 3px; color: var(--primary-soft); }
.alert.success { border-left-color: var(--success); } .alert.success i { color: var(--success); }
.alert.error { border-left-color: var(--danger); }   .alert.error i { color: var(--danger); }
.alert.warning { border-left-color: var(--amber); }  .alert.warning i { color: var(--amber); }

.toast-stack {
    position: fixed; z-index: 9999;
    right: var(--space-4); bottom: calc(var(--space-5) + env(safe-area-inset-bottom));
    display: flex; flex-direction: column; gap: var(--space-3);
    width: min(360px, calc(100vw - 2 * var(--space-4)));
}
.toast-stack .alert { animation: toast-in var(--t) var(--ease); }
/* En móvil, arriba: abajo viven las pestañas, hojas y barras de acción */
@media (max-width: 700px) {
    .toast-stack { top: calc(var(--space-3) + env(safe-area-inset-top)); bottom: auto; left: var(--space-4); right: var(--space-4); width: auto; }
}

/* ---------- Listas (peticiones, repertorio) ---------- */
.list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.list-item {
    display: flex; align-items: center; gap: var(--space-4);
    padding: var(--space-4); border-radius: var(--radius);
    background: var(--bg); box-shadow: var(--neu-sm);
}
.list-item .body { flex: 1; min-width: 0; }
.list-item .title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .subtitle { font-size: 0.85rem; color: var(--text-dim); }
.list-item.is-done { box-shadow: var(--neu-inset-sm); opacity: 0.6; }

.avatar {
    width: 48px; height: 48px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center;
    background: var(--bg); box-shadow: var(--neu-sm);
    color: var(--primary-soft); font-weight: 700;
    overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Ecualizador (identidad LiveCue) ---------- */
.eq { display: inline-flex; align-items: flex-end; gap: 4px; height: 18px; }
.eq span { width: 4px; height: 4px; background: var(--primary); border-radius: 2px; animation: eq 1s infinite ease-in-out; }
.eq span:nth-child(1) { animation-delay: .1s; }
.eq span:nth-child(2) { animation-delay: .4s; }
.eq span:nth-child(3) { animation-delay: .2s; }
.eq span:nth-child(4) { animation-delay: .5s; }
.eq span:nth-child(5) { animation-delay: .3s; }

/* ---------- Loader ---------- */
.loader {
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--bg); box-shadow: var(--neu);
    display: grid; place-items: center;
}
.loader::after {
    content: ''; width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid transparent; border-top-color: var(--primary); border-right-color: var(--primary);
    animation: spin 0.9s linear infinite;
}

/* ---------- Modal ---------- */
.modal-overlay {
    position: fixed; inset: 0; z-index: 2000;
    display: grid; place-items: center; padding: var(--space-4);
    background: var(--scrim); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity var(--t) var(--ease), visibility var(--t);
}
.modal-overlay.active { opacity: 1; visibility: visible; }
.modal {
    width: 100%; max-width: 440px; max-height: 90dvh; overflow-y: auto;
    background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--neu-lg);
    padding: var(--space-5);
    transform: translateY(16px) scale(0.97); transition: transform var(--t) var(--ease);
}
.modal-overlay.active .modal { transform: none; }
.modal-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.modal-header h2 { margin: 0; font-size: 1.2rem; letter-spacing: -0.01em; color: var(--text); }

/* ---------- Confirmación ---------- */
.modal.confirm { max-width: 380px; text-align: center; }
.confirm-icon { width: 64px; height: 64px; margin: 0 auto var(--space-4); border-radius: 50%; display: grid; place-items: center; background: var(--bg-deep); box-shadow: var(--neu-inset); color: var(--amber); font-size: 1.4rem; }
.confirm-icon.danger { color: var(--danger); }
.modal.confirm h2 { font-size: 1.15rem; }
.modal.confirm p { color: var(--text-dim); font-size: 0.92rem; }
.confirm-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
.confirm-actions .btn { padding: 0 var(--space-3); white-space: nowrap; }
.btn-danger-solid { background: linear-gradient(145deg, #f87171, #dc2626); color: #fff; }
.btn-danger-solid:hover { color: #fff; }
.btn-primary:disabled, .btn-danger-solid:disabled { background: var(--bg); color: var(--text-faint); box-shadow: var(--neu-inset-sm); }
#modal-confirmar { z-index: 2500; }

/* ---------- Aviso de actualización (ui.js → Actualizacion) ---------- */
.update-overlay {
    position: fixed; inset: 0; z-index: 99990;
    display: grid; place-items: center; padding: var(--space-4);
    background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    opacity: 0; transition: opacity var(--t) var(--ease);
}
.update-overlay.active { opacity: 1; }
.update-card {
    width: 100%; max-width: 360px; text-align: center;
    padding: var(--space-6) var(--space-5) var(--space-5);
    background: var(--bg); border-radius: var(--radius-lg);
    box-shadow: var(--neu-lg), 0 24px 60px rgba(0, 0, 0, 0.5);
    transform: translateY(18px) scale(0.96); transition: transform 350ms cubic-bezier(0.34, 1.4, 0.64, 1);
}
.update-overlay.active .update-card { transform: none; }
.update-icon {
    width: 76px; height: 76px; margin: 0 auto var(--space-4); border-radius: 50%;
    display: grid; place-items: center; font-size: 1.7rem; color: var(--on-primary);
    background: linear-gradient(145deg, var(--primary), var(--primary-strong));
    box-shadow: var(--neu), 0 0 0 8px rgba(var(--primary-rgb), 0.12), 0 10px 30px rgba(var(--primary-rgb), 0.4);
    animation: update-flota 2.4s ease-in-out infinite;
}
.update-card h2 { margin: 0 0 var(--space-2); font-size: 1.2rem; letter-spacing: -0.01em; color: var(--text); }
.update-card p { margin: 0; color: var(--text-dim); font-size: 0.92rem; line-height: 1.5; }
.update-version {
    display: inline-block; margin: var(--space-4) 0 var(--space-5); padding: 4px 12px;
    border-radius: var(--radius-pill); background: var(--bg-deep); box-shadow: var(--neu-inset-sm);
    font: 0.78rem var(--font-mono, monospace); color: var(--primary-soft); letter-spacing: 0.5px;
}
.update-card .btn { width: 100%; min-height: 50px; }
@keyframes update-flota { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* ---------- Loader global (pantalla completa) ---------- */
.global-loader {
    position: fixed; inset: 0; z-index: 99999;
    display: grid; place-items: center;
    background: var(--scrim); backdrop-filter: blur(4px);
    opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
}
.global-loader.active { opacity: 1; visibility: visible; }

/* ---------- Menú lateral (drawer) ---------- */
.drawer {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: 1002;
    width: min(300px, 85vw);
    display: flex; flex-direction: column;
    padding: calc(var(--space-6) + env(safe-area-inset-top)) var(--space-5) calc(var(--space-5) + env(safe-area-inset-bottom));
    background: var(--bg);
    box-shadow: 12px 0 30px var(--shadow-dark);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    transform: translateX(-105%); transition: transform var(--t) var(--ease);
}
.drawer.open { transform: none; }
.drawer-overlay {
    position: fixed; inset: 0; z-index: 1001;
    background: var(--scrim); backdrop-filter: blur(3px);
    opacity: 0; visibility: hidden; transition: opacity var(--t), visibility var(--t);
}
.drawer-overlay.active { opacity: 1; visibility: visible; }
.drawer-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.drawer-header .brand { font-size: 1.2rem; margin: 0; }
.drawer-links { display: flex; flex-direction: column; gap: var(--space-2); }
.drawer-link {
    display: flex; align-items: center; gap: var(--space-4);
    min-height: 48px; padding: 0 var(--space-4);
    border: none; background: none; width: 100%; text-align: left;
    border-radius: var(--radius); color: var(--text-dim);
    font: 0.95rem var(--font-main); text-decoration: none; cursor: pointer;
    transition: box-shadow var(--t-fast), color var(--t-fast);
}
.drawer-link i { width: 22px; text-align: center; color: var(--primary-soft); font-size: 1.1rem; }
.drawer-link:hover { color: var(--text); box-shadow: var(--neu-sm); }
.drawer-link:active { box-shadow: var(--neu-inset-sm); }
.drawer-footer { margin-top: auto; padding-top: var(--space-4); }
.drawer-footer .drawer-link { font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.drawer-footer .drawer-link i { color: var(--text-dim); }

/* ---------- Utilidades de layout ---------- */
.container { width: 100%; max-width: 960px; margin: 0 auto; padding: 0 var(--space-4); }
.stack { display: flex; flex-direction: column; gap: var(--space-4); }
.row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.center { text-align: center; }
.mt-4 { margin-top: var(--space-4); } .mt-5 { margin-top: var(--space-5); }

/* ---------- Animaciones ---------- */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes eq { 0%, 100% { height: 4px; } 50% { height: 18px; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}