/* Celosía — capa de componentes propios (no vendored). Carga DESPUÉS de
   celosia-bootstrap.css y ANTES de site.css (orden fijo, ver inc_menu.php).
   Regla de diseño de todo el fichero: cero box-shadow/transform como
   afordancia (Mística no tiene sistema de elevación). Detalle: docs/adr/. */

.ce-card {
  display: block;
  position: relative;
  background-color: var(--ce-color-semantic-surface);
  border: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
  border-radius: var(--ce-size-radius-container);
  padding: var(--ce-space-4);
  transition: background-color var(--ce-duration-fast);
}

/* position:relative es el contexto que necesita .stretched-link (Bootstrap) para tarjetas clicables enteras. */

/* :focus-within (NO quitar, es el foco visible por teclado de WCAG 2.4.7) — sin hover a propósito. */
.ce-card:focus-within {
  background-color: var(--ce-color-semantic-surface-sunken);
}

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

.ce-card--flush > :first-child {
  display: block;
  width: 100%;
}

/* .ce-notice: severidad SIEMPRE por forma de icono + texto, nunca por background-color (hard rule accesibilidad). */
.ce-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--ce-space-3);
  background-color: var(--ce-color-semantic-surface-sunken);
  border: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
  border-radius: var(--ce-size-radius-container);
  padding: var(--ce-space-4);
  color: var(--ce-color-semantic-text-primary);
}

.ce-notice__icono {
  flex-shrink: 0;
  font-size: var(--ce-font-size-lg);
  line-height: var(--ce-font-leading-tight);
}

.ce-notice__contenido {
  flex: 1 1 auto;
}

.ce-notice--info .ce-notice__icono {
  color: var(--ce-color-state-info);
}

.ce-notice--success .ce-notice__icono {
  color: var(--ce-color-state-success);
}

.ce-notice--warning .ce-notice__icono {
  color: var(--ce-color-state-warning);
}

.ce-notice--danger .ce-notice__icono {
  color: var(--ce-color-state-danger);
}

.ce-tag {
  display: inline-block;
  background-color: var(--ce-color-semantic-surface-sunken);
  border: var(--ce-size-border-width) solid var(--ce-color-semantic-border-subtle);
  border-radius: var(--ce-size-radius-tag);
  padding: var(--ce-space-1) var(--ce-space-3);
  font-size: var(--ce-font-size-xs);
  font-weight: var(--ce-font-weight-bold);
  color: var(--ce-color-semantic-link);
  text-decoration: none;
  white-space: nowrap;
}

.ce-tag:hover {
  text-decoration: underline;
}

.ce-hero {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  min-height: var(--ce-size-hero-min);
  background-color: var(--ce-color-semantic-surface);
  overflow: hidden;
}

@media (max-width: 767px) {
  .ce-hero {
    /* minmax(0, 1fr): un 1fr suelto no tiene suelo 0 y puede desbordar con texto largo. */
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (min-width: 768px) {
  .ce-hero {
    min-height: var(--ce-size-hero-min-lg);
  }
}

.ce-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ce-space-2);
  min-height: var(--ce-size-touch-comfortable);
  min-width: var(--ce-size-touch-min);
  padding: var(--ce-space-2) var(--ce-space-4);
  font: inherit;
  font-weight: var(--ce-font-weight-medium);
  border: var(--ce-size-border-width-strong) solid transparent;
  border-radius: var(--ce-size-radius-md);
  cursor: pointer;
  background: var(--ce-color-semantic-action);
  color: var(--ce-color-semantic-text-on-brand);
  transition: background-color var(--ce-duration-fast);
}

.ce-btn:hover {
  background: var(--ce-color-semantic-action-hover);
}

.ce-btn:disabled,
.ce-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.ce-btn--secondary {
  background: var(--ce-color-semantic-surface);
  color: var(--ce-color-semantic-action);
  border-color: currentColor;
}

.ce-btn--icon {
  border-width: var(--ce-size-border-width-medium);
  border-color: currentColor;
}