/* ==========================================================================
   EPM — Ejecución Pro Master
   Base CSS: variables, temas, tipografía, layout
   Prefijo: epm-  (sin conflictos con lp- de cursos)
   ========================================================================== */

/* ── Google Font ─────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ── Tema: wyckoff (default) ─────────────────────────────────────────────── */
:root,
[data-theme="wyckoff"] {
  --epm-primary:       #BB8683;
  --epm-primary-dark:  #9e6f6c;
  --epm-primary-light: #d4b0ae;
  --epm-primary-glow:  rgba(187,134,131,0.20);
  --epm-bg:            #1a1212;
  --epm-bg2:           #231818;
  --epm-bg3:           #2e1f1f;
  --epm-surface:       #2a1c1c;
  --epm-surface2:      #341f1f;
  --epm-border:        rgba(187,134,131,0.15);
  --epm-text:          #f0e8e8;
  --epm-text2:         #c8b8b8;
  --epm-text3:         #9a8a8a;
  --epm-success:       #6dbf8c;
  --epm-danger:        #e07070;
  --epm-warning:       #e8b86d;
  --epm-info:          #6da8e0;
}

/* ── Tema: dark-black ────────────────────────────────────────────────────── */
[data-theme="dark-black"] {
  --epm-primary:       #BB8683;
  --epm-primary-dark:  #9e6f6c;
  --epm-primary-light: #d4b0ae;
  --epm-primary-glow:  rgba(187,134,131,0.18);
  --epm-bg:            #0a0a0a;
  --epm-bg2:           #111111;
  --epm-bg3:           #1a1a1a;
  --epm-surface:       #151515;
  --epm-surface2:      #1e1e1e;
  --epm-border:        rgba(255,255,255,0.08);
  --epm-text:          #f5f5f5;
  --epm-text2:         #c0c0c0;
  --epm-text3:         #808080;
  --epm-success:       #5cb87a;
  --epm-danger:        #e06060;
  --epm-warning:       #e0b050;
  --epm-info:          #5090d0;
}

/* ── Tema: dark-gray ─────────────────────────────────────────────────────── */
[data-theme="dark-gray"] {
  --epm-primary:       #BB8683;
  --epm-primary-dark:  #9e6f6c;
  --epm-primary-light: #d4b0ae;
  --epm-primary-glow:  rgba(187,134,131,0.18);
  --epm-bg:            #18181b;
  --epm-bg2:           #1f1f23;
  --epm-bg3:           #27272c;
  --epm-surface:       #222226;
  --epm-surface2:      #2c2c32;
  --epm-border:        rgba(255,255,255,0.09);
  --epm-text:          #f0f0f2;
  --epm-text2:         #b8b8c0;
  --epm-text3:         #78788a;
  --epm-success:       #5cb87a;
  --epm-danger:        #e06060;
  --epm-warning:       #e0b050;
  --epm-info:          #5090d0;
}

/* ── Tema: midnight-blue ─────────────────────────────────────────────────── */
[data-theme="midnight-blue"] {
  --epm-primary:       #5e9bdb;
  --epm-primary-dark:  #4a80c0;
  --epm-primary-light: #88baec;
  --epm-primary-glow:  rgba(94,155,219,0.20);
  --epm-bg:            #0d1520;
  --epm-bg2:           #111c2b;
  --epm-bg3:           #172438;
  --epm-surface:       #141e30;
  --epm-surface2:      #1c2840;
  --epm-border:        rgba(94,155,219,0.15);
  --epm-text:          #e8f0f8;
  --epm-text2:         #9db8d8;
  --epm-text3:         #5a7898;
  --epm-success:       #5cb87a;
  --epm-danger:        #e06060;
  --epm-warning:       #e0b050;
  --epm-info:          #5090d0;
}

/* ── Tema: purple-neon ───────────────────────────────────────────────────── */
[data-theme="purple-neon"] {
  --epm-primary:       #a855f7;
  --epm-primary-dark:  #8b3de0;
  --epm-primary-light: #c084fc;
  --epm-primary-glow:  rgba(168,85,247,0.25);
  --epm-bg:            #0f0a1a;
  --epm-bg2:           #140d22;
  --epm-bg3:           #1c1230;
  --epm-surface:       #180f28;
  --epm-surface2:      #221535;
  --epm-border:        rgba(168,85,247,0.20);
  --epm-text:          #f0e8ff;
  --epm-text2:         #c0a8e8;
  --epm-text3:         #8060b0;
  --epm-success:       #5cb87a;
  --epm-danger:        #e06060;
  --epm-warning:       #e0b050;
  --epm-info:          #5090d0;
}

/* ── Tema: light-minimal ─────────────────────────────────────────────────── */
[data-theme="light-minimal"] {
  --epm-primary:       #BB8683;
  --epm-primary-dark:  #9e6f6c;
  --epm-primary-light: #d4b0ae;
  --epm-primary-glow:  rgba(187,134,131,0.15);
  --epm-bg:            #f8f5f5;
  --epm-bg2:           #ffffff;
  --epm-bg3:           #efe8e8;
  --epm-surface:       #ffffff;
  --epm-surface2:      #f5efef;
  --epm-border:        rgba(0,0,0,0.10);
  --epm-text:          #2a1e1e;
  --epm-text2:         #5a4848;
  --epm-text3:         #9a8888;
  --epm-success:       #2e9e5c;
  --epm-danger:        #cc4444;
  --epm-warning:       #cc8a20;
  --epm-info:          #2060a8;
}

/* ── Tema: matrix-green ──────────────────────────────────────────────────── */
[data-theme="matrix-green"] {
  --epm-primary:       #5EE790;
  --epm-primary-dark:  #3ec470;
  --epm-primary-light: #8ff5b2;
  --epm-primary-glow:  rgba(94,231,144,0.22);
  --epm-bg:            #020c05;
  --epm-bg2:           #051408;
  --epm-bg3:           #091c0e;
  --epm-surface:       #071210;
  --epm-surface2:      #0d1e14;
  --epm-border:        rgba(94,231,144,0.20);
  --epm-text:          #ddfce8;
  --epm-text2:         #88c898;
  --epm-text3:         #3e6848;
  --epm-success:       #86efac;
  --epm-danger:        #ff6060;
  --epm-warning:       #f0c040;
  --epm-info:          #40d0f0;
}

/* ── Tema: ocean (Azul Claro) ────────────────────────────────────────────── */
[data-theme="ocean"] {
  --epm-primary:       #2563eb;
  --epm-primary-dark:  #1d4ed8;
  --epm-primary-light: #60a5fa;
  --epm-primary-glow:  rgba(37,99,235,0.15);
  --epm-bg:            #f8faff;
  --epm-bg2:           #ffffff;
  --epm-bg3:           #eef2fd;
  --epm-surface:       #ffffff;
  --epm-surface2:      #f0f4ff;
  --epm-border:        rgba(37,99,235,0.14);
  --epm-text:          #1e2a4a;
  --epm-text2:         #3d5280;
  --epm-text3:         #7a90b8;
  --epm-success:       #16a34a;
  --epm-danger:        #dc2626;
  --epm-warning:       #d97706;
  --epm-info:          #0284c7;
}

/* ── Tema: slate-dark ────────────────────────────────────────────────────── */
[data-theme="slate-dark"] {
  --epm-primary:       #38bdf8;
  --epm-primary-dark:  #0284c7;
  --epm-primary-light: #7dd3fc;
  --epm-primary-glow:  rgba(56,189,248,0.18);
  --epm-bg:            #0f172a;
  --epm-bg2:           #1e293b;
  --epm-bg3:           #273448;
  --epm-surface:       #1e293b;
  --epm-surface2:      #293548;
  --epm-border:        rgba(56,189,248,0.14);
  --epm-text:          #e2eaf8;
  --epm-text2:         #94a3b8;
  --epm-text3:         #4a6080;
  --epm-success:       #4ade80;
  --epm-danger:        #f87171;
  --epm-warning:       #fbbf24;
  --epm-info:          #38bdf8;
}

/* ── Tema: amber ─────────────────────────────────────────────────────────── */
[data-theme="amber"] {
  --epm-primary:       #d97706;
  --epm-primary-dark:  #b45309;
  --epm-primary-light: #fbbf24;
  --epm-primary-glow:  rgba(217,119,6,0.22);
  --epm-bg:            #1a1200;
  --epm-bg2:           #221800;
  --epm-bg3:           #2c2000;
  --epm-surface:       #241a00;
  --epm-surface2:      #302500;
  --epm-border:        rgba(217,119,6,0.20);
  --epm-text:          #fff8e0;
  --epm-text2:         #c8a860;
  --epm-text3:         #806838;
  --epm-success:       #4ade80;
  --epm-danger:        #f87171;
  --epm-warning:       #fbbf24;
  --epm-info:          #38bdf8;
}

/* ── Tema: forest ────────────────────────────────────────────────────────── */
[data-theme="forest"] {
  --epm-primary:       #22c55e;
  --epm-primary-dark:  #16a34a;
  --epm-primary-light: #86efac;
  --epm-primary-glow:  rgba(34,197,94,0.20);
  --epm-bg:            #071810;
  --epm-bg2:           #0d2018;
  --epm-bg3:           #122818;
  --epm-surface:       #0f2015;
  --epm-surface2:      #162c1e;
  --epm-border:        rgba(34,197,94,0.16);
  --epm-text:          #e8faf0;
  --epm-text2:         #80b890;
  --epm-text3:         #407858;
  --epm-success:       #4ade80;
  --epm-danger:        #f87171;
  --epm-warning:       #fbbf24;
  --epm-info:          #38bdf8;
}

/* ── Tema: crimson ───────────────────────────────────────────────────────── */
[data-theme="crimson"] {
  --epm-primary:       #f43f5e;
  --epm-primary-dark:  #e11d48;
  --epm-primary-light: #fb7185;
  --epm-primary-glow:  rgba(244,63,94,0.22);
  --epm-bg:            #1a0408;
  --epm-bg2:           #220508;
  --epm-bg3:           #2c0a12;
  --epm-surface:       #200608;
  --epm-surface2:      #2c0c12;
  --epm-border:        rgba(244,63,94,0.16);
  --epm-text:          #fff0f3;
  --epm-text2:         #d09098;
  --epm-text3:         #885060;
  --epm-success:       #4ade80;
  --epm-danger:        #f43f5e;
  --epm-warning:       #fbbf24;
  --epm-info:          #38bdf8;
}

/* ── Tema: copper ────────────────────────────────────────────────────────── */
[data-theme="copper"] {
  --epm-primary:       #c2410c;
  --epm-primary-dark:  #9a3412;
  --epm-primary-light: #fb923c;
  --epm-primary-glow:  rgba(194,65,12,0.22);
  --epm-bg:            #180800;
  --epm-bg2:           #200e00;
  --epm-bg3:           #2c1600;
  --epm-surface:       #1e0c00;
  --epm-surface2:      #2a1600;
  --epm-border:        rgba(194,65,12,0.20);
  --epm-text:          #fff4ed;
  --epm-text2:         #c89070;
  --epm-text3:         #805038;
  --epm-success:       #4ade80;
  --epm-danger:        #f87171;
  --epm-warning:       #fbbf24;
  --epm-info:          #38bdf8;
}

/* ── Tema: ice (Blanco Azul) ─────────────────────────────────────────────── */
[data-theme="ice"] {
  --epm-primary:       #0284c7;
  --epm-primary-dark:  #0369a1;
  --epm-primary-light: #38bdf8;
  --epm-primary-glow:  rgba(2,132,199,0.13);
  --epm-bg:            #f0f8ff;
  --epm-bg2:           #ffffff;
  --epm-bg3:           #ddeffa;
  --epm-surface:       #ffffff;
  --epm-surface2:      #eef6fd;
  --epm-border:        rgba(2,132,199,0.14);
  --epm-text:          #0c2a40;
  --epm-text2:         #2a5070;
  --epm-text3:         #5888a0;
  --epm-success:       #16a34a;
  --epm-danger:        #dc2626;
  --epm-warning:       #d97706;
  --epm-info:          #0284c7;
}

/* ── Reset base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 16px; scroll-behavior: smooth; overflow-x: hidden; }

body.epm-body {
  font-family: 'Inter', sans-serif;
  background: var(--epm-bg);
  color: var(--epm-text);
  min-height: 100vh;
  line-height: 1.6;
  transition: background 0.3s, color 0.3s;
  overflow-x: hidden;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
body.epm-body ::-webkit-scrollbar { width: 6px; height: 6px; }
body.epm-body ::-webkit-scrollbar-track { background: var(--epm-bg2); }
body.epm-body ::-webkit-scrollbar-thumb { background: var(--epm-primary-dark); border-radius: 3px; }

/* ── Layout principal ────────────────────────────────────────────────────── */
.epm-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
}

.epm-main {
  grid-column: 2;
  padding: 2rem;
  overflow-x: hidden;
}

/* ── Tipografía ──────────────────────────────────────────────────────────── */
.epm-h1 { font-size: 1.75rem; font-weight: 700; color: var(--epm-text); }
.epm-h2 { font-size: 1.35rem; font-weight: 600; color: var(--epm-text); }
.epm-h3 { font-size: 1.1rem; font-weight: 600; color: var(--epm-text); }
.epm-label { font-size: .8rem; font-weight: 500; color: var(--epm-text3); text-transform: uppercase; letter-spacing: .06em; }
.epm-muted { color: var(--epm-text3); font-size: .875rem; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
.epm-card {
  background: var(--epm-surface);
  border: 1px solid var(--epm-border);
  border-radius: 14px;
  padding: 1.5rem;
  transition: box-shadow .2s, border-color .2s;
}
.epm-card:hover { border-color: var(--epm-primary-dark); box-shadow: 0 4px 24px var(--epm-primary-glow); }

.epm-card-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem;
}

/* ── Botones ─────────────────────────────────────────────────────────────── */
.epm-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1.1rem; border-radius: 8px;
  font-size: .875rem; font-weight: 500; font-family: inherit;
  border: none; cursor: pointer; text-decoration: none;
  transition: background .18s, transform .12s, box-shadow .18s;
  white-space: nowrap;
}
.epm-btn:active { transform: scale(.97); }
.epm-btn-primary {
  background: var(--epm-primary); color: #fff;
}
.epm-btn-primary:hover { background: var(--epm-primary-dark); box-shadow: 0 4px 16px var(--epm-primary-glow); }
.epm-btn-ghost {
  background: transparent; color: var(--epm-text2);
  border: 1px solid var(--epm-border);
}
.epm-btn-ghost:hover { background: var(--epm-surface2); color: var(--epm-text); }
.epm-btn-danger { background: var(--epm-danger); color: #fff; }
.epm-btn-danger:hover { opacity: .85; }
.epm-btn-sm { padding: .3rem .7rem; font-size: .8rem; }
.epm-btn-icon { padding: .4rem; border-radius: 8px; }

/* ── Formularios ─────────────────────────────────────────────────────────── */
.epm-input, .epm-select, .epm-textarea {
  width: 100%;
  background: var(--epm-bg3);
  border: 1px solid var(--epm-border);
  border-radius: 8px;
  color: var(--epm-text);
  font-size: .9rem; font-family: inherit;
  padding: .55rem .9rem;
  outline: none;
  transition: border-color .18s, box-shadow .18s;
}
.epm-input:focus, .epm-select:focus, .epm-textarea:focus {
  border-color: var(--epm-primary);
  box-shadow: 0 0 0 3px var(--epm-primary-glow);
}
.epm-textarea { resize: vertical; min-height: 80px; }
.epm-select { appearance: none; }

.epm-form-group { margin-bottom: 1rem; }
.epm-form-group label { display: block; margin-bottom: .35rem; font-size: .85rem; font-weight: 500; color: var(--epm-text2); }

.epm-color-input {
  width: 44px; height: 34px; padding: 2px;
  border-radius: 8px; cursor: pointer;
  border: 1px solid var(--epm-border);
  background: var(--epm-bg3);
}

/* ── Badges ──────────────────────────────────────────────────────────────── */
.epm-badge {
  display: inline-block; padding: .2rem .55rem;
  border-radius: 20px; font-size: .75rem; font-weight: 600;
}
.epm-badge-primary { background: var(--epm-primary-glow); color: var(--epm-primary-light); }
.epm-badge-success { background: rgba(109,191,140,.15); color: var(--epm-success); }
.epm-badge-danger  { background: rgba(224,112,112,.15); color: var(--epm-danger); }
.epm-badge-warning { background: rgba(232,184,109,.15); color: var(--epm-warning); }

/* ── Alertas ─────────────────────────────────────────────────────────────── */
.epm-alert {
  padding: .85rem 1.1rem; border-radius: 10px;
  border-left: 3px solid; margin-bottom: 1rem; font-size: .9rem;
}
.epm-alert-warning { background: rgba(232,184,109,.1); border-color: var(--epm-warning); color: var(--epm-warning); }
.epm-alert-danger  { background: rgba(224,112,112,.1); border-color: var(--epm-danger);  color: var(--epm-danger);  }
.epm-alert-success { background: rgba(109,191,140,.1); border-color: var(--epm-success); color: var(--epm-success); }
.epm-alert-info    { background: rgba(109,168,224,.1); border-color: var(--epm-info);    color: var(--epm-info);    }

/* ── Separadores ─────────────────────────────────────────────────────────── */
.epm-divider { border: none; border-top: 1px solid var(--epm-border); margin: 1.25rem 0; }

/* ── Grid utils ──────────────────────────────────────────────────────────── */
.epm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.epm-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.epm-flex   { display: flex; align-items: center; }
.epm-flex-between { display: flex; align-items: center; justify-content: space-between; }
.epm-gap-sm { gap: .5rem; }
.epm-gap    { gap: 1rem; }
.epm-gap-lg { gap: 1.5rem; }

/* ── Drag handle ─────────────────────────────────────────────────────────── */
.epm-drag-handle { cursor: grab; color: var(--epm-text3); padding: .2rem .3rem; }
.epm-drag-handle:active { cursor: grabbing; }
.sortable-ghost { opacity: .4; }

/* ── Color dot ───────────────────────────────────────────────────────────── */
.epm-color-dot {
  width: 12px; height: 12px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
  border: 2px solid rgba(255,255,255,.15);
}

/* ── Readonly overlay ────────────────────────────────────────────────────── */
.epm-readonly-overlay {
  pointer-events: none; opacity: .6;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .epm-layout { grid-template-columns: 1fr; }
  .epm-main { grid-column: 1; padding: 1rem; }
}
@media (max-width: 600px) {
  .epm-grid-2, .epm-grid-3 { grid-template-columns: 1fr; }
}