/* ==========================================================================
   Portable Santa Fe — Theme Tokens
   Capa FIJA: solo tokens que NO dependen del taller.
   Colores dinámicos (técnicos, estados, prioridades) se inyectan desde PHP
   en el template base como bloque <style id="theme-dynamic">.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Neutros y superficies
   -------------------------------------------------------------------------- */
:root {
  --bg:        #f6f7f9;
  --surface-1: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e8eaed;

  --text:       #111827;
  --text-muted: #6b7280;
  --text-soft:  #9ca3af;

  --border:     rgba(17, 24, 39, 0.12);
  --border-mid: rgba(17, 24, 39, 0.20);
  --shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.06);
  --shadow:     0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 20px 50px rgba(0, 0, 0, 0.14);

  --focus: rgba(37, 99, 235, 0.25);
  --hover: rgba(17, 24, 39, 0.04);
  --active: rgba(17, 24, 39, 0.08);
}

/* --------------------------------------------------------------------------
   2. Semánticos del sistema (fijos — no los configura el taller)
   -------------------------------------------------------------------------- */
:root {
  --success:         #16a34a;
  --success-soft:    #dcfce7;
  --danger:          #dc2626;
  --danger-soft:     #fee2e2;
  --warning:         #d97706;
  --warning-soft:    #fef3c7;
  --info:            #2563eb;
  --info-soft:       #dbeafe;
}

/* --------------------------------------------------------------------------
   3. Tipografía
   -------------------------------------------------------------------------- */
:root {
  --font-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
}

/* --------------------------------------------------------------------------
   4. Layout y espaciado
   -------------------------------------------------------------------------- */
:root {
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;

  --pad-1: 6px;
  --pad-2: 10px;
  --pad-3: 16px;
  --pad-4: 24px;

  --gap-1: 6px;
  --gap-2: 10px;
  --gap-3: 16px;
  --gap-4: 24px;
}

/* --------------------------------------------------------------------------
   5. Modal — tokens de rol (editable / readonly / disabled)
   Consumidos por: modal_kanban.css, attachment_viewer.css y cualquier
   modal futuro. Garantizan consistencia visual entre vistas.
   -------------------------------------------------------------------------- */
:root {
  /* Contenedor del modal */
  --mk-modal-bg:      var(--surface-1);
  --mk-modal-border:  var(--border);
  --mk-modal-shadow:  var(--shadow-lg);
  --mk-modal-w:       clamp(320px, 70vw, 980px);
  --mk-modal-max-h:   88vh;

  /* Texto */
  --mk-title:       var(--text);
  --mk-label:       rgba(17, 24, 39, 0.72);
  --mk-subtext:     rgba(17, 24, 39, 0.60);
  --mk-placeholder: rgba(17, 24, 39, 0.40);
  --mk-divider:     rgba(17, 24, 39, 0.08);

  /* Superficies */
  --mk-panel-soft:  rgba(17, 24, 39, 0.02);

  /* Campos editables */
  --mk-input-bg:     rgba(255, 255, 255, 0.98);
  --mk-input-border: rgba(17, 24, 39, 0.14);
  --mk-input-text:   rgba(17, 24, 39, 0.92);

  /* Campos readonly */
  --mk-readonly-bg:     rgba(17, 24, 39, 0.05);
  --mk-readonly-border: rgba(17, 24, 39, 0.10);
  --mk-readonly-text:   rgba(17, 24, 39, 0.78);

  /* Campos deshabilitados */
  --mk-disabled-bg:     rgba(17, 24, 39, 0.03);
  --mk-disabled-border: rgba(17, 24, 39, 0.06);
  --mk-disabled-text:   rgba(17, 24, 39, 0.38);

  /* Interacción dentro del modal */
  --mk-focus-ring: rgba(37, 99, 235, 0.22);
  --mk-hover-bg:   rgba(17, 24, 39, 0.03);
  --mk-active-bg:  rgba(17, 24, 39, 0.06);

  /* Botones */
  --mk-btn-primary-bg:    #2563eb;
  --mk-btn-primary-text:  #ffffff;
  --mk-btn-secondary-bg:  rgba(17, 24, 39, 0.06);
  --mk-btn-secondary-text: rgba(17, 24, 39, 0.88);

  /* Notas y adjuntos */
  --mk-note-bg:     rgba(255, 255, 255, 0.94);
  --mk-note-border: rgba(17, 24, 39, 0.10);
  --mk-tile-bg:     rgba(17, 24, 39, 0.035);
  --mk-tile-border: rgba(17, 24, 39, 0.08);
}

/* --------------------------------------------------------------------------
   6. Modo oscuro
   Regla: solo cambia valores de tokens, nunca agrega selectores nuevos.
   Los componentes usan los tokens — nunca colores hardcodeados.
   -------------------------------------------------------------------------- */
body.modo-oscuro, html.modo-oscuro {
  --bg:        #0b1220;
  --surface-1: #0f172a;
  --surface-2: #111c33;
  --surface-3: #1a2744;

  --text:       #e5e7eb;
  --text-muted: #9ca3af;
  --text-soft:  #6b7280;

  --border:     rgba(229, 231, 235, 0.12);
  --border-mid: rgba(229, 231, 235, 0.22);
  --shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.20);
  --shadow:     0 16px 40px rgba(0, 0, 0, 0.45);
  --shadow-lg:  0 28px 60px rgba(0, 0, 0, 0.55);

  --focus: rgba(96, 165, 250, 0.30);
  --hover: rgba(229, 231, 235, 0.04);
  --active: rgba(229, 231, 235, 0.08);

  /* Semánticos — versiones oscuras */
  --success-soft:  rgba(22, 163, 74,  0.18);
  --danger-soft:   rgba(220, 38, 38,  0.18);
  --warning-soft:  rgba(217, 119, 6,  0.18);
  --info-soft:     rgba(37, 99, 235,  0.18);

  /* Modal */
  --mk-modal-bg:     #14161a;
  --mk-modal-border: rgba(255, 255, 255, 0.10);
  --mk-modal-shadow: 0 28px 60px rgba(0, 0, 0, 0.55);

  --mk-title:       rgba(255, 255, 255, 0.92);
  --mk-label:       rgba(255, 255, 255, 0.74);
  --mk-subtext:     rgba(255, 255, 255, 0.60);
  --mk-placeholder: rgba(255, 255, 255, 0.38);
  --mk-divider:     rgba(255, 255, 255, 0.08);

  --mk-panel-soft: rgba(255, 255, 255, 0.03);

  --mk-input-bg:     rgba(255, 255, 255, 0.07);
  --mk-input-border: rgba(255, 255, 255, 0.12);
  --mk-input-text:   rgba(255, 255, 255, 0.92);

  --mk-readonly-bg:     rgba(255, 255, 255, 0.05);
  --mk-readonly-border: rgba(255, 255, 255, 0.10);
  --mk-readonly-text:   rgba(255, 255, 255, 0.78);

  --mk-disabled-bg:     rgba(255, 255, 255, 0.03);
  --mk-disabled-border: rgba(255, 255, 255, 0.06);
  --mk-disabled-text:   rgba(255, 255, 255, 0.38);

  --mk-focus-ring: rgba(96, 165, 250, 0.28);
  --mk-hover-bg:   rgba(255, 255, 255, 0.04);
  --mk-active-bg:  rgba(255, 255, 255, 0.07);

  --mk-btn-secondary-bg:   rgba(255, 255, 255, 0.08);
  --mk-btn-secondary-text: rgba(255, 255, 255, 0.92);

  --mk-note-bg:     rgba(255, 255, 255, 0.06);
  --mk-note-border: rgba(255, 255, 255, 0.10);
  --mk-tile-bg:     rgba(255, 255, 255, 0.05);
  --mk-tile-border: rgba(255, 255, 255, 0.08);
}

/* --------------------------------------------------------------------------
   7. Modo claro explícito (para cuando el sistema lo fuerza con clase)
   -------------------------------------------------------------------------- */
body.modo-claro, html.modo-claro {
  --bg:        #f6f7f9;
  --surface-1: #ffffff;
  --surface-2: #f1f3f6;
  --surface-3: #e8eaed;

  --text:       #111827;
  --text-muted: #6b7280;
  --text-soft:  #9ca3af;

  --border:     rgba(17, 24, 39, 0.12);
  --border-mid: rgba(17, 24, 39, 0.20);
  --shadow-sm:  0 1px 4px  rgba(0, 0, 0, 0.06);
  --shadow:     0 10px 30px rgba(0, 0, 0, 0.10);
  --shadow-lg:  0 20px 50px rgba(0, 0, 0, 0.14);

  --focus: rgba(37, 99, 235, 0.25);
  --hover: rgba(17, 24, 39, 0.04);
  --active: rgba(17, 24, 39, 0.08);
}

/* --------------------------------------------------------------------------
   8. Aliases de compatibilidad
   Tokens legacy usados en modal_kanban.css, index.css, clientes.css
   y estilo_base.css. Se eliminan cuando se refactoricen esos archivos.
   -------------------------------------------------------------------------- */
:root {
  --mk-field-bg:       var(--mk-input-bg);
  --mk-field-border:   var(--mk-input-border);
  --mk-field-text:     var(--mk-input-text);
  --mk-card-bg:        var(--surface-1);
  --mk-card-border:    var(--border);
  --mk-modal-text:     var(--mk-title);
  --mk-modal-subtext:  var(--mk-subtext);
}

body.modo-oscuro, html.modo-oscuro {
  --mk-card-bg:     var(--surface-2);
  --mk-card-border: var(--border);
}