/*
Theme Name: Formación IA — Carbon
Theme URI: https://formacion-ia.framecore.co
Description: Tema hijo de Twenty Twenty-Five con el lenguaje visual de IBM Carbon Design System (tema White): IBM Plex Sans, paleta gris de Carbon, azul interactivo #0f62fe, esquinas rectas y escala de espaciado 8px.
Author: FRAMECORE
Template: twentytwentyfive
Version: 1.0.0
Text Domain: formacion-ia-carbon
*/

/* ============================================================
   IBM Carbon Design System — tema White
   Tokens: https://carbondesignsystem.com/elements/color/tokens
   ============================================================ */

:root {
  /* Neutros tibios: la misma estructura de Carbon, con temperatura */
  --cds-background: #FDFCFB;
  --cds-layer-01: #F5F3F0;
  --cds-layer-hover-01: #EDEAE6;
  --cds-layer-accent-01: #E7E3DE;
  --cds-border-subtle: #E7E3DE;
  --cds-border-strong: #A8A29A;
  --cds-text-primary: #1C1917;
  --cds-text-secondary: #57534E;
  --cds-text-helper: #78716C;
  --cds-text-on-color: #FFFFFF;
  --cds-surface: #FFFFFF;

  /* Acento índigo, más cercano que el azul corporativo */
  --cds-link-primary: #4F46E5;
  --cds-link-primary-hover: #4338CA;
  --cds-interactive: #4F46E5;
  --cds-button-primary: #4F46E5;
  --cds-button-primary-hover: #4338CA;
  --cds-button-primary-active: #3730A3;
  --cds-accent-soft: #EEF0FE;
  --cds-highlight: #B45309;
  --cds-focus: #4F46E5;
  --cds-support-error: #B91C1C;

  /* Formas: esquinas suaves y una sola sombra, muy contenida */
  --cds-radius-card: 10px;
  --cds-radius-field: 8px;
  --cds-radius-pill: 999px;
  --cds-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05);
  --cds-shadow-md: 0 10px 30px -18px rgba(28, 25, 23, 0.28);

  /* Escala de espaciado */
  --cds-spacing-03: 0.5rem;
  --cds-spacing-05: 1rem;
  --cds-spacing-06: 1.5rem;
  --cds-spacing-07: 2rem;
  --cds-spacing-09: 3rem;
  --cds-spacing-10: 4rem;
  --cds-spacing-12: 6rem;

  --cds-duration-fast-02: 110ms;
  --cds-duration-moderate-01: 150ms;
  --cds-easing-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
}

/* --- Base ------------------------------------------------- */

/*
   La barra de desplazamiento se reserva siempre. Sin esto, una página que
   scrollea y otra que no quedan centradas en ejes distintos —unos 7px— y el
   salto se nota al navegar entre ellas.
*/
html {
  scrollbar-gutter: stable;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Anillo de foco de Carbon: 2px, recto, sin desplazamiento */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--cds-focus);
  outline-offset: 2px;
}

/* Esquinas suaves: 10px en superficies, 8px en controles */
.wp-block-button__link,
.wp-block-search__button,
input,
select,
textarea {
  border-radius: var(--cds-radius-field);
}

figure,
img {
  border-radius: var(--cds-radius-card);
}

/* --- Cabecera y pie del sitio ----------------------------- */

.wp-block-site-title,
.wp-block-site-title a {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.16px;
  text-decoration: none;
  color: var(--cds-text-primary);
}

header.wp-block-template-part > .wp-block-group {
  border-bottom: 1px solid var(--cds-border-subtle);
}

footer.wp-block-template-part {
  border-top: 1px solid var(--cds-border-subtle);
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
}

/* --- Un solo ancho de layout ------------------------------- */
/*
   Regla: TODO comparte el mismo borde izquierdo y derecho (el contenedor de
   66rem). Lo único que se estrecha es la medida de lectura del texto corrido,
   y siempre con el mismo valor, nunca uno distinto por bloque.
*/

:root {
  --cds-container: 66rem;   /* 1056px: rejilla de Carbon en pantalla grande */
  --cds-col: calc(var(--cds-container) / 16);   /* una columna = 66px */
  /* La medida de lectura termina en la línea 10 de la rejilla, no en un valor
     inventado: así el borde derecho del texto también cae sobre la retícula. */
  --cds-measure: calc(var(--cds-col) * 10);
}

/*
   El contenido de la página es `alignfull`, así que WordPress no crea una caja:
   solo centra cada bloque por separado. Aquí sí creamos la caja, con padding
   lateral, para que exista un borde izquierdo y derecho reales a los que todo
   se pueda alinear.
*/
.entry-content {
  /*
     Caja de ancho real y centrada, en lugar de un padding calculado.
     El intento anterior usaba `calc((100% - contenedor) / 2)`, y en CSS un
     porcentaje dentro de `padding` se resuelve contra el ancho del PADRE, no
     del propio elemento: en las landings coincidía por casualidad y en otras
     plantillas dejaba el texto y las tablas en ejes distintos.
  */
  max-width: calc(var(--cds-container) + 2 * var(--wp--style--root-padding-left, 2rem));
  margin-inline: auto !important;
  padding-inline: var(--wp--style--root-padding-left, 2rem);
  box-sizing: border-box;
}

/* Separadores: dibujan el ancho del contenedor, que es la referencia visual
   del layout. No se les toca el ancho: lo hereda del contenedor. */
.entry-content > .wp-block-separator {
  border: 0;
  border-top: 1px solid var(--cds-border-subtle);
  background: none;
  height: 0;
  margin-block: var(--cds-spacing-10);
  opacity: 1;
}

/* Encabezados y texto: alineados al borde izquierdo del contenedor y con una
   sola medida de lectura. El !important es necesario porque el layout
   «constrained» de WordPress centra los bloques con auto !important. */
.entry-content > h1,
.entry-content > h2,
.entry-content > h3,
.entry-content > p,
.entry-content > ul,
.entry-content > ol,
.entry-content > .wp-block-buttons {
  max-width: var(--cds-measure);
  margin-left: 0 !important;
  margin-right: auto !important;
}

.entry-content > h1 {
  margin-bottom: var(--cds-spacing-06);
}

.entry-content > h2 {
  margin-top: 0;
  margin-bottom: var(--cds-spacing-06);
}

/* Subtítulo del hero */
.entry-content > h1 + p {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.4;
  color: var(--cds-text-secondary);
  margin-bottom: var(--cds-spacing-07);
}

/* Nota bajo el botón principal */
.entry-content > .wp-block-buttons + p {
  font-size: 0.875rem;
  color: var(--cds-text-secondary);
}

/* Los bloques anchos (columnas, tabla, acordeones, video) se quedan con el
   ancho del contenedor: no se les quita el max-width, para que su borde
   derecho coincida con el de los separadores. */

/* El formulario es un componente estrecho, alineado a la izquierda */
.entry-content .jet-form {
  max-width: var(--cds-measure);
}

/* --- Botones ---------------------------------------------- */

.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--cds-spacing-07);
  /* Sin tope de ancho: con uno, las etiquetas largas se parten en dos líneas.
     El botón se ajusta a su texto y solo se estira en móvil. */
  max-width: 100%;
  text-align: left;
  min-height: 48px;
  border: 1px solid transparent;
  box-shadow: var(--cds-shadow-sm);
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive),
              transform var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.wp-block-button__link:hover {
  transform: translateY(-1px);
  box-shadow: var(--cds-shadow-md);
}

.wp-block-button__link:active {
  background-color: var(--cds-button-primary-active) !important;
}

/* Flecha de Carbon a la derecha del botón */
.wp-block-button__link::after {
  content: "";
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: currentColor;
  -webkit-mask: var(--cds-arrow) center / contain no-repeat;
  mask: var(--cds-arrow) center / contain no-repeat;
}

:root {
  --cds-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z'/%3E%3C/svg%3E");
}

/* --- Columnas como tiles de Carbon ------------------------ */

.entry-content .wp-block-columns {
  gap: var(--cds-spacing-07);
  margin-block: var(--cds-spacing-07);
}

.entry-content .wp-block-column {
  background: var(--cds-surface);
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-card);
  box-shadow: var(--cds-shadow-sm);
  padding: var(--cds-spacing-06);
}

.entry-content .wp-block-column > h2,
.entry-content .wp-block-column > h3 {
  margin-top: 0;
  margin-bottom: var(--cds-spacing-03);
}

.entry-content .wp-block-column > p {
  color: var(--cds-text-secondary);
  margin-top: 0;
}

/* --- Tablas (patrón DataTable) ---------------------------- */

.wp-block-table table {
  border-collapse: collapse;
  width: 100%;
  background: var(--cds-surface);
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-card);
  overflow: hidden;
}

.wp-block-table th {
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  font-weight: 600;
  font-size: 0.875rem;
  text-align: left;
  padding: 0.875rem var(--cds-spacing-05);
  border: 0;
}

.wp-block-table td {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cds-border-subtle);
  padding: 0.875rem var(--cds-spacing-05);
  color: var(--cds-text-secondary);
}

.wp-block-table tr:hover td {
  background: var(--cds-layer-hover-01);
}

.wp-block-table figcaption {
  margin-top: var(--cds-spacing-05);
}

.wp-block-table {
  overflow-x: auto;
}

/* --- Acordeón (patrón Accordion) -------------------------- */

.wp-block-details {
  border-top: 1px solid var(--cds-border-subtle);
  padding: 0;
}

.entry-content > .wp-block-details:last-of-type,
.wp-block-details + .wp-block-separator {
  border-bottom: 1px solid var(--cds-border-subtle);
}

.wp-block-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-05) 0;
  cursor: pointer;
  font-weight: 400;
  color: var(--cds-text-primary);
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.wp-block-details summary:hover {
  color: var(--cds-interactive);
}

.wp-block-details[open] {
  background: var(--cds-layer-01);
  border-radius: var(--cds-radius-card);
  border-top-color: transparent;
  padding-inline: var(--cds-spacing-05);
}

.wp-block-details summary::marker,
.wp-block-details summary::-webkit-details-marker {
  content: "";
  display: none;
}

.wp-block-details summary::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: var(--cds-text-primary);
  -webkit-mask: var(--cds-chevron) center / contain no-repeat;
  mask: var(--cds-chevron) center / contain no-repeat;
  transition: transform var(--cds-duration-moderate-01) var(--cds-easing-productive);
}

.wp-block-details[open] summary::after {
  transform: rotate(180deg);
}

:root {
  --cds-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 22L6 12l1.4-1.4 8.6 8.6 8.6-8.6L26 12z'/%3E%3C/svg%3E");
}

.wp-block-details > *:not(summary) {
  color: var(--cds-text-secondary);
  padding-bottom: var(--cds-spacing-05);
  margin-top: 0;
  max-width: var(--cds-measure);
}

/* --- Listas ----------------------------------------------- */

.entry-content ul {
  list-style: none;
  padding-left: 0;
}

.entry-content ul li {
  position: relative;
  padding-left: var(--cds-spacing-06);
  margin-bottom: var(--cds-spacing-03);
  color: var(--cds-text-secondary);
}

.entry-content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 0.5rem;
  height: 1px;
  background: var(--cds-border-strong);
}

/* --- Video ------------------------------------------------ */

.wp-block-embed {
  margin-block: var(--cds-spacing-06);
}

.wp-block-embed__wrapper {
  background: var(--cds-layer-01);
  border: 1px solid var(--cds-border-subtle);
  min-height: 12rem;
}

.wp-block-embed.wp-embed-aspect-16-9 .wp-block-embed__wrapper::before {
  padding-top: 56.25%;
}

/* ============================================================
   Formulario de agendamiento — patrones Text Input, Select,
   Text Area y Button de Carbon
   ============================================================ */

.jet-form-row {
  margin-bottom: var(--cds-spacing-06);
}

.jet-form-row--hidden {
  margin-bottom: 0;
}

/* Etiqueta: label-01 de Carbon (12px, gray 70) */
.jet-form__label {
  margin-bottom: var(--cds-spacing-03);
}

.jet-form__label-text {
  display: block;
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
  font-weight: 400;
}

.jet-form__required {
  color: var(--cds-support-error);
  margin-left: 0.125rem;
}

/* Campo: fondo layer, solo borde inferior, 48px de alto */
.jet-form__field.text-field,
.jet-form__field.select-field,
.jet-form__field.textarea-field,
.jet-form-field-container input[type="text"],
.jet-form-field-container input[type="email"],
.jet-form-field-container input[type="tel"],
.jet-form-field-container select,
.jet-form-field-container textarea {
  width: 100%;
  max-width: 100%;
  background: var(--cds-layer-01);
  color: var(--cds-text-primary);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-field);
  padding: 0 var(--cds-spacing-05);
  height: 48px;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive),
              outline-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-form-field-container textarea,
.jet-form__field.textarea-field {
  height: auto;
  min-height: 6rem;
  padding: 0.6875rem var(--cds-spacing-05);
  resize: vertical;
}

.jet-form-field-container input:hover,
.jet-form-field-container select:hover,
.jet-form-field-container textarea:hover {
  background: var(--cds-layer-hover-01);
}

.jet-form-field-container input:focus,
.jet-form-field-container select:focus,
.jet-form-field-container textarea:focus {
  outline: 2px solid var(--cds-focus);
  outline-offset: 1px;
  background: var(--cds-surface);
  border-color: var(--cds-interactive);
}

.jet-form-field-container input::placeholder,
.jet-form-field-container textarea::placeholder {
  color: var(--cds-text-helper);
}

/* Select con la flecha de Carbon */
.jet-form-field-container select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--cds-spacing-10);
  background-image: var(--cds-chevron);
  background-repeat: no-repeat;
  background-position: right var(--cds-spacing-05) center;
  background-size: 1rem 1rem;
}

/* Texto de ayuda: helper-text-01 */
.jet-form__desc,
.jet-form-field-container .jet-form__field-desc {
  display: block;
  margin-top: var(--cds-spacing-03);
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.32px;
  color: var(--cds-text-helper);
}

/* Botón de envío: primary button de Carbon */
.jet-form__submit,
.jet-form-row--submit .jet-form__submit {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-07);
  min-height: 48px;
  min-width: 16rem;
  padding: 0.875rem var(--cds-spacing-05);
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
  border: 1px solid transparent;
  border-radius: var(--cds-radius-field);
  box-shadow: var(--cds-shadow-sm);
  font-family: inherit;
  font-size: 1rem;
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-form__submit::after {
  content: "";
  margin-left: auto;
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: currentColor;
  -webkit-mask: var(--cds-arrow) center / contain no-repeat;
  mask: var(--cds-arrow) center / contain no-repeat;
}

.jet-form__submit:hover { background: var(--cds-button-primary-hover); }
.jet-form__submit:active { background: var(--cds-button-primary-active); }

/* Botones de paso del formulario multipaso */

.jet-form__next-page-wrap,
.jet-form-row--submit .jet-form-col {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  flex-wrap: wrap;
}

.jet-form__next-page,
.jet-form__prev-page {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-05);
  min-height: 48px;
  padding: 0.875rem var(--cds-spacing-05);
  border-radius: var(--cds-radius-field);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive),
              border-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

/* Avanzar: acción principal, igual que el botón de envío */
.jet-form__next-page {
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
  border: 1px solid transparent;
  box-shadow: var(--cds-shadow-sm);
  min-width: 12rem;
  justify-content: space-between;
}

.jet-form__next-page::after {
  content: "";
  width: 1rem;
  height: 1rem;
  flex: 0 0 1rem;
  background-color: currentColor;
  -webkit-mask: var(--cds-arrow) center / contain no-repeat;
  mask: var(--cds-arrow) center / contain no-repeat;
}

.jet-form__next-page:hover { background: var(--cds-button-primary-hover); }
.jet-form__next-page:active { background: var(--cds-button-primary-active); }

/* Retroceder: acción secundaria, sin peso visual */
.jet-form__prev-page {
  background: transparent;
  color: var(--cds-text-primary);
  border: 1px solid var(--cds-border-subtle);
  order: -1;
}

.jet-form__prev-page:hover {
  background: var(--cds-layer-hover-01);
  border-color: var(--cds-border-strong);
}

/* Mensajes del formulario: patrón Inline Notification */
.jet-form-messages-wrap {
  margin-top: var(--cds-spacing-06);
}

.jet-form-messages-wrap > * {
  padding: var(--cds-spacing-05);
  border-radius: var(--cds-radius-card);
  font-size: 0.875rem;
  line-height: 1.43;
  background: #ECFDF5;
  border-left: 3px solid #059669;
  color: var(--cds-text-primary);
}

.jet-form-messages-wrap .jet-form-message--error,
.jet-form-messages-wrap .error {
  background: #FEF2F2;
  border-left-color: var(--cds-support-error);
}

/* ============================================================
   Calendario y cupos — patrón Date Picker / Tag de Carbon
   ============================================================ */

.jet-apb-calendar-wrapper {
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-card);
  box-shadow: var(--cds-shadow-sm);
  padding: var(--cds-spacing-05);
  background: var(--cds-background);
  /* El calendario del plugin tiene ancho fijo (350px): que desplace dentro
     de su caja en lugar de desbordar la página. */
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.jet-apb-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding-bottom: var(--cds-spacing-05);
}

.jet-apb-calendar-header__label {
  font-size: 1rem;
  font-weight: 600;
  color: var(--cds-text-primary);
  text-transform: capitalize;
}

.jet-apb-calendar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  color: var(--cds-text-primary);
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-apb-calendar-btn:hover {
  background: var(--cds-layer-hover-01);
}

/* Cabecera de días de la semana */
.jet-apb-calendar-week {
  font-size: 0.75rem;
  letter-spacing: 0.32px;
  color: var(--cds-text-secondary);
  text-transform: uppercase;
}

/* Celdas de día: cuadradas, sin radios y con área táctil suficiente.
   El plugin las deja en 50x21px, por debajo del mínimo recomendado. */
.jet-apb-calendar-date {
  border-radius: var(--cds-radius-field);
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-apb-calendar-date-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
}

@media (pointer: coarse) {
  .jet-apb-calendar-date-body { min-height: 44px; }
}

.jet-apb-calendar-date:not(.jet-apb-calendar-date--disabled):hover {
  background: var(--cds-layer-hover-01);
  cursor: pointer;
}

.jet-apb-calendar-date--disabled {
  color: #c6c6c6;
  cursor: not-allowed;
}

/* Hoy: subrayado azul, como el Date Picker de Carbon */
.jet-apb-calendar-date--today:not(.jet-apb-calendar-date--selected) {
  box-shadow: inset 0 -2px 0 0 var(--cds-interactive);
}

.jet-apb-calendar-date--selected {
  background: var(--cds-interactive) !important;
  color: var(--cds-text-on-color) !important;
}

/* Avisos del calendario: helper text */
.jet-apb-calendar-notification {
  font-size: 0.75rem;
  line-height: 1.33;
  letter-spacing: 0.32px;
  color: var(--cds-text-helper);
}

/* Botón de cierre del panel de cupos */
.jet-apb-calendar-slots__close {
  cursor: pointer;
  color: var(--cds-text-secondary);
}

/* Cupos horarios como tags rectangulares seleccionables */
.jet-apb-calendar-slots-container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cds-spacing-03);
  margin-top: var(--cds-spacing-05);
  padding-top: var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle);
}

.jet-apb-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 var(--cds-spacing-05);
  background: var(--cds-surface);
  border: 1px solid var(--cds-border-subtle);
  border-radius: var(--cds-radius-field);
  font-size: 0.875rem;
  color: var(--cds-text-primary);
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-02) var(--cds-easing-productive),
              border-color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.jet-apb-slot:hover {
  background: var(--cds-layer-hover-01);
  border-color: var(--cds-border-strong);
}

.jet-apb-slot.selected,
.jet-apb-slot[aria-selected="true"],
.jet-apb-slot.jet-apb-slot--selected {
  background: var(--cds-interactive);
  border-color: var(--cds-interactive);
  color: var(--cds-text-on-color);
}

/* ============================================================
   Adaptación a pantallas pequeñas
   ============================================================ */

@media (max-width: 46.1875rem) {
  .entry-content .wp-block-columns { gap: var(--cds-spacing-06); }
  .wp-block-button__link,
  .jet-form__submit { width: 100%; max-width: none; }
  /* Menos hueco para la flecha: en pantalla estrecha ese espacio es lo que
     obliga a la etiqueta a partirse en dos líneas. */
  .wp-block-button__link { gap: var(--cds-spacing-05); }
  .entry-content > .wp-block-separator { margin-block: var(--cds-spacing-07); }
  .jet-apb-calendar-wrapper { padding: var(--cds-spacing-03); }
  .jet-form__submit { min-width: 0; }
}

/* ============================================================
   Cabecera y pie — patrón UI Shell de Carbon
   ============================================================ */

/* --- Cabecera: barra clara, fija arriba --------------------- */

/* El sticky va en el envoltorio del template part: la caja de .carbon-header
   mide solo 48px, así que fijarlo ahí lo haría desaparecer con el scroll. */
header.wp-block-template-part:has(.carbon-header) {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* Las anclas no deben quedar debajo de la barra fija */
.entry-content [id],
[id] {
  scroll-margin-top: 5rem;
}

.carbon-header {
  min-height: 3.5rem;
  background: rgba(253, 252, 251, 0.85);
  backdrop-filter: saturate(150%) blur(8px);
  -webkit-backdrop-filter: saturate(150%) blur(8px);
  border-bottom: 1px solid var(--cds-border-subtle);
  padding-inline: max(var(--cds-spacing-07), calc((100% - var(--cds-container)) / 2));
  margin-block: 0;
  gap: var(--cds-spacing-05);
  flex-wrap: nowrap;
}

.carbon-header p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 3.5rem;
}

.carbon-header a {
  color: var(--cds-text-primary);
  text-decoration: none;
  display: block;
  transition: color var(--cds-duration-fast-02) var(--cds-easing-productive);
}

.carbon-header a:hover {
  color: var(--cds-interactive);
}

/* El anillo cuadrado de Carbon queda mal sobre la barra: aquí el foco se marca
   con subrayado y color, que es discreto y sigue siendo visible con teclado. */
.carbon-header a:focus-visible {
  outline: none;
  color: var(--cds-interactive);
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

.carbon-header__nav > p.carbon-header__action > a:focus-visible {
  outline: none;
  text-decoration: none;
  background: var(--cds-button-primary-active);
  color: var(--cds-text-on-color);
}

/* Marca con el punto de color delante */
.carbon-header__brand a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
}

.carbon-header__brand a::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--cds-radius-pill);
  background: var(--cds-interactive);
  flex: 0 0 0.5rem;
}

.carbon-header__brand strong { font-weight: 600; }
.carbon-header__brand span { color: var(--cds-text-secondary); font-weight: 400; }

.carbon-header__nav {
  gap: var(--cds-spacing-06);
  align-items: center;
  flex-wrap: nowrap;
}

.carbon-header__nav > p > a {
  font-size: 0.9375rem;
  color: var(--cds-text-secondary);
}

/* Acción principal: botón redondeado, no una celda de la barra.
   El selector repite .carbon-header__nav porque la regla de los enlaces de
   navegación tiene más especificidad y le ganaba el color al botón. */
.carbon-header__nav > p.carbon-header__action > a {
  background: var(--cds-button-primary);
  color: var(--cds-text-on-color);
  padding: 0.5rem var(--cds-spacing-05);
  border-radius: var(--cds-radius-field);
  line-height: 1.6;
  font-size: 0.9375rem;
  box-shadow: var(--cds-shadow-sm);
}

.carbon-header__nav > p.carbon-header__action > a:hover {
  background: var(--cds-button-primary-hover);
  color: var(--cds-text-on-color);
}

/* El contenido no debe quedar pegado a la barra */
.wp-site-blocks > main,
.wp-site-blocks > .entry-content {
  padding-top: var(--cds-spacing-09);
}

/* --- Pie: bloque claro con columnas de enlaces -------------- */

.carbon-footer {
  border-top: 1px solid var(--cds-border-subtle);
  background: var(--cds-layer-01);
  padding-top: var(--cds-spacing-10);
  padding-bottom: var(--cds-spacing-07);
  margin-top: var(--cds-spacing-12);
}

/* El pie es de borde a borde, pero su contenido cae sobre el mismo eje */
.carbon-footer > * {
  max-width: var(--cds-container);
  margin-inline: auto !important;
}

.carbon-footer .carbon-footer__cols {
  gap: var(--cds-spacing-07);
  margin-bottom: var(--cds-spacing-09);
}

.carbon-footer .wp-block-column {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.carbon-footer p {
  font-size: 0.875rem;
  line-height: 1.43;
  color: var(--cds-text-secondary);
  margin-block: 0 var(--cds-spacing-03);
}

.carbon-footer__title {
  font-weight: 600;
  color: var(--cds-text-primary) !important;
  margin-bottom: var(--cds-spacing-05) !important;
}

.carbon-footer a {
  color: var(--cds-link-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.carbon-footer a:hover {
  color: var(--cds-link-primary-hover);
  border-bottom-color: currentColor;
}

.carbon-footer__legal {
  padding-top: var(--cds-spacing-05);
  border-top: 1px solid var(--cds-border-subtle);
  color: var(--cds-text-helper) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.32px;
}

/* --- Cabecera y pie en pantallas pequeñas ------------------- */

@media (max-width: 46.1875rem) {
  /* WordPress declara estas variables en `body`, no en `:root`: hay que
     sobrescribirlas ahí o el valor de escritorio sigue ganando. */
  body {
    --wp--style--root-padding-left: var(--cds-spacing-05);
    --wp--style--root-padding-right: var(--cds-spacing-05);
  }
  .carbon-header { padding-inline: var(--cds-spacing-05); }
  .carbon-header__nav > p:not(.carbon-header__action) { display: none; }
  .carbon-header__brand span { display: none; }
  .carbon-footer .carbon-footer__cols { gap: var(--cds-spacing-06); }
}

/* ============================================================
   Páginas de tarea (registro, agendar): columna centrada
   ============================================================
   En las landings el eje a la izquierda organiza bloques de distinto ancho.
   En una página que es solo un formulario no hay nada que alinear y el eje
   izquierdo deja medio ancho vacío. Aquí la columna se estrecha y se centra.
   El texto sigue alineado a la izquierda: centrar párrafos y etiquetas de
   campo los vuelve más difíciles de leer.
*/

.fc-pagina-formulario {
  --cds-columna-tarea: 34rem;
}

.fc-pagina-formulario .entry-content {
  max-width: calc(var(--cds-columna-tarea) + 2 * var(--wp--style--root-padding-left, 2rem));
}

.fc-pagina-formulario .entry-content > *,
.fc-pagina-formulario .entry-content .jet-form {
  max-width: none;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* El calendario tiene ancho fijo: se centra dentro de la columna */
.fc-pagina-formulario .jet-apb-calendar-wrapper {
  display: flex;
  justify-content: center;
}

/* ============================================================
   Aviso de cookies
   ============================================================ */

#cookie-notice,
#cookie-notice * {
  font-family: var(--wp--preset--font-family--plex-sans) !important;
}

#cookie-notice .cookie-notice-container {
  padding: var(--cds-spacing-05) var(--cds-spacing-07);
}

#cookie-notice .cn-text-container {
  font-size: 0.875rem;
  line-height: 1.43;
}

#cookie-notice .cn-button:not(.cn-button-custom) {
  border-radius: var(--cds-radius-field) !important;
  padding: 0.625rem var(--cds-spacing-05) !important;
  font-size: 0.875rem !important;
  font-weight: 400;
}

/* «Rechazar» como acción secundaria, no como otro botón sólido */
#cookie-notice .cn-set-cookie.cn-button ~ .cn-button,
#cookie-notice #cn-refuse-cookie {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  color: #FFFFFF !important;
}