/*
╔══════════════════════════════════════════════════════════════════════════════╗
║  MM-TOKENS.CSS — Design Tokens oficiales · MM Consultor Legal               ║
║  Creado 2026-04-22 · Paleta Dorada v4                                       ║
╠══════════════════════════════════════════════════════════════════════════════╣
║  ESTE ARCHIVO ES LA FUENTE ÚNICA DE VERDAD DE LA PALETA DEL PRODUCTO.       ║
║  Lo consume el master del front y el master del panel antes que cualquier   ║
║  otro CSS. Cualquier color fuera de estos tokens es un bug visual — sin    ║
║  excepciones. Ver ~/.claude/.../memory/feedback_paleta_oficial.md            ║
║                                                                              ║
║  PROHIBIDO aquí: morado (#662d91, #7c3aed, #8b5cf6…), rojo warm (#C04848),  ║
║  azul Paper (#5e72e4). Esos colores vinieron del template UDEMA y están    ║
║  discontinuados.                                                            ║
║                                                                              ║
║  SECCIONES                                                                   ║
║  [1]  Paleta oficial (copia exacta de panel.css v4)                         ║
║  [2]  Aliases de compatibilidad legacy (no reintroducir morado)             ║
║  [3]  Tipografía (escala, pesos, interlineado)                              ║
║  [4]  Espaciado + radios + sombras + transiciones                           ║
║  [5]  Z-index                                                               ║
║  [6]  Rubro + status helpers                                                ║
╚══════════════════════════════════════════════════════════════════════════════╝
*/

/* ═══════════════════════════════════════════════════════════════════
   [1] PALETA OFICIAL · Dorada v4
   ─────────────────────────────────────────────────────────────────
   Espejo exacto del bloque [1] Variables de panel.css. Si algún día
   la paleta evoluciona, se modifica AQUÍ primero y panel.css luego
   debe sincronizarse (o mejor: panel.css borra su bloque de tokens
   y consume éste).
═══════════════════════════════════════════════════════════════════ */
:root {
    /* ── Brand — Dorado ── */
    --brand:         #C9A24A;
    --brand-dark:    #A8842F;
    --brand-light:   #F0D898;
    --brand-xlight:  #FAF5E8;
    --brand-border:  rgba(201,162,74,.35);

    /* ── Sidebar (panel) ── */
    --sb-bg:         #0D0D0D;
    --sb-item-h:     rgba(201,162,74,.1);
    --sb-text:       rgba(255,255,255,.48);
    --sb-text-h:     rgba(255,255,255,.82);
    --sb-text-a:     #0D0D0D;
    --sb-border:     rgba(255,255,255,.07);
    --sb-width:      260px;

    /* ── Topbar ── */
    --tb-bg:         #ffffff;
    --tb-h:          60px;
    --tb-border:     #EDE8DC;

    /* ── Content / superficies ── */
    --bg:            #F5F0E8;
    --card-bg:       #ffffff;
    --card-radius:   10px;
    --card-shadow:   0 1px 3px rgba(0,0,0,.04), 0 4px 16px rgba(0,0,0,.07);
    --card-shadow-h: 0 6px 24px rgba(0,0,0,.12);
    --card-border:   #EDE8DC;

    /* ── Texto ── */
    --text:          #0D0D0D;
    --text-2:        #4A4A4A;
    --text-muted:    #7A7A7A;
    --text-light:    rgba(255,255,255,.85);

    /* ── Semantic states (únicos colores no-dorados permitidos) ── */
    --ok:            #2E8B57;
    --ok-bg:         #f0faf4;
    --ok-border:     rgba(46,139,87,.22);
    --warn:          #D4A017;
    --warn-bg:       #fdf8e8;
    --warn-border:   rgba(212,160,23,.22);
    --err:           #C0392B;
    --err-bg:        #fdf2f0;
    --err-border:    rgba(192,57,43,.22);
    --info:          #2471A3;
    --info-bg:       #f0f7ff;
    --info-border:   rgba(36,113,163,.22);

    /* ── Bordes ── */
    --border:        #EDE8DC;
    --border-l:      #F5F0E8;

    /* ── Transiciones ── */
    --t1: .15s ease;
    --t2: .25s ease;
    --t3: .4s  ease;
}

/* ═══════════════════════════════════════════════════════════════════
   [2] ALIASES DE COMPATIBILIDAD LEGACY
   ─────────────────────────────────────────────────────────────────
   Los nombres de variables "purple", "warm", "dark-bg" son deuda del
   stack UDEMA/redesign. Se mantienen como alias para que el CSS viejo
   (redesign.css, blog.css, mm-system.css, front.css pre-refactor) siga
   resolviendo a dorado hasta que esos archivos se reescriban o
   desactiven. Al limpiar código nuevo, usar los tokens [1] directamente.
═══════════════════════════════════════════════════════════════════ */
:root {
    /* Alias del morado legacy → brand dorado */
    --primary-purple:       var(--brand);
    --primary-purple-light: var(--brand-light);
    --bg-purple-soft:       var(--brand-xlight);

    /* Alias warm/dark legacy → brand dark + neutral */
    --primary-warm:  var(--brand-dark);
    --primary-dark:  var(--text);
    --dark-bg:       var(--text);

    /* Front-* aliases (los usaba front.css en [1] antes del refactor) */
    --front-ok:        var(--ok);
    --front-ok-bg:     var(--ok-bg);
    --front-ok-border: var(--ok-border);
    --front-err:       var(--err);
    --front-err-bg:    var(--err-bg);
    --front-err-border:var(--err-border);
    --front-warn:      var(--warn);
    --front-warn-bg:   var(--warn-bg);
    --front-info:      var(--info);
    --front-info-bg:   var(--info-bg);

    /* Fondos/bordes neutros del front legacy */
    --bg-subtle:     #F8F5EF;
    --bg-warm:       var(--brand-xlight);
    --border-light:  var(--border);
    --border-subtle: #F0EBE0;

    /* Texto legacy (front.css original) */
    --text-dark:  var(--text);
    --text-body:  var(--text-2);

    /* Fondos/bordes blanco y gris genéricos */
    --white:   #ffffff;
    --accent-blue: var(--info);  /* no reintroducir #3f9fff */

    /* Sombras con tinte dorado (eran usadas por front.css y mm-system) */
    --shadow-xs:         0 1px 2px rgba(0,0,0,.04);
    --shadow-sm:         0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
    --shadow-md:         0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.04);
    --shadow-lg:         0 10px 15px -3px rgba(0,0,0,.08), 0 4px 6px -2px rgba(0,0,0,.04);
    --shadow-xl:         0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04);
    --shadow-card:       var(--card-shadow);
    --shadow-card-hover: var(--card-shadow-h);
}

/* ═══════════════════════════════════════════════════════════════════
   [3] TIPOGRAFÍA
═══════════════════════════════════════════════════════════════════ */
:root {
    /* Familias */
    --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* Escala de tamaños */
    --fs-2xs:  .65rem;
    --fs-xs:   .72rem;
    --fs-sm:   .8rem;
    --fs-base: .875rem;
    --fs-md:   1rem;
    --fs-lg:   1.125rem;
    --fs-xl:   1.25rem;
    --fs-2xl:  1.5rem;
    --fs-3xl:  1.875rem;
    --fs-4xl:  2.25rem;
    --fs-5xl:  3rem;
    --fs-6xl:  3.75rem;

    /* Pesos */
    --fw-normal:   400;
    --fw-medium:   500;
    --fw-semibold: 600;
    --fw-bold:     700;
    --fw-black:    800;

    /* Interlineado */
    --lh-none:    1;
    --lh-tight:   1.25;
    --lh-snug:    1.375;
    --lh-normal:  1.5;
    --lh-relaxed: 1.625;
    --lh-loose:   1.75;

    /* Espaciado de letras */
    --ls-tighter: -0.03em;
    --ls-tight:   -0.01em;
    --ls-normal:   0;
    --ls-wide:     0.03em;
    --ls-wider:    0.06em;
    --ls-widest:   0.12em;
}

/* ═══════════════════════════════════════════════════════════════════
   [4] ESPACIADO · RADIOS · TRANSICIONES
═══════════════════════════════════════════════════════════════════ */
:root {
    /* Espaciado */
    --space-xs:  4px;
    --space-sm:  8px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  40px;
    --space-2xl: 64px;

    /* Radios */
    --radius-xs:   6px;
    --radius-sm:   8px;
    --radius-md:  12px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* Transiciones (aliases para compatibilidad front.css y panel.css) */
    --transition-fast: var(--t1);
    --transition:      var(--t2);
    --transition-slow: var(--t3);
}

/* ═══════════════════════════════════════════════════════════════════
   [5] Z-INDEX
═══════════════════════════════════════════════════════════════════ */
:root {
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-overlay:  300;
    --z-modal:    400;
    --z-toast:    500;
}

/* ═══════════════════════════════════════════════════════════════════
   [6] RUBRO + STATUS HELPERS
   ─────────────────────────────────────────────────────────────────
   Rubros (legal, medical) heredan del brand dorado — el ex-morado
   de legal (#662d91) queda descontinuado.
═══════════════════════════════════════════════════════════════════ */
:root {
    /* Rubros */
    --rubro-legal:        var(--brand);
    --rubro-legal-light:  var(--brand-light);
    --rubro-legal-glow:   rgba(201,162,74,.25);
    --rubro-medical:      var(--info);
    --rubro-medical-light:#CFE3F2;
    --rubro-medical-glow: rgba(36,113,163,.2);

    /* Status (mapean a semantic) */
    --status-success:  var(--ok);
    --status-success-bg:    var(--ok-bg);
    --status-success-border:var(--ok-border);
    --status-warn:     var(--warn);
    --status-warn-bg:       var(--warn-bg);
    --status-warn-border:   var(--warn-border);
    --status-info:     var(--info);
    --status-info-bg:       var(--info-bg);
    --status-info-border:   var(--info-border);
    --status-pending:       var(--text-muted);
    --status-pending-bg:    #f3f4f6;
    --status-pending-border:rgba(122,122,122,.22);

    /* Gradientes de marca (reutilizables en front.css y panel.css) */
    --front-gradient:       linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
    --front-gradient-hover: linear-gradient(135deg, var(--brand-light) 0%, var(--brand) 100%);
    --front-gradient-dark:  linear-gradient(135deg, var(--text) 0%, var(--brand-dark) 100%);
    --front-gradient-text:  linear-gradient(135deg, var(--brand), var(--brand-dark));
}