/* ==========================================================
   CRM - CAPA MODERNA
   Va ultima. No reescribe el HTML: reajusta tipografia, color,
   densidad y profundidad sobre lo que ya existe.

   Cuatro decisiones, en orden de impacto visual:

   1. TIPOGRAFIA. La monoespaciada en toda la interfaz es lo que
      mas envejece el producto: lee a terminal, no a software.
      Sans para la interfaz, mono SOLO para numeros, montos,
      fechas e IDs. Ahi la mono suma (alinea las columnas).

   2. COLOR. El acento no puede pintar bloques enteros. Un panel
      verde de 1200px de ancho grita "plantilla". El acento va en
      lo accionable y en el estado: boton primario, foco, activo.
      Menos del 5% de los pixeles.

   3. PROFUNDIDAD. Nada de glows de color. Borde hairline de 1px
      y sombra corta y neutra. La jerarquia la da el contraste
      del texto y el espacio, no el brillo.

   4. DENSIDAD. Escala de 4px, controles de 36px, radios chicos
      y consistentes. Mas informacion por pantalla, sin apretar.
   ========================================================== */

/* ==========================================================
   0. TOKENS
   ========================================================== */

:root {
    --ui-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --ui-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

    /* Escala de 4px: todo el ritmo vertical sale de aca */
    --e-1: 4px;
    --e-2: 8px;
    --e-3: 12px;
    --e-4: 16px;
    --e-5: 24px;
    --e-6: 32px;
    --e-7: 48px;

    /* Radios: chicos y consistentes. 18px+ lee a app de 2019. */
    --rr-sm: 6px;
    --rr-md: 8px;
    --rr-lg: 12px;
    --rr-pill: 999px;

    /* Sombras neutras y cortas. Sin color, sin halo. */
    --sh-1: 0 1px 2px rgba(0, 0, 0, 0.24);
    --sh-2: 0 2px 4px rgba(0, 0, 0, 0.20), 0 6px 16px rgba(0, 0, 0, 0.24);
    --sh-3: 0 8px 24px rgba(0, 0, 0, 0.32), 0 24px 64px rgba(0, 0, 0, 0.28);

    --ui-t: 120ms cubic-bezier(0.2, 0, 0.2, 1);

    /* ui.css dimensiona los controles desde estas dos variables:
       se bajan aca en vez de pelear con cada regla. */
    --control-h: 36px;
    --control-h-mobile: 40px;
}

/* Superficies oscuras recalibradas: menos azul, mas neutro.
   El gris azulado saturado es otra marca de plantilla vieja. */
html:not([data-tema="claro"]) {
    --bg-main: #0a0a0b;
    --bg-surface: #131315;
    --bg-card: #131315;
    --border-color: #242427;
    --text-main: #f4f4f5;
    --text-muted: #8b8b94;
    --text-dim: #5c5c66;
    --surf-0: #131315;
    --surf-1: #171719;
    --surf-2: #1c1c1f;
    --surf-3: #232326;
    --borde-luz: rgba(255, 255, 255, 0.07);
}

/* ==========================================================
   1. TIPOGRAFIA
   ========================================================== */

html, body,
button, input, select, textarea,
h1, h2, h3, h4, h5, h6, p, span, div, label, td, th, a {
    font-family: var(--ui-sans) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: -0.006em;
}

/* Titulos: peso 600, tracking negativo. El 800 con mono es lo que
   daba ese aire de banner de plantilla. */
h1, h2, h3, h4,
.section-head h2,
.section-head h3 {
    font-weight: 600 !important;
    letter-spacing: -0.021em !important;
    color: var(--text-main) !important;
    text-transform: none !important;
}

h1 { font-size: 24px !important; }
h2 { font-size: 19px !important; }
h3 { font-size: 16px !important; }
h4 { font-size: 14px !important; }

label,
.campo-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    color: var(--text-muted) !important;
    text-transform: none !important;
}

/* La mono se gana su lugar: cifras tabulares que alinean en columna. */
.stat-value,
.stat-number,
.monto,
.money,
[class*="monto"],
[class*="precio"],
[class*="-count"],
.badge-count,
.tab-badge,
td[class*="fecha"],
td[class*="monto"],
code, pre, kbd {
    font-family: var(--ui-mono) !important;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1, "zero" 1;
    letter-spacing: -0.02em;
}

/* Numeros grandes de metricas: peso alto, tracking cerrado. */
.stat-value,
.stat-number {
    font-size: 28px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
}

.stat-label {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* ==========================================================
   2. SUPERFICIES: borde hairline, sombra corta, radio chico
   ========================================================== */

.glass-panel,
.stat-card,
.custom-table,
.modal-content,
.resumen-item,
.barra-filtros,
.barra-etapas {
    border-radius: var(--rr-lg) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
    background: var(--bg-card) !important;
}

.glass-panel {
    padding: var(--e-5) !important;
}

.stat-card {
    padding: var(--e-4) var(--e-5) !important;
}

/* Sombra solo donde hay elevacion real: lo que flota. */
.modal-content {
    box-shadow: var(--sh-3) !important;
    border-radius: var(--rr-lg) !important;
}

/* ==========================================================
   3. NAVBAR: alta 52px, hairline abajo, sin panel flotante
   ========================================================== */

.top-navbar {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 var(--e-5) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: var(--bg-main) !important;
    margin-bottom: 0 !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 40 !important;
}

.brand-container {
    gap: var(--e-3) !important;
}

.crm-badge-pill {
    font-family: var(--ui-mono) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 0.06em !important;
    padding: 3px var(--e-2) !important;
    border-radius: var(--rr-sm) !important;
    background: var(--surf-2) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* El indicador de realtime es estado, no decoracion:
   punto de 6px y texto chico apagado. */
.status-indicator {
    font-size: 12px !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    gap: 6px !important;
}

.status-indicator .dot {
    width: 6px !important;
    height: 6px !important;
    box-shadow: none !important;
}

.user-name {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-main) !important;
}

/* ==========================================================
   4. TABS: underline, no cajas con glow
   ========================================================== */

.main-tabs {
    background: var(--bg-main) !important;
    border: none !important;
    border-bottom: 1px solid var(--border-color) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 var(--e-5) !important;
    gap: var(--e-1) !important;
    margin-bottom: var(--e-6) !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: none;
}

.main-tabs::-webkit-scrollbar { display: none; }

.tab-btn {
    position: relative !important;
    flex: 0 0 auto !important;
    height: 40px !important;
    padding: 0 var(--e-3) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-muted) !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: color var(--ui-t) !important;
}

.tab-btn i {
    font-size: 13px !important;
    opacity: 0.7;
}

.tab-btn:hover {
    color: var(--text-main) !important;
    background: transparent !important;
}

.tab-btn.active {
    color: var(--text-main) !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    font-weight: 600 !important;
}

/* El activo se marca con una linea de 2px, no con una caja. */
.tab-btn.active::after {
    content: '';
    position: absolute;
    left: var(--e-3);
    right: var(--e-3);
    bottom: -1px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
}

.tab-badge {
    font-size: 10px !important;
    min-width: 16px !important;
    height: 16px !important;
    padding: 0 5px !important;
    border-radius: var(--rr-pill) !important;
    background: var(--surf-3) !important;
    color: var(--text-muted) !important;
    border: none !important;
    box-shadow: none !important;
}

/* ==========================================================
   5. BOTONES: 36px, un solo primario por vista
   ========================================================== */

.btn,
.btn-primary,
.btn-secondary,
button[type="submit"] {
    height: 36px !important;
    padding: 0 var(--e-4) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-radius: var(--rr-md) !important;
    box-shadow: none !important;
    text-transform: none !important;
    transition: background var(--ui-t), border-color var(--ui-t) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--e-2) !important;
}

.btn-primary {
    background: var(--primary) !important;
    border: 1px solid var(--primary) !important;
    color: #08150e !important;
    font-weight: 600 !important;
    text-shadow: none !important;
}

html[data-tema="claro"] .btn-primary {
    color: #ffffff !important;
}

.btn-primary:hover {
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    transform: none !important;
}

/* Secundario: fantasma. Sin fondo, borde hairline. */
.btn-secondary,
.btn:not(.btn-primary) {
    background: transparent !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
}

.btn-secondary:hover,
.btn:not(.btn-primary):hover {
    background: var(--surf-2) !important;
    border-color: var(--text-dim) !important;
}

.btn-icon {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    border-radius: var(--rr-md) !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--text-muted) !important;
    box-shadow: none !important;
}

.btn-icon:hover {
    background: var(--surf-2) !important;
    color: var(--text-main) !important;
}

#tema-toggle {
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--rr-md) !important;
    border: 1px solid transparent !important;
}

#tema-toggle:hover {
    background: var(--surf-2);
    border-color: transparent;
    color: var(--text-main);
}

/* ==========================================================
   6. CONTROLES: 36px, foco con anillo de 3px
   ========================================================== */

input, select, textarea,
.campo, .select-field {
    height: 36px !important;
    /* legibilidad.css fuerza min-height 42 en movil: hay que bajarlo
       o el alto real sigue siendo 42. */
    min-height: 36px !important;
    padding: 0 var(--e-3) !important;
    font-size: 13px !important;
    border-radius: var(--rr-md) !important;
    background: var(--surf-1) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    box-shadow: none !important;
    transition: border-color var(--ui-t), box-shadow var(--ui-t) !important;
}

textarea, textarea.campo {
    height: auto !important;
    min-height: 76px !important;
    line-height: 1.5 !important;
    padding: var(--e-3) !important;
    line-height: 1.5 !important;
}

input::placeholder, textarea::placeholder {
    color: var(--text-dim) !important;
}

input:focus, select:focus, textarea:focus,
.campo:focus, .select-field:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px var(--accent-glow) !important;
    outline: none !important;
}

.buscador {
    height: 36px !important;
    border-radius: var(--rr-md) !important;
    background: var(--surf-1) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

.buscador input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 34px !important;
}

.buscador i {
    color: var(--text-dim) !important;
    font-size: 12px !important;
}

/* ==========================================================
   7. TABLAS: densas, hairlines, cabecera apagada
   ========================================================== */

.custom-table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 13px !important;
    overflow: hidden !important;
}

.custom-table thead th {
    height: 36px !important;
    padding: 0 var(--e-3) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.02em !important;
    text-transform: none !important;
    color: var(--text-dim) !important;
    background: var(--surf-1) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

.custom-table tbody td {
    height: 44px !important;
    padding: 0 var(--e-3) !important;
    border-bottom: 1px solid var(--border-color) !important;
    color: var(--text-main) !important;
    vertical-align: middle !important;
}

.custom-table tbody tr:last-child td {
    border-bottom: none !important;
}

.custom-table tbody tr:hover {
    background: var(--surf-1) !important;
}

/* ==========================================================
   8. BADGES: pill chico, fondo al 10%, sin borde grueso
   ========================================================== */

.badge {
    height: 20px !important;
    padding: 0 var(--e-2) !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    border-radius: var(--rr-sm) !important;
    text-transform: none !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    border: none !important;
}

.badge-admin {
    background: var(--accent-glow) !important;
    color: var(--primary) !important;
}

.badge-usuario {
    background: rgba(139, 139, 148, 0.14) !important;
    color: var(--text-muted) !important;
}

/* ==========================================================
   9. EL PANEL DE PERFIL
   Era un bloque verde de ancho completo. Eso es lo que mas
   grita plantilla: el acento como fondo de una superficie
   grande. Pasa a ser una tarjeta neutra; el color queda en
   el avatar y en los badges.
   ========================================================== */

.profile-header-card {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: var(--rr-lg) !important;
    padding: var(--e-5) !important;
    margin-bottom: var(--e-5) !important;
    box-shadow: none !important;
}

.profile-header-card h2,
#profile-header-name {
    font-size: 20px !important;
    font-weight: 600 !important;
    letter-spacing: -0.021em !important;
    color: var(--text-main) !important;
}

#profile-header-email {
    font-size: 13px !important;
    color: var(--text-muted) !important;
}

#profile-avatar-preview,
.profile-header-card img {
    border-radius: var(--rr-pill) !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
}

/* ==========================================================
   10. MODALES
   ========================================================== */

.modal-overlay {
    background: rgba(0, 0, 0, 0.6) !important;
}

.modal-content {
    padding: var(--e-5) !important;
    border: 1px solid var(--border-color) !important;
}

.modal-content h3 {
    font-size: 16px !important;
    margin-bottom: var(--e-4) !important;
}

/* ==========================================================
   11. RITMO GENERAL
   ========================================================== */

.section-head {
    margin-bottom: var(--e-4) !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

.barra-filtros {
    gap: var(--e-2) !important;
    padding: var(--e-3) !important;
    background: transparent !important;
    border: none !important;
}

.tab-content {
    padding: 0 var(--e-5) var(--e-7) !important;
}

/* Iconos: acompañan, no compiten. */
.tab-btn i,
.section-head i,
h2 i, h3 i {
    color: var(--text-dim) !important;
    font-size: 0.9em !important;
    margin-right: 2px;
}

.tab-btn.active i {
    color: var(--primary) !important;
}

/* Scrollbar fina, del color del borde. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--border-color) transparent;
}

*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
    background: var(--border-color);
    border-radius: var(--rr-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: var(--text-dim); background-clip: content-box; }

/* Seleccion de texto con el acento, al 25%. */
::selection {
    background: var(--accent-glow);
    color: var(--text-main);
}

/* ==========================================================
   12. LO QUE SE APAGA
   Glows, gradientes de marca sobre superficies grandes y
   bordes de colores. Todo eso es de la generacion anterior.
   ========================================================== */

.glass-panel,
.stat-card,
.top-navbar,
.main-tabs,
.btn,
.badge,
.tab-btn,
.custom-table,
input, select, textarea {
    text-shadow: none !important;
}

[style*="box-shadow: 0 0 "],
[class*="glow"]:not(#ambient-background-glow) {
    box-shadow: none !important;
}