:root {
  /* ── Design tokens ── */
  /* ── Spacing ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;

  /* ── Border-radius ── */
  --r-sm:   6px;
  --r-md:   10px;
  --r-lg:   16px;
  --r-pill: 9999px;

  /* ── Color — texto ── */
  --ink:       #1a1a2e;
  --ink-soft:  #4a5568;
  --ink-muted: #94a3b8;

  /* ── Color — fondo y bordes ── */
  --bg:      #eff6ff;
  --bg-dark: #dbeafe;
  --white:   #ffffff;
  --line:    #bfdbfe;

  /* ── Color — acento ── */
  --accent:      #2563eb;
  --accent-dark: #1d4ed8;

  /* ── Color — estados ── */
  --success:    #16a34a;
  --success-bg: #dcfce7;
  --error:      #dc2626;
  --error-bg:   #fef2f2;
  --error-line: #fca5a5;
  --warning:    #d97706;
  --warning-bg: #fef3c7;

  /* ── Color — estados de flujo operativo ── */
  --color-revision: #7c3aed;

  /* ── Tipografía ── */
  --text-xs:   10px;   /* badges */
  --text-sm:   12px;   /* fechas, meta */
  --text-base: 14px;   /* inputs, body */
  --text-md:   15px;   /* botones */
  --text-lg:   18px;   /* subtítulos */
  --text-xl:   24px;   /* títulos de vista */
  --text-2xl:  30px;   /* h2 global */
  --text-3xl:  38px;   /* solo h2 del panel admin */
}

/* Accesibilidad: foco visible unificado */
*:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* Entrada del panel de modales (crearModal) */
@keyframes modalPanelIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Botón primario — sistema unificado ── */
.btn-primario {
    display: block;
    width: 100%;
    padding: var(--space-4) var(--space-6);
    background: var(--accent);
    color: var(--white);
    border: none;
    border-radius: var(--r-md);
    font-family: 'Poppins', sans-serif;
    font-size: var(--text-md);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.btn-primario:hover    { opacity: 0.88; }
.btn-primario:active   { transform: scale(0.99); }
.btn-primario:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.btn-primario--peligro  { background: var(--error);          }
.btn-primario--exito    { background: var(--success);        }
.btn-primario--revision { background: var(--color-revision); }

/* ── Botón secundario — outline neutral (cancelar / volver / descartar) ── */
.btn-secundario {
    display: inline-block;
    padding: var(--space-2) var(--space-5);
    background: var(--white);
    color: var(--ink-soft);
    border: 1.5px solid var(--line);
    border-radius: var(--r-md);
    font-family: 'Poppins', sans-serif;
    font-size: var(--text-base);
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.btn-secundario:hover    { border-color: var(--accent); color: var(--accent); }
.btn-secundario:active   { opacity: 0.85; }
.btn-secundario:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Botón acción — sólido oscuro (acciones secundarias importantes) ── */
.btn-accion {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    background: var(--ink);
    color: var(--white);
    border: none;
    border-radius: var(--r-md);
    font-family: 'Poppins', sans-serif;
    font-size: var(--text-base);
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.btn-accion:hover    { opacity: 0.85; }
.btn-accion:active   { transform: scale(0.99); }
.btn-accion:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* ── Botón peligro — outline mediano destructivo ── */
.btn-peligro {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    background: none;
    color: var(--error);
    border: 1.5px solid var(--error-line);
    border-radius: var(--r-md);
    font-family: 'Poppins', sans-serif;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.btn-peligro:hover    { background: var(--error-bg); border-color: var(--error); }
.btn-peligro:active   { opacity: 0.8; }
.btn-peligro:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Botón peligro chico — ✕ outline en filas y listas ── */
.btn-peligro-chico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    background: none;
    color: var(--error);
    border: 1px solid var(--error-line);
    border-radius: var(--r-sm);
    font-family: 'Poppins', sans-serif;
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.btn-peligro-chico:hover    { background: var(--error-bg); border-color: var(--error); }
.btn-peligro-chico:active   { opacity: 0.8; }
.btn-peligro-chico:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Link peligro — texto/ícono sin fondo ni borde ── */
.link-peligro {
    display: inline;
    background: none;
    border: none;
    padding: 0;
    color: var(--error);
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    line-height: 1;
    cursor: pointer;
    transition: opacity 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.link-peligro:hover  { opacity: 0.7; }
.link-peligro:active { opacity: 0.5; }

/* ── Sistema de tabs unificado ── */
.tabs-bar { display:flex; gap:2px; border-top-left-radius:var(--r-md); border-top-right-radius:var(--r-md); background:var(--accent); padding:0.4rem var(--space-4) 0; }
.tab { position:relative; display:flex; align-items:center; justify-content:center; border:none; background:transparent; font-family:'Poppins',sans-serif; border-top-left-radius:var(--r-md); border-top-right-radius:var(--r-md); padding:0; cursor:pointer; }
.tab .pre-name, .tab .pos-name { position:absolute; width:10px; height:10px; background:var(--accent); bottom:0; opacity:0; transition:opacity 0.1s ease-in-out; z-index:0; }
.tab .pre-name { right:-10px; border-bottom-left-radius:300px; box-shadow:-3px 3px 0 3px var(--paper); }
.tab .pos-name { left:-10px; border-bottom-right-radius:300px; box-shadow:3px 3px 0 3px var(--paper); }
.tab .tab-label { position:relative; z-index:1; display:flex; align-items:center; gap:5px; padding:0.45rem var(--space-4); border-top-left-radius:var(--r-md); border-top-right-radius:var(--r-md); font-size:var(--text-base); font-weight:500; color:rgba(255,255,255,0.72); transition:background-color 0.1s ease-in-out, color 0.1s ease-in-out; white-space:nowrap; }
.tab .tab-icon { display:none; flex-shrink:0; }
.tab:hover .tab-label { color:#fff; }
.tab.active .tab-label { background:var(--paper); font-weight:600; color:var(--ink); cursor:default; }
.tab.active .pre-name, .tab.active .pos-name { opacity:1; }
/* padding en los cuatro lados: sin el horizontal, el contenido queda pegado al borde azul */
.tabs-contenido { background:var(--paper); border-left:3px solid var(--accent); border-right:3px solid var(--accent); border-bottom:3px solid var(--accent); border-bottom-left-radius:var(--r-md); border-bottom-right-radius:var(--r-md); padding:var(--space-5); margin-bottom:28px; overflow:hidden; }
.tabs-bar.tabs-bar--filtro { background:transparent; border-radius:0; padding:0; border-bottom:1.5px solid var(--line); margin-bottom:var(--space-4); }
.tabs-bar--filtro .tab .pre-name, .tabs-bar--filtro .tab .pos-name { display:none; }
.tabs-bar--filtro .tab .tab-label { background:transparent; color:var(--ink-soft); padding:var(--space-2) var(--space-3); font-size:var(--text-sm); border-radius:0; border-bottom:2.5px solid transparent; margin-bottom:-1.5px; }
.tabs-bar--filtro .tab:hover .tab-label { color:var(--ink); }
.tabs-bar--filtro .tab.active .tab-label { background:transparent; color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }