/* Componentes de Celestia: un solo juego de piezas para todas las apps (Svelte, Astro, Radar sin framework, React).
   Se apoya en los colores --celestia-* del marco y agrega escalas (espacio, radio, texto, sombra) y estados.
   Prefijo c- para no chocar con las clases que cada app ya tiene mientras se migra. */

:root {
  /* Respaldo por si la página no carga marco.css (muestrario, pruebas). */
  --celestia-fondo: #fafafa; --celestia-sup: #fff; --celestia-sup2: #f4f4f5; --celestia-linea: #e4e4e7; --celestia-linea2: #d4d4d8;
  --celestia-texto: #18181b; --celestia-suave: #52525b; --celestia-tenue: #71717a;
  --celestia-acento: #2f6fae; --celestia-acento-fondo: rgba(47, 111, 174, .1); --celestia-sobre-acento: #fff;

  --c-fuente: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Títulos: pueden usar otra familia (p. ej. una serif editorial) con su propio peso y separación. */
  --c-fuente-titulo: var(--c-fuente);
  --c-peso-titulo: 700;
  --c-tracking-titulo: -.03em;
  --c-escala-titulo: 1; /* una serif de peso normal necesita títulos más grandes */
  --c-mono: "Geist Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  /* Texto: 12 es el mínimo legible; 14 es el cuerpo. */
  --c-t1: 12px; --c-t2: 13px; --c-t3: 14px; --c-t4: 16px; --c-t5: 20px; --c-t6: 26px; --c-t7: 34px;
  /* Espacio en múltiplos de 4. */
  --c-e1: 4px; --c-e2: 8px; --c-e3: 12px; --c-e4: 16px; --c-e5: 20px; --c-e6: 24px; --c-e7: 32px; --c-e8: 48px;
  /* Radios: controles 8, tarjetas 12, píldoras redondas. Uno solo por tipo de pieza. */
  --c-r-chico: 6px; --c-r: 8px; --c-r-grande: 12px; --c-r-pildora: 999px;
  --c-alto: 36px; --c-alto-chico: 30px;
  --c-sombra-1: 0 1px 2px rgba(24, 24, 27, .05);
  --c-sombra-2: 0 1px 2px rgba(24, 24, 27, .04), 0 6px 18px rgba(24, 24, 27, .06);
  --c-sombra-3: 0 2px 6px rgba(24, 24, 27, .06), 0 18px 44px rgba(24, 24, 27, .14);
  --c-bien: #2f7a57; --c-bien-fondo: rgba(47, 122, 87, .1);
  --c-aviso: #9a6417; --c-aviso-fondo: rgba(154, 100, 23, .1);
  --c-mal: #b0413e; --c-mal-fondo: rgba(176, 65, 62, .1);
  --c-anillo: 0 0 0 3px var(--celestia-acento-fondo);
  --c-curva: cubic-bezier(.2, .8, .3, 1);
}
:root[data-celestia-modo="oscuro"] {
  --celestia-fondo: #0f1012; --celestia-sup: #16171a; --celestia-sup2: #1c1e22; --celestia-linea: #26292e; --celestia-linea2: #33373d;
  --celestia-texto: #e9eaec; --celestia-suave: #a0a4ab; --celestia-tenue: #70757d;
  --celestia-acento: #7fb2e5; --celestia-acento-fondo: rgba(127, 178, 229, .12); --celestia-sobre-acento: #0b1520;
  --c-sombra-1: 0 1px 2px rgba(0, 0, 0, .3);
  --c-sombra-2: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px rgba(0, 0, 0, .28);
  --c-sombra-3: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 48px rgba(0, 0, 0, .45);
  --c-bien: #79c49d; --c-bien-fondo: rgba(121, 196, 157, .12);
  --c-aviso: #e0b26e; --c-aviso-fondo: rgba(224, 178, 110, .12);
  --c-mal: #ec8f8b; --c-mal-fondo: rgba(236, 143, 139, .12);
}

/* ------------------------------------------------------------------ base */
.c-base, .c-base body { margin: 0; background: var(--celestia-fondo); color: var(--celestia-texto); font: var(--c-t3)/1.55 var(--c-fuente); -webkit-font-smoothing: antialiased; font-optical-sizing: auto; font-kerning: normal; }
.c-base *, .c-base *::before, .c-base *::after { box-sizing: border-box; }
/* Títulos: línea apretada, separación negativa que crece con el tamaño y líneas parejas (text-wrap: balance).
   Párrafos sin palabra sola al final (pretty). */
.c-base h1, .c-base h2, .c-base h3 { margin: 0; font-family: var(--c-fuente-titulo); font-weight: var(--c-peso-titulo); line-height: 1.15; letter-spacing: calc(var(--c-tracking-titulo) * .6); text-wrap: balance; }
.c-base h1 { line-height: 1.05; letter-spacing: var(--c-tracking-titulo); }
.c-base h3 { font-family: var(--c-fuente); font-weight: 650; letter-spacing: -.01em; line-height: 1.3; }
.c-base p, .c-base li { text-wrap: pretty; }
.c-base code { font-family: var(--c-mono); font-size: .9em; }
.c-titulo-grande { font-family: var(--c-fuente-titulo); font-weight: var(--c-peso-titulo); letter-spacing: var(--c-tracking-titulo); }
.c-base :focus-visible { outline: 2px solid var(--celestia-acento); outline-offset: 2px; }
.c-num { font-variant-numeric: tabular-nums; }
.c-suave { color: var(--celestia-suave); }
.c-tenue { color: var(--celestia-tenue); }
.c-rotulo { font-size: var(--c-t1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--celestia-tenue); }
.c-oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ------------------------------------------------------------------ botón */
.c-boton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--c-e2);
  min-height: var(--c-alto); padding: 0 var(--c-e4); border: 1px solid var(--celestia-linea2); border-radius: var(--c-r);
  background: var(--celestia-sup); color: var(--celestia-texto); font: 600 var(--c-t2)/1 var(--c-fuente);
  text-decoration: none; cursor: pointer; white-space: nowrap; box-shadow: var(--c-sombra-1);
  transition: background-color .15s, border-color .15s, color .15s, transform .1s;
}
.c-boton:hover { background: var(--celestia-sup2); }
.c-boton:active { transform: scale(.97); }
.c-boton:disabled, .c-boton[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.c-boton svg { width: 16px; height: 16px; flex: none; }
.c-boton--principal { background: var(--celestia-acento); border-color: var(--celestia-acento); color: var(--celestia-sobre-acento); }
.c-boton--principal:hover { background: color-mix(in srgb, var(--celestia-acento) 88%, var(--celestia-texto)); }
.c-boton--fantasma { background: transparent; border-color: transparent; box-shadow: none; color: var(--celestia-suave); }
.c-boton--fantasma:hover { background: var(--celestia-sup2); color: var(--celestia-texto); }
.c-boton--peligro { color: var(--c-mal); }
.c-boton--peligro:hover { background: var(--c-mal-fondo); border-color: var(--c-mal); }
.c-boton--chico { min-height: var(--c-alto-chico); padding: 0 var(--c-e3); font-size: var(--c-t1); }
.c-boton--icono { width: var(--c-alto); padding: 0; }
.c-boton--icono.c-boton--chico { width: var(--c-alto-chico); }
.c-boton--ancho { width: 100%; }
.c-enlace { color: var(--celestia-acento); font-weight: 600; text-decoration: none; }
.c-enlace:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------------------ campos */
.c-grupo { display: grid; gap: 6px; }
.c-etiqueta { font-size: var(--c-t2); font-weight: 600; }
.c-ayuda { font-size: var(--c-t1); color: var(--celestia-tenue); }
.c-ayuda--mal { color: var(--c-mal); }
.c-campo {
  width: 100%; min-height: var(--c-alto); padding: 0 var(--c-e3); border: 1px solid var(--celestia-linea2); border-radius: var(--c-r);
  background: var(--celestia-sup); color: var(--celestia-texto); font: var(--c-t3)/1.4 var(--c-fuente);
  transition: border-color .15s, box-shadow .15s;
}
textarea.c-campo { padding: var(--c-e2) var(--c-e3); resize: vertical; min-height: 88px; line-height: 1.55; }
.c-campo::placeholder { color: var(--celestia-tenue); }
.c-campo:focus { outline: none; border-color: var(--celestia-acento); box-shadow: var(--c-anillo); }
.c-campo[aria-invalid="true"] { border-color: var(--c-mal); }
.c-buscador { position: relative; display: flex; align-items: center; }
.c-buscador svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--celestia-tenue); pointer-events: none; }
.c-buscador .c-campo { padding-left: 34px; }
.c-buscador kbd { position: absolute; right: 8px; }
/* Selector: mismo aspecto que el .cs-boton que marco.js pone en lugar del <select>. */
.c-selector { display: inline-flex; align-items: center; justify-content: space-between; gap: var(--c-e2); min-height: var(--c-alto); padding: 0 var(--c-e3); border: 1px solid var(--celestia-linea2); border-radius: var(--c-r); background: var(--celestia-sup); color: var(--celestia-texto); font: 500 var(--c-t2)/1 var(--c-fuente); cursor: pointer; }
.c-selector svg { width: 15px; height: 15px; color: var(--celestia-tenue); }
.c-casilla { display: inline-flex; align-items: center; gap: var(--c-e2); font-size: var(--c-t2); cursor: pointer; }
.c-casilla input:not(.c-interruptor) { width: 16px; height: 16px; margin: 0; accent-color: var(--celestia-acento); }
.c-interruptor { appearance: none; position: relative; flex: none; width: 34px; height: 20px; margin: 0; border-radius: var(--c-r-pildora); background: var(--celestia-linea2); cursor: pointer; transition: background-color .15s; }
.c-interruptor::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--c-sombra-1); transition: transform .18s var(--c-curva); }
.c-interruptor:checked { background: var(--celestia-acento); }
.c-interruptor:checked::after { transform: translateX(14px); }
kbd, .c-tecla { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 1px solid var(--celestia-linea2); border-bottom-width: 2px; border-radius: 5px; background: var(--celestia-sup); color: var(--celestia-suave); font: 600 11px/1 var(--c-mono); }

/* ------------------------------------------------------------------ chips, insignias y etiquetas */
.c-chip { display: inline-flex; align-items: center; gap: 6px; min-height: var(--c-alto-chico); padding: 0 var(--c-e3); border: 1px solid var(--celestia-linea); border-radius: var(--c-r-pildora); background: var(--celestia-sup); color: var(--celestia-suave); font: 600 var(--c-t1)/1 var(--c-fuente); cursor: pointer; white-space: nowrap; }
.c-chip:hover { border-color: var(--celestia-linea2); color: var(--celestia-texto); }
.c-chip[aria-pressed="true"] { border-color: var(--celestia-acento); background: var(--celestia-acento-fondo); color: var(--celestia-acento); }
.c-chip .c-num { color: var(--celestia-tenue); font-weight: 500; }
.c-chips { display: flex; flex-wrap: wrap; gap: var(--c-e2); }
.c-insignia { display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: var(--c-r-pildora); background: var(--celestia-sup2); color: var(--celestia-suave); font: 700 var(--c-t1)/1.2 var(--c-fuente); white-space: nowrap; }
.c-insignia::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.c-insignia--sin-punto::before { display: none; }
.c-insignia--acento { background: var(--celestia-acento-fondo); color: var(--celestia-acento); }
.c-insignia--bien { background: var(--c-bien-fondo); color: var(--c-bien); }
.c-insignia--aviso { background: var(--c-aviso-fondo); color: var(--c-aviso); }
.c-insignia--mal { background: var(--c-mal-fondo); color: var(--c-mal); }
.c-etiqueta-dato { display: inline-block; padding: 3px 7px; border-radius: var(--c-r-chico); background: var(--celestia-sup2); color: var(--celestia-suave); font: 700 11px/1.2 var(--c-fuente); letter-spacing: .05em; text-transform: uppercase; }

/* ------------------------------------------------------------------ tarjeta y cifras */
.c-tarjeta { border: 1px solid var(--celestia-linea); border-radius: var(--c-r-grande); background: var(--celestia-sup); box-shadow: var(--c-sombra-1); padding: var(--c-e5); }
.c-tarjeta--plana { box-shadow: none; }
.c-tarjeta--interactiva { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.c-tarjeta--interactiva:hover { border-color: var(--celestia-linea2); box-shadow: var(--c-sombra-2); transform: translateY(-1px); }
.c-tarjeta--interactiva[aria-current="true"] { border-color: var(--celestia-acento); box-shadow: 0 0 0 1px var(--celestia-acento), var(--c-sombra-2); }
.c-tarjeta-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--c-e3); margin-bottom: var(--c-e3); }
.c-tarjeta h3 { font-size: var(--c-t4); }
.c-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--c-e3); }
.c-kpi { border: 1px solid var(--celestia-linea); border-radius: var(--c-r-grande); background: var(--celestia-sup); padding: var(--c-e4); box-shadow: var(--c-sombra-1); }
.c-kpi dt, .c-kpi .c-rotulo { display: block; }
.c-kpi dd, .c-kpi strong { display: block; margin: 6px 0 2px; font-size: var(--c-t6); font-weight: 700; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.c-kpi small { color: var(--celestia-tenue); font-size: var(--c-t1); }
.c-tendencia--sube { color: var(--c-bien); font-weight: 700; }
.c-tendencia--baja { color: var(--c-mal); font-weight: 700; }
.c-barra { height: 6px; border-radius: var(--c-r-pildora); background: var(--celestia-sup2); overflow: hidden; }
.c-barra > span { display: block; height: 100%; border-radius: inherit; background: var(--celestia-acento); }

/* ------------------------------------------------------------------ navegación */
.c-pestanas { display: flex; gap: var(--c-e1); border-bottom: 1px solid var(--celestia-linea); overflow-x: auto; scrollbar-width: none; }
.c-pestana { position: relative; padding: var(--c-e3) var(--c-e3); border: 0; background: none; color: var(--celestia-suave); font: 600 var(--c-t2)/1 var(--c-fuente); text-decoration: none; white-space: nowrap; cursor: pointer; }
.c-pestana:hover { color: var(--celestia-texto); }
.c-pestana[aria-selected="true"], .c-pestana[aria-current="page"] { color: var(--celestia-texto); }
.c-pestana[aria-selected="true"]::after, .c-pestana[aria-current="page"]::after { content: ""; position: absolute; left: var(--c-e3); right: var(--c-e3); bottom: -1px; height: 2px; border-radius: 2px; background: var(--celestia-acento); }
.c-segmentos { display: inline-flex; padding: 3px; border-radius: var(--c-r); background: var(--celestia-sup2); gap: 2px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.c-segmento { min-height: 28px; padding: 0 var(--c-e3); border: 0; border-radius: var(--c-r-chico); background: none; color: var(--celestia-suave); font: 600 var(--c-t1)/1 var(--c-fuente); white-space: nowrap; cursor: pointer; }
.c-segmento[aria-pressed="true"] { background: var(--celestia-sup); color: var(--celestia-texto); box-shadow: var(--c-sombra-1); }
.c-nav { display: grid; gap: 2px; }
.c-nav-item { display: flex; align-items: center; gap: var(--c-e3); min-height: 36px; padding: 0 var(--c-e3); border-radius: var(--c-r); color: var(--celestia-suave); font: 600 var(--c-t2)/1 var(--c-fuente); text-decoration: none; background: none; border: 0; cursor: pointer; }
.c-nav-item svg { width: 18px; height: 18px; flex: none; }
.c-nav-item:hover { background: var(--celestia-sup2); color: var(--celestia-texto); }
.c-nav-item[aria-current="page"] { background: var(--celestia-acento-fondo); color: var(--celestia-acento); }
.c-nav-item .c-cuenta { margin-left: auto; min-width: 20px; padding: 2px 6px; border-radius: var(--c-r-pildora); background: var(--celestia-sup); color: var(--celestia-suave); font-size: 11px; text-align: center; }

/* ------------------------------------------------------------------ avisos, vacío y carga */
.c-aviso { display: flex; gap: var(--c-e3); padding: var(--c-e3) var(--c-e4); border: 1px solid var(--celestia-linea); border-left: 3px solid var(--celestia-acento); border-radius: var(--c-r); background: var(--celestia-sup); font-size: var(--c-t2); }
.c-aviso b { display: block; margin-bottom: 2px; }
.c-aviso--bien { border-left-color: var(--c-bien); }
.c-aviso--aviso { border-left-color: var(--c-aviso); }
.c-aviso--mal { border-left-color: var(--c-mal); }
.c-toast { display: inline-flex; align-items: center; gap: var(--c-e3); padding: var(--c-e3) var(--c-e4); border-radius: var(--c-r); background: var(--celestia-texto); color: var(--celestia-fondo); font-size: var(--c-t2); box-shadow: var(--c-sombra-3); }
.c-vacio { display: grid; justify-items: center; gap: var(--c-e2); padding: var(--c-e8) var(--c-e5); border: 1px dashed var(--celestia-linea2); border-radius: var(--c-r-grande); text-align: center; }
.c-vacio svg { width: 28px; height: 28px; color: var(--celestia-tenue); }
.c-vacio p { margin: 0 0 var(--c-e2); max-width: 42ch; color: var(--celestia-suave); font-size: var(--c-t2); }
.c-esqueleto { display: block; height: 12px; border-radius: var(--c-r-chico); background: linear-gradient(90deg, var(--celestia-sup2) 25%, var(--celestia-linea) 50%, var(--celestia-sup2) 75%) 0 0 / 200% 100%; animation: c-brillo 1.4s linear infinite; }
.c-giro { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--celestia-linea2); border-top-color: var(--celestia-acento); border-radius: 50%; animation: c-girar .7s linear infinite; }
@keyframes c-brillo { to { background-position: -200% 0; } }
@keyframes c-girar { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ tabla */
.c-tabla-caja { overflow-x: auto; border: 1px solid var(--celestia-linea); border-radius: var(--c-r-grande); background: var(--celestia-sup); }
.c-tabla { width: 100%; border-collapse: collapse; font-size: var(--c-t2); }
.c-tabla th { padding: var(--c-e3) var(--c-e4); border-bottom: 1px solid var(--celestia-linea); color: var(--celestia-tenue); font-size: var(--c-t1); font-weight: 700; letter-spacing: .04em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.c-tabla td { padding: var(--c-e3) var(--c-e4); border-bottom: 1px solid var(--celestia-linea); }
.c-tabla tr:last-child td { border-bottom: 0; }
.c-tabla tbody tr:hover { background: var(--celestia-sup2); }
.c-tabla .c-num, .c-tabla .derecha { text-align: right; }

/* ------------------------------------------------------------------ diálogo y panel */
.c-dialogo { width: min(560px, calc(100% - 32px)); max-height: 86dvh; padding: 0; border: 1px solid var(--celestia-linea); border-radius: var(--c-r-grande); background: var(--celestia-sup); color: var(--celestia-texto); box-shadow: var(--c-sombra-3); }
.c-dialogo::backdrop { background: rgba(9, 9, 11, .45); backdrop-filter: blur(2px); }
.c-dialogo-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--c-e3); padding: var(--c-e5) var(--c-e5) var(--c-e3); }
.c-dialogo-cuerpo { padding: 0 var(--c-e5) var(--c-e5); color: var(--celestia-suave); font-size: var(--c-t2); }
.c-dialogo-pie { display: flex; justify-content: flex-end; gap: var(--c-e2); padding: var(--c-e3) var(--c-e5); border-top: 1px solid var(--celestia-linea); background: var(--celestia-fondo); border-radius: 0 0 var(--c-r-grande) var(--c-r-grande); }
.c-dialogo[open] { animation: c-aparecer .18s var(--c-curva); }
@keyframes c-aparecer { from { opacity: 0; transform: translateY(6px) scale(.98); } }
.c-lista { display: grid; margin: 0; padding: 0; list-style: none; }
.c-lista > li { display: flex; align-items: center; gap: var(--c-e3); padding: var(--c-e3) 0; border-bottom: 1px solid var(--celestia-linea); }
.c-lista > li:last-child { border-bottom: 0; }

/* ================================================================== movimiento y profundidad
   Curvas: SALIDA llega frenando (aparecer), REBOTE se pasa un poco y vuelve (algo que cae en su sitio),
   RESORTE oscila y se asienta (indicadores, interruptor). Nada se mueve a velocidad constante. */
:root {
  --c-salida: cubic-bezier(.16, 1, .3, 1);
  --c-rebote: cubic-bezier(.34, 1.56, .64, 1);
  --c-resorte: linear(0, .009, .035 2.1%, .141 4.4%, .723 12.9%, .938 16.7%, 1.017 19.4%, 1.067, 1.099 24.3%, 1.108 26%, 1.1, 1.084 30.1%, 1.032 35.1%, .999 39.4%, .983 44.1%, .981 48.4%, .998 59.4%, 1.002 70.4%, 1);
  --c-d1: .12s; --c-d2: .22s; --c-d3: .38s; --c-d4: .6s;
  /* Borde de luz arriba: da relieve sin degradados. */
  --c-brillo: inset 0 1px 0 rgba(255, 255, 255, .75);
  --c-sombra-acento: 0 1px 2px rgba(24, 24, 27, .08), 0 6px 16px -4px color-mix(in srgb, var(--celestia-acento) 45%, transparent);
}
:root[data-celestia-modo="oscuro"] { --c-brillo: inset 0 1px 0 rgba(255, 255, 255, .05); }

/* Superficies con relieve */
.c-tarjeta, .c-kpi, .c-tabla-caja, .c-dialogo { box-shadow: var(--c-brillo), var(--c-sombra-1); }
.c-tarjeta--interactiva { transition: border-color var(--c-d2), box-shadow var(--c-d3) var(--c-salida), transform var(--c-d3) var(--c-salida); }
.c-tarjeta--interactiva:hover { box-shadow: var(--c-brillo), var(--c-sombra-2); transform: translateY(-2px); }
.c-tarjeta--interactiva:active { transform: translateY(0) scale(.99); transition-duration: var(--c-d1); }
.c-tarjeta--interactiva[aria-current="true"] { animation: c-anillo var(--c-d4) var(--c-salida); }
@keyframes c-anillo { from { box-shadow: 0 0 0 7px var(--celestia-acento-fondo), var(--c-sombra-2); } }

/* Botones: se elevan al pasar, se hunden al tocar y vuelven con rebote; onda desde el dedo */
.c-boton { position: relative; overflow: hidden; isolation: isolate; box-shadow: var(--c-brillo), var(--c-sombra-1);
  transition: background-color var(--c-d2), border-color var(--c-d2), color var(--c-d2), box-shadow var(--c-d3) var(--c-salida), transform var(--c-d3) var(--c-rebote); }
.c-boton:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--c-brillo), var(--c-sombra-2); }
.c-boton:active:not(:disabled) { transform: translateY(0) scale(.96); transition-duration: var(--c-d1); }
.c-boton--principal { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), var(--c-sombra-acento); }
.c-boton--principal:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 2px 4px rgba(24, 24, 27, .08), 0 10px 22px -6px color-mix(in srgb, var(--celestia-acento) 55%, transparent); }
.c-boton--fantasma, .c-boton--fantasma:hover:not(:disabled) { box-shadow: none; }
.c-boton svg { transition: transform var(--c-d3) var(--c-rebote); }
.c-boton:hover .c-flecha, .c-enlace:hover .c-flecha { transform: translateX(3px); }
.c-enlace .c-flecha { display: inline-block; transition: transform var(--c-d3) var(--c-rebote); }
.c-onda { position: absolute; z-index: -1; border-radius: 50%; background: currentColor; opacity: 0; pointer-events: none; }
.c-chip, .c-segmento, .c-nav-item { position: relative; overflow: hidden; isolation: isolate; }

/* Campos: el halo crece al enfocar y la lupa se enciende */
.c-campo { transition: border-color var(--c-d2), box-shadow var(--c-d3) var(--c-salida); }
.c-campo:focus { box-shadow: 0 0 0 4px var(--celestia-acento-fondo); }
.c-buscador svg { transition: color var(--c-d2), transform var(--c-d3) var(--c-rebote); }
.c-buscador:focus-within svg { color: var(--celestia-acento); transform: scale(1.12); }

/* Chips: rebotan al activarse */
.c-chip { transition: border-color var(--c-d2), background-color var(--c-d2), color var(--c-d2), transform var(--c-d3) var(--c-rebote); }
.c-chip:active { transform: scale(.94); transition-duration: var(--c-d1); }
.c-chip[aria-pressed="true"] { animation: c-pop var(--c-d3) var(--c-rebote); }
@keyframes c-pop { 40% { transform: scale(1.08); } }

/* Interruptor: la bolita se estira mientras lo presionas y salta con resorte */
.c-interruptor { transition: background-color var(--c-d2); }
.c-interruptor::after { transition: transform var(--c-d4) var(--c-resorte), width var(--c-d2) var(--c-salida); }
.c-interruptor:active::after { width: 21px; }
.c-interruptor:checked:active::after { transform: translateX(9px); }

/* Insignia viva: un latido suave en lo que está pasando ahora */
.c-insignia--vivo::before { animation: c-latido 2s var(--c-salida) infinite; }
@keyframes c-latido { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }

/* Indicador que se desliza entre opciones (componentes.js lo crea y lo mueve) */
.c-con-indicador { position: relative; }
.c-con-indicador > :not(.c-indicador) { position: relative; z-index: 1; }
.c-indicador { position: absolute; z-index: 0; top: 0; left: 0; opacity: 0; pointer-events: none; }
.c-segmentos > .c-indicador { border-radius: var(--c-r-chico); background: var(--celestia-sup); box-shadow: var(--c-brillo), var(--c-sombra-1); }
.c-segmentos.c-con-indicador .c-segmento[aria-pressed="true"] { background: none; box-shadow: none; }
.c-segmento { transition: color var(--c-d2); }
.c-nav > .c-indicador { border-radius: var(--c-r); background: var(--celestia-acento-fondo); }
.c-nav.c-con-indicador .c-nav-item[aria-current="page"] { background: none; }
.c-nav-item { transition: color var(--c-d2), background-color var(--c-d2); }
.c-pestanas > .c-indicador { top: auto; bottom: 0; border-radius: 2px; background: var(--celestia-acento); }
.c-pestanas.c-con-indicador .c-pestana::after { display: none; }
.c-pestana { transition: color var(--c-d2); }

/* Diálogo: entra con resorte, sale encogiéndose; el fondo se funde */
.c-dialogo[open] { animation: c-dialogo-entra var(--c-d4) var(--c-resorte); }
.c-dialogo[open]::backdrop { animation: c-fundir var(--c-d3) var(--c-salida); }
.c-dialogo.c-cerrando { animation: c-dialogo-sale var(--c-d2) ease-in forwards; }
.c-dialogo.c-cerrando::backdrop { animation: c-fundir var(--c-d2) ease-in reverse forwards; }
@keyframes c-dialogo-entra { from { opacity: 0; transform: translateY(12px) scale(.94); } }
@keyframes c-dialogo-sale { to { opacity: 0; transform: translateY(6px) scale(.97); } }
@keyframes c-fundir { from { opacity: 0; } }

/* Avisos apilados (Celestia.aviso, patrón de Sonner): Motion los acomoda; aquí solo la pila. */
.c-avisos { position: fixed; left: 50%; bottom: 24px; z-index: 100; width: min(360px, calc(100% - 32px)); height: 0; transform: translateX(-50%); }
.c-avisos::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; } /* zona para desplegar con el mouse */
.c-avisos .c-toast { position: absolute; left: 0; right: 0; bottom: 0; justify-content: space-between; transform-origin: bottom center; }

/* Borde que sigue al cursor (Magic UI MagicCard), solo con mouse y solo en el borde: sin rellenos de color. */
.c-tarjeta--interactiva, .c-kpi { position: relative; }
@media (hover: hover) and (pointer: fine) {
  .c-tarjeta--interactiva::before, .c-kpi::before {
    content: ""; position: absolute; inset: -1px; padding: 1px; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(180px circle at var(--c-mx, -999px) var(--c-my, -999px), color-mix(in srgb, var(--celestia-acento) 75%, transparent), transparent 70%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
    transition: opacity var(--c-d3) var(--c-salida);
  }
  .c-tarjeta--interactiva:hover::before, .c-kpi:hover::before { opacity: 1; }
}

/* Texto por palabras (Motion Primitives TextEffect) */
.c-palabra { display: inline-block; }

/* Cinta que corre sola (Magic UI Marquee): se pausa al pasar el mouse o con el foco; velocidad constante a propósito. */
.c-cinta { overflow: hidden; contain: inline-size; /* su contenido no ensancha la columna que la contiene */ -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.c-cinta-pista { display: flex; gap: var(--c-e3); width: max-content; animation: c-cinta 38s linear infinite; }
.c-cinta-pista > * { flex: none; }
.c-cinta:hover .c-cinta-pista, .c-cinta:focus-within .c-cinta-pista { animation-play-state: paused; }
@keyframes c-cinta { to { transform: translateX(calc(-50% - var(--c-e3) / 2)); } }

/* Acordeón con altura animada (Animata): <details> nativo; componentes.js anima la altura con resorte. */
.c-acordeon { border-bottom: 1px solid var(--celestia-linea); }
.c-acordeon > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--c-e3); padding: var(--c-e4) 0; font-weight: 600; cursor: pointer; list-style: none; }
.c-acordeon > summary::-webkit-details-marker { display: none; }
.c-acordeon > summary::after { content: ""; width: 7px; height: 7px; margin-right: 4px; border-right: 2px solid var(--celestia-tenue); border-bottom: 2px solid var(--celestia-tenue); transform: rotate(45deg); transition: transform var(--c-d4) var(--c-resorte); }
.c-acordeon[open]:not(.c-cerrando) > summary::after { transform: rotate(-135deg); }
.c-acordeon-cuerpo { overflow: hidden; color: var(--celestia-suave); font-size: var(--c-t2); }
.c-acordeon-cuerpo > :last-child { margin-bottom: var(--c-e4); }

/* Carga: el giro acelera y frena en cada vuelta en vez de girar plano */
.c-giro { animation: c-girar .9s cubic-bezier(.5, .1, .5, .9) infinite; }

@media (prefers-reduced-motion: reduce) {
  .c-cinta-pista { animation: none; }
  .c-base *, .c-base *::before, .c-base *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}