/*! Eclipse UI · piezas.css
 *  Las piezas de las plantillas en CSS puro: botones, campos, tarjetas,
 *  pastillas, tablas, avisos y unas cuantas de diseño. Todo sale de los
 *  tokens de eclipse-ui.css, así que cambian solas con la personalidad, en
 *  claro y en oscuro. Va después de eclipse-ui.css (y del theme.css de tu
 *  marca). Licencia: LICENCIA.md.
 *
 *  Lo que cambia según la personalidad no se toca aquí: la forma (radios),
 *  el aire (alturas y rellenos), la voz de los botones y el ritmo vienen de
 *  los diales. Si una pieza se ve rara en una personalidad, se corrige en el
 *  dial, no en la pieza.
 */

/* ── Base ─────────────────────────────────────────────────────────────── */

/* La escala de texto completa (eclipse-ui.css trae los pasos chicos:
 * --text-3xs, --text-2xs, --text-compact y --text-md). Los mismos nombres que
 * Tailwind, para que la escala sea una sola en CSS y en shadcn/ui. */
:where(:root) {
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  --eui-container: 72rem;
  --eui-gutter: clamp(1rem, 4vw, 2rem);
}

:where(*, *::before, *::after) {
  box-sizing: border-box;
}

:where(body) {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ol, ul, fieldset) {
  margin: 0;
}

:where(fieldset) {
  min-width: 0;
  padding: 0;
  border: 0;
}

:where(img, video, canvas) {
  display: block;
  max-width: 100%;
  height: auto;
}

:where(input, button, select, textarea) {
  font: inherit;
  color: inherit;
}

:where(a) {
  color: inherit;
  text-decoration: none;
}

:where(table) {
  border-collapse: collapse;
}

/* Todo lo que se enfoca, con el foco de la personalidad (como .eui-focus). */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--eui-focus, var(--color-primary-text));
  outline-offset: 2px;
}

::selection {
  background: color-mix(in oklab, var(--color-primary) 28%, transparent);
}

/* Los íconos (SVG de trazo, como los de Lucide) toman el color del texto. */
.eui-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
}

.eui-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Diseño ───────────────────────────────────────────────────────────── */

.eui-container {
  width: 100%;
  max-width: var(--eui-container);
  margin-inline: auto;
  padding-inline: var(--eui-gutter);
}

/* En columna, con la separación del dial de aire (o la que pongas en --gap). */
.eui-stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap, var(--eui-gap));
}

/* En fila, y que se acomoden si no caben. */
.eui-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap, 0.75rem);
}

/* Tantas columnas como quepan, de al menos --min de ancho. */
.eui-grid {
  display: grid;
  gap: var(--gap, var(--eui-gap));
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--min, 16rem)), 1fr));
}

.eui-divider {
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

/* ── Texto ────────────────────────────────────────────────────────────── */

/* El título de la página, uno por vista: la voz display de la personalidad.
 * Para un titular más grande, .eui-display con su font-size. */
.eui-title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  line-height: 1.25;
  font-weight: var(--eui-display-weight);
  font-style: var(--eui-display-style, normal);
  letter-spacing: var(--eui-display-tracking);
  text-transform: var(--eui-display-case, none);
  font-optical-sizing: auto;
  font-variation-settings: "SOFT" var(--eui-soft), "WONK" var(--eui-wonk);
  text-wrap: balance;
}

/* Título de sección, de un modal o de un panel. */
.eui-heading {
  font-size: var(--text-lg);
  line-height: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.014em;
  text-wrap: balance;
}

/* Título de tarjeta, fila o grupo. */
.eui-subheading {
  font-size: var(--text-sm);
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.006em;
}

/* La entradilla bajo un título. */
.eui-lead {
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-muted-foreground);
  text-wrap: pretty;
}

.eui-body {
  font-size: var(--text-sm);
  line-height: 1.375rem;
  text-wrap: pretty;
}

/* Lo secundario: horas, ayudas, quién y cuándo. Ya trae su color. */
.eui-meta {
  font-size: var(--text-xs);
  line-height: 1rem;
  color: var(--color-muted-foreground);
}

/* Montos, folios y horarios en línea. */
.eui-data {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1rem;
  font-variant-numeric: tabular-nums lining-nums;
}

/* La cifra protagonista (un precio, un KPI). Su tamaño lo pones tú. */
.eui-figure {
  line-height: 1;
  font-weight: var(--eui-display-weight);
  letter-spacing: var(--eui-display-tracking);
  font-variant-numeric: tabular-nums lining-nums;
}

.eui-muted {
  color: var(--color-muted-foreground);
}

/* Un enlace dentro de un texto: en el color de la marca que pasa AA. */
.eui-link {
  color: var(--color-primary-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--eui-dur-quick) var(--eui-ease-exhale);
}

.eui-link:hover {
  color: var(--color-foreground);
}

/* ── Botón ────────────────────────────────────────────────────────────── */

/* Lleno en la marca: la acción principal, una por vista. Las demás:
 * --secondary, --outline o --ghost. Va en <button> o en <a>. */
.eui-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--eui-control-md);
  padding-inline: var(--eui-pad-md);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-primary-foreground);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: 1;
  font-weight: var(--eui-control-weight, 500);
  letter-spacing: var(--eui-control-tracking, normal);
  text-transform: var(--eui-control-case, none);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition-property: transform, background-color, border-color, color, box-shadow, opacity;
  transition-duration: var(--eui-dur-quick);
  transition-timing-function: var(--eui-ease-exhale);
}

.eui-button:hover {
  background: var(--color-primary-hover);
}

.eui-button:active:not(:disabled, [aria-disabled="true"]) {
  transform: scale(var(--eui-press-scale));
}

.eui-button:focus-visible {
  outline: none;
  box-shadow: var(--eui-ring);
}

.eui-button:disabled,
.eui-button[aria-disabled="true"] {
  opacity: 0.5;
  pointer-events: none;
}

.eui-button .eui-icon {
  width: 1.15em;
  height: 1.15em;
}

/* Capa apenas elevada con borde: la segunda acción. */
.eui-button--secondary {
  border-color: var(--color-border);
  background: var(--color-raised);
  color: var(--color-foreground);
}

.eui-button--secondary:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-hover);
}

.eui-button--outline {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-foreground);
}

.eui-button--outline:hover {
  border-color: var(--color-border-hover);
  background: var(--color-surface-hover);
}

/* Sin capa: acciones de menor peso y de barra. */
.eui-button--ghost {
  background: transparent;
  color: var(--color-muted-foreground);
}

.eui-button--ghost:hover {
  background: var(--color-surface-hover);
  color: var(--color-foreground);
}

.eui-button--danger {
  background: var(--color-destructive);
  color: var(--color-destructive-foreground);
}

.eui-button--danger:hover {
  background: var(--color-destructive);
  opacity: 0.9;
}

.eui-button--sm {
  height: var(--eui-control-sm);
  padding-inline: var(--eui-pad-sm);
  font-size: var(--text-xs);
}

.eui-button--lg {
  height: var(--eui-control-lg);
  padding-inline: var(--eui-pad-lg);
  font-size: var(--text-base);
}

.eui-button--block {
  width: 100%;
}

/* Solo un ícono: cuadrado. Lleva aria-label. */
.eui-button--icon {
  width: var(--eui-control-md);
  padding-inline: 0;
}

.eui-button--icon.eui-button--sm {
  width: var(--eui-control-sm);
}

/* La corona: el resplandor de LA acción de la vista. Una por página. */
.eui-button--corona {
  box-shadow: var(--shadow-glow);
}

.eui-button--corona:focus-visible {
  box-shadow: var(--eui-ring), var(--shadow-glow);
}

/* ── Campos ───────────────────────────────────────────────────────────── */

/* Etiqueta, control, ayuda y error, en columna. Cada control con su <label>;
 * la ayuda y el error se enlazan con aria-describedby. */
.eui-field {
  display: grid;
  gap: 0.375rem;
}

.eui-field__label {
  font-size: var(--text-sm);
  line-height: 1.25rem;
  font-weight: 500;
  color: var(--color-foreground);
}

.eui-field__hint {
  font-size: var(--text-xs);
  line-height: 1rem;
  color: var(--color-muted-foreground);
}

.eui-field__error {
  display: flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: var(--text-xs);
  line-height: 1rem;
  font-weight: 500;
  color: var(--color-destructive);
}

/* input, select y textarea. 16px en el teléfono: iOS no hace zoom al enfocar. */
.eui-input {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--eui-control-md);
  padding-inline: 0.875rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-field);
  background: var(--color-card);
  color: var(--color-foreground);
  font-size: var(--text-base);
  transition-property: border-color, background-color, box-shadow;
  transition-duration: var(--eui-dur-quick);
  transition-timing-function: var(--eui-ease-exhale);
}

@media (min-width: 640px) {
  .eui-input {
    font-size: var(--text-sm);
  }
}

.eui-input::placeholder {
  color: var(--color-faint);
  opacity: 1;
}

.eui-input:hover,
.eui-input:focus-visible {
  border-color: var(--color-border-hover);
}

.eui-input[aria-invalid="true"] {
  border-color: color-mix(in oklab, var(--color-destructive) 60%, transparent);
}

.eui-input[aria-invalid="true"]:hover,
.eui-input[aria-invalid="true"]:focus-visible {
  border-color: var(--color-destructive);
}

.eui-input:disabled {
  cursor: not-allowed;
  background: var(--color-raised);
  opacity: 0.5;
}

textarea.eui-input {
  height: auto;
  min-height: 6rem;
  padding-block: 0.625rem;
  line-height: 1.5;
  resize: vertical;
}

select.eui-input {
  appearance: none;
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-muted-foreground) 50%),
    linear-gradient(135deg, var(--color-muted-foreground) 50%, transparent 50%);
  background-position:
    right 1.05rem center,
    right 0.75rem center;
  background-size: 0.3rem 0.3rem;
  background-repeat: no-repeat;
}

/* Casilla o radio con su texto al lado. */
.eui-check {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: var(--text-sm);
  line-height: 1.25rem;
  cursor: pointer;
}

.eui-check input {
  width: 1rem;
  height: 1rem;
  margin: 0.125rem 0 0;
  flex: none;
  accent-color: var(--color-primary);
}

/* ── Superficies ──────────────────────────────────────────────────────── */

/* Profundidad por capas: tarjeta sobre el fondo, con borde y sin sombra. */
.eui-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  color: var(--color-card-foreground);
  padding: var(--eui-pad-md);
}

.eui-card--lg {
  padding: var(--eui-pad-lg);
}

.eui-card--flush {
  padding: 0;
  overflow: hidden;
}

/* La capa elevada: barras, paneles laterales, lo que enmarca. */
.eui-panel {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-raised);
}

/* Lo único que lleva sombra: lo que flota sobre lo demás. */
.eui-floating {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  box-shadow: var(--shadow-elevated);
}

/* ── Marcas ───────────────────────────────────────────────────────────── */

/* Pastilla de estado: el punto lleva el tono y el texto dice cuál es (el
 * color nunca va solo). --success, --warning, --danger, --accent. */
.eui-pill {
  --eui-pill-tone: var(--color-subtle);
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.125rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background: var(--color-raised);
  color: var(--color-foreground);
  font-size: var(--text-2xs);
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.eui-pill::before {
  content: "";
  width: 0.375rem;
  height: 0.375rem;
  flex: none;
  border-radius: 9999px;
  background: var(--eui-pill-tone);
}

.eui-pill--success { --eui-pill-tone: var(--color-success); }
.eui-pill--warning { --eui-pill-tone: var(--color-warning); }
.eui-pill--danger { --eui-pill-tone: var(--color-destructive); }
.eui-pill--accent { --eui-pill-tone: var(--color-primary); }

/* Insignia: una etiqueta corta (un plan, "Nuevo", "-20 %"). */
.eui-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.625rem;
  border: 1px solid transparent;
  border-radius: 9999px;
  background: var(--color-secondary);
  color: var(--color-secondary-foreground);
  font-size: var(--text-xs);
  line-height: 1rem;
  font-weight: 500;
  white-space: nowrap;
}

.eui-badge--brand {
  background: var(--color-primary);
  color: var(--color-primary-foreground);
}

.eui-badge--soft {
  background: var(--eui-brand-wash);
  color: var(--color-foreground);
}

.eui-badge--outline {
  border-color: var(--color-border);
  background: transparent;
  color: var(--color-foreground);
}

.eui-avatar {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  overflow: hidden;
  border-radius: 9999px;
  background: var(--color-muted);
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
}

.eui-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.eui-avatar--sm {
  width: 2rem;
  height: 2rem;
  font-size: var(--text-xs);
}

.eui-avatar--lg {
  width: 3.5rem;
  height: 3.5rem;
  font-size: var(--text-lg);
}

/* ── Aviso ────────────────────────────────────────────────────────────── */

/* Capa y borde como todo; el tono vive solo en el ícono y su cuadrito.
 * --success, --warning, --danger. Los urgentes van con role="alert". */
.eui-alert {
  --eui-alert-tone: var(--color-muted-foreground);
  --eui-alert-ink: var(--color-muted-foreground);
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
  font-size: var(--text-sm);
  line-height: 1.25rem;
}

.eui-alert--success { --eui-alert-tone: var(--color-success); }
.eui-alert--warning { --eui-alert-tone: var(--color-warning); }
.eui-alert--danger { --eui-alert-tone: var(--color-destructive); }

.eui-alert:is(.eui-alert--success, .eui-alert--warning, .eui-alert--danger) {
  --eui-alert-ink: color-mix(in oklab, var(--eui-alert-tone) 75%, var(--color-foreground));
}

.eui-alert__icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-raised);
  color: var(--eui-alert-ink);
}

.eui-alert:is(.eui-alert--success, .eui-alert--warning, .eui-alert--danger) .eui-alert__icon {
  border-color: color-mix(in oklab, var(--eui-alert-tone) 25%, var(--color-card));
  background: color-mix(in oklab, var(--eui-alert-tone) 10%, var(--color-card));
}

.eui-alert__title {
  font-weight: 500;
  color: var(--color-foreground);
}

.eui-alert__text {
  color: color-mix(in oklab, var(--color-muted-foreground) 88%, var(--color-foreground));
}

/* ── Navegación ───────────────────────────────────────────────────────── */

/* Un enlace de navegación (barra o lateral). La página actual con
 * aria-current="page". */
.eui-navlink {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  min-height: var(--eui-control-sm);
  padding-inline: 0.625rem;
  border-radius: var(--radius-md);
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
  font-weight: 500;
  transition-property: background-color, color;
  transition-duration: var(--eui-dur-quick);
  transition-timing-function: var(--eui-ease-exhale);
}

.eui-navlink:hover {
  background: var(--color-surface-hover);
  color: var(--color-foreground);
}

.eui-navlink[aria-current="page"] {
  background: var(--color-surface-hover);
  color: var(--color-foreground);
}

.eui-navlink .eui-icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* Control segmentado: opciones excluyentes (radios) en una cápsula. La
 * elegida sube a la capa de tarjeta. Funciona sin JS. */
.eui-segmented {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border: 1px solid var(--color-border);
  border-radius: calc(var(--radius-button) + 0.25rem);
  background: var(--color-raised);
}

.eui-segmented label {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: var(--eui-control-sm);
  padding-inline: 0.875rem;
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  color: var(--color-muted-foreground);
  font-size: var(--text-sm);
  font-weight: var(--eui-control-weight, 500);
  letter-spacing: var(--eui-control-tracking, normal);
  text-transform: var(--eui-control-case, none);
  cursor: pointer;
  transition-property: background-color, border-color, color;
  transition-duration: var(--eui-dur-quick);
  transition-timing-function: var(--eui-ease-exhale);
}

.eui-segmented input {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.eui-segmented label:hover {
  color: var(--color-foreground);
}

.eui-segmented label:has(input:checked) {
  border-color: var(--color-border);
  background: var(--color-card);
  color: var(--color-foreground);
}

.eui-segmented label:has(input:focus-visible) {
  box-shadow: var(--eui-ring);
}

/* Preguntas que se abren (details/summary). */
.eui-disclosure {
  border-bottom: 1px solid var(--color-border);
}

.eui-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}

.eui-disclosure summary::-webkit-details-marker {
  display: none;
}

.eui-disclosure summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  flex: none;
  margin-right: 0.25rem;
  border-right: 1.5px solid var(--color-muted-foreground);
  border-bottom: 1.5px solid var(--color-muted-foreground);
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--eui-dur-calm) var(--eui-ease-exhale);
}

.eui-disclosure[open] summary::after {
  transform: translateY(25%) rotate(-135deg);
}

.eui-disclosure > :not(summary) {
  padding-bottom: 1rem;
  color: var(--color-muted-foreground);
}

/* ── Datos ────────────────────────────────────────────────────────────── */

/* La tabla va dentro de .eui-table-wrap: capa, borde y desplazamiento
 * horizontal en el teléfono. Las cifras en columna con .is-numeric. */
.eui-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}

.eui-table {
  width: 100%;
  font-size: var(--text-compact);
  line-height: var(--text-compact--line-height);
}

.eui-table th {
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-raised);
  color: var(--color-muted-foreground);
  font-size: var(--text-xs);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}

.eui-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
}

.eui-table tbody tr:last-child td {
  border-bottom: 0;
}

.eui-table tbody tr {
  transition: background-color var(--eui-dur-quick) var(--eui-ease-exhale);
}

.eui-table tbody tr:hover {
  background: var(--color-surface-hover);
}

.eui-table .is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

/* Un indicador: su nombre, la cifra y cómo va. */
.eui-stat {
  display: grid;
  gap: 0.5rem;
}

.eui-stat__label {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted-foreground);
}

.eui-stat__value {
  font-family: var(--font-heading);
  font-size: var(--text-3xl);
  line-height: 1;
  font-weight: var(--eui-display-weight);
  letter-spacing: var(--eui-display-tracking);
  font-variant-numeric: tabular-nums lining-nums;
}

/* Cómo va: con flecha o signo, no solo con color. --good y --bad dicen si
 * es buena o mala noticia (menos ausencias es --good aunque baje). */
.eui-delta {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-muted-foreground);
}

.eui-delta .eui-icon {
  width: 1rem;
  height: 1rem;
}

.eui-delta--good {
  color: color-mix(in oklab, var(--color-success) 70%, var(--color-foreground));
}

.eui-delta--bad {
  color: color-mix(in oklab, var(--color-destructive) 70%, var(--color-foreground));
}