/* ======= Botón chip (en tarjetas) ======= */
.acp-inline-btn{
  --acp-green:#5bb934;
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.32rem .4rem;
  border:1px solid var(--acp-green);
  border-radius:10px;
  background:#f6fff6;
  font-size:13px; font-weight:600; line-height:1;
  cursor:pointer; transition:background .15s ease, box-shadow .15s ease, transform .02s;
}
.acp-inline-btn:hover{ background:#eefae9; }
.acp-inline-btn:active{ transform:translateY(1px); }
.am-cc_heading-actions .acp-inline-btn{ margin-left:.45rem; }

/* ======= Modal overlay ======= */
.acp-modal-mask{
  position:fixed; inset:0; z-index:99999;
  display:flex; align-items:flex-start; justify-content:center;
  padding:20px; background:rgba(17,24,39,.45);
  overflow: auto;
  padding: 16px;              /* margen respiración alrededor del modal */
}
.acp-modal{
  --acp-green:#5bb934;
  margin-top:6vh;
  background:#fff;
  border-radius:12px;
  box-shadow:0 24px 64px rgba(0,0,0,.25);
  font-size:14px; /* base más compacta */
  width: min(520px, 94vw);
  max-height: calc(100dvh - 32px); /* dvh = viewport real en móvil */
  display: flex;
  flex-direction: column;
}
.acp-modal header{
  flex: 0 0 auto;
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-bottom:1px solid #edf2ee;
}
.acp-modal header strong{
  font-size:15px; font-weight:700;
}
.acp-modal .acp-body{ 
	padding:12px 14px 16px; 
	flex: 1 1 auto;
  	overflow: auto;            /* << permite ver el final del formulario */
}
.acp-modal .acp-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 8px; }
/* Cuando el modal está abierto, bloquea el scroll del fondo */
body.acp-modal-open{
  overflow: hidden;
}
/* Botón cerrar con estilo */
.acp-modal header .button,
.acp-close{
  border-radius:10px; padding:.3rem .55rem; line-height:1;
  border:1px solid #e5e7eb; background:#f9fafb; font-size:14px;
}
.acp-modal header .button:hover,
.acp-close:hover{ background:#f3f4f6; }

/* ======= Botones de acción ======= */
.acp-modal .button{ border-radius:10px; }
.acp-modal .button.button-primary,
.acp-modal .acp-offer,
.acp-modal .acp-request{
  --acp-green:#5bb934;
  background:var(--acp-green); border-color:var(--acp-green); color:#fff;
  padding: 12px 25px 12px 25px !important;
}
.acp-modal .button.button-primary:hover,
.acp-modal .acp-offer:hover,
.acp-modal .acp-request:hover{
  filter:brightness(.96);
}

/* ======= Inputs compactos ======= */
.acp-modal input[type="text"],
.acp-modal input[type="email"],
.acp-modal input[type="number"],
.acp-modal input:not([type]),
.acp-modal select,
.acp-modal textarea{
  width:100%;
  padding:.5rem .6rem;
  border:1px solid #dbe7d7;
  border-radius:10px;
  background:#fff;
  font-size:14px; line-height:1.2;
  transition:border-color .12s ease, box-shadow .12s ease;
}
.acp-modal input:focus,
.acp-modal select:focus,
.acp-modal textarea:focus{
  border-color:#5bb934;
  box-shadow:0 0 0 3px rgba(91,185,52,.18);
  outline:0;
}

/* Etiquetas: usar los <div> contenedores como label-row */
.acp-modal form > div{
  display:grid; gap:6px; margin:0 0 8px 0;
  font-size:13px; color:#000;
}
.acp-modal form > div:last-child{ margin-bottom:0; }

/* ======= Resumen del evento ======= */
.acp-summary{
  margin:6px 0 12px 0;
  border:1px solid #253030 !important;
  border-radius:10px;
  padding:10px;
  background:#fafafa;
}
.acp-summary h4{ margin:0 0 6px; font-size:13px; }
.acp-summary .grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.acp-pill{ font-size:10px !important; opacity:.8; }

.acp-chip{
  display:flex; justify-content:space-between; align-items:center;
  border:1px solid #e5e7eb; border-radius:10px; padding:6px 8px; cursor:pointer;
  background:#fff; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-size:11px;
  margin-bottom: 3px;
}
.acp-chip:hover{
  border-color:#d1d5db; background:#5bb934; color: #fff !important;
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
/* ===== Grid compacto del formulario ===== */
.acp-form-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}
.acp-field{ display:grid; gap:6px; }
.acp-f-email, .acp-f-from{ grid-column: 1/ -1; } /* 1/2 + 1/2 */
.acp-f-seats{ grid-column:span 1; }              /* 1/4 */
.acp-f-phone{ grid-column:span 3; }              /* 3/4 */
.acp-f-meeting{ grid-column:1 / -1; }            /* 1/1 */
.acp-f-submit{ grid-column:1 / -1; }

/* Selección específica por contenedor y etiqueta */
.acp-field.acp-f-email > label {
  padding-bottom: 12px !important; /* sobreescribe el inline */
}
.acp-field.acp-f-phone > label {
  padding-bottom: 21px !important; /* sobreescribe el inline */
}

/* Botones Offer/Request como toggle */
.acp-actions .button{
  transition:filter .15s ease, background .15s ease, border-color .15s ease, transform .02s;
}
.acp-actions .button.is-active{
  background:#253030 !important;
  border-color:#253030 !important;
  color:#fff;
}
.acp-actions .button:active{ transform:translateY(1px); }

/* Animación al cambiar de tipo */
#acp-form-slot{ transition:opacity .18s ease, transform .18s ease; }
#acp-form-slot.is-switching{ opacity:0; transform:translateY(6px); }

/* ---------- Botón "Compartir coche" en tarjetas (móvil) ---------- */

/* Evita que el texto parta en 2 líneas */
.acp-inline-btn{ white-space: nowrap; }

/* En móvil: el botón baja a su propia fila y ocupa el ancho */
@media (max-width: 480px){
  /* La cabecera permite wraps ordenados */
  .am-cc .am-collapse > .am-collapse-item .am-cc__heading,
  .am-cc .am-collapse > .am-collapse-item [class*="am-cc__heading"]{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  /* El contenedor de acciones pasa a ocupar 100% debajo del título/hora */
  .am-cc_heading-actions,
  [class*="am-cc_heading-actions"]{
    order: 3;                 /* lo manda a la línea siguiente */
    flex: 0 0 100%;
    margin-top: 8px;
    display: flex;
    justify-content: stretch;
  }

  /* El chip ocupa todo el ancho y se ve compacto */
  .am-cc_heading-actions .acp-inline-btn{
    flex: 1 1 auto;
    justify-content: center;
    font-size: 13px;
    padding: 8px 12px;
    border-radius: 10px;
    border-color: #5bb934;
    background: #f6fff6;
  }
}

/* Si prefieres mantenerlo en línea (sin bajar de fila), descomenta este bloque y comenta el de arriba
@media (max-width: 480px){
  .am-cc_heading-actions, [class*="am-cc_heading-actions"]{ display:flex; gap:6px; flex-wrap:wrap; }
  .am-cc_heading-actions .acp-inline-btn{
    font-size: 12px; padding: 6px 8px; border-radius: 10px;
    min-width: 110px; text-align:center;
  }
}
*/
/* ===== Loader "coche" dentro del modal ACP ===== */
.acp-loader-mask{
  position:absolute; inset:0; z-index:10;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(1.2) blur(2px);
  border-radius:12px;
}
.acp-loader-box{
  display:flex; flex-direction:column; align-items:center; gap:14px;
  padding:16px 18px; border-radius:12px;
  background:#fff; border:1px solid #e6efe2;
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.acp-car-wrap{ width:160px; height:50px; overflow:hidden; }
.acp-car{ display:flex; align-items:center; gap:10px; }
.acp-car svg{ width:140px; height:auto; }

.acp-modal input { color:#253030 !important; }
.acp-modal input::placeholder { color:#9ca3af; }

/* Select de "¿Desde dónde partes?" dentro del modal ACP */
.acp-modal select[name="from_location"]{
  color:#111827;               /* texto del select cerrado */
  font-weight:500;
}

/* Opciones del desplegable (soporta la mayoría de navegadores) */
.acp-modal select[name="from_location"] option{
  color:#111827 !important;    /* texto de cada opción */
  background:#fff;             /* fondo blanco para legibilidad */
}

/* Encabezados de grupo */
.acp-modal select[name="from_location"] optgroup{
  color:#374151 !important;    /* gris oscuro */
  font-weight:700;
}

/* Opción deshabilitada (placeholder “Selecciona una localidad”) */
.acp-modal select[name="from_location"] option:disabled{
  color:#9CA3AF !important;    /* gris claro */
}

/* Resaltado al pasar el ratón (Chrome/Edge/Firefox lo respetan) */
.acp-modal select[name="from_location"] option:hover{
  background:#eefae9 !important;
}

/* Opcional: sube un poco el tamaño para mejor lectura en listas largas */
.acp-modal select[name="from_location"],
.acp-modal select[name="from_location"] option,
.acp-modal select[name="from_location"] optgroup{
  font-size:14px;
}


/* ===== Loader "fade-stagger squares" ===== */
/* --- Loader "fade-stagger" 3x1 --- */
.acp-fade-grid{
  --cell: 30px;   /* tamaño del cuadrado */
  --gap:  8px;    /* separación */
  display: grid;
  grid-template-columns: repeat(3, var(--cell)); /* 3 columnas fijas */
  grid-template-rows: var(--cell);              /* 1 fila fija */
  gap: var(--gap);
  padding: 6px;
  justify-content: center;                      /* centrado */
  align-items: center;
}

.acp-pixel{
  width: var(--cell);
  height: var(--cell);
  border-radius: 4px;
  background: #5bb934;
  opacity: 0.15;
  animation: acp-fade 1.1s ease-in-out infinite;
}

/* Delays escalonados solo para 3 celdas */
.acp-pixel:nth-child(1){ animation-delay: 0s;   }
.acp-pixel:nth-child(2){ animation-delay: .12s; }
.acp-pixel:nth-child(3){ animation-delay: .24s; }

@keyframes acp-fade{
  0%, 100% { opacity: .15; transform: scale(.9); }
  50%      { opacity: 1;   transform: scale(1);   }
}


/* Accesibilidad: respeta reduce-motion */
@media (prefers-reduced-motion: reduce){
  .acp-fade-cell{ animation: none; opacity: .6; }
}

/* Ajuste visual dentro de tu caja del loader */
.acp-loader-box{
  /* ya existe en tu CSS — lo dejo aquí por si quieres centrar más compacto */
  align-items: center;
}

@media (max-width: 420px){
  .acp-fade-grid{ --cell: 12px; --gap: 6px; }
}

/* Responsive: todo a una columna en móvil */
@media (max-width:640px){
  .acp-form-grid{ grid-template-columns:1fr; }
  .acp-field, .acp-f-email, .acp-f-from, .acp-f-seats, .acp-f-phone,
  .acp-f-meeting, .acp-f-submit{ grid-column:1 / -1; }
}


/* ======= Responsive ======= */
@media (max-width: 640px){
  .acp-inline-btn{ font-size:.78rem; padding:.26rem .5rem; }
  .am-cc_heading-actions{ display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
  .acp-modal{ width:min(96vw, 620px); font-size:13px; border-radius: 10px;}
  .acp-summary .grid{ grid-template-columns:1fr; }
  .acp-modal header{ padding: 12px 14px; }
  .acp-modal .acp-body{ padding: 12px 14px; }
}
/* ===== Resumen compacto inline (forzar estilos sobre Amelia) ===== */

#amelia-container .acp-inline-summary-slot{
  width: 95% !important;
  margin-top: 6px !important;
}

#amelia-container .acp-inline-summary{
  box-sizing: border-box !important;
  width: 100% !important;
  border-radius: 8px !important;
  border: 1px solid #e3f0e6 !important;
  background: #f7fbf8 !important;
  padding: 6px 8px !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

/* Todo el contenido interno con tipografía más pequeña y compacta */
#amelia-container .acp-inline-summary,
#amelia-container .acp-inline-summary *{
  font-size: 11px !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
}

/* Cabecera: título + resumen de plazas */
#amelia-container .acp-inline-summary__header{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 2px 8px !important;
  margin-bottom: 4px !important;
}

#amelia-container .acp-inline-summary__title{
  font-weight: 600 !important;
  font-size: 11px !important;
  display: inline-flex !important;
  align-items: center !important;
}

#amelia-container .acp-inline-summary__title::before{
  content: "🚗" !important;
  margin-right: 4px !important;
}

#amelia-container .acp-inline-summary__counts{
  font-size: 10px !important;
  opacity: .8 !important;
}

/* Cuerpo: dos columnas (salidas / solicitudes) */
#amelia-container .acp-inline-summary__rows{
  display: grid !important;
  grid-template-columns: 1.2fr 1.1fr !important;
  gap: 4px 8px !important;
}

#amelia-container .acp-inline-summary__col{
  min-width: 0 !important;
}

#amelia-container .acp-inline-summary__label{
  font-size: 10px !important;
  opacity: .7 !important;
  margin-bottom: 2px !important;
}

/* “Tarjetita” de la primera localización */
#amelia-container .acp-inline-summary__entry{
  border-radius: 6px !important;
  border: 1px solid #e3f0e6 !important;
  background: #ffffff !important;
  padding: 4px 6px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

#amelia-container .acp-inline-summary__origin{
  font-size: 11px !important;
  font-weight: 500 !important;
}

#amelia-container .acp-inline-summary__meta{
  font-size: 10px !important;
  opacity: .8 !important;
}

/* Mensaje cuando no hay datos */
#amelia-container .acp-inline-summary__empty{
  font-size: 10px !important;
  opacity: .7 !important;
}

/* Dropdown "Ver más salidas / solicitudes" como popover */
#amelia-container .acp-inline-summary__details{
  margin-top: 4px !important;
  position: relative !important;
  display: inline-block !important;
}

#amelia-container .acp-inline-summary__details > summary{
  cursor: pointer !important;
  list-style: none !important;
  padding: 0 !important;
}

#amelia-container .acp-inline-summary__details > summary::-webkit-details-marker{
  display: none !important;
}

/* Botón "Ver más salidas/solicitudes" con look tipo "Leer más" */
#amelia-container .acp-inline-summary__morebtn{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  background: #5bb934 !important;      /* verde Amelia */
  color: #ffffff !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  border: none !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
}

#amelia-container .acp-inline-summary__morebtn:hover{
  background: #4aa128 !important;
}


#amelia-container .acp-inline-summary__moreitem{
  margin-top: 3px !important;
  border-radius: 4px !important;
  border: 1px dashed #e3f0e6 !important;
  padding: 3px 5px !important;
  font-size: 10px !important;
}

/* Variante para el modal detalle */
#amelia-container .acp-inline-summary--detail{
  font-size: 11px !important;
  margin-top: 8px !important;
}

/* Responsive: en móvil las dos columnas se apilan */
@media (max-width: 640px){
  #amelia-container .acp-inline-summary__rows{
    grid-template-columns: 1fr !important;
  }
}

/* Dropdown "Ver más salidas / solicitudes" como popover */
#amelia-container .acp-inline-summary__details{
  margin-top: 4px !important;
  position: relative !important;
  display: inline-block !important;
}

#amelia-container .acp-inline-summary__details > summary{
  cursor: pointer !important;
  list-style: none !important;
  font-size: 10px !important;
  padding: 2px 0 !important;
  color: #2563eb !important;
  text-decoration: underline !important;
}

#amelia-container .acp-inline-summary__details > summary::-webkit-details-marker{
  display: none !important;
}

#amelia-container .acp-inline-summary__dropdown{
  position: absolute !important;
  top: 100% !important;
  left: 0 !important;
  margin-top: 4px !important;
  background: #ffffff !important;
  border-radius: 6px !important;
  border: 1px solid #e3f0e6 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.08) !important;
  padding: 4px 6px !important;
  max-height: 160px !important;
  width: max(220px, 100%) !important;
  overflow-y: auto !important;
  z-index: 60 !important;
}

#amelia-container .acp-inline-summary__moreitem{
  padding: 3px 2px !important;
  font-size: 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 1px !important;
}

#amelia-container .acp-inline-summary__moreitem + .acp-inline-summary__moreitem{
  border-top: 1px dashed #e5e7eb !important;
  margin-top: 3px !important;
  padding-top: 4px !important;
}
#amelia-container .acp-inline-summary--loading{
  background: transparent !important;
  border-color: transparent !important;
  padding-left: 0 !important;
}