/* ==========================================================================
   EonLifeX Design System — Primitivas
   --------------------------------------------------------------------------
   Depende de eon_ds_tokens.css y eon_motion.css.

   TODAS las clases llevan prefijo .eds- y viven bajo .eon-ds. Motivo: la
   pagina publica carga Bootstrap 5.3, que ya define .btn, .card y
   .form-control. Sin el prefijo nos pisariamos con el.
   ========================================================================== */

/* ==========================================================================
   0 · ACCESIBILIDAD
   ========================================================================== */

/* Visible para lector de pantalla, invisible en pantalla. Lo usan los macros
   para decir "(obligatorio)" a quien no puede ver el asterisco.
   No se usa display:none: eso lo sacaria tambien del arbol accesible. */
.eon-ds .eds-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   1 · BOTON
   Alturas del manual: 52 grande / 44 base / 34 chico.
   ========================================================================== */

.eon-ds .eds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h-md);
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--r);
  font-family: var(--eds-font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  transition:
    transform var(--dur-1) var(--ease-1),
    box-shadow var(--dur-1) var(--ease-1),
    background-color var(--dur-1) var(--ease-1),
    border-color var(--dur-1) var(--ease-1),
    color var(--dur-1) var(--ease-1);
}

.eon-ds .eds-btn--lg { height: var(--h-lg); padding: 0 32px; font-size: 16px; }
.eon-ds .eds-btn--sm { height: var(--h-sm); padding: 0 16px; font-size: 13px; }

/* En movil un boton suelto ocupa el ancho: es mas facil de acertar con el
   pulgar y evita las filas de botones apretados. */
.eon-ds .eds-btn--block { width: 100%; }

.eon-ds .eds-btn:hover { transform: translateY(-3px); }
.eon-ds .eds-btn:active { transform: scale(0.97); }

/* --- Variantes --- */

.eon-ds .eds-btn--primary {
  background: var(--accent);
  color: #fff;
}

.eon-ds .eds-btn--primary:hover {
  background: var(--accent-lt);
  box-shadow: var(--glow);
  color: #fff;
}

.eon-ds .eds-btn--secondary {
  background: var(--panel-2);
  color: var(--ink);
  border-color: var(--line-2);
}

.eon-ds .eds-btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.eon-ds .eds-btn--ghost {
  background: transparent;
  color: var(--ink-2);
}

.eon-ds .eds-btn--ghost:hover {
  background: color-mix(in oklab, var(--accent) 8%, transparent);
  color: var(--accent);
}

.eon-ds .eds-btn--danger {
  background: var(--eds-error);
  color: #fff;
}

.eon-ds .eds-btn--danger:hover { filter: brightness(1.08); color: #fff; }

/* --- Deshabilitado --- */

.eon-ds .eds-btn:disabled,
.eon-ds .eds-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

/* --- Cargando ---
   El texto se mantiene en el flujo con visibility para que el boton no
   cambie de ancho al entrar en carga. Un boton que se encoge mientras
   envias un formulario mueve todo lo que tiene debajo. */

.eon-ds .eds-btn[data-loading="true"] {
  pointer-events: none;
  color: transparent;
}

.eon-ds .eds-btn[data-loading="true"] > * { visibility: hidden; }

.eon-ds .eds-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  color: #fff;
  animation: eon-rotateSlow 700ms linear infinite;
}

.eon-ds .eds-btn--secondary[data-loading="true"]::after,
.eon-ds .eds-btn--ghost[data-loading="true"]::after { color: var(--accent); }

/* ==========================================================================
   2 · CAMPOS DE FORMULARIO
   --------------------------------------------------------------------------
   El objetivo: que sea imposible construir un campo sin decirle a la persona
   si es obligatorio, que formato espera y que salio mal.
   ========================================================================== */

.eon-ds .eds-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.eon-ds .eds-field__label {
  font-family: var(--eds-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* Obligatorio: asterisco visible MAS texto para lector de pantalla. El
   asterisco solo no comunica nada a quien no lo ve. */
.eon-ds .eds-field__required {
  color: var(--eds-error);
  font-weight: 700;
}

/* Marca explicita de opcional: cuando la mayoria de los campos son
   obligatorios, decir "opcional" informa mas que marcar el resto. */
.eon-ds .eds-field__optional {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3);
  text-transform: lowercase;
}

.eon-ds .eds-input,
.eon-ds .eds-select,
.eon-ds .eds-textarea {
  width: 100%;
  min-width: 0;
  height: var(--h-md);
  padding: 0 18px;
  border: 1px solid var(--line-2);
  border-radius: var(--r);
  background: var(--panel-2);
  color: var(--ink);
  font-family: var(--eds-font-body);
  font-size: 15px;
  transition: border-color var(--dur-1) var(--ease-1), box-shadow var(--dur-1) var(--ease-1);
  /* 16px en movil evita que iOS haga zoom al enfocar el campo. */
}

.eon-ds .eds-textarea {
  height: auto;
  min-height: 112px;
  padding: 14px 18px;
  border-radius: calc(var(--r) / 1.6);
  line-height: 1.5;
  resize: vertical;
}

.eon-ds .eds-select {
  appearance: none;
  padding-right: 44px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 22px) center, calc(100% - 16px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  cursor: pointer;
}

.eon-ds .eds-input::placeholder,
.eon-ds .eds-textarea::placeholder { color: var(--ink-3); }

.eon-ds .eds-input:focus,
.eon-ds .eds-select:focus,
.eon-ds .eds-textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent);
}

@media (max-width: 640px) {
  .eon-ds .eds-input,
  .eon-ds .eds-select,
  .eon-ds .eds-textarea { font-size: 16px; }
}

/* --- Ayuda y error --- */

.eon-ds .eds-field__hint {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.45;
}

.eon-ds .eds-field__error {
  display: none;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--eds-error);
  line-height: 1.45;
}

/* El error se muestra solo cuando el control se marca invalido. Asi el
   mensaje no puede quedarse colgado en el DOM sin control asociado. */
.eon-ds .eds-field:has([aria-invalid="true"]) .eds-field__error { display: flex; }
.eon-ds .eds-field:has([aria-invalid="true"]) .eds-field__hint { display: none; }

.eon-ds .eds-field [aria-invalid="true"] {
  border-color: var(--eds-error);
}

.eon-ds .eds-field [aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--eds-error) 20%, transparent);
}

/* Respaldo para navegadores sin :has(). Sin esto el error nunca se veria. */
@supports not selector(:has(*)) {
  .eon-ds .eds-field__error[data-visible="true"] { display: flex; }
}

/* --- Fila de acciones ---
   En movil se apila y el boton primario queda ARRIBA: es el que la persona
   busca, y en columna el orden visual manda sobre el orden del DOM. */

.eon-ds .eds-form-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: var(--eds-space-3);
}

.eon-ds .eds-form-actions--end { justify-content: flex-end; }

@media (max-width: 640px) {
  .eon-ds .eds-form-actions { flex-direction: column-reverse; align-items: stretch; }
  .eon-ds .eds-form-actions .eds-btn { width: 100%; }
}

/* --- Rejilla de formulario --- */

.eon-ds .eds-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--eds-space-2);
}

.eon-ds .eds-form-grid > .eds-field--full { grid-column: 1 / -1; }

/* ==========================================================================
   3 · TARJETA Y PANEL
   ========================================================================== */

.eon-ds .eds-card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: var(--eds-space-4);
  min-width: 0;
  transition: transform var(--dur-2) var(--ease-bounce), box-shadow var(--dur-2) var(--ease-bounce),
              border-color var(--dur-2) var(--ease-bounce);
}

.eon-ds .eds-card--hover:hover {
  transform: translateY(-8px);
  border-color: var(--accent);
  box-shadow: var(--glow), var(--shadow);
}

.eon-ds .eds-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--eds-space-2);
  margin-bottom: var(--eds-space-2);
  flex-wrap: wrap;
}

/* ==========================================================================
   4 · PILL / CHIP
   ========================================================================== */

.eon-ds .eds-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: var(--h-sm);
  padding: 0 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--panel);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.eon-ds .eds-pill--accent {
  background: color-mix(in oklab, var(--accent) 12%, transparent);
  border-color: color-mix(in oklab, var(--accent) 32%, transparent);
  color: var(--accent);
}

.eon-ds .eds-pill--success { color: var(--eds-success); border-color: var(--eds-success); }
.eon-ds .eds-pill--warning { color: #8a6d1f; border-color: var(--eds-warning); }
.eon-ds .eds-pill--danger { color: var(--eds-error); border-color: var(--eds-error); }

/* ==========================================================================
   5 · KPI
   ========================================================================== */

.eon-ds .eds-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--eds-space-3);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
  min-width: 0;
}

.eon-ds .eds-kpi__label {
  font-size: var(--eds-fs-micro);
  font-weight: 700;
  letter-spacing: var(--eds-ls-eyebrow);
  text-transform: uppercase;
  color: var(--ink-3);
}

.eon-ds .eds-kpi__value {
  font-family: var(--eds-font-display);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.eon-ds .eds-kpi__delta { font-size: 12px; font-weight: 600; }
.eon-ds .eds-kpi__delta--up { color: var(--eds-success); }
.eon-ds .eds-kpi__delta--down { color: var(--eds-error); }

/* ==========================================================================
   6 · TABLAS Y LISTAS
   Fila minima de 64 px segun el manual.
   ========================================================================== */

/* El contenedor scrollea en horizontal por su cuenta: una tabla ancha nunca
   debe empujar el scroll horizontal de la pagina entera. */
.eon-ds .eds-table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r);
  border: 1px solid var(--line);
}

.eon-ds .eds-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--panel-2);
  font-size: 14px;
}

.eon-ds .eds-table th {
  text-align: left;
  padding: 14px 18px;
  font-size: var(--eds-fs-micro);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}

.eon-ds .eds-table td {
  padding: 18px;
  height: var(--h-row);
  color: var(--ink-2);
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

.eon-ds .eds-table tbody tr { transition: background-color var(--dur-1) var(--ease-1); }

.eon-ds .eds-table tbody tr:hover {
  background: color-mix(in oklab, var(--accent) 7%, transparent);
}

.eon-ds .eds-table tbody tr:last-child td { border-bottom: none; }

/* Numeros y folios: monoespaciada tabular para que las columnas cuadren. */
.eon-ds .eds-table td.eds-num {
  font-family: var(--eds-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.eon-ds .eds-list-row {
  display: flex;
  align-items: center;
  gap: var(--eds-space-2);
  min-height: var(--h-row);
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  transition: background-color var(--dur-1) var(--ease-1);
}

.eon-ds .eds-list-row:hover { background: color-mix(in oklab, var(--accent) 7%, transparent); }

/* ==========================================================================
   7 · ACORDEON
   grid-template-rows 0fr -> 1fr: anima a altura automatica sin JS y sin
   tener que medir el contenido.
   ========================================================================== */

.eon-ds .eds-accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 18px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--eds-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}

.eon-ds .eds-accordion__chevron {
  flex: 0 0 auto;
  transition: transform var(--dur-2) var(--ease-2);
}

.eon-ds .eds-accordion__trigger[aria-expanded="true"] .eds-accordion__chevron {
  transform: rotate(180deg);
}

.eon-ds .eds-accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-2) var(--ease-2);
}

.eon-ds .eds-accordion__panel[data-open="true"] { grid-template-rows: 1fr; }

.eon-ds .eds-accordion__inner {
  overflow: hidden;
  color: var(--ink-2);
  line-height: var(--eds-lh-body);
}

/* ==========================================================================
   8 · TOOLTIP
   El handoff avisa: NUNCA dejarlo con content incondicional en un ::after.
   Aqui el contenido solo se pinta en hover o foco.
   ========================================================================== */

.eon-ds .eds-tip { position: relative; }

.eon-ds .eds-tip::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  translate: -50% 8px;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  padding: 7px 12px;
  border-radius: calc(var(--r) / 3);
  background: var(--eds-blue);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  max-width: 80vw;
  z-index: var(--eds-z-tooltip);
  transition: opacity 220ms var(--ease-1), translate 220ms var(--ease-1), visibility 220ms;
}

.eon-ds .eds-tip:hover::after,
.eon-ds .eds-tip:focus-visible::after {
  opacity: 1;
  translate: -50% 0;
  visibility: visible;
}

/* ==========================================================================
   9 · MODAL
   ========================================================================== */

/* El atributo hidden DEBE ganar sobre el display de autor: sin esto el modal
   se queda visible aunque el HTML diga hidden.
   Se limita al modal a proposito. Una regla [hidden]{display:none!important}
   global habria pisado el JS legacy que alterna hidden y display a la vez. */
.eon-ds .eds-modal[hidden] { display: none !important; }

.eon-ds .eds-modal {
  position: fixed;
  inset: 0;
  z-index: var(--eds-z-modal);
  display: grid;
  place-items: center;
  padding: var(--eds-space-2);
  background: rgba(6, 7, 26, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.eon-ds .eds-modal__panel {
  width: min(560px, 100%);
  max-height: min(88vh, 900px);
  max-height: min(88svh, 900px);
  overflow-y: auto;
  padding: var(--eds-space-4);
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: var(--panel-2);
  box-shadow: var(--shadow);
  animation: eon-toastIn 340ms var(--ease-2) both;
}

/* En movil el modal sube desde abajo como hoja y se pega al borde inferior:
   es donde alcanza el pulgar. */
@media (max-width: 640px) {
  .eon-ds .eds-modal { place-items: end center; padding: 0; }

  .eon-ds .eds-modal__panel {
    width: 100%;
    max-height: 92svh;
    border-radius: var(--r) var(--r) 0 0;
    padding-bottom: calc(var(--eds-space-4) + env(safe-area-inset-bottom));
    animation: eon-sheetUp var(--dur-2) var(--ease-2) both;
  }
}

/* ==========================================================================
   10 · TOAST
   ========================================================================== */

.eon-ds .eds-toast-stack {
  position: fixed;
  right: var(--eds-space-3);
  bottom: var(--eds-space-3);
  z-index: var(--eds-z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 32px));
}

@media (max-width: 640px) {
  .eon-ds .eds-toast-stack {
    left: var(--eds-space-2);
    right: var(--eds-space-2);
    bottom: calc(var(--eds-space-2) + env(safe-area-inset-bottom));
    max-width: none;
  }
}

.eon-ds .eds-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 18px;
  border-radius: calc(var(--r) / 1.4);
  border: 1px solid var(--line-2);
  background: var(--panel-2);
  box-shadow: var(--shadow);
  color: var(--ink);
  font-size: 14px;
  animation: eon-toastIn 340ms var(--ease-2) both;
}

.eon-ds .eds-toast--success { border-left: 3px solid var(--eds-success); }
.eon-ds .eds-toast--error { border-left: 3px solid var(--eds-error); }
.eon-ds .eds-toast--warning { border-left: 3px solid var(--eds-warning); }

/* ==========================================================================
   11 · LA HOJITA COMO COMPONENTE
   Cargando, progreso y exito. Ver partials/eon_hoja.html.
   ========================================================================== */

.eon-ds .eds-hoja {
  display: block;
  width: 64px;
  height: 64px;
  color: var(--accent);
  overflow: visible;
}

.eon-ds .eds-hoja--sm { width: 32px; height: 32px; }
.eon-ds .eds-hoja--lg { width: 120px; height: 120px; }

/* --- Cargando: un segmento recorre el contorno en bucle de 2.6 s --- */

.eon-ds .eds-hoja-loader { position: relative; display: inline-block; }

.eon-ds .eds-hoja-loader__track {
  position: absolute;
  inset: 0;
  color: var(--line-2);
  stroke-width: 4;
}

.eon-ds .eds-hoja-loader__run {
  position: relative;
  stroke-width: 4;
  stroke-dasharray: 190 950;
  animation: eon-hojaDrawLoop 2.6s linear infinite;
}

/* --- Progreso: el contorno completo ES el medidor ---
   stroke-dashoffset = 1140 * (1 - porcentaje). El template pone --eds-pct
   como numero de 0 a 1. */

.eon-ds .eds-hoja-meter {
  stroke-width: 5;
  stroke-dasharray: 1140;
  stroke-dashoffset: calc(1140 * (1 - var(--eds-pct, 0)));
  transition: stroke-dashoffset var(--dur-3) var(--ease-2);
}

/* El porcentaje va junto al medidor, en MuseoModerno como pide el manual. */
.eon-ds .eds-hoja-meter__value {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--eds-font-display);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

/* --- Exito: traza en 900 ms y luego entra el relleno --- */

.eon-ds .eds-hoja-success { position: relative; display: inline-block; }

.eon-ds .eds-hoja-success__line {
  stroke-width: 4;
  stroke-dasharray: 1140;
  animation: eon-hojaDraw 900ms var(--eds-ease-hoja) both;
}

.eon-ds .eds-hoja-success__fill {
  position: absolute;
  inset: 0;
  animation: eon-hojaFillIn 1.4s var(--ease-2) both;
}

.eon-ds .eds-hoja-success__ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: eon-ringOut 1.6s var(--ease-2) infinite;
}

.eon-ds .eds-hoja-success__ring:nth-of-type(2) { animation-delay: 500ms; }

/* ==========================================================================
   12 · RESPONSIVE
   Verificado a 375 (movil), 768 (tablet), 1024 (iPad apaisado) y 1440.
   ========================================================================== */

/* Contra el scroll horizontal. Se aplica al contenedor de contenido, NO al
   body: un overflow en el body rompe position:sticky en sus descendientes,
   y varias paginas publicas dependen de encabezados sticky. */
.eon-ds .eds-page { overflow-x: clip; }

.eon-ds img,
.eon-ds svg,
.eon-ds video { max-width: 100%; }

.eon-ds .eds-shell {
  width: min(1200px, 100% - 2 * var(--eds-space-3));
  margin-inline: auto;
}

@media (max-width: 640px) {
  .eon-ds .eds-shell { width: min(1200px, 100% - 2 * var(--eds-space-2)); }
  .eon-ds .eds-card { padding: var(--eds-space-3); }
}

/* Rejilla que se adapta sola. minmax con minimo 0 evita el desbordamiento
   clasico de grid cuando el contenido no cabe. */
.eon-ds .eds-grid {
  display: grid;
  gap: var(--eds-space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
}

.eon-ds .eds-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); }
.eon-ds .eds-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); }

/* Objetivo tactil minimo de 44x44 en punteros gruesos. */
@media (pointer: coarse) {
  .eon-ds .eds-btn--sm,
  .eon-ds button.eds-icon-btn { min-height: 44px; min-width: 44px; }
}

.eon-ds .eds-only-desktop { display: none; }

@media (min-width: 900px) {
  .eon-ds .eds-only-desktop { display: initial; }
  .eon-ds .eds-only-mobile { display: none; }
}