/* ============================================================
   TERRAMAR AGRÍCOLA · components.css
   Componentes vendorizados del design system de SISEG (clase .ds-*).
   Copiados verbatim del kit — usan SOLO variables de tokens.css, por
   lo que quedan repintados por terramar-brand.css (Capa 2).
   Orden de carga: tokens.css → terramar-brand.css → components.css → site.css
   Vendorizados: button · card · chip · text-field · alert
   Fuente: 000-Plantillas_MotoCMS/design-system/kit/components/
   ============================================================ */

/* ============================================================
   [button.css]
   ============================================================ */
/* ============================================================
   SISEG Design System · button
   Piel MotoCMS · CSS puro · usa solo tokens de tokens.css
   Variantes: contained / outlined / text / soft
   Tamaños:   sm(30) / md(36) / lg(48) / xl(56) minHeight
   Colores:   primary / secondary / info / success / warning / error
   ============================================================ */

.ds-button {
  /* canal de color por defecto: primary */
  --ds-btn-main: var(--palette-primary-main);
  --ds-btn-dark: var(--palette-primary-dark);
  --ds-btn-lighter: var(--palette-primary-lighter);
  --ds-btn-contrast: var(--palette-primary-contrastText);

  /* defaults de tamaño = md */
  --ds-btn-min-h: 36px;
  --ds-btn-pad-y: var(--space-0_5);
  --ds-btn-pad-x: var(--space-1_5);
  --ds-btn-font: 14px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-height: var(--ds-btn-min-h);
  padding: var(--ds-btn-pad-y) var(--ds-btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: var(--ds-btn-font);
  font-weight: var(--fw-bold);
  line-height: 1.3;
  text-transform: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  background: transparent;
  color: var(--ds-btn-main);
  transition: background-color .2s ease, color .2s ease,
              border-color .2s ease, box-shadow .25s ease;
}

.ds-button__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15em;
  line-height: 0;
}

/* ----- Modificadores de COLOR (definen el canal) ----- */
.ds-button--primary   { --ds-btn-main: var(--palette-primary-main);   --ds-btn-dark: var(--palette-primary-dark);   --ds-btn-lighter: var(--palette-primary-lighter);   --ds-btn-contrast: var(--palette-primary-contrastText); }
.ds-button--secondary { --ds-btn-main: var(--palette-secondary-main); --ds-btn-dark: var(--palette-secondary-dark); --ds-btn-lighter: var(--palette-secondary-lighter); --ds-btn-contrast: var(--palette-secondary-contrastText); }
.ds-button--info      { --ds-btn-main: var(--palette-info-main);      --ds-btn-dark: var(--palette-info-dark);      --ds-btn-lighter: var(--palette-info-lighter);      --ds-btn-contrast: var(--palette-info-contrastText); }
.ds-button--success   { --ds-btn-main: var(--palette-success-main);   --ds-btn-dark: var(--palette-success-dark);   --ds-btn-lighter: var(--palette-success-lighter);   --ds-btn-contrast: var(--palette-success-contrastText); }
.ds-button--warning   { --ds-btn-main: var(--palette-warning-main);   --ds-btn-dark: var(--palette-warning-dark);   --ds-btn-lighter: var(--palette-warning-lighter);   --ds-btn-contrast: var(--palette-warning-contrastText); }
.ds-button--error     { --ds-btn-main: var(--palette-error-main);     --ds-btn-dark: var(--palette-error-dark);     --ds-btn-lighter: var(--palette-error-lighter);     --ds-btn-contrast: var(--palette-error-contrastText); }

/* ----- Tamaños ----- */
.ds-button--sm { --ds-btn-min-h: 30px; --ds-btn-pad-y: var(--space-0_5); --ds-btn-pad-x: var(--space-1);   --ds-btn-font: 13px; }
.ds-button--md { --ds-btn-min-h: 36px; --ds-btn-pad-y: var(--space-0_5); --ds-btn-pad-x: var(--space-1_5); --ds-btn-font: 14px; }
.ds-button--lg { --ds-btn-min-h: 48px; --ds-btn-pad-y: var(--space-1);   --ds-btn-pad-x: var(--space-2);   --ds-btn-font: 15px; }
.ds-button--xl { --ds-btn-min-h: 56px; --ds-btn-pad-y: var(--space-1_5); --ds-btn-pad-x: var(--space-3);   --ds-btn-font: 15px; }

/* ============================================================
   VARIANTE: contained (relleno sólido)
   reposo sin sombra (disableElevation); sombra coloreada en hover
   ============================================================ */
.ds-button--contained {
  background: var(--ds-btn-main);
  color: var(--ds-btn-contrast);
  border-color: transparent;
}
.ds-button--contained:hover {
  background: var(--ds-btn-dark);
  box-shadow: 0 8px 16px 0 color-mix(in srgb, var(--ds-btn-main) 40%, transparent);
}
.ds-button--contained:active { box-shadow: var(--shadow-z4); }

/* ============================================================
   VARIANTE: outlined (solo borde)
   hover: borde sólido + ring + fondo translúcido
   ============================================================ */
.ds-button--outlined {
  background: transparent;
  color: var(--ds-btn-main);
  border-color: color-mix(in srgb, var(--ds-btn-main) 48%, transparent);
}
.ds-button--outlined:hover {
  border-color: var(--ds-btn-main);
  background: color-mix(in srgb, var(--ds-btn-main) 8%, transparent);
  box-shadow: 0 0 0 0.75px var(--ds-btn-main);
}

/* ============================================================
   VARIANTE: text (sin borde ni fondo)
   ============================================================ */
.ds-button--text {
  background: transparent;
  color: var(--ds-btn-main);
  border-color: transparent;
}
.ds-button--text:hover {
  background: color-mix(in srgb, var(--ds-btn-main) 10%, transparent);
}

/* ============================================================
   VARIANTE: soft (relleno translúcido suave)
   ============================================================ */
.ds-button--soft {
  background: color-mix(in srgb, var(--ds-btn-main) 16%, transparent);
  color: var(--ds-btn-dark);
  border-color: transparent;
}
.ds-button--soft:hover {
  background: color-mix(in srgb, var(--ds-btn-main) 28%, transparent);
}

/* ----- Foco visible accesible (todas las variantes) ----- */
.ds-button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ds-btn-main) 32%, transparent);
}

/* ----- Disabled ----- */
.ds-button[disabled],
.ds-button:disabled {
  cursor: default;
  pointer-events: none;
  box-shadow: none;
  color: var(--text-disabled);
  border-color: transparent;
  background: transparent;
}
.ds-button--contained[disabled],
.ds-button--contained:disabled,
.ds-button--soft[disabled],
.ds-button--soft:disabled {
  background: var(--action-disabledBackground);
  color: var(--text-disabled);
}
.ds-button--outlined[disabled],
.ds-button--outlined:disabled {
  border-color: var(--action-disabledBackground);
}

/* ============================================================
   [card.css]
   ============================================================ */
/* ============================================================
   CARD · Tarjeta base — piel MotoCMS
   Radio generoso, sombra suave, hover lift.
   ============================================================ */

.ds-card {
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--bg-paper);
  color: var(--text-primary);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition:
    transform .28s cubic-bezier(.4, 0, .2, 1),
    box-shadow .28s cubic-bezier(.4, 0, .2, 1);
}

/* Hover lift: sube y gana sombra */
.ds-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-z16);
}

/* --- Media (imagen arriba) --- */
.ds-card__media {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  background-color: var(--bg-neutral);
}

/* --- Cuerpo --- */
.ds-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
}

.ds-card__title {
  margin: 0;
  font-family: var(--font-secondary);
  font-weight: var(--fw-semiBold);
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--text-primary);
}

.ds-card__text {
  margin: 0;
  font-family: var(--font-primary);
  font-size: .9375rem;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Acciones --- */
.ds-card__actions {
  display: flex;
  align-items: center;
  gap: var(--space-1_5);
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-top: auto;
}

.ds-card__action {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-primary);
  font-weight: var(--fw-semiBold);
  font-size: .875rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background-color: transparent;
  color: var(--palette-primary-main);
  transition: background-color .2s ease;
}

.ds-card__action:hover {
  background-color: color-mix(in srgb, var(--palette-primary-main) 8%, transparent);
}

/* --- Variante: simple (solo cuerpo, sin media) --- */
.ds-card--simple .ds-card__body {
  padding: var(--space-4);
}

/* --- Variante: outline (sin sombra, con borde) --- */
.ds-card--outline {
  box-shadow: none;
  border: 1px solid var(--divider);
}

.ds-card--outline:hover {
  box-shadow: var(--shadow-z8);
  border-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .ds-card,
  .ds-card:hover {
    transition: none;
    transform: none;
  }
}

/* ============================================================
   [chip.css]
   ============================================================ */
/* ============================================================
   SISEG Design System · chip
   Piel MotoCMS · CSS puro · usa solo tokens de tokens.css
   Variantes: filled / outlined / soft
   Tamaños:   sm / md
   Colores:   default + primary / secondary / info / success / warning / error
   Extras:    con icono · deletable (x)
   ============================================================ */

.ds-chip {
  /* canal por defecto: default (gris) */
  --ds-chip-main: var(--grey-600);
  --ds-chip-dark: var(--grey-700);
  --ds-chip-contrast: var(--common-white);

  --ds-chip-h: 32px;
  --ds-chip-pad-x: var(--space-1_5);
  --ds-chip-font: 13px;
  --ds-chip-radius: var(--radius-md);

  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--ds-chip-h);
  padding: 0 var(--ds-chip-pad-x);
  border: 1px solid transparent;
  border-radius: var(--ds-chip-radius);
  font-family: var(--font-primary);
  font-size: var(--ds-chip-font);
  font-weight: var(--fw-medium);
  line-height: 1;
  white-space: nowrap;
  background: transparent;
  color: var(--text-primary);
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.ds-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05em;
  line-height: 0;
  margin-left: calc(var(--space-0_5) * -1);
}

/* botón de borrado (x) */
.ds-chip__delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-right: calc(var(--space-0_5) * -1);
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  color: currentColor;
  background: transparent;
  opacity: .48;
  transition: opacity .2s ease, background-color .2s ease;
}
.ds-chip__delete:hover { opacity: .9; background: color-mix(in srgb, currentColor 16%, transparent); }
.ds-chip__delete:focus-visible { outline: none; opacity: 1; box-shadow: 0 0 0 2px color-mix(in srgb, currentColor 40%, transparent); }

/* ----- Modificadores de COLOR ----- */
.ds-chip--primary   { --ds-chip-main: var(--palette-primary-main);   --ds-chip-dark: var(--palette-primary-dark);   --ds-chip-contrast: var(--palette-primary-contrastText); }
.ds-chip--secondary { --ds-chip-main: var(--palette-secondary-main); --ds-chip-dark: var(--palette-secondary-dark); --ds-chip-contrast: var(--palette-secondary-contrastText); }
.ds-chip--info      { --ds-chip-main: var(--palette-info-main);      --ds-chip-dark: var(--palette-info-dark);      --ds-chip-contrast: var(--palette-info-contrastText); }
.ds-chip--success   { --ds-chip-main: var(--palette-success-main);   --ds-chip-dark: var(--palette-success-dark);   --ds-chip-contrast: var(--palette-success-contrastText); }
.ds-chip--warning   { --ds-chip-main: var(--palette-warning-main);   --ds-chip-dark: var(--palette-warning-dark);   --ds-chip-contrast: var(--palette-warning-contrastText); }
.ds-chip--error     { --ds-chip-main: var(--palette-error-main);     --ds-chip-dark: var(--palette-error-dark);     --ds-chip-contrast: var(--palette-error-contrastText); }

/* ----- Tamaños ----- */
.ds-chip--sm { --ds-chip-h: 24px; --ds-chip-pad-x: var(--space-1);   --ds-chip-font: 12px; --ds-chip-radius: var(--radius-sm); }
.ds-chip--md { --ds-chip-h: 32px; --ds-chip-pad-x: var(--space-1_5); --ds-chip-font: 13px; --ds-chip-radius: var(--radius-md); }

/* ----- VARIANTE filled ----- */
.ds-chip--filled {
  background: var(--ds-chip-main);
  color: var(--ds-chip-contrast);
}
.ds-chip--filled.ds-chip--default { background: var(--grey-300); color: var(--text-primary); }

/* ----- VARIANTE outlined ----- */
.ds-chip--outlined {
  background: transparent;
  color: var(--ds-chip-main);
  border-color: color-mix(in srgb, var(--ds-chip-main) 48%, transparent);
}
.ds-chip--outlined.ds-chip--default { color: var(--text-primary); border-color: var(--divider); }

/* ----- VARIANTE soft (default de Minimals; aquí explícita) ----- */
.ds-chip--soft {
  background: color-mix(in srgb, var(--ds-chip-main) 16%, transparent);
  color: var(--ds-chip-dark);
}
.ds-chip--soft.ds-chip--default { background: var(--action-selected); color: var(--text-primary); }

/* ----- Disabled ----- */
.ds-chip[aria-disabled="true"],
.ds-chip--disabled {
  pointer-events: none;
  color: var(--action-disabled);
  background: var(--action-disabledBackground);
  border-color: transparent;
}

/* ============================================================
   [text-field.css]
   ============================================================ */
/* ===========================================================================
   SISEG Design System · text-field
   Variantes: outlined (default) / filled / standard
   Tamaños: sm / md
   Estados: focus / error / disabled
   Piel MotoCMS · CSS original
   =========================================================================== */

.ds-text-field {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-0_5);
  font-family: var(--font-primary);
  min-width: 240px;
}

/* --- Etiqueta ------------------------------------------------------------- */
.ds-text-field__label {
  font-size: 13px;
  font-weight: var(--fw-semiBold);
  line-height: 1.4;
  color: var(--text-secondary);
  letter-spacing: 0.1px;
  transition: color 0.18s ease;
}

/* --- Caja del input ------------------------------------------------------- */
.ds-text-field__control {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.ds-text-field__input {
  width: 100%;
  font-family: inherit;
  font-size: 15px;
  line-height: 24px;
  color: var(--text-primary);
  background: transparent;
  border: none;
  outline: none;
  box-sizing: border-box;
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.ds-text-field__input::placeholder {
  color: var(--text-disabled);
  opacity: 1;
}

@media (max-width: 600px) {
  .ds-text-field__input { font-size: 16px; }
}

/* --- Helper text ---------------------------------------------------------- */
.ds-text-field__helper {
  display: inline-flex;
  align-items: center;
  gap: var(--space-0_5);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-secondary);
}

.ds-text-field__helper::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

/* ===========================================================================
   Variante OUTLINED
   =========================================================================== */
.ds-text-field--outlined .ds-text-field__control {
  border: 1px solid var(--divider);
  border-radius: var(--radius-md);
  background: var(--bg-paper);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.ds-text-field--outlined .ds-text-field__control:hover {
  border-color: var(--text-secondary);
}

.ds-text-field--outlined .ds-text-field__control:focus-within {
  border-color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--text-primary);
}

/* ===========================================================================
   Variante FILLED
   =========================================================================== */
.ds-text-field--filled .ds-text-field__control {
  border: none;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--grey-500) 8%, transparent);
  transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.ds-text-field--filled .ds-text-field__control:hover {
  background: color-mix(in srgb, var(--grey-500) 16%, transparent);
}

.ds-text-field--filled .ds-text-field__control:focus-within {
  background: color-mix(in srgb, var(--grey-500) 16%, transparent);
  box-shadow: inset 0 0 0 1px var(--text-primary);
}

/* ===========================================================================
   Variante STANDARD
   =========================================================================== */
.ds-text-field--standard .ds-text-field__control {
  border: none;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  background: transparent;
}

.ds-text-field--standard .ds-text-field__control::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--text-primary);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.ds-text-field--standard .ds-text-field__control:hover {
  border-bottom-color: var(--text-secondary);
}

.ds-text-field--standard .ds-text-field__control:focus-within::after {
  transform: scaleX(1);
}

/* ===========================================================================
   Tamaños
   =========================================================================== */
.ds-text-field--sm .ds-text-field__input { padding: var(--space-1) 0; }
.ds-text-field--md .ds-text-field__input { padding: var(--space-2) 0; }

.ds-text-field--outlined.ds-text-field--sm .ds-text-field__input,
.ds-text-field--filled.ds-text-field--sm   .ds-text-field__input { padding-left: var(--space-1_5); padding-right: var(--space-1_5); }
.ds-text-field--outlined.ds-text-field--md .ds-text-field__input,
.ds-text-field--filled.ds-text-field--md   .ds-text-field__input { padding-left: var(--space-2); padding-right: var(--space-2); }

.ds-text-field--filled.ds-text-field--sm .ds-text-field__input { padding-top: var(--space-1_5); padding-bottom: var(--space-1); }
.ds-text-field--filled.ds-text-field--md .ds-text-field__input { padding-top: var(--space-3); padding-bottom: var(--space-2); }

/* ===========================================================================
   Estado ERROR
   =========================================================================== */
.ds-text-field.is-error .ds-text-field__label { color: var(--palette-error-main); }
.ds-text-field.is-error .ds-text-field__helper { color: var(--palette-error-main); }

.ds-text-field--outlined.is-error .ds-text-field__control,
.ds-text-field--outlined.is-error .ds-text-field__control:hover {
  border-color: var(--palette-error-main);
}
.ds-text-field--outlined.is-error .ds-text-field__control:focus-within {
  box-shadow: inset 0 0 0 1px var(--palette-error-main);
}

.ds-text-field--filled.is-error .ds-text-field__control {
  background: color-mix(in srgb, var(--palette-error-main) 8%, transparent);
}
.ds-text-field--filled.is-error .ds-text-field__control:hover,
.ds-text-field--filled.is-error .ds-text-field__control:focus-within {
  background: color-mix(in srgb, var(--palette-error-main) 16%, transparent);
  box-shadow: inset 0 0 0 1px var(--palette-error-main);
}

.ds-text-field--standard.is-error .ds-text-field__control { border-bottom-color: var(--palette-error-main); }
.ds-text-field--standard.is-error .ds-text-field__control::after { background: var(--palette-error-main); transform: scaleX(1); }

/* ===========================================================================
   Estado DISABLED
   =========================================================================== */
.ds-text-field__input:disabled {
  color: var(--text-disabled);
  cursor: not-allowed;
  -webkit-text-fill-color: var(--text-disabled);
}
.ds-text-field__input:disabled::placeholder { color: var(--action-disabled); }

.ds-text-field--outlined .ds-text-field__control:has(.ds-text-field__input:disabled) {
  border-color: var(--action-disabledBackground);
  background: transparent;
}
.ds-text-field--filled .ds-text-field__control:has(.ds-text-field__input:disabled) {
  background: var(--action-disabledBackground);
  box-shadow: none;
}
.ds-text-field--standard .ds-text-field__control:has(.ds-text-field__input:disabled) {
  border-bottom-style: dotted;
  border-bottom-color: var(--action-disabledBackground);
}
.ds-text-field:has(.ds-text-field__input:disabled) .ds-text-field__label { color: var(--action-disabled); }

/* Accesibilidad: foco visible para navegación por teclado.
   El borde/box-shadow de cada variante ya indica el foco; añadimos un anillo
   primario sutil cuando el foco llega por teclado. */
.ds-text-field__control:focus-within {
  outline: 2px solid color-mix(in srgb, var(--palette-primary-main) 40%, transparent);
  outline-offset: 2px;
}

/* ============================================================
   [alert.css]
   ============================================================ */
/* ============================================================
   SISEG Design System · alert
   Piel MotoCMS · CSS puro · usa solo tokens de tokens.css
   Variantes: standard / filled / outlined
   Severidades (color de sistema): info / success / warning / error
   ============================================================ */

.ds-alert {
  /* canal por defecto: info */
  --ds-alert-main: var(--palette-info-main);
  --ds-alert-dark: var(--palette-info-dark);
  --ds-alert-darker: var(--palette-info-darker);
  --ds-alert-lighter: var(--palette-info-lighter);
  --ds-alert-contrast: var(--palette-info-contrastText);

  display: flex;
  align-items: flex-start;
  gap: var(--space-1_5);
  padding: var(--space-1_5) var(--space-2);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-family: var(--font-primary);
  font-size: 14px;
  line-height: 1.5;
  background: transparent;
  color: var(--text-primary);
}

.ds-alert__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  font-size: 18px;
  line-height: 0;
}

.ds-alert__content { flex: 1 1 auto; min-width: 0; }

.ds-alert__title {
  display: block;
  margin: 0 0 var(--space-0_5);
  font-weight: var(--fw-semiBold);
  font-size: 15px;
  line-height: 1.4;
}

.ds-alert__message { display: block; }

/* ----- Modificadores de SEVERIDAD ----- */
.ds-alert--info    { --ds-alert-main: var(--palette-info-main);    --ds-alert-dark: var(--palette-info-dark);    --ds-alert-darker: var(--palette-info-darker);    --ds-alert-lighter: var(--palette-info-lighter);    --ds-alert-contrast: var(--palette-info-contrastText); }
.ds-alert--success { --ds-alert-main: var(--palette-success-main); --ds-alert-dark: var(--palette-success-dark); --ds-alert-darker: var(--palette-success-darker); --ds-alert-lighter: var(--palette-success-lighter); --ds-alert-contrast: var(--palette-success-contrastText); }
.ds-alert--warning { --ds-alert-main: var(--palette-warning-main); --ds-alert-dark: var(--palette-warning-dark); --ds-alert-darker: var(--palette-warning-darker); --ds-alert-lighter: var(--palette-warning-lighter); --ds-alert-contrast: var(--palette-warning-contrastText); }
.ds-alert--error   { --ds-alert-main: var(--palette-error-main);   --ds-alert-dark: var(--palette-error-dark);   --ds-alert-darker: var(--palette-error-darker);   --ds-alert-lighter: var(--palette-error-lighter);   --ds-alert-contrast: var(--palette-error-contrastText); }

/* ----- VARIANTE standard (suave) ----- */
.ds-alert--standard {
  background: var(--ds-alert-lighter);
  color: var(--ds-alert-darker);
}
.ds-alert--standard .ds-alert__icon { color: var(--ds-alert-main); }

/* ----- VARIANTE filled (sólida) ----- */
.ds-alert--filled {
  background: var(--ds-alert-main);
  color: var(--ds-alert-contrast);
}
.ds-alert--filled .ds-alert__icon { color: var(--ds-alert-contrast); }

/* ----- VARIANTE outlined (borde + fondo translúcido) ----- */
.ds-alert--outlined {
  background: color-mix(in srgb, var(--ds-alert-main) 8%, transparent);
  border-color: color-mix(in srgb, var(--ds-alert-main) 16%, transparent);
  color: var(--ds-alert-dark);
}
.ds-alert--outlined .ds-alert__icon { color: var(--ds-alert-main); }

/* invertir shades en esquema oscuro para contraste */
[data-scheme="dark"] .ds-alert--standard {
  background: var(--ds-alert-darker);
  color: var(--ds-alert-lighter);
}
[data-scheme="dark"] .ds-alert--standard .ds-alert__icon,
[data-scheme="dark"] .ds-alert--outlined,
[data-scheme="dark"] .ds-alert--outlined .ds-alert__icon { color: var(--ds-alert-light, var(--ds-alert-lighter)); }


/* ============================================================
   [eyebrow.css]  — AÑADIDO al DS (recurrente: ecocampo, alpeschiclayo, terramar)
   ============================================================ */
/* ============================================================
   SISEG Design System · eyebrow
   Antetítulo / kicker: sans en mayúsculas con hairline.
   Color por canal (default = secondary). Usa solo tokens.
   ============================================================ */
.ds-eyebrow {
  --ds-eyebrow-main: var(--palette-secondary-main);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1_5);
  font-family: var(--font-primary);
  font-size: 0.875rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-eyebrow-main);
}
.ds-eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--ds-eyebrow-main);
}
.ds-eyebrow--primary { --ds-eyebrow-main: var(--palette-primary-main); }
.ds-eyebrow--center  { justify-content: center; }
/* Sobre fondos oscuros/foto: claro */
.ds-eyebrow--on-dark { --ds-eyebrow-main: #FFFFFF; }
.ds-eyebrow--lime    { --ds-eyebrow-main: var(--brand-lime, #C3F27D); }

/* ============================================================
   [button.css · variante AÑADIDA] ghost
   Transparente con borde claro + blur. Para hero/CTA sobre foto.
   Color-agnóstica: siempre clara (legible sobre imagen oscura).
   ============================================================ */
.ds-button--ghost {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
  border-color: rgba(255, 255, 255, 0.40);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.ds-button--ghost:hover {
  border-color: #FFFFFF;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: none;
}

/* ============================================================
   [button.css · canal de color AÑADIDO] accent = verde olivo vegetal
   Para CTAs que deben resaltar sobre fondos verde oscuro / foto.
   ============================================================ */
.ds-button--accent {
  --ds-btn-main: var(--palette-primary-light);   /* olivo #6F982F */
  --ds-btn-dark: #5C7F26;
  --ds-btn-lighter: var(--palette-primary-lighter);
  --ds-btn-contrast: #FFFFFF;
}