/* Sistema de diseño "Modernist" retuneado al skin web de BLC Global (CTI-3).
   Tokens tomados de `Panel de Gestion - BLC Web.dc.html` (Claude Design):
   Poppins, rojo de marca #f01400, superficies claras y esquinas redondeadas.
   La tipografía se auto-hospeda en fonts.css — la CSP del canal es font-src 'self'. */
:root {
  --color-bg: #f6f6f7;
  --color-surface: #ffffff;
  --color-text: #1c1c1e;
  --color-divider: #e3e3e6;

  --color-accent: #f01400;
  --color-accent-100: #ffecea; --color-accent-200: #ffd2cc; --color-accent-300: #ffa79c;
  --color-accent-400: #ff6a56; --color-accent-500: #f01400; --color-accent-600: #cc1100;
  --color-accent-700: #a30d00; --color-accent-800: #7a0a00; --color-accent-900: #520600;

  --color-accent-2: #f01400; --color-accent-2-500: #f01400;
  --color-accent-2-100: #ffecea; --color-accent-2-200: #ffd2cc; --color-accent-2-300: #ffa79c;
  --color-accent-2-400: #ff6a56; --color-accent-2-600: #cc1100; --color-accent-2-700: #a30d00;
  --color-accent-2-800: #7a0a00;

  --color-neutral-100: #f6f6f7; --color-neutral-200: #ececee; --color-neutral-300: #dcdce0;
  --color-neutral-400: #b9b9bf; --color-neutral-500: #8d8d95; --color-neutral-600: #63636b;
  --color-neutral-700: #46464c; --color-neutral-800: #2c2c30; --color-neutral-900: #1c1c1e;

  --font-heading: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-heading-weight: 700;
  --font-body: 'Poppins', system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,20,25,.06);
  --shadow-md: 0 4px 14px rgba(20,20,25,.08);
  --shadow-lg: 0 12px 34px rgba(20,20,25,.14);
}

*, *::before, *::after { box-sizing: border-box; }
/* El atributo hidden debe ganar siempre, incluso sobre display:grid/flex (diálogos, paneles de tabs). */
[hidden] { display: none !important; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 var(--space-2); }
h1 { font-size: 38px; } h2 { font-size: 30px; } h3 { font-size: 23px; } h4 { font-size: 19px; } h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent); }
img { display: block; max-width: 100%; }
.text-muted { color: var(--color-neutral-600); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 25%, transparent); }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--color-neutral-400); border-radius: var(--radius-pill); }
::-webkit-scrollbar-track { background: transparent; }

.hr { height: 1px; border: 0; margin: var(--space-4) 0; background: var(--color-divider); }

/* Botones — píldora, como el skin web de blcglobal.net */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: 500; font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent; padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill); text-align: center; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.btn svg { display: block; flex: none; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: #fff; }
.btn-primary:hover { background: var(--color-accent-600); color: #fff; }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); background: var(--color-surface); }
.btn-secondary:hover { background: var(--color-neutral-100); border-color: var(--color-neutral-300); }
.btn-secondary:active { background: var(--color-neutral-200); }
.btn-ghost { color: var(--color-accent); padding-inline: var(--space-2); }
.btn-ghost:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.btn-icon { width: 36px; height: 36px; padding: 0; border-radius: var(--radius-pill); }

/* Formularios */
.field > label { display: block; font-size: 12px; margin-bottom: 5px; color: var(--color-neutral-600); }
.input { width: 100%; min-height: 38px; padding: 7px 11px; font: inherit; font-size: 14px; color: var(--color-text);
  caret-color: var(--color-accent); background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: var(--radius-md); }
.input:hover { border-color: var(--color-neutral-400); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
/* El navegador le pone al control un margen asimétrico (3px arriba, 0 abajo) que
   lo empuja por debajo de su texto aunque el contenedor centre. La separación la
   da el `gap`, así que el margen propio sobra. */
.radio > input[type="radio"], .radio > input[type="checkbox"] { margin: 0; flex: none; }
.seg { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); border-radius: var(--radius-pill); background: var(--color-surface); }
.seg-opt { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; font-size: 13px; cursor: pointer; text-decoration: none; color: var(--color-neutral-700); border-radius: var(--radius-pill); }
.seg-opt:hover { background: var(--color-neutral-100); color: var(--color-text); }
.seg-opt.active { background: var(--color-accent); color: #fff; }
.seg-opt.active:hover { background: var(--color-accent-600); color: #fff; }

/* Tarjetas */
.card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-divider); }
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 17px; line-height: 1.2; }
.elev-sm { box-shadow: var(--shadow-sm); } .elev-md { box-shadow: var(--shadow-md); } .elev-lg { box-shadow: var(--shadow-lg); }

/* Tags — píldora */
/* Las píldoras no se parten: en columnas angostas 'En plazo' quedaba en dos líneas. */
.tag { display: inline-flex; align-items: center; white-space: nowrap; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; padding: 3px 10px; border-radius: var(--radius-pill); }
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-200); border: 1px solid var(--color-neutral-300); color: var(--color-neutral-700); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* Navegación */
.nav { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.nav-brand { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 18px; margin-right: auto; }
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent); }

/* Tablas */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-neutral-600); padding: var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table td { padding: 10px var(--space-2); border-bottom: 1px solid var(--color-divider); }
.table tbody tr:hover { background: var(--color-neutral-100); }

/* Diálogo */
.dialog-backdrop { position: fixed; inset: 0; display: grid; place-items: center; padding: var(--space-4); background: rgba(28,28,30,.5); z-index: 60; }
.dialog { width: min(520px, 100%); display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); box-shadow: var(--shadow-lg); }
.dialog-title { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; }
.dialog-body { font-size: 14px; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }