/* ============================================================================
   GRUPO · DESIGN SYSTEM v7 · base/components.css
   Botones, cards, login-card (spec auth.innovacionsantiago.cl), inputs.
   Geometria recta: sin radius en superficies, sin sombras (salvo modal/login).
   ============================================================================ */

/* ================================ BOTONES ================================= */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

/* El fantasma NO lleva borde. Con borde era indistinguible del secundario
   sobre papel: mismo trazo, y su fondo transparente contra papel blanco no se
   nota. Medido en v8 antes del arreglo: secundario rgb(255,255,255) y fantasma
   transparente, los dos con borde rgb(20,24,28). La escalera se lee por el
   peso del recuadro, no por el fondo: tinta → papel con borde → sin borde. */
.btn--ghost {
  background: none;
  color: var(--ink);
  border-color: transparent;
}
.btn--ghost:hover { background: var(--paper-raised); border-color: var(--line); color: var(--ink); }

/* Deshabilitado. v7 no traía ninguna regla, así que un botón apagado se veía
   idéntico a uno vivo: medido opacity=1. Va después de las variantes para
   ganarles a todas. */
.btn:disabled, .btn[disabled], .btn[aria-disabled="true"] {
  opacity: .42;
  cursor: not-allowed;
}

.btn--sm { padding: 8px 14px; font-size: 13px; }

/* ================================= CARDS ================================== */

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
  padding: var(--pad-x);
}
@media (max-width: 960px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .cards { grid-template-columns: 1fr; } }

/* Card base: borde 1px. Sin barra lateral: la franja pintada esta
   prohibida por canon desde el 6 de agosto de 2026. Vivio en este
   archivo hasta v7 y por eso llegaba a la pantalla en todos los
   sitios que consumen el kit. */
.card {
  --card-color: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 210px;
  padding: 22px 22px 18px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color var(--t-base), transform var(--t-base);
}
.card:hover { border-color: var(--card-color); transform: translateY(-1px); }

.card__icon {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--card-color) 28%, var(--line));
  background: color-mix(in srgb, var(--card-color) 8%, var(--paper));
}
.card__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--card-color);
}
.card h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.card p { margin: 0; color: var(--ink-muted); font-size: 13.5px; line-height: 1.5; }

/* Card-link mono (patron CDS): "Visitar X ->" */
.card__link {
  align-self: flex-start;
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.card__link:hover { color: var(--accent); }

/* Feature card destacada: border-top 4px de color + masthead double rule */
.feature-card {
  --card-color: var(--accent);
  border: 1px solid var(--line);
  border-top: 4px solid var(--card-color);
  background: var(--paper-raised);
  padding: 24px 32px 28px;
}
.feature-card__masthead {
  border-bottom: 1px double var(--ink);
  padding-bottom: 8px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: .14em;
}

/* Stat card (voz cochid: cifras mono pesadas) */
.stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 20px;
  background: var(--paper-raised);
  border: 1px solid var(--line);
}
.stat__value {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.stat__label {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
}

/* ================================ INPUTS ================================== */

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.input {
  width: 100%;
  padding: 10px 14px;
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-ctl);
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* =============================== LOGIN CARD ===============================
   Segun spec del flow Authentik (auth.innovacionsantiago.cl, custom.css v1.8):
   card 420px centrada, borde 1px, sombra profunda, sin radius en el card;
   orden: logo -> h1 -> boton SSO -> form -> links. */

.login-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-modal);
  padding: 32px 28px 24px;
}
.login-card__logo { display: block; max-width: 320px; margin: 0 auto 20px; }
.login-card__title {
  margin: 0 0 20px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.login-card__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  background: var(--ink);
  border: 1px solid var(--ink);
  border-radius: var(--radius-ctl);
  cursor: pointer;
  transition: opacity var(--t-fast);
}
.login-card__btn:hover { opacity: .92; }
/* Boton SSO externo (Google): pill blanca segun guideline */
.login-card__sso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 44px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 500;
  color: #3c4043;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: var(--radius-pill);
  text-decoration: none;
  cursor: pointer;
}
.login-card__sso img, .login-card__sso svg { width: 18px; height: 18px; }
.login-card__meta {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-muted);
  text-align: center;
}
.login-card__meta a { color: var(--accent); text-decoration: none; }
.login-card__meta a:hover { text-decoration: underline; }

/* ================================ TABLAS ================================== */

.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th {
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ink-muted);
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line-strong);
}
.table td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
.table--num td.num, .table td.num {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  text-align: right;
}

/* ================================= BADGES ================================= */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono-label);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--accent);
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
}
.badge--warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, var(--paper)); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.badge--err  { color: var(--err);  background: color-mix(in srgb, var(--err) 10%, var(--paper));  border-color: color-mix(in srgb, var(--err) 30%, transparent); }
.badge--ok   { color: var(--ok);   background: color-mix(in srgb, var(--ok) 10%, var(--paper));   border-color: color-mix(in srgb, var(--ok) 30%, transparent); }

/* ============================================================================
   CONTROLES · v8
   ----------------------------------------------------------------------------
   Los ocho controles que el kit no tenia y que cada sitio venia inventando por
   su cuenta. Los valores no son nuevos: son los de las vitrinas que Martin
   eligio el 9 de agosto de 2026, copiados tal cual.

     boton      v1, con el secundario en papel (no transparente)
     enlace     v1
     campo      v1
     area       v2, con barra de herramientas arriba
     desplegable v1
     casilla    v1 SIN radio
     radio      v1
     interruptor v1
     segmentado los cuatro (relleno, tinta, pestanas, pildora)
     buscador   los tres (caja, linea, pildora) mas el disparador de paleta

   Todo hereda de los tokens: ni un color literal salvo el blanco del boton
   destructivo, que tiene que leerse sobre rojo en los dos temas.
   ============================================================================ */

/* --- Boton secundario ------------------------------------------------------
   .btn--ghost es transparente y desaparece sobre fondo de papel elevado.
   El secundario lleva papel propio para que se lea como boton y no como texto.
   Papel, no #fff: en tema oscuro el blanco literal seria un agujero. */
.btn--secundario {
  background: var(--paper);
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn--secundario:hover { border-color: var(--ink); }

/* --- Enlace ---------------------------------------------------------------- */
.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
.link:hover { text-decoration-thickness: 2px; }

/* --- Area de texto · v2 ----------------------------------------------------
   La barra va PEGADA arriba: comparten borde, asi que la barra no lleva el de
   abajo y el area no redondea sus esquinas superiores. */
.textarea-bar {
  display: flex; gap: 12px; align-items: center;
  padding: 6px 10px;
  border: 1px solid var(--line); border-bottom: 0;
  border-radius: var(--radius-ctl) var(--radius-ctl) 0 0;
  background: var(--paper);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted);
}
.textarea {
  display: block; width: 100%; min-height: 78px;
  padding: 9px 10px;
  font-family: var(--font-sans); font-size: 13.5px; line-height: 1.5;
  color: var(--ink); background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: var(--radius-ctl);
  resize: vertical;
}
.textarea::placeholder { color: var(--ink-soft); }
.textarea-bar + .textarea { border-radius: 0 0 var(--radius-ctl) var(--radius-ctl); }
.textarea-count {
  display: block; text-align: right; margin-top: 5px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: var(--ink-soft);
}

/* --- Desplegable · v1 ------------------------------------------------------ */
.selectw { position: relative; display: inline-flex; align-items: center; width: 100%; max-width: 230px; }
.select {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 38px; padding: 0 34px 0 10px;
  font-family: var(--font-sans); font-size: 13.5px; color: var(--ink);
  background: var(--paper-raised);
  border: 1px solid var(--line); border-radius: var(--radius-ctl);
  cursor: pointer;
}
.select__caret {
  position: absolute; right: 11px;
  display: inline-flex; align-items: center;
  color: var(--ink-muted); pointer-events: none;
}
/* Variante aceptada: solo linea inferior, para formularios densos. */
.select--linea .select { padding-left: 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; border-radius: 0; }

/* --- Casilla · v1 sin radio ------------------------------------------------
   Esquina viva a proposito: la casilla es lo unico del kit sin radio, y esa es
   justamente la senal de que se marca y no se pulsa. */
.check { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.check:has(:disabled) { color: var(--ink-soft); cursor: not-allowed; }
.check__box {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; width: 16px; height: 16px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 0;
  background: var(--paper-raised); cursor: inherit;
}
.check__box::after {
  content: ""; position: absolute; left: 4.5px; top: 1px;
  width: 4px; height: 8px;
  border: solid transparent; border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}
.check__box:checked { background: var(--ink); border-color: var(--ink); }
.check__box:checked::after { border-color: var(--paper); }
.check__box:disabled { opacity: .4; }

/* --- Radio · v1 ------------------------------------------------------------ */
.radio { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; cursor: pointer; }
.radio:has(:disabled) { color: var(--ink-soft); cursor: not-allowed; }
.radio__dot {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; width: 16px; height: 16px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper-raised); cursor: inherit;
}
.radio__dot::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 8px; height: 8px; border-radius: 999px;
  background: transparent; transform: translate(-50%, -50%);
}
.radio__dot:checked { border-color: var(--ink); }
.radio__dot:checked::after { background: var(--ink); }
.radio__dot:disabled { opacity: .4; }

/* Variante tarjeta. auto-fit + stretch para que TODAS queden del mismo ancho y
   del mismo alto: fue la condicion con que se acepto la variante. */
.radios { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; align-items: stretch; }
.radio--card {
  display: flex; align-items: flex-start; gap: 10px;
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--paper-raised); font-size: 13px;
}
.radio--card:has(:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio--card:has(:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.radio--card .radio__dot:focus-visible { outline: 0; }
.radio__txt { display: block; font-weight: 600; }
.radio__txt small { display: block; margin-top: 2px; font-weight: 400; font-size: 11.5px; line-height: 1.4; color: var(--ink-muted); }

/* --- Interruptor · v1 ------------------------------------------------------
   Es el unico control con forma de pildora, y por eso se distingue de la
   casilla a un metro: el interruptor actua solo, la casilla espera al Guardar. */
.switch { display: inline-flex; align-items: center; gap: 9px; min-height: 24px; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.switch:has(:disabled) { color: var(--ink-soft); cursor: not-allowed; }
.switch__track {
  appearance: none; -webkit-appearance: none;
  position: relative; flex: none; width: 38px; height: 22px; margin: 0;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper-raised); cursor: inherit;
  transition: background .15s, border-color .15s;
}
.switch__track::before {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 999px;
  background: var(--line-strong);
  transition: transform .15s, background .15s;
}
.switch__track:checked { background: var(--ink); border-color: var(--ink); }
.switch__track:checked::before { transform: translateX(16px); background: var(--paper); }
.switch__track:disabled { opacity: .4; }
@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__track::before { transition: none; }
}

/* --- Segmentado · las cuatro variantes ------------------------------------- */
.seg { display: inline-flex; max-width: 100%; border: 1px solid var(--line); border-radius: var(--radius-ctl); }
.seg__opt {
  height: 34px; padding: 0 15px;
  border: 0; border-radius: 0;
  background: var(--paper); color: var(--ink-muted);
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600; line-height: 1;
  white-space: nowrap; cursor: pointer;
}
.seg__opt + .seg__opt { border-left: 1px solid var(--line); }
.seg__opt[aria-selected="true"] { background: var(--accent); color: var(--paper); }
.seg__opt:disabled { opacity: .42; cursor: not-allowed; }
.seg__opt:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.seg--ink .seg__opt[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.seg--tabs { gap: 4px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.seg--tabs .seg__opt { padding: 0 10px; background: transparent; border-bottom: 2px solid transparent; }
.seg--tabs .seg__opt + .seg__opt { border-left: 0; }
.seg--tabs .seg__opt[aria-selected="true"] { background: transparent; color: var(--ink); border-bottom-color: var(--accent); }
.seg--epi .seg__opt { font-family: var(--font-epi, var(--font-sans)); font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.seg--pill { padding: 3px; border-radius: 999px; background: var(--paper); }
.seg--pill .seg__opt { height: 28px; border-radius: 999px; background: transparent; }
.seg--pill .seg__opt + .seg__opt { border-left: 0; }
.seg--pill .seg__opt[aria-selected="true"] { background: var(--ink); color: var(--paper); }

/* --- Buscador · las tres variantes + el disparador -------------------------
   Caja: buscar es la accion principal de la pagina.
   Linea: buscar acompana a otra cosa y no debe competir con ella.
   Pildora: barras y cabeceras, donde ya hay bordes suficientes.
   Disparador: interfaces tecnicas, donde se llega por teclado y no con el raton. */
.search { position: relative; display: flex; align-items: center; width: 100%; max-width: 250px; }
.search__input {
  width: 100%; height: 38px; padding: 0 12px 0 34px;
  border: 1px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--paper-raised); color: var(--ink);
  font-family: var(--font-sans); font-size: 13.5px;
}
.search__input::placeholder { color: var(--ink-soft); }
.search__input:disabled { background: var(--paper); color: var(--ink-soft); cursor: not-allowed; }
.search__input:focus-visible { position: relative; z-index: 1; }
.search__icon { position: absolute; left: 11px; z-index: 2; display: inline-flex; align-items: center; color: var(--ink-soft); pointer-events: none; }
.search__go {
  flex: none; height: 38px; margin-left: -1px; padding: 0 15px;
  border: 1px solid var(--ink); border-radius: var(--radius-ctl);
  background: var(--ink); color: var(--paper);
  font-family: var(--font-sans); font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.search--line .search__input { padding-left: 26px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
.search--line .search__icon { left: 2px; }
.search--pill .search__input { padding-left: 38px; border-radius: 999px; border-color: var(--line-strong); }
.search--pill .search__icon { left: 15px; }

.search-trigger {
  display: inline-flex; align-items: center; gap: 10px;
  width: 100%; max-width: 250px; height: 38px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--radius-ctl);
  background: var(--paper-raised); color: var(--ink-muted);
  font-family: var(--font-sans); font-size: 13px; cursor: pointer;
}
.search-trigger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.search-trigger__kbd {
  margin-left: auto; padding: 2px 5px;
  border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--ink-soft);
}