/*
 * Altas en modal de cliente y de vehículo (sustituyen a las pantallas nuevo-cliente y nuevo-vehiculo). Es el mismo
 * modal que el de la cita (rail de pasos a la izquierda, barra de paso con puntos y botones .cb-*), con las reglas de
 * css/modulos/cita-modal.css acotadas a la clase .am-dialogo en lugar de al id #modal-cita, para poder usarlo en
 * cualquier pantalla. Marcado en php/plantillas/modales/alta-cliente.html.php y alta-vehiculo.html.php; lógica en
 * js/scripts/alta-modal.js, alta-cliente-modal.js y alta-vehiculo-modal.js. Requiere css/modal-rediseno.css (.z-pasos).
 * Solo variables --z-* (tema claro y oscuro).
 *
 * Carpeta: /css/modulos/
 * Fichero: alta-modal.css
 * Permisos: Login
 * Creado: 02-11-26
 */
.am-dialogo .cita-dialogo { width: 860px; max-width: calc(100% - 20px); }
.am-dialogo .cita-contenido { display: flex; flex-direction: column; overflow: hidden; }
.am-dialogo .cita-medio { display: flex; min-width: 0; flex: 1 1 auto; min-height: 0; }
.am-dialogo .cita-rail { flex: 0 0 220px; display: flex; flex-direction: column; padding: 28px 22px 16px; background: var(--z-superficie-alta); border-right: 1px solid var(--z-borde); }
.am-dialogo .cita-rail-pie { margin-top: auto; padding-top: 22px; }
.am-dialogo .cita-atajos { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; font-size: var(--z-text-sm); color: var(--z-texto-suave); }
.am-dialogo .cita-atajos kbd { padding: 1px 7px; border: 1px solid var(--z-borde-fuerte); border-bottom-width: 2px; border-radius: 6px; background: var(--z-superficie); color: var(--z-texto); font-family: var(--z-font-body); font-size: 12px; box-shadow: none; }
.am-dialogo .cita-ventana { flex: 1 1 auto; min-width: 0; overflow: hidden; transition: height 0.22s ease; }
.am-dialogo { --cb-pel: #C62828; --cb-pel-txt: #C62828; }
[data-theme="dark"] .am-dialogo { --cb-pel: #D23C3C; --cb-pel-txt: #FF8A8A; }
.am-dialogo .cita-barra { border-top: 1px solid var(--z-borde); background: var(--z-superficie); }
.am-dialogo .cita-barra .cita-barra-normal { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; }
.am-dialogo .cita-barra .cita-barra-izq { display: flex; align-items: center; gap: 12px; padding: 14px 22px; background: var(--z-superficie-alta); border-right: 1px solid var(--z-borde); font-size: 13px; color: var(--z-texto-suave); }
.am-dialogo .cita-barra .cita-puntos { display: inline-flex; gap: 5px; }
.am-dialogo .cita-barra .cita-puntos i { width: 22px; height: 6px; border-radius: 99px; background: var(--z-borde-fuerte); }
.am-dialogo .cita-barra .cita-puntos i.on { background: var(--z-marca); }
.am-dialogo .cita-barra .cita-barra-der { display: flex; align-items: center; padding: 14px 28px; }
.am-dialogo .cita-barra .cita-acc { display: flex; align-items: center; gap: 10px; width: 100%; }
.am-dialogo .cita-barra .cita-hueco { flex: 1 1 auto; }
.am-dialogo .cita-barra .cita-barra-conf { display: none; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 28px; background: var(--z-error-suave); }
.am-dialogo .cita-barra.confirmando .cita-barra-normal { display: none; }
.am-dialogo .cita-barra.confirmando .cita-barra-conf { display: flex; }
.am-dialogo .cita-barra .cita-conf-icono { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--z-superficie); color: var(--cb-pel-txt); flex: none; }
.am-dialogo .cita-barra .cita-conf-tx { flex: 1 1 240px; min-width: 0; }
.am-dialogo .cita-barra .cita-conf-tx b { display: block; color: var(--z-texto); }
.am-dialogo .cita-barra .cita-conf-tx p { margin: 2px 0 0; font-size: 13px; color: var(--z-texto-suave); }
.am-dialogo .cita-barra .cita-conf-acc { display: flex; gap: 10px; }

.am-dialogo .cb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: var(--z-control-md, 40px); padding: 0 18px; border-radius: var(--z-radius-pill, 999px); border: 1px solid transparent; background: transparent; font: inherit; font-weight: 500; font-size: 14px; white-space: nowrap; cursor: pointer; color: var(--z-texto); -webkit-tap-highlight-color: transparent; transition: background var(--z-duration-fast, .12s) var(--z-ease-standard, ease), filter var(--z-duration-fast, .12s); }
.am-dialogo .cb-btn:focus-visible { outline: 3px solid var(--z-foco); outline-offset: 2px; }
.am-dialogo .cb-btn[disabled] { opacity: .5; cursor: not-allowed; }
.am-dialogo .cb-pri { background: var(--z-marca); border-color: var(--z-marca); color: var(--z-sobre-marca); }
.am-dialogo .cb-pri:hover:not([disabled]) { background: var(--z-marca-hover); border-color: var(--z-marca-hover); }
.am-dialogo .cb-sec { background: var(--z-superficie); border-color: var(--z-borde-fuerte); color: var(--z-texto); }
.am-dialogo .cb-sec:hover:not([disabled]) { background: var(--z-superficie-alta); }
.am-dialogo .cb-txt { color: var(--z-texto-suave); padding: 0 12px; }
.am-dialogo .cb-txt:hover:not([disabled]) { background: var(--z-superficie); color: var(--z-texto); }
.am-dialogo .cb-pel, .am-dialogo .cb-txt.cb-pel { color: var(--cb-pel-txt); }
.am-dialogo .cb-txt.cb-pel:hover:not([disabled]) { background: var(--z-error-suave); color: var(--cb-pel-txt); }
.am-dialogo .cb-pelsol { background: var(--cb-pel); border-color: var(--cb-pel); color: #fff; }
.am-dialogo .cb-pelsol:hover:not([disabled]) { filter: brightness(.92); }
.am-dialogo .cb-spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: cb-gira .8s linear infinite; }
@keyframes cb-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .cb-spin { animation-duration: 2.4s; } }

@media (max-width: 767px) {
  .am-dialogo .cita-contenido { max-height: calc(100vh - 20px); }
  .am-dialogo .cita-medio { flex-direction: column; }
  .am-dialogo .cita-rail { flex: 0 0 auto; flex-direction: row; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; border-right: 0; border-bottom: 1px solid var(--z-borde); }
  .am-dialogo .cita-rail-pie { margin: 0; padding: 0; flex: none; }
.am-dialogo .cita-atajos { display: none; }
  .am-dialogo .z-pasos-vertical { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; padding: 0; }
  .am-dialogo .z-pasos-vertical .z-paso { flex-direction: row; align-items: center; width: auto; min-height: 48px; gap: 8px; }
  .am-dialogo .z-pasos-vertical .z-paso small { display: none; }
  .am-dialogo .z-pasos-vertical .z-pasos-barra { flex: 1 1 auto; width: auto; height: 4px; margin: 0 10px; }
  .am-dialogo .z-pasos-vertical .z-pasos-relleno { width: 0; height: 100%; }
  .am-dialogo .z-pasos-vertical .z-pasos-barra.hecha .z-pasos-relleno { width: 100%; }
  .am-dialogo .cita-paso { max-height: calc(100vh - 190px); }
  .am-dialogo .close { min-width: 48px; min-height: 48px; }
  .am-dialogo .cita-barra .cita-barra-normal { display: block; }
  .am-dialogo .cita-barra .cita-barra-izq { display: none; }
  .am-dialogo .cita-barra .cita-barra-der { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .am-dialogo .cita-barra .cita-acc { gap: 8px; }
  .am-dialogo .cita-barra .cb-btn { height: 48px; padding: 0 14px; font-size: 15px; }
  .am-dialogo .cita-barra .cb-pri { height: 52px; flex: 1 1 auto; }
  .am-dialogo .cita-barra .cita-acc-1 .cb-sec { flex: 0 1 auto; }
  .am-dialogo .cita-barra .cita-hueco { display: none; }
  .am-dialogo .cb-solo-esc { display: none; }
  .am-dialogo .cita-barra .cita-barra-conf { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .am-dialogo .cita-barra .cita-conf-acc { width: 100%; }
  .am-dialogo .cita-barra .cita-conf-acc .cb-btn { flex: 1 1 0; }
}
@supports (height: 100dvh) {
  .am-dialogo .cita-paso { max-height: calc(100dvh - 150px); }
  @media (max-width: 767px) { .am-dialogo .cita-contenido { max-height: calc(100dvh - 20px); } .am-dialogo .cita-paso { max-height: calc(100dvh - 190px); } }
}

/* ------------------------------------------------------------------
   Lo que añade el alta en modal sobre el modal de la cita
   ------------------------------------------------------------------ */

/* Centrado en pantalla (horizontal y vertical). Bootstrap 3 coloca el diálogo arriba con margen; aquí se centra con
   transform y la animación de entrada sube desde un poco más abajo. Cabecera y barra quedan siempre a la vista:
   el cuerpo hace scroll si la ventana es baja */
.modal.am-dialogo .modal-dialog { position: absolute; top: 50%; left: 50%; margin: 0; transform: translate(-50%, -46%); }
.modal.am-dialogo.in .modal-dialog { transform: translate(-50%, -50%); }
.modal.am-dialogo { overflow: hidden; }
.am-dialogo .cita-paso { display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 150px); }
.am-dialogo .cita-paso > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 24px 28px 22px; }
.am-dialogo .cita-paso > .modal-body .row { margin-bottom: 4px; }
@supports (height: 100dvh) {
  .am-dialogo .cita-paso { max-height: calc(100dvh - 150px); }
}
.am-dialogo .cita-contenido { border-radius: var(--z-radius-lg, 14px); }
.am-dialogo [hidden] { display: none !important; }

/* Campos con esquinas redondeadas, 40 px de alto y borde de componente */
body.smart-style-2 .am-dialogo .form-control { height: var(--z-control-md, 40px); padding: 0 12px; border: 1px solid var(--z-borde-fuerte); border-radius: var(--z-radius-md) !important; background: var(--z-superficie); color: var(--z-texto); box-shadow: none; }
body.smart-style-2 .am-dialogo textarea.form-control { height: auto; padding: 9px 12px; border-radius: var(--z-radius-md) !important; }
body.smart-style-2 .am-dialogo .form-control:focus { border-color: var(--z-foco); box-shadow: var(--z-shadow-foco); outline: 0; }
body.smart-style-2 .am-dialogo .form-control[disabled] { background: var(--z-superficie-alta); opacity: .7; }
body.smart-style-2 .am-dialogo .form-control.am-mal { border-color: var(--z-error); background: var(--z-error-suave); }
.am-dialogo .form-group { margin-bottom: 14px; }
.am-dialogo .form-group > label { font-weight: 500; margin-bottom: 5px; }
.am-req { color: var(--z-error); font-weight: 600; }
.am-err { margin: 4px 0 0; }
.am-err small { color: var(--z-error); }
.am-dialogo .help-block { margin: 4px 0 0; color: var(--z-texto-suave); }
.am-mono { font-family: var(--z-font-mono); text-transform: uppercase; }
/* La placa: la misma del resto de la app, a 40 px */
body.smart-style-2 .am-dialogo input.z-matricula-entrada { height: 40px; padding: 0 10px 0 34px; border: 1.5px solid var(--z-sobre-marca); border-radius: 6px !important; background-color: var(--z-matricula-fondo); background-image: linear-gradient(var(--z-matricula-ue), var(--z-matricula-ue)) !important; background-repeat: no-repeat; background-position: left top; background-size: 20px 100%; font-size: 20px; letter-spacing: 1.5px; }
body.smart-style-2 .am-dialogo input.z-matricula-entrada.am-mal { border-color: var(--z-error); }
body.smart-style-2 .am-dialogo input.z-matricula-entrada:focus { border-color: var(--z-sobre-marca); box-shadow: var(--z-shadow-foco); }

/* Autocompletado dentro del modal */
.am-dialogo .za-rel { position: relative; }
.am-dialogo .za-rel ul.lista-autocompletado { left: 0; right: 0; width: auto; z-index: var(--z-layer-dropdown, 1100); border-radius: var(--z-radius-md); margin-top: 2px; padding: 4px; box-shadow: var(--z-shadow-lg, 0 8px 24px rgba(0,0,0,.18)); list-style: none; }
.am-dialogo .za-rel ul.lista-autocompletado li { border-radius: 6px; padding: 8px 10px; }

/* Textos del cuerpo */
.am-dialogo .am-sub { margin: 0 0 16px; color: var(--z-texto-suave); font-size: var(--z-text-sm); }
.am-dialogo .am-h3 { margin: 0 0 4px; font-size: 16px; font-weight: 600; color: var(--z-texto); }
.am-dialogo .cita-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 18px; padding: 10px 14px; background: var(--z-superficie-alta); border-radius: var(--z-radius-lg); }
.am-dialogo .cita-resumen-cuando { color: var(--z-texto-suave); }
.am-dialogo .cita-resumen .z-matricula.am-vacio { opacity: .45; }
.am-dialogo .am-aviso { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--z-error); border-radius: var(--z-radius-md); background: var(--z-error-suave); color: var(--z-texto); }
.am-dialogo .am-aviso .fa { margin-top: 3px; color: var(--z-error); }
.am-dialogo .am-aviso b { display: block; }

/* Bloque plegable «más datos» */
.am-dialogo .am-mas { margin: 4px 0 14px; border: 1px dashed var(--z-borde-fuerte); border-radius: var(--z-radius-md); }
.am-dialogo .am-mas > button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 14px; border: 0; border-radius: var(--z-radius-md); background: none; text-align: left; cursor: pointer; font: inherit; font-weight: 500; color: var(--z-texto); }
.am-dialogo .am-mas > button:focus-visible { outline: 3px solid var(--z-foco); outline-offset: 2px; }
.am-dialogo .am-mas > button small { color: var(--z-texto-suave); font-weight: 400; }
.am-dialogo .am-mas > button .fa { margin-left: auto; color: var(--z-texto-suave); transition: transform .15s; }
.am-dialogo .am-mas.abierto > button .fa { transform: rotate(180deg); }
.am-dialogo .am-mas > div { padding: 4px 14px 0; }

/* Pantalla final */
.am-dialogo .am-ok { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 0 8px; }
.am-dialogo .am-ok .ic { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--z-ok-suave); color: var(--z-ok); font-size: 26px; }
.am-dialogo .am-ok h3 { margin: 0; font-size: 20px; font-weight: 600; color: var(--z-texto); }
.am-dialogo .am-ok p { margin: 0; color: var(--z-texto-suave); }
.am-dialogo .am-ok a { font-weight: 500; }
.am-dialogo .am-ok a:focus-visible { outline: 3px solid var(--z-foco); outline-offset: 2px; border-radius: 4px; }

/* Etiquetas de botón */
.am-dialogo .cb-t { white-space: nowrap; }
.am-dialogo .cb-btn .fa-spinner { margin-right: 0; }

/* Marca y modelo nuevos: los modales de siempre se abren encima del alta */
#modal-nueva-marca-coche, #modal-nuevo-modelo-coche { z-index: 1160; }
body.am-sub-abierto .modal-backdrop.am-segundo { z-index: 1150; }

/* Barra: el aviso de descarte ocupa el lugar de los botones */
.am-dialogo .cita-barra .cita-barra-conf { border-top: 0; }

@media (prefers-reduced-motion: reduce) {
  .modal.am-dialogo .modal-dialog { transition: none; }
  .am-dialogo .am-mas > button .fa { transition: none; }
  .am-dialogo .cb-spin, .am-dialogo .cb-btn .fa-spinner { animation-duration: 2.4s; }
}

@media (max-width: 767px) {
  .am-dialogo .cita-paso > .modal-body { padding: 18px 16px; }
  .am-dialogo .cita-paso > .modal-body .row > [class*="col-"] { width: 100%; }
  .am-dialogo .form-control { font-size: 16px; }
  .am-dialogo .am-mas > button { min-height: 48px; }
  .am-dialogo .cita-barra .cita-acc { flex-wrap: wrap; }
  .am-dialogo .cita-barra .cita-acc .cb-pri { order: 9; }
}

/* your_style.css fuerza un azul grisáceo en h4.modal-title con !important: aquí el título usa el token de texto */
body.smart-style-2 .am-dialogo h4.modal-title { color: var(--z-texto) !important; font-weight: var(--z-weight-medium) !important; }
body.smart-style-2 .am-dialogo h4.modal-title .fa { color: var(--z-marca-texto); }

/* Con una lista de autocompletado abierta el cuerpo gana sitio debajo para poder subir el campo y ver la lista entera */
.am-dialogo .cita-paso > .modal-body:has(ul.lista-autocompletado:not(.za-lista-vacia) li) { padding-bottom: 280px; }
.am-dialogo ul.lista-autocompletado { max-height: 240px; overflow-y: auto; }
/* Solo el modal de vehículo es más alto de base (la lista de marcas no se pisa con la barra); el resto de modales .am-dialogo mantienen su alto */
#modal-alta-vehiculo .cita-paso { min-height: min(600px, calc(100vh - 190px)); }
@supports (height: 100dvh) { #modal-alta-vehiculo .cita-paso { min-height: min(600px, calc(100dvh - 150px)); } }


/* ---- Alta de vehículo en 3 pasos: pestañas del paso 3 y zona de la ficha técnica del paso 2 ---- */
#modal-alta-vehiculo [hidden] { display: none !important; }
#modal-alta-vehiculo .av-seg { display: flex; flex-wrap: wrap; gap: 4px; width: max-content; max-width: 100%; margin: 4px 0 16px; padding: 4px; border-radius: 12px; background: var(--z-superficie-alta, #edebe6); }
#modal-alta-vehiculo .av-seg button { border: 0; border-radius: 9px; padding: 6px 14px; background: none; color: var(--z-texto-suave, #5b616b); font-weight: 600; font-size: 13px; cursor: pointer; }
#modal-alta-vehiculo .av-seg button[aria-selected="true"] { background: var(--z-superficie, #fff); color: var(--z-texto, #14171c); box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
#modal-alta-vehiculo .av-seg button:focus-visible { outline: 0; box-shadow: var(--z-shadow-foco, 0 0 0 3px rgba(86, 190, 224, .5)); }
#modal-alta-vehiculo .av-seg .n { margin-left: 4px; font-weight: 500; opacity: .7; }
#modal-alta-vehiculo .av-ficha { display: flex; flex-direction: column; gap: 12px; }
#modal-alta-vehiculo .av-drop { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0; padding: 26px 18px; border: 2px dashed var(--z-borde-fuerte, #8b887d); border-radius: 14px; background: var(--z-superficie-alta, #fbfaf6); color: var(--z-texto-suave, #5b616b); text-align: center; font-weight: 400; cursor: pointer; }
#modal-alta-vehiculo .av-drop .fa { margin-bottom: 4px; font-size: 30px; color: var(--z-marca-texto, #2a6f84); }
#modal-alta-vehiculo .av-drop strong { color: var(--z-texto, #14171c); font-size: 15px; }
#modal-alta-vehiculo .av-drop:hover, #modal-alta-vehiculo .av-drop.av-sobre { border-color: var(--z-marca-texto, #2a6f84); background: var(--z-marca-suave, #dff3fa); }
#modal-alta-vehiculo .av-drop.av-con-arch { padding: 14px 18px; }
#modal-alta-vehiculo .av-drop.av-con-arch .fa, #modal-alta-vehiculo .av-drop.av-con-arch small { display: none; }
#modal-alta-vehiculo .av-ficha-arch { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--z-borde, #ddd8cf); border-radius: 12px; background: var(--z-superficie, #fff); font-size: 13px; }
#modal-alta-vehiculo .av-ficha-arch .fa { color: var(--z-marca-texto, #2a6f84); }
#modal-alta-vehiculo .av-ficha-arch .cb-btn { margin-left: auto; height: 34px; padding: 0 10px; }