/* =========================================================
   Tokens del plugin (scope: .escala-events)
   - Mapea variables del tema (theme.json) con fallbacks
   - Define superficies, bordes, tipografías y marca
   ========================================================= */
.escala-events,
.escala-event-detail{
    /* Superficies y bordes */
  --ec-surface:    var(--wp--preset--color--ast-global-color-5, #fff);
  --ec-surface-2:  var(--wp--custom--color--surface-2, #F3F3F3);
  --ec-surface-3: var(--wp--preset--color--ast-global-color-6, #c7ddbd);
  --ec-border:     var(--wp--custom--color--border, var(--ast-border-color, #D9D9D9));
  --ec-border-strong: var(--wp--preset--color--ast-global-color-2, #444444);
  --ec-muted:      var(--wp--preset--color--ast-global-color-3, #555555);

  /* Marca */
  --ec-primary: var(--wp--preset--color--ast-global-color-1, var(--ast-global-color-1, #2c541d));
  --ec-accent:  var(--wp--preset--color--ast-global-color-0, var(--ast-global-color-0, #567352));

  /* Chips (editable por tema si quiere) */
  --ec-chip-bg:    var(--ec-surface-2);
  --ec-chip-text:  var(--wp--preset--color--ast-global-color-2, #444444);
  --ec-chip-border:  var(--wp--preset--color--ast-global-color-2, #444444);
  --ec-chip-type-bg:    var(--ec-surface-2);
  --ec-chip-type-text:  var(--wp--preset--color--ast-global-color-2, #444444);
  --ec-chip-type-border:  var(--wp--preset--color--ast-global-color-2, #444444);
  --ec-chip-place-bg:   var(--ec-surface-2);
  --ec-chip-place-text: var(--wp--preset--color--ast-global-color-2, #444444);
  --ec-chip-place-border:  var(--wp--preset--color--ast-global-color-2, #444444);

  /* Layout */
  --ec-container-xl: 1060px;
  --ec-container-lg: 800px;
  --ec-gap: 18px;
  --ec-gap-sm: 6px;
  --ec-gap-lg: 10px;

  /* Radii / sombras */
  --ec-radius-xl: 10px;
  --ec-radius-lg: 8px;
  --ec-radius-sm: 6px;
  --ec-shadow-1:  0 8px 20px rgba(16,24,40,.06);

/* Status colors */
    --draft-soft: #d5d5d5;
    --draft-strong: #606060;
    --publish-soft: #b7efbf;
    --publish-strong: #3c7b46;
    --trash-soft: #f5c2cb;
    --trash-strong: #71424b;
}

.events-hero{
    text-align: center;
    margin: 10px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.escala-events h2{
    margin-bottom: 0
}

.ast-outline-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    background-color: white;
}

h2 {
    margin-bottom: 0 !important;
}