/* ============================================================
   LEGALMEET IA — SISTEMA DE DISEÑO v2.0
   Basado en Brand Guidelines LegalMeet 2025
   Paleta: sección abogados (azules + verde acento)
   Tipografía: Hanken Grotesk + Nanum Myeongjo
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=Nanum+Myeongjo:wght@400;700;800&display=swap');

/* ── TOKENS ───────────────────────────────────────────────── */
:root {
  --lm-blue:        #3771ff;
  --lm-green:       #41f29a;
  --lm-blue-dark:   #0f2d6f;
  --lm-blue-light:  #d5e0fc;
  --lm-green-dark:  #192e28;
  --lm-green-light: #c0fbe0;
  --lm-white:       #ffffff;
  --lm-gray-light:  #eeeeee;
  --lm-gray:        #999696;
  --lm-bg:          #f0f3fa;
  --lm-surface:     #ffffff;
  --lm-border:      #e4eaf5;
  --lm-border-hover:#c8d4f0;
  --lm-text:        #0f2d6f;
  --lm-text-muted:  #6b7a99;
  --lm-text-light:  #9eacc8;
  --lm-danger:      #e53935;
  --lm-danger-bg:   #fee2e2;
  --lm-warn:        #f59e0b;
  --lm-warn-bg:     #fef3c7;
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-xl:   20px;
  --r-full: 999px;
  --shadow-sm:   0 1px 4px rgba(15,45,111,0.06);
  --shadow-md:   0 4px 16px rgba(15,45,111,0.08);
  --shadow-lg:   0 8px 32px rgba(15,45,111,0.12);
  --shadow-blue: 0 0 0 1px #3771ff, 0 8px 24px rgba(55,113,255,0.12);
  --shadow-green:0 0 0 1px #41f29a, 0 8px 24px rgba(65,242,154,0.12);
  --font-primary: 'Hanken Grotesk', sans-serif;
  --font-accent:  'Nanum Myeongjo', serif;
  --t-fast: .15s ease;
  --t-base: .25s ease;
  --t-slow: .4s ease;
}

/* ── RESET ────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-primary);
  background: var(--lm-bg);
  color: var(--lm-text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* ── TIPOGRAFÍA ───────────────────────────────────────────── */
h1,h2,h3,h4 { font-family: var(--font-primary); font-weight: 800; color: var(--lm-blue-dark); line-height: 1.15; }
h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
.lm-serif      { font-family: var(--font-accent); font-style: italic; }
.lm-serif-bold { font-family: var(--font-accent); font-weight: 800; }
p { line-height: 1.6; color: var(--lm-text-muted); }
a { color: var(--lm-blue); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--lm-blue-dark); }

/* ── NAVBAR ───────────────────────────────────────────────── */
.lm-nav {
  background: var(--lm-blue-dark);
  background-image: radial-gradient(ellipse 60% 120% at 90% 50%, rgba(65,242,154,0.06) 0%, transparent 70%);
  height: 60px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 100;
}
.lm-nav-brand { display: flex; align-items: center; gap: 0; }
.lm-nav-logo  { height: 24px; width: auto; display: block; }
.lm-nav-ia    { font-family: var(--font-primary); font-weight: 800; font-size: 21px; color: var(--lm-green); margin-left: 12px; letter-spacing: -0.3px; }
.lm-nav-right { display: flex; align-items: center; gap: 14px; }
.lm-nav-pill  { background: rgba(65,242,154,0.12); color: var(--lm-green); border: 1px solid rgba(65,242,154,0.25); border-radius: var(--r-full); padding: 4px 12px; font-size: 11px; font-weight: 700; }
.lm-nav-user  { color: rgba(255,255,255,0.65); font-size: 13px; font-weight: 500; }
.lm-nav-btn   { color: rgba(255,255,255,0.45); font-size: 12px; font-weight: 600; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--r-sm); padding: 5px 12px; cursor: pointer; background: transparent; transition: all var(--t-fast); font-family: var(--font-primary); }
.lm-nav-btn:hover { color: #fff; border-color: rgba(255,255,255,0.3); }

/* ── LAYOUT ───────────────────────────────────────────────── */
.lm-layout { display: grid; grid-template-columns: 215px 1fr; min-height: calc(100vh - 60px); }
.lm-main   { padding: 28px 32px; overflow: auto; }

/* ── SIDEBAR ──────────────────────────────────────────────── */
.lm-sidebar {
  background: var(--lm-blue-dark);
  padding: 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
  overflow: hidden;
}
.lm-sidebar::before {
  content: '';
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(213,224,252,0.05) 0%, transparent 70%);
  bottom: -80px; left: -100px;
  pointer-events: none;
}
.lm-sidebar-section { font-size: 9px; font-weight: 700; color: rgba(213,224,252,0.4); letter-spacing: .14em; text-transform: uppercase; padding: 14px 10px 5px; }
.lm-sidebar-item    { display: flex; align-items: center; gap: 9px; padding: 9px 10px; border-radius: var(--r-sm); color: rgba(255,255,255,0.45); font-size: 13px; font-weight: 500; cursor: pointer; transition: all var(--t-fast); position: relative; z-index: 1; text-decoration: none; }
.lm-sidebar-item:hover  { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.85); }
.lm-sidebar-item.active { background: rgba(55,113,255,0.22); color: #fff; font-weight: 700; border: 1px solid rgba(55,113,255,0.28); }
.lm-sidebar-badge { margin-left: auto; background: var(--lm-green); color: var(--lm-green-dark); font-size: 9px; font-weight: 800; padding: 2px 7px; border-radius: var(--r-full); }
.lm-sidebar-bottom { margin-top: auto; padding-top: 14px; border-top: 1px solid rgba(255,255,255,0.07); position: relative; z-index: 1; }
.lm-gime-btn   { display: flex; align-items: center; gap: 10px; padding: 12px 10px; border-radius: var(--r-md); background: rgba(65,242,154,0.08); border: 1px solid rgba(65,242,154,0.18); cursor: pointer; transition: all var(--t-base); text-decoration: none; }
.lm-gime-btn:hover { background: rgba(65,242,154,0.14); border-color: rgba(65,242,154,0.3); }
.lm-gime-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--lm-green); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 15px; }
.lm-gime-label  { color: var(--lm-green); font-weight: 800; font-size: 13px; }
.lm-gime-sub    { color: rgba(255,255,255,0.3); font-size: 10px; margin-top: 1px; }

/* ── CARDS ────────────────────────────────────────────────── */
.lm-card { background: var(--lm-surface); border-radius: var(--r-lg); border: 1px solid var(--lm-border); padding: 20px 22px; position: relative; overflow: hidden; transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base); }
.lm-card:hover               { border-color: var(--lm-blue); transform: translateY(-2px); box-shadow: var(--shadow-blue); }
.lm-card.lm-card-green:hover { border-color: var(--lm-green); box-shadow: var(--shadow-green); }
.lm-card.lm-card-dark        { background: var(--lm-blue-dark); border-color: var(--lm-blue-dark); }
.lm-card.lm-card-dark:hover  { border-color: var(--lm-green); box-shadow: var(--shadow-green); }

.lm-card-glow { position: absolute; width: 220px; height: 220px; border-radius: 50%; pointer-events: none; transform: translate(-50%,-50%); opacity: 0; transition: opacity var(--t-base); z-index: 0; }
.lm-card-glow.blue  { background: radial-gradient(circle, rgba(213,224,252,0.9) 0%, transparent 65%); }
.lm-card-glow.green { background: radial-gradient(circle, rgba(192,251,224,0.9) 0%, transparent 65%); }
.lm-card-glow.dark  { background: radial-gradient(circle, rgba(65,242,154,0.16) 0%, transparent 65%); }
.lm-card-inner { position: relative; z-index: 1; }

.lm-card-watermark { position: absolute; font-family: var(--font-accent); font-weight: 800; font-size: 56px; color: var(--lm-blue-dark); opacity: 0.04; bottom: -8px; right: -8px; line-height: 1; pointer-events: none; white-space: nowrap; user-select: none; transition: opacity var(--t-base), font-size var(--t-base); z-index: 0; }
.lm-card:hover .lm-card-watermark { opacity: 0.07; font-size: 60px; }

/* Globa GIME */
.lm-bubble-card { background: var(--lm-blue-dark); border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 6px; padding: 24px; position: relative; overflow: hidden; cursor: pointer; transition: transform var(--t-base), box-shadow var(--t-base); }
.lm-bubble-card::after { content: ''; position: absolute; bottom: -16px; left: 24px; width: 0; height: 0; border-left: 16px solid var(--lm-blue-dark); border-top: 16px solid transparent; }
.lm-bubble-card:hover  { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--lm-green), 0 12px 40px rgba(65,242,154,0.15); }

/* Borde trazado */
.lm-traced-card { background: var(--lm-surface); border-radius: var(--r-lg); padding: 22px; position: relative; overflow: hidden; cursor: pointer; transition: transform var(--t-base); }
.lm-traced-card:hover { transform: translateY(-2px); }
.lm-traced-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lm-traced-svg rect { fill: none; stroke: var(--lm-blue); stroke-width: 1.5; stroke-dasharray: 1000; stroke-dashoffset: 1000; transition: stroke-dashoffset .6s ease; }
.lm-traced-card:hover .lm-traced-svg rect { stroke-dashoffset: 0; }

/* ── STAT CARDS ───────────────────────────────────────────── */
.lm-stat { background: var(--lm-surface); border-radius: var(--r-lg); border: 1px solid var(--lm-border); padding: 18px 20px; position: relative; overflow: hidden; }
.lm-stat::after { content: ''; position: absolute; width: 110px; height: 110px; border-radius: 50%; right: -30px; bottom: -30px; pointer-events: none; }
.lm-stat.blue::after  { background: radial-gradient(circle, rgba(213,224,252,0.6) 0%, transparent 70%); }
.lm-stat.green::after { background: radial-gradient(circle, rgba(192,251,224,0.6) 0%, transparent 70%); }
.lm-stat.warn::after  { background: radial-gradient(circle, rgba(254,226,226,0.7) 0%, transparent 70%); }
.lm-stat-num   { font-size: 30px; font-weight: 800; color: var(--lm-blue-dark); line-height: 1; }
.lm-stat-label { font-size: 10px; font-weight: 700; color: var(--lm-text-light); margin-top: 5px; text-transform: uppercase; letter-spacing: .06em; }

/* ── BADGES ───────────────────────────────────────────────── */
.lm-badge        { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: var(--r-full); }
.lm-badge.blue   { background: var(--lm-blue-light); color: var(--lm-blue-dark); }
.lm-badge.green  { background: var(--lm-green-light); color: var(--lm-green-dark); }
.lm-badge.warn   { background: var(--lm-warn-bg); color: #92400e; }
.lm-badge.danger { background: var(--lm-danger-bg); color: var(--lm-danger); }
.lm-badge.dark   { background: var(--lm-blue-dark); color: var(--lm-blue-light); }

/* ── BOTONES ──────────────────────────────────────────────── */
.lm-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-weight: 700; font-size: 13px; padding: 10px 22px; border-radius: var(--r-sm); border: none; cursor: pointer; transition: all var(--t-base); text-decoration: none; }
.lm-btn-primary  { background: var(--lm-blue); color: #fff; }
.lm-btn-primary:hover  { background: var(--lm-blue-dark); color: #fff; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.lm-btn-green    { background: var(--lm-green); color: var(--lm-green-dark); }
.lm-btn-green:hover    { background: #2de082; transform: translateY(-1px); }
.lm-btn-outline  { background: transparent; color: var(--lm-blue); border: 1.5px solid var(--lm-blue); }
.lm-btn-outline:hover  { background: var(--lm-blue-light); }
.lm-btn-ghost    { background: transparent; color: var(--lm-text-muted); border: 1px solid var(--lm-border); }
.lm-btn-ghost:hover    { border-color: var(--lm-blue); color: var(--lm-blue); }
.lm-btn-danger   { background: var(--lm-danger-bg); color: var(--lm-danger); border: 1px solid rgba(229,57,53,0.2); }
.lm-btn-danger:hover   { background: var(--lm-danger); color: #fff; }
.lm-btn-sm  { font-size: 11px; padding: 6px 14px; }
.lm-btn-lg  { font-size: 15px; padding: 13px 28px; border-radius: var(--r-md); }
.lm-btn-pill{ border-radius: var(--r-full); }

/* ── INPUTS ───────────────────────────────────────────────── */
.lm-input { width: 100%; font-family: var(--font-primary); font-size: 14px; color: var(--lm-text); background: var(--lm-bg); border: 1.5px solid var(--lm-border); border-radius: var(--r-sm); padding: 10px 14px; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); outline: none; }
.lm-input:focus { border-color: var(--lm-blue); background: #fff; box-shadow: 0 0 0 3px rgba(55,113,255,0.1); }
.lm-input::placeholder { color: var(--lm-text-light); }
.lm-label  { display: block; font-size: 12px; font-weight: 700; color: var(--lm-text); margin-bottom: 6px; }
.lm-field  { margin-bottom: 16px; }
.lm-select { width: 100%; font-family: var(--font-primary); font-size: 14px; color: var(--lm-text); background: var(--lm-bg); border: 1.5px solid var(--lm-border); border-radius: var(--r-sm); padding: 10px 14px; cursor: pointer; outline: none; transition: border-color var(--t-fast); appearance: none; }
.lm-select:focus { border-color: var(--lm-blue); }

/* ── ALERTS ───────────────────────────────────────────────── */
.lm-alert         { padding: 12px 16px; border-radius: var(--r-sm); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.lm-alert.info    { background: var(--lm-blue-light); color: var(--lm-blue-dark); }
.lm-alert.success { background: var(--lm-green-light); color: var(--lm-green-dark); }
.lm-alert.warning { background: var(--lm-warn-bg); color: #92400e; }
.lm-alert.danger  { background: var(--lm-danger-bg); color: var(--lm-danger); }

/* ── ONBOARDING ───────────────────────────────────────────── */
.lm-ob-bar-bg   { background: var(--lm-border); border-radius: var(--r-full); height: 5px; margin: 10px 0 14px; }
.lm-ob-bar-fill { background: linear-gradient(90deg, var(--lm-blue), var(--lm-green)); height: 5px; border-radius: var(--r-full); transition: width .5s ease; }
.lm-ob-step         { display: inline-block; padding: 5px 12px; border-radius: var(--r-full); font-size: 11px; font-weight: 700; }
.lm-ob-step.done    { background: var(--lm-green-light); color: var(--lm-green-dark); }
.lm-ob-step.pending { background: #f0f3fa; color: var(--lm-text-muted); border: 1px dashed var(--lm-border); }

/* ── TABLAS ───────────────────────────────────────────────── */
.lm-table    { width: 100%; border-collapse: collapse; font-size: 13px; }
.lm-table th { text-align: left; padding: 10px 14px; font-size: 10px; font-weight: 700; color: var(--lm-text-muted); text-transform: uppercase; letter-spacing: .08em; border-bottom: 1.5px solid var(--lm-border); }
.lm-table td { padding: 12px 14px; border-bottom: 1px solid var(--lm-border); color: var(--lm-text); vertical-align: middle; }
.lm-table tr:last-child td { border-bottom: none; }
.lm-table tr:hover td { background: #f8faff; }

/* ── MODAL ────────────────────────────────────────────────── */
.lm-modal-overlay { position: fixed; inset: 0; background: rgba(15,45,111,0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; backdrop-filter: blur(2px); }
.lm-modal         { background: var(--lm-surface); border-radius: var(--r-xl); padding: 28px 32px; max-width: 500px; width: 90%; box-shadow: var(--shadow-lg); position: relative; }
.lm-modal-title   { font-size: 18px; font-weight: 800; color: var(--lm-blue-dark); margin-bottom: 6px; }
.lm-modal-sub     { font-size: 13px; color: var(--lm-text-muted); margin-bottom: 20px; }
.lm-modal-close   { position: absolute; top: 16px; right: 16px; background: var(--lm-bg); border: none; border-radius: 50%; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--lm-text-muted); font-size: 14px; transition: background var(--t-fast); }
.lm-modal-close:hover { background: var(--lm-border); }

/* ── UTILIDADES ───────────────────────────────────────────── */
.lm-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.lm-grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; }
.lm-grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.lm-flex         { display: flex; align-items: center; gap: 10px; }
.lm-flex-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.lm-mb-sm  { margin-bottom: 10px; }
.lm-mb-md  { margin-bottom: 18px; }
.lm-mb-lg  { margin-bottom: 28px; }
.lm-mt-auto{ margin-top: auto; }
.lm-text-center { text-align: center; }
.lm-text-muted  { color: var(--lm-text-muted); font-size: 13px; }
.lm-text-small  { font-size: 11px; color: var(--lm-text-light); }
.lm-divider { height: 1px; background: var(--lm-border); margin: 18px 0; }

/* ── ANIMACIONES ──────────────────────────────────────────── */
@keyframes lm-fade-in  { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes lm-slide-in { from { opacity:0; transform:translateX(-12px); } to { opacity:1; transform:translateX(0); } }
@keyframes lm-pulse-green { 0%,100% { box-shadow:0 0 0 0 rgba(65,242,154,0.3); } 50% { box-shadow:0 0 0 6px rgba(65,242,154,0); } }
.lm-fade-in  { animation: lm-fade-in .3s ease forwards; }
.lm-slide-in { animation: lm-slide-in .3s ease forwards; }
.lm-pulse    { animation: lm-pulse-green 2s infinite; }

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .lm-layout { grid-template-columns: 1fr; }
  .lm-sidebar { display: none; }
  .lm-main { padding: 16px; }
  .lm-grid-4 { grid-template-columns: 1fr 1fr; }
  .lm-grid-3 { grid-template-columns: 1fr 1fr; }
  .lm-grid-2 { grid-template-columns: 1fr; }
}