:root {
  --color-institucional: #0078d7;
  --color-texto: #1a2a3a;
  --color-fondo-claro: #e8f0f7;
}

/*
body {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
*/

p {
  font-size: 17px;
  font-weight: 400;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  text-align: left;
}


.custom-button {

  --button_radius: 0.75em;

  --button_color: #ffffff;

  --button_outline_color: #0b3d63;

  display: inline-block;

  text-decoration: none;

  border: none;

  cursor: pointer;

  border-radius: var(--button_radius);

  background: var(--button_outline_color);

  padding: 0;

  margin: 10px;

}



.custom-button-content {

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  width: 100%;

  border: 1px solid var(--button_outline_color);

  border-left: 3px solid var(--button_outline_color);

  border-bottom: 2px solid var(--button_outline_color);

  border-radius: var(--button_radius);

  padding: 0.75em 1.5em;

  background: var(--color-fondo-claro);

  color: #000000;

  font-size: 15px;

  font-weight: 300;

  font-family: var(--fuente-principal);

  text-align: center;

  position: relative;

  top: -0.22em;

  transition: top 0.1s ease, border-left-width 0.1s ease;

  word-wrap: break-word;

  overflow-wrap: break-word;

  white-space: normal;

  min-width: 0;

}

.custom-button-content img {

  max-width: 100%;

  height: auto;

  max-height: 60px;

  margin-bottom: 8px;

  display: block;

}

.custom-button-content .emoji {

  font-size: 40px;

  display: block;

  margin-bottom: 8px;

}




.custom-button:hover .custom-button-content {

  top: -0.33em;

  border-left-width: 6px;

}



.custom-button:active .custom-button-content {

  top: 0;

}

.custom-heading-1 {
  font-size: 28px;
  font-weight: 200;
  color: var(--color-texto);
  padding: 20px 40px;
  background-color: #e0f2fe;
  border-radius: 20px;
  margin-top: 20px;
  margin-bottom: 15px;
  display: block;
  line-height: 1.6;
  width: 100%;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.custom-heading-2 {
  font-size: 20px;
  font-weight: 200;
  color: var(--color-texto);
  padding: 16px 35px;
  background-color: #e0f2fe;
  border-radius: 40px;
  margin-top: 60px;
  margin-bottom: 15px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.6;
  width: fit-content;
  text-align: center;
}

.custom-heading-1 {
  display: block;
  text-align: center;
  width: 100%;
}

/* Contenedor principal */
.caib-cronograma {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  color: #1f2937;
  background-color: #f8fafc;
  padding: 32px;
  border-radius: 8px;
  max-width: 1000px;
  margin: 0 auto;
}

/* Títulos */
.caib-title {
  font-size: 24px;
  color: #0f172a;
  margin-bottom: 4px;
  text-align: center;
}

.caib-subtitle {
  font-size: 15px;
  color: #64748b;
  margin-bottom: 24px;
  text-align: center;
}

/* Tarjetas */
.caib-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  overflow-x: hidden;
}

.caib-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 28px;
}

.caib-card-header h3 {
  font-size: 20px;
  color: #1e3a8a;
  margin: 0;
  text-align: center;
}

.caib-badge {
  background-color: #e0f2fe;
  color: #0369a1;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 500;
}

/* Timeline Container */
.timeline-container {
  display: flex;
  justify-content: space-between;
  position: relative;
  width: 100%;
  min-height: 280px;
  padding: 0;
  align-items: flex-start;
  overflow: visible;
}

.timeline-line {
  position: absolute;
  top: 25px;
  left: 0;
  right: 0;
  height: 3px;
  background: #e2e8f0;
  z-index: 1;
}

.timeline-progress {
  position: absolute;
  top: 25px;
  left: 0;
  height: 3px;
  background: var(--color-institucional);
  width: var(--progress-width, 0%);
  z-index: 2;
  transition: width 0.3s ease;
}

.timeline-segment {
  display: none;
}

.timeline-step {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 3;
  min-width: 0;
  padding-top: 0;
}

.step-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  border: 3px solid #cbd5e1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  position: relative;
  z-index: 4;
  transition: all 0.3s ease;
  flex-shrink: 0;
  margin-bottom: 8px;
}

.timeline-step.completed .step-icon {
  border-color: var(--color-institucional);
  background: var(--color-institucional);
  color: #ffffff;
}

.timeline-step.active .step-icon {
  border-color: var(--color-institucional);
  background: #e0f2fe;
  box-shadow: 0 0 0 4px rgba(0, 120, 215, 0.2);
  transform: scale(1.15);
  animation: caib-pulse 2s infinite ease-in-out;
}

.timeline-step.pending .step-icon {
  border-color: #cbd5e1;
  background: #f9fafb;
}

.step-info {
  text-align: center;
  width: 100%;
  padding: 0 5px;
}

.step-info strong {
  display: block;
  font-size: 18px;
  color: #1e293b;
  margin-bottom: 4px;
  font-weight: 600;
}

.step-date {
  display: block;
  font-size: 11px;
  background: #fef3c7;
  color: #92400e;
  padding: 3px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
  font-weight: 500;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.step-info p {
  font-size: 16px;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

.timeline-step.pending .step-info p {
  color: #94a3b8;
}

/* Nota inferior */
.caib-footer-note {
  margin-top: 16px;
  color: #64748b;
  font-size: 16px;
}

/* Keyframes */
@keyframes caib-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 120, 215, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 120, 215, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 120, 215, 0);
  }
}

/* Grid Button */
.custom-button.grid-button {
  min-height: 150px;
  width: 100%;
  height: 100%;
  display: flex;
}

.custom-button.grid-button .custom-button-content {
  min-height: 150px;
  width: 100%;
  height: 100%;
}

/* Scroll to Top Button */
.scroll-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  width: 50px;
  height: 50px;
  background-color: #0b3d63;
  border: 1px solid #0b3d63;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  box-shadow: 0 4px 12px rgba(11, 61, 99, 0.2);
  padding: 0;
}

.scroll-to-top.show {
  opacity: 1;
  visibility: visible;
}

.scroll-to-top:hover {
  background-color: #0a2d48;
  box-shadow: 0 6px 16px rgba(11, 61, 99, 0.35);
}

.scroll-to-top:active {
  transform: scale(0.95);
}

.scroll-to-top svg {
  width: 24px;
  height: 24px;
  stroke: white;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

/* Lista centrada con puntos */
.list {
  text-align: center;
}

.list p {
  margin: 12px 0 !important;
  text-align: center !important;
  display: block;
  line-height: 2;
}

.list p::before {
  content: "◇";
  margin-right: 0.5em;
  display: inline;
  font-size: 0.75em;
}

/* ===== Filas (sustituyen a .custom-button; convivencia durante la migración) ===== */

.custom-row-list {
  width: 100%;
  max-width: 640px;
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.custom-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-left: 4px solid var(--color-institucional, #0078d7);
  border-radius: 8px;
  padding: 12px 16px;
  cursor: pointer;
  overflow: hidden;
  transition: transform 0.25s ease, background 0.25s ease, border-left-width 0.25s ease;
}

.custom-row:hover {
  transform: translateX(6px);
  border-left-width: 8px;
  background: #bae6fd;
}

/* Onda al pulsar: el script de la página crea un .custom-row-onda en el punto de clic */
.custom-row-onda {
  position: absolute;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: rgba(0, 120, 215, 0.35);
  transform: scale(0);
  pointer-events: none;
  animation: custom-row-onda 0.6s ease-out forwards;
}

@keyframes custom-row-onda {
  to { transform: scale(30); opacity: 0; }
}

/* ===== Desplegables (nuevas: custom-acc). Estilo «degradado, anillo y entrada escalonada». Las antiguas no se tocan. ===== */

.custom-acc {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 12px;
  text-align: left;
  transition: box-shadow 0.4s ease, border-color 0.4s ease;
}

.custom-acc.is-open {
  box-shadow: 0 10px 24px rgba(0, 120, 215, 0.12);
  border-color: #bae6fd;
}

.custom-acc-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 18px;
  background: linear-gradient(90deg, #e0f2fe 0%, #ffffff 80%);
  border: none;
  cursor: pointer;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  text-align: left;
}

.custom-acc-head:hover {
  background: linear-gradient(90deg, #bae6fd 0%, #f1f7fd 80%);
}

/* Colores de la cabecera con especificidad suficiente para ganar a los estilos del sitio (Gusite) */
.custom-acc .custom-acc-head .custom-acc-title { color: #1e293b; }
.custom-acc .custom-acc-head .custom-acc-icon { color: #1e293b; position: relative; top: -3px; }
.custom-acc .custom-acc-head .custom-row-sub { color: #64748b; }

.custom-acc-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.custom-acc-chev {
  margin-left: auto;
  flex-shrink: 0;
  width: 9px;
  height: 9px;
  border-right: 2px solid var(--color-institucional, #0078d7);
  border-bottom: 2px solid var(--color-institucional, #0078d7);
  transform: rotate(45deg);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-acc.is-open .custom-acc-chev {
  transform: rotate(-135deg);
}

.custom-acc-wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s ease;
}

.custom-acc.is-open .custom-acc-wrap {
  grid-template-rows: 1fr;
}

.custom-acc-body {
  overflow: hidden;
}

.custom-acc-inner {
  padding: 0 18px 16px;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.35s ease, transform 0.45s ease;
}

.custom-acc.is-open .custom-acc-inner {
  opacity: 1;
  transform: none;
  transition-delay: 0.1s;
}

.custom-acc-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #f8fafc;
  border-left: 4px solid var(--color-institucional, #0078d7);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  opacity: 0;
  transform: translateX(-12px);
}

.custom-acc-item + .custom-acc-item {
  margin-top: 10px;
}

.custom-acc.is-open .custom-acc-item {
  animation: custom-acc-entra 0.5s ease forwards;
  animation-delay: calc(var(--i, 0) * 90ms + 0.15s);
}

.custom-acc-item:hover {
  background: #bae6fd;
}

.custom-acc-item .custom-acc-icon {
  width: 36px;
  height: 36px;
  font-size: 17px;
}

@keyframes custom-acc-entra {
  to { opacity: 1; transform: none; }
}

/* ===== Tablas (nuevas: custom-tabla). Cabecera degradada y filas tipo ítem, sin pálpito. Las antiguas no se tocan. ===== */

.custom-tabla {
  width: 100%;
  border-collapse: separate;
  table-layout: fixed;
  border-spacing: 0;
  border: 1px solid #bae6fd;
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  margin: 20px 0;
}

.custom-tabla th {
  padding: 14px 18px;
  background: #e0f2fe;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  text-align: center;
  vertical-align: middle;
}

/* Contacto debajo del nombre en la cabecera de la tabla (<small> dentro de th) */
.custom-tabla th small {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 400;
  color: #475569;
}

/* Líneas interiores del mismo color que el contorno (sin líneas en el borde exterior) */
.custom-tabla th,
.custom-tabla td { border-bottom: 1px solid #bae6fd; }
.custom-tabla th + th,
.custom-tabla td + td { border-left: 1px solid #bae6fd; }

/* Todos los botones de tabla con las mismas dimensiones */
.custom-tabla .custom-tabla-item { width: 100%; height: 88px; box-sizing: border-box; }

/* Separador por defecto: línea que se desvanece (estilo D). Oculta el texto ◆ ◇ ◆ de las páginas existentes. */
.separator {
  height: 2px;
  margin: 28px 0;
  background: linear-gradient(90deg, transparent, #bae6fd 50%, transparent);
  font-size: 0;
  color: transparent;
  overflow: hidden;
}

/* ===== Pastilla de cambio (custom-seg). N estados con style="--n:N" en .custom-seg ===== */

.custom-seg {
  position: relative;
  display: inline-grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  max-width: 100%;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 4px;
  margin: 10px auto;
  box-sizing: border-box;
}

.custom-seg-ind {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc((100% - 8px) / var(--n, 2));
  border-radius: 999px;
  background: #e0f2fe;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.45s ease;
}

.custom-seg-btn {
  position: relative;
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 26px;
  min-width: 130px;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #475569;
  white-space: nowrap;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
  transition: color 0.35s ease;
}

.custom-seg-btn.is-on {
  color: #0c4a6e;
}

/* Sin fondo ni contorno por defecto de navegador o de Gusite, tampoco al pasar el ratón */
.custom-seg-btn:hover,
.custom-seg-btn:focus,
.custom-seg-btn:active {
  background: transparent;
  box-shadow: none;
  outline: none;
  color: #0c4a6e;
}

.custom-seg-btn:focus-visible {
  outline: 2px solid #bae6fd;
  outline-offset: 2px;
}

/* Pastilla centrada en el bloque */
.custom-seg-wrap {
  text-align: center;
}

.custom-seg-panels {
  text-align: left;
}

.custom-seg-panels {
  position: relative;
  margin-top: 18px;
  text-align: left;
}

.custom-seg-panel {
  display: none;
}

.custom-seg-panel.is-on {
  display: block;
  animation: custom-seg-entra 0.5s ease;
}

@keyframes custom-seg-entra {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: none; }
}

/* Filas dentro del panel: entran una a una. fill "backwards" para no pisar el hover */
.custom-seg-panel.is-on .custom-row {
  animation: custom-seg-fila 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  animation-delay: calc(var(--i, 0) * 90ms);
}

@keyframes custom-seg-fila {
  from { opacity: 0; transform: translateX(-14px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .custom-seg-ind,
  .custom-seg-btn,
  .custom-seg-panel.is-on,
  .custom-seg-panel.is-on .custom-row {
    transition: none !important;
    animation: none !important;
  }
}

.custom-tabla-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.custom-tabla td {
  padding: 12px;
  vertical-align: middle;
  background: #f1f5f9;
}

.custom-tabla-texto {
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #1e293b;
  line-height: 1.4;
  text-align: center;
}

.custom-tabla-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  background: #ffffff;
  border-left: 4px solid var(--color-institucional, #0078d7);
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  transition: transform 0.25s ease, background 0.25s ease, border-left-width 0.25s ease;
}

.custom-tabla-item:hover {
  transform: translateX(6px);
  border-left-width: 8px;
  background: #bae6fd;
}

.custom-tabla-item .custom-acc-icon {
  width: 36px;
  height: 36px;
  font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
  .custom-acc,
  .custom-acc *,
  .custom-acc-head,
  .custom-acc-chev,
  .custom-acc-wrap,
  .custom-acc-inner,
  .custom-acc-item {
    transition: none !important;
    animation: none !important;
  }
  .custom-acc-item { opacity: 1; transform: none; }
  .custom-acc-inner { opacity: 1; transform: none; }
}

.custom-row-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}

.custom-row-text {
  flex: 1;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 500;
  color: #1e293b;
  line-height: 1.4;
  text-align: justify;
  text-align-last: left;
}

.custom-row-sub {
  display: block;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #64748b;
  margin-top: 2px;
}

.custom-row-date {
  flex-shrink: 0;
  display: inline-block;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  background: #fef3c7;
  color: #92400e;
  padding: 3px 8px;
  border-radius: 4px;
}

/* Novedad: fecha de hoy. Mismo pulso que .timeline-step.active .step-icon (Calendari) */
.custom-row-icon.is-new {
  border: 2px solid var(--color-institucional, #0078d7);
  background: #e0f2fe;
  transform: scale(1.15);
  animation: custom-row-pulso 1.2s infinite ease-out;
}

@keyframes custom-row-pulso {
  0%   { box-shadow: 0 0 0 0 rgba(0, 120, 215, 0.55); }
  60%  { box-shadow: 0 0 0 14px rgba(0, 120, 215, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 120, 215, 0); }
}

/* Fecha ya pasada: neutra */
.custom-row-date.is-past {
  background: #e2e8f0;
  color: #52657d;
}

/* Botón redondo «volver arriba» */
.custom-top {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin: 10px auto;
  border-radius: 50%;
  border: 2px solid #cbd5e1;
  background: #ffffff;
  color: var(--color-texto, #1a2a3a);
  font-size: 18px;
  cursor: pointer;
  transition: transform 0.25s ease, background 0.25s ease;
}

.custom-top:hover {
  transform: translateY(-2px);
  background: #bae6fd;
}

/* ===== Cercador (custom-cerca): filtres amb desplegables i camp de text, com el prototip ===== */

.custom-cerca-filtres {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px 16px;
  margin: 16px 0 14px;
}

.custom-cerca-camp label {
  display: block;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 4px;
  color: #334155;
}

.custom-select,
.custom-input {
  width: 100%;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  background: #ffffff;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #1e293b;
  box-sizing: border-box;
}

/* Transició suau de la barra de text cap al contorn blau (sense outline, que apareix de cop) */
.custom-input {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.custom-select:focus,
.custom-input:focus {
  outline: none;
  border-color: #38bdf8;
  box-shadow: inset 0 0 0 1px #38bdf8;
}

/* Embolcall de la barra de text: retalla la onda i conserva el mateix radi */
.custom-input-wrap {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  isolation: isolate;
}

/* La onda va siempre por encima del campo, aunque el tema de Gusite le dé posición o z-index */
.custom-input-wrap .custom-input { position: relative; z-index: 1; }
.custom-input-wrap .custom-row-onda { z-index: 2; }

.custom-cerca-text { margin-bottom: 14px; }

.custom-cerca-barra {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin: 8px 0 4px;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  color: #475569;
}

/* Netejar filtres: fila custom-row (botó actual), a l'alçada dels desplegables */
.custom-cerca-neteja {
  margin: 0;
  padding: 0 12px;
  height: 56px;
  box-sizing: border-box;
  align-self: start;
  align-items: center;
  min-width: 0;
}

/* Vermell pastel, amb el mateix tractament de fila */
.custom-cerca-neteja {
  border-radius: 12px;
  background: #fecaca;
  border-color: #fca5a5;
  border-left-color: #e88a8a;
}

.custom-cerca-neteja:hover {
  background: #fca5a5;
  border-left-color: #e88a8a;
}

.custom-cerca-neteja .custom-row-icon {
  width: 30px;
  height: 30px;
  font-size: 14px;
  border-color: #fca5a5;
  color: #7f1d1d;
}

.custom-cerca-neteja .custom-row-text {
  font-size: 14px;
  text-align: left;
  color: #7f1d1d;
}

.custom-cerca-buit {
  padding: 30px;
  text-align: center;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #64748b;
  background: #ffffff;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

.custom-cerca-estudi {
  display: inline-block;
  font-size: 12px;
  color: #475569;
}

.custom-cerca-fletxa { color: #0284c7; font-weight: 700; }

/* Desplegables del buscador: mateixa estructura que els de lot (custom-acc), amb llista desplaçable */
/* Desplegable en capa flotant: no empuja el contenido, se superposa per sobre */
.custom-cerca-dd {
  margin-bottom: 0;
  position: relative;
  z-index: 1;
  overflow: visible;
}

.custom-cerca-dd.is-open { z-index: 30; }

.custom-cerca-dd .custom-acc-head { border-radius: 12px; }

.custom-cerca-dd .custom-acc-wrap {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
}

.custom-cerca-dd .custom-acc-inner {
  background: #ffffff;
  border: 1px solid #bae6fd;
  border-top: none;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 24px rgba(0, 120, 215, 0.12);
  padding-top: 12px;
}

/* Separació entre la barra de resultats i els lots o taules */
.custom-cerca-resultats { margin-top: 24px; }

/* Resultats: entren suaument (opacitat i un petit desplaçament) */
.custom-cerca-resultats > * {
  animation: custom-cerca-entra 0.45s ease both;
}

@keyframes custom-cerca-entra {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .custom-cerca-resultats > * { animation: none; }
}

.custom-cerca-dd .custom-acc-head {
  padding: 10px 14px;
  font-size: 14px;
  font-weight: 500;
}

.custom-cerca-dd .custom-acc-icon {
  width: 30px;
  height: 30px;
  font-size: 14px;
}

.custom-cerca-lista {
  max-height: 320px;
  overflow-y: auto;
  padding: 0 12px 12px;
}

.custom-cerca-opcio {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: none;
  border-left: 4px solid transparent;
  background: #f8fafc;
  font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #1e293b;
  text-align: left;
  cursor: pointer;
}

.custom-cerca-opcio + .custom-cerca-opcio { margin-top: 4px; }

.custom-cerca-opcio:hover { background: #bae6fd; }

.custom-cerca-opcio.is-on {
  border-left-color: #0284c7;
  background: #e0f2fe;
}

@media (prefers-reduced-motion: reduce) {
  .custom-row,
  .custom-row-icon,
  .custom-top {
    transition: none !important;
    animation: none !important;
  }
}
/* Cercador de rutes · botó «Veure mapa» i finestra del mapa (prova) */
.custom-cerca-mapa-btn {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 6px 10px;
  border: 1px solid #bae6fd; border-left: 4px solid #0284c7; border-radius: 10px; background: #f0f9ff;
  color: #0c4a6e; font-size: 13px; font-weight: 500; cursor: pointer; transition: background .15s;
}
.custom-cerca-mapa-btn:hover { background: #e0f2fe; }
.custom-cerca-mapa { position: fixed; inset: 0; z-index: 9999; background: rgba(15, 23, 42, 0); opacity: 0; display: flex; align-items: center; justify-content: center; padding: 16px; transition: opacity .28s ease, background .28s ease; }
.custom-cerca-mapa.is-visible { opacity: 1; background: rgba(15, 23, 42, .55); }
.custom-cerca-mapa-caixa { width: min(960px, 100%); height: min(680px, 100%); background: #fff; border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); transform: translateY(18px) scale(.96); transition: transform .32s cubic-bezier(.2, .8, .2, 1); }
.custom-cerca-mapa.is-visible .custom-cerca-mapa-caixa { transform: none; }
.custom-cerca-mapa.is-tancant .custom-cerca-mapa-caixa { transform: translateY(12px) scale(.97); transition-duration: .25s; }
.custom-cerca-mapa-cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; background: #e0f2fe; color: #0c4a6e; font-weight: 600; }
.custom-cerca-mapa-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-cerca-mapa-tanca { width: 34px; height: 34px; padding: 0; border: 0 !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; font-size: 24px; line-height: 34px; text-align: center; cursor: pointer; color: #0c4a6e !important; transition: background .15s; }
.custom-cerca-mapa-tanca:hover, .custom-cerca-mapa-tanca:focus, .custom-cerca-mapa-tanca:active { background: rgba(2, 132, 199, .16) !important; color: #0c4a6e !important; outline: none; }
.custom-cerca-mapa-vista { flex: 1; min-height: 0; }
.custom-cerca-mapa-num { width: 34px; height: 34px; border-radius: 50%; padding: 0; box-sizing: border-box; border: 1px solid #000; background: #aee3fd; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: transform .18s; }
.custom-cerca-mapa-num span { width: 100%; height: 100%; border-radius: 50%; background: none; color: #000; display: flex; align-items: center; justify-content: center; font: 700 13px/1 system-ui, Arial, sans-serif; }
.custom-cerca-mapa-num:hover { transform: scale(1.18); }
.custom-cerca-mapa-fletxa { width: 20px; height: 12px; background: #fff; opacity: 0; clip-path: polygon(0 12%, 55% 12%, 55% 0, 100% 50%, 55% 100%, 55% 88%, 0 88%); }
.custom-cerca-mapa-popup .leaflet-popup-content-wrapper { border-radius: 10px; padding: 0; background: #fff; color: #0c4a6e; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.custom-cerca-mapa-popup .leaflet-popup-content { margin: 6px 10px; font: 500 13px/1.3 system-ui, Arial, sans-serif; color: #0c4a6e; }
.custom-cerca-mapa-popup .leaflet-popup-tip { box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }
.leaflet-tooltip.custom-cerca-mapa-popup { border: 0; border-radius: 10px; padding: 6px 10px; font: 500 13px system-ui, Arial, sans-serif; color: #0c4a6e; box-shadow: 0 2px 10px rgba(0, 0, 0, .25); }

/* Cercador de rutes · llegenda del mapa (vehicle + llista de parades amb seguiment), sobre el mapa, sense fons */
.custom-cerca-mapa-cos { position: relative; flex: 1; min-height: 0; }
.custom-cerca-mapa-vista { position: absolute; inset: 0; z-index: 0; }
.custom-cerca-mapa-llegenda { position: absolute; z-index: 2; left: 12px; top: 10px; bottom: 10px; width: fit-content; min-width: 200px; max-width: 300px; display: flex; flex-direction: column; min-height: 0; pointer-events: none; }
.custom-cerca-mapa-llegenda::before { content: ""; position: absolute; z-index: -1; left: -12px; top: -10px; bottom: -10px; width: calc(100% + 12px + 180px); pointer-events: none; background: linear-gradient(to right, rgba(255, 255, 255, .93) 0, rgba(255, 255, 255, .85) calc(100% - 200px), rgba(255, 255, 255, 0) 100%); }
.custom-cerca-mapa-vehicle { pointer-events: auto; align-self: flex-start; padding: 0 0 8px 2px; color: #0c4a6e; font-size: 30px; font-weight: 800; line-height: 1; cursor: pointer; text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 8px #fff; }
.custom-cerca-mapa-vehicle small { display: block; margin-top: 4px; font-size: 14px; font-weight: 600; color: #334155; }
.custom-cerca-mapa-parades { flex: 1; min-height: 0; overflow-y: auto; margin: 0 0 0 -8px; padding: 6px 6px 6px 8px; list-style: none; scrollbar-width: thin; }
.custom-cerca-mapa-parades li { pointer-events: auto; position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 5px 6px 15px 0; cursor: pointer; font-size: 15px; line-height: 1.3; font-weight: 600; color: #1e293b; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 6px #fff; }
.custom-cerca-mapa-parades li:last-child { padding-bottom: 5px; }
.custom-cerca-mapa-parades li::before { content: ""; position: absolute; left: 11px; top: 33px; bottom: -4px; width: 6px; box-sizing: border-box; border: 1px solid #000; background: #aee3fd; border-radius: 2px; }
.custom-cerca-mapa-parades li:last-child::before { display: none; }
.custom-cerca-mapa-punt { position: relative; z-index: 1; flex: none; width: 28px; height: 28px; border-radius: 50%; background: #aee3fd; box-sizing: border-box; border: 1px solid #000; color: #000; display: flex; align-items: center; justify-content: center; font: 700 13px/1 system-ui, Arial, sans-serif; text-shadow: none; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: transform .18s, background .15s; }
.custom-cerca-mapa-parades li:hover .custom-cerca-mapa-punt { transform: scale(1.18); }
.custom-cerca-mapa-nom { padding-top: 4px; }
.custom-cerca-mapa-parades li:hover .custom-cerca-mapa-nom { color: #0c4a6e; }
.custom-cerca-mapa-parades li.is-on .custom-cerca-mapa-punt { background: #7dd3fc; color: #000; }
.custom-cerca-mapa-parades li.is-on .custom-cerca-mapa-nom { color: #0c4a6e; font-weight: 800; }
@media (max-width: 700px) {
    .custom-cerca-mapa-llegenda { width: 190px; }
  .custom-cerca-mapa-vehicle { font-size: 24px; }
  .custom-cerca-mapa-parades li { font-size: 13px; }
}

/* Mapa · botones de zoom (+ / −): azul cielo de la ventana, iconos en negro (el tema de Gusite los pone en blanco) */
.custom-cerca-mapa .leaflet-bar a,
.custom-cerca-mapa .leaflet-bar a:visited {
  background-color: #e0f2fe !important;
  color: #000 !important;
  border-bottom-color: #bae6fd !important;
  text-decoration: none;
  font-weight: 700;
}
.custom-cerca-mapa .leaflet-bar a:hover,
.custom-cerca-mapa .leaflet-bar a:focus {
  background-color: #bae6fd !important;
  color: #000 !important;
}
.custom-cerca-mapa .leaflet-bar a.leaflet-disabled {
  background-color: #e0f2fe !important;
  color: #94a3b8 !important;
}

/* Mapa · pastilla Anada / Tornada: usa custom-seg; aquí solo se ajusta su tamaño y se hace clicable sobre la leyenda */
.custom-cerca-mapa-pestanyes { pointer-events: auto; align-self: flex-start; margin: 0 0 8px; }
.custom-cerca-mapa-pestanyes .custom-seg { margin: 0; box-shadow: none; }
.custom-cerca-mapa-pestanyes .custom-seg-ind { box-shadow: none; }
.custom-cerca-mapa-pestanyes .custom-seg-btn { min-width: 0; padding: 7px 18px; font-size: 14px; }

/* Mapa · mismo crecimiento al pasar el ratón que en las paradas del mapa */
.custom-cerca-mapa .leaflet-bar a { position: relative; transition: transform .18s, background-color .15s !important; }
.custom-cerca-mapa .leaflet-bar a:hover { transform: scale(1.15); z-index: 2; }
.custom-cerca-mapa .leaflet-bar a.leaflet-disabled:hover { transform: none; }

/* Mapa · al pasar el ratón por un tramo, el resto de la leyenda se atenúa */
.custom-cerca-mapa-parades li { transition: opacity .2s; }
.custom-cerca-mapa-parades li.is-atenuat { opacity: .3; }
.custom-cerca-mapa .leaflet-marker-icon { transition: opacity .2s; }

/* Mapa · mientras vuela (zoom animado) se ocultan líneas y flechas, que Leaflet escala; reaparecen suaves al terminar */
.custom-cerca-mapa .leaflet-overlay-pane,
.custom-cerca-mapa .custom-cerca-mapa-fletxes { transition: opacity .3s ease; }
.custom-cerca-mapa .is-volant .leaflet-overlay-pane,
.custom-cerca-mapa .is-volant .custom-cerca-mapa-fletxes { opacity: 0; transition: opacity .1s ease; }

/* Mapa · cambio entre ida y vuelta: líneas, paradas, flechas y lista se funden y reaparecen */
.custom-cerca-mapa .leaflet-marker-pane,
.custom-cerca-mapa .custom-cerca-mapa-parades,
.custom-cerca-mapa .custom-cerca-mapa-vehicle small { transition: opacity .24s ease; }
.custom-cerca-mapa .is-canviant .leaflet-overlay-pane,
.custom-cerca-mapa .is-canviant .leaflet-marker-pane,
.custom-cerca-mapa .is-canviant .custom-cerca-mapa-parades,
.custom-cerca-mapa .is-canviant .custom-cerca-mapa-vehicle small { opacity: 0; }

/* Mapa · «On viu vostè?»: campo, pin y camino discontinuo animado hasta la parada más cercana */
.custom-cerca-mapa-casa { pointer-events: auto; width: 100%; margin: 0 0 8px; }
.custom-cerca-mapa-casa .custom-input { background: #fff; }
.custom-cerca-mapa-casa-msg { margin-top: 6px; font-size: 13px; font-weight: 600; line-height: 1.3; color: #1e293b; text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff, 0 0 6px #fff; }
.custom-cerca-mapa-casa-msg:empty { display: none; }
.custom-cerca-mapa-cami { animation: custom-cerca-cami 0.9s linear infinite; }
@keyframes custom-cerca-cami { to { stroke-dashoffset: -11; } }

/* Mapa · «On viu vostè?»: opciones cuando hay varias coincidencias */
.custom-cerca-mapa-casa-opcions { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; max-height: 40vh; overflow-y: auto; }
.custom-cerca-mapa-casa-opcions:empty { display: none; }
.custom-cerca-mapa-casa-opcio { padding: 7px 12px; border-radius: 10px; background: #e0f2fe; color: #000; font-size: 13px; font-weight: 500; line-height: 1.3; cursor: pointer; box-shadow: 0 1px 4px rgba(0, 0, 0, .15); transition: background .15s, transform .18s; }
.custom-cerca-mapa-casa-opcio:hover, .custom-cerca-mapa-casa-opcio:focus { background: #bae6fd; outline: none; }
.custom-cerca-mapa-casa-icona { display: block; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }

/* Mapa · etiqueta con los metros a pie sobre el camino discontinuo */
.leaflet-tooltip.custom-cerca-mapa-cami-etiqueta { border: 1px solid #000; border-radius: 10px; padding: 3px 9px; background: #e0f2fe; color: #000; font: 700 13px system-ui, Arial, sans-serif; box-shadow: 0 1px 4px rgba(0, 0, 0, .25); transition: opacity .3s ease; }
.leaflet-tooltip.custom-cerca-mapa-cami-etiqueta::before { display: none; }
.custom-cerca-mapa .is-volant .custom-cerca-mapa-cami-etiqueta,
.custom-cerca-mapa .is-canviant .custom-cerca-mapa-cami-etiqueta { opacity: 0; }

/* Mapa · franja inferior de aviso */
.custom-cerca-mapa-peu { flex: none; padding: 6px 14px; background: #e0f2fe; color: #0c4a6e; font: 500 12px/1.3 system-ui, Arial, sans-serif; text-align: center; border-top: 1px solid #bae6fd; }