/* =============================================================
   tokens.css — Tema central SISAP. Paleta oficial UCR.
   Cargar PRIMERO (antes de sisap.css/sidebar.css/components.css).
   ============================================================= */
:root {
  /* Marca UCR */
  --ucr-azul:#005da4; --ucr-celeste:#00c0f3; --ucr-celeste-2:#8ed8f8;
  --ucr-verde:#6dc067; --ucr-amarillo:#ffe06a;

  /* Acentos fuertes (texto/realces accesibles) */
  --azul-titulo:#0a3d63; --celeste-fuerte:#0a87b8; --verde-fuerte:#3a9e4f;
  --naranja:#f99d1c; --ambar-texto:#d68800; --amarillo-ui:#f5c518; --rojo-alerta:#c0392b;

  /* Superficies y texto */
  --bg:#f4f7fa; --surface:#fff; --border:#e9eff4;
  --text:#1c2a38; --text-2:#3a4a59; --text-muted:#64768a; --text-faint:#9aa7b4;

  /* Tints */
  --tint-azul:#e6f1f8; --tint-celeste:#e1f6fd; --tint-verde:#e6f5ea;
  --tint-ambar:#fdf2dd; --tint-rojo:#fbeae8;

  /* Forma */
  --radius-card:16px; --shadow-card:0 1px 2px rgba(16,42,67,.04);

  /* Re-mapeo legacy --sisap-* sobre UCR (reskin sin tocar reglas) */
  --sisap-primary:        var(--ucr-azul);
  --sisap-primary-mid:    var(--celeste-fuerte);
  --sisap-accent:         var(--ucr-celeste);
  --sisap-highlight:      var(--amarillo-ui);
  --sisap-bg:             var(--bg);
  --sisap-surface:        var(--surface);
  --sisap-border:         var(--border);
  --sisap-border-strong:  #d9e2ea;
  --sisap-text:           var(--text);
  --sisap-text-muted:     var(--text-muted);
  --sisap-sidebar-bg:     var(--surface);
  --sisap-sidebar-fg:     var(--text-2);
  --sisap-sidebar-w:      268px;
  --sisap-radius:         var(--radius-card);
  --sisap-focus:          0 0 0 3px rgba(0,93,164,.30);
  --sisap-font: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Tokens-extras (derivados, propios de inscripciones — no del SISAP) */
:root{
  --zebra:#fafcfe;
  --alert-ok-text:#1f6b3a; --alert-ok-bd:#bfe3c8;
  --alert-err-bd:#f2c9c4;
  --admin-bd:#f0dca8; --admin-chip-bg:#f6e2b0;
}

/* ============================================================
   ui.css — Sistema de diseño Inscripciones INIE
   Capa 1: tokens (copiados 1:1 de SISAP tokens.css — arriba)
   Capa 2: base + layout (esta sección)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{ -webkit-text-size-adjust:100% }
body{ margin:0; background:var(--bg); color:var(--text); font-family:var(--sisap-font); font-size:16px; line-height:1.5; }
a{ color:var(--celeste-fuerte); text-decoration:none }
a:hover{ text-decoration:underline }
img{ max-width:100%; height:auto }
.ins-container{ width:100%; max-width:1100px; margin:0 auto; padding:24px 20px 48px; }
.ins-page-title{ font-size:1.5rem; font-weight:600; color:var(--azul-titulo); margin:0 0 4px; }
.ins-page-sub{ color:var(--text-muted); margin:0 0 24px }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:none; box-shadow:var(--sisap-focus); border-radius:6px; }

/* ===== Capa 3: componentes ===== */

/* Botones */
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font:inherit; font-weight:600; line-height:1; cursor:pointer;
  padding:10px 16px; border-radius:8px; border:1px solid transparent;
  text-decoration:none; transition:background .15s,border-color .15s;
}
.btn:hover{ text-decoration:none }
.btn--primary{ background:var(--ucr-azul); color:#fff }
.btn--primary:hover{ background:var(--azul-titulo) }
.btn--secondary{ background:#fff; color:var(--text-2); border-color:var(--sisap-border-strong) }
.btn--secondary:hover{ background:var(--tint-azul) }
.btn--sm{ padding:6px 12px; font-size:.875rem }

/* Tarjetas de acción (landing) */
.action-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin-top:8px }
.action-card{
  display:flex; flex-direction:column; gap:10px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-card); box-shadow:var(--shadow-card);
  padding:20px; color:var(--text); transition:border-color .15s, box-shadow .15s;
}
.action-card:hover{ text-decoration:none; border-color:var(--ucr-celeste-2); box-shadow:0 4px 14px rgba(16,42,67,.08) }
.action-card__chip{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center;
  background:var(--tint-azul); color:var(--ucr-azul); font-size:1.25rem;
}
.action-card h3{ margin:0; font-size:1.05rem; font-weight:600; color:var(--azul-titulo) }
.action-card p{ margin:0; color:var(--text-muted); font-size:.9rem }
.action-card__arrow{ margin-top:auto; color:var(--celeste-fuerte); font-weight:600 }
.action-card--admin{ background:var(--tint-ambar); border-color:var(--admin-bd) }
.action-card--admin .action-card__chip{ background:var(--admin-chip-bg); color:var(--ambar-texto) }

/* Tablas */
.ins-table-wrap{ overflow-x:auto; border:1px solid var(--border); border-radius:12px; background:var(--surface) }
.ins-table{ width:100%; border-collapse:collapse; font-size:.925rem }
.ins-table thead th{
  text-align:left; font-weight:600; color:var(--text-2);
  background:var(--tint-azul); padding:11px 14px; white-space:nowrap;
  border-bottom:1px solid var(--border);
}
.ins-table tbody td{ padding:11px 14px; border-bottom:1px solid var(--border); vertical-align:middle }
.ins-table tbody tr:nth-child(even){ background:var(--zebra) }
.ins-table tbody tr:hover{ background:var(--tint-celeste) }
.ins-table tbody tr:last-child td{ border-bottom:none }
.ins-table .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap }

/* Tabs / segmented control */
.tabs{ display:inline-flex; gap:4px; padding:4px; background:var(--tint-azul); border-radius:10px; margin-bottom:16px }
.tab{
  appearance:none; border:none; background:transparent; font:inherit; font-weight:600;
  color:var(--text-2); padding:8px 16px; border-radius:7px; cursor:pointer;
}
.tab.is-active{ background:var(--surface); color:var(--azul-titulo); box-shadow:var(--shadow-card) }
.tabpanel[hidden]{ display:none }

/* Formularios en secciones */
.form-section{
  background:var(--surface); border:1px solid var(--border); border-radius:14px;
  padding:20px; margin-bottom:20px;
}
.form-section__head{ font-size:1.05rem; font-weight:600; color:var(--azul-titulo); margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--border) }
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px }
.field > label{ font-weight:500; color:var(--text-2); font-size:.9rem }
.field input,.field select,.field textarea{
  font:inherit; color:var(--text); padding:10px 12px;
  border:1px solid var(--sisap-border-strong); border-radius:8px; background:#fff; width:100%;
}
.field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--ucr-azul); box-shadow:var(--sisap-focus) }
.field--rich .tox-tinymce{ border-radius:8px !important; border-color:var(--sisap-border-strong) !important }
.form-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:0 20px }

/* Badges / alerts / vacío */
.badge{ display:inline-block; padding:3px 10px; border-radius:999px; font-size:.78rem; font-weight:600 }
.badge--ok{ background:var(--tint-verde); color:var(--verde-fuerte) }
.badge--warn{ background:var(--tint-ambar); color:var(--ambar-texto) }
.badge--err{ background:var(--tint-rojo); color:var(--rojo-alerta) }
.alert{ padding:12px 16px; border-radius:10px; margin:0 0 16px; border:1px solid }
.alert--ok{ background:var(--tint-verde); border-color:var(--alert-ok-bd); color:var(--alert-ok-text) }
.alert--warn{ background:var(--tint-ambar); border-color:#f0dca8; color:var(--ambar-texto) }
.alert--err{ background:var(--tint-rojo); border-color:var(--alert-err-bd); color:var(--rojo-alerta) }
.empty-state{ text-align:center; color:var(--text-muted); padding:40px 20px }

/* Sub-navegación con contadores (detalle de evento admin) */
.subnav{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 }
.subnav__chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  background:var(--surface); border:1px solid var(--border); border-radius:999px;
  color:var(--text-2); font-weight:600; font-size:.9rem;
}
.subnav__chip:hover{ text-decoration:none; border-color:var(--ucr-celeste-2) }
.subnav__count{ background:var(--tint-azul); color:var(--ucr-azul); border-radius:999px; padding:1px 9px; font-size:.8rem }

/* Ficha etiqueta/valor (datasheet) */
.datasheet{ background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden }
.datasheet__row{ display:grid; grid-template-columns:220px 1fr; border-bottom:1px solid var(--border) }
.datasheet__row:last-child{ border-bottom:none }
.datasheet__label{ background:var(--tint-azul); color:var(--text-2); font-weight:600; padding:12px 16px }
.datasheet__value{ padding:12px 16px }
@media(max-width:560px){ .datasheet__row{ grid-template-columns:1fr } }

/* ===== Capa 4: chrome (header/topbar/footer) ===== */
.ins-band{ height:5px; background:var(--ucr-amarillo) }
.ins-masthead{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 20px;
}
.ins-masthead__logos{ display:flex; align-items:center; gap:16px }
.ins-masthead img{ height:46px; width:auto }
.ins-topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--ucr-azul); color:#fff; padding:10px 20px; flex-wrap:wrap;
}
.ins-topbar a{ color:#fff; font-weight:600 }
.ins-topbar a:hover{ color:var(--ucr-amarillo); text-decoration:none }
.ins-topbar__home{ display:inline-flex; align-items:center; gap:8px }
.ins-topbar__right{ display:flex; align-items:center; gap:20px; flex-wrap:wrap }
.ins-topbar__user{ opacity:.95 }
.ins-footer{
  background:var(--ucr-azul); color:#dbe9f5; margin-top:48px;
  padding:24px 20px; text-align:center; font-size:.9rem;
}
.ins-footer a{ color:#fff; font-weight:600 }
.ins-footer p{ margin:4px 0 }

.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:20px }
.datasheet__value textarea{ width:100%; font:inherit; padding:8px 10px; border:1px solid var(--sisap-border-strong); border-radius:8px; background:var(--bg); color:var(--text); resize:vertical }
.datasheet__value input[type=file]{ font:inherit }
.form-narrow{ max-width:420px; margin:40px auto }

/* ===== Capa 5: responsive ===== */
@media(max-width:680px){
  .ins-masthead{ flex-wrap:wrap; justify-content:center; gap:10px }
  .ins-masthead img{ height:38px }
  .ins-topbar{ flex-direction:column; align-items:flex-start; gap:8px }
  .ins-container{ padding:16px 14px 36px }
  .tabs{ width:100%; overflow-x:auto }
  .datasheet__row{ grid-template-columns:1fr }
}