@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Sora:wght@400;500;600&display=swap');

/* ─── Tokens globales ─── */
:root {
  /* Marca */
  --eko-purple:       #542ABA;
  --eko-navy:         #032D50;
  --eko-teal:         #0a7c5c;

  /* Superficies */
  --surface:          #ffffff;
  --border:           #e2ddf5;
  --radius:           10px;
  --radius-sm:        6px;

  /* Tipografía */
  --font-ui:          'Sora', sans-serif;
  --font-mono:        'IBM Plex Mono', monospace;

  /* Texto */
  --text:             #1a1630;
  --muted:            #6b6585;
}

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

body {
  font-family: var(--font-ui);
  color: var(--text);
  min-height: 100vh;
}

/* ─── Header ─── */
header { background: var(--eko-navy); padding: 1.25rem 2rem; display: flex; align-items: center; gap: 1rem; }
.brand { font-size: 14px; font-weight: 600; color: white; letter-spacing: 0.03em; }
.tool-label { margin-left: auto; font-size: 12px; color: #7ba8cc; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; }

/* ─── Layout ─── */
.layout { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 66px); }
.form-panel { padding: 2rem; overflow-y: auto; border-right: 1px solid var(--border); }

/* ─── Bloques de formulario ─── */
.section-block { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.section-title { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1.25rem; padding-bottom: 0.5rem; border-bottom: 2px solid var(--border); display: flex; align-items: center; gap: 0.5rem; }
.form-group { margin-bottom: 1.1rem; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

/* ─── Inputs ─── */
label { display: block; font-size: 12px; font-weight: 500; color: var(--eko-navy); margin-bottom: 0.35rem; }
label .required { margin-left: 2px; }
label .hint { font-weight: 400; color: var(--muted); font-size: 11px; margin-left: 4px; }
input, select, textarea { width: 100%; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 13px; color: var(--text); background: var(--surface); transition: border-color 0.15s, box-shadow 0.15s; outline: none; }

/* ─── Botones ─── */
.add-btn { background: none; border: 1px dashed var(--border); padding: 0.45rem 0.9rem; border-radius: var(--radius-sm); font-family: var(--font-ui); font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.15s; display: flex; align-items: center; gap: 6px; width: 100%; justify-content: center; }
.close-btn { background: none; border: none; cursor: pointer; color: #c0b8d8; padding: 4px; border-radius: 4px; font-size: 16px; line-height: 1; transition: color 0.15s; display: flex; align-items: center; }
.close-btn:hover { color: #e05252; }

/* ─── Nota informativa ─── */
.info-note { border-radius: var(--radius-sm); padding: 0.6rem 0.85rem; font-size: 11.5px; margin-bottom: 1rem; line-height: 1.5; }

/* ─── Toast ─── */
.toast { position: fixed; bottom: 2rem; right: 2rem; padding: 0.65rem 1rem; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 8px; opacity: 0; transform: translateY(8px); transition: all 0.2s; pointer-events: none; z-index: 100; }
.toast.show { opacity: 1; transform: translateY(0); }

/* ─── Responsive ─── */
@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
}