/*
 * Modal de cita (alta y edición, con la recepción como segundo paso). Es el que
 * comparten la agenda y el panel «Hoy»: marcado en php/plantillas/modal-cita.html.php
 * y lógica en js/scripts/cita-modal.js.
 *
 * Carpeta: /css/modulos/
 * Fichero: cita-modal.css
 * Permisos: Login
 * Creado: 31-10-26
 */
/* Cita: matrícula en línea con el campo y contacto del cliente */
.cita-fila-matricula { display: flex; align-items: center; gap: 14px; }
.cita-fila-matricula > div { flex: 0 0 calc(100% - 198px); }
.cita-fila-matricula > .z-matricula { margin-left: auto; }
/* Desplegable de matrículas: mismo patrón que los buscadores de los demás modales (ancho del campo, filas de 8px 10px) */
body.smart-style-2 .cita-dialogo .za-rel ul.lista-autocompletado { left: 0; right: 0; width: auto; min-width: 0; margin-top: 2px; padding: 4px; border-radius: var(--z-radius-md); z-index: var(--z-layer-dropdown, 1100); }
.cita-dialogo .za-rel ul.lista-autocompletado li { border-radius: 6px; padding: 8px 10px; }
.za-contacto { display: flex; flex-wrap: wrap; align-items: center; gap: var(--z-space-1) var(--z-space-2); margin-bottom: var(--z-space-3); padding: var(--z-space-2) var(--z-space-4); border: 1px solid var(--z-borde); border-radius: var(--z-radius-md); background: var(--z-superficie-alta); color: var(--z-texto); }
.za-contacto .fa { color: var(--z-texto-suave); }
/* Separador « · » entre el cliente y el teléfono (si el teléfono salta de línea, el separador va con él) */
.za-contacto .za-contacto-dato + .za-contacto-dato::before { content: "\00b7"; margin-right: var(--z-space-2); color: var(--z-texto-suave); }
.za-lista-vacia { padding: 0; margin: 0; }
.za-rel { position: relative; }

/* Modal de cita en dos pasos (cita y recepción): lateral izquierdo con los pasos (.z-pasos-vertical de modal-rediseno.css)
   y, a la derecha, el contenido, que se desliza entre pasos. Cabecera y pie quedan siempre a la vista: el cuerpo hace
   scroll si la pantalla es baja. La altura se anima hasta la del paso activo (agenda.js fija la altura durante el
   cambio; el paso inactivo se pliega al terminar) */
#modal-cita .cita-dialogo { width: 860px; max-width: calc(100% - 20px); }
#modal-cita .cita-contenido { display: flex; flex-direction: column; overflow: hidden; }
#modal-cita .cita-medio { display: flex; min-width: 0; flex: 1 1 auto; min-height: 0; }
#modal-cita .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); }
#modal-cita .cita-rail-pie { margin-top: auto; padding-top: 22px; }
#modal-cita .cita-atajos { display: flex; flex-direction: column; gap: 6px; margin: 0 0 18px; font-size: var(--z-text-sm); color: var(--z-texto-suave); }
#modal-cita .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; }
#modal-cita .cita-ventana { flex: 1 1 auto; min-width: 0; overflow: hidden; transition: height 0.22s ease; }
#modal-cita .cita-carril { display: grid; grid-template-columns: 50% 50%; align-items: start; width: 200%; transition: transform 0.22s ease; }
#modal-cita.paso-2 .cita-carril { transform: translateX(-50%); }
#modal-cita .cita-paso { display: flex; flex-direction: column; min-width: 0; max-height: calc(100vh - 150px); transition: max-height 0s, visibility 0s; }
#modal-cita .cita-paso > .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
#modal-cita:not(.paso-2) #form-recepcion, #modal-cita.paso-2 #form-cita { max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0s 0.22s, visibility 0s 0.22s; }
#cita-pasos button.z-paso { cursor: pointer; text-align: left; }
#cita-pasos button.z-paso:focus-visible { outline: 3px solid var(--z-foco); outline-offset: 2px; border-radius: 10px; }

/* Barra de paso (alternativa C): única para los dos pasos, a todo el ancho; su mitad izquierda es del riel.
   Está fuera del carril: la animación de altura de la ventana no la afecta y el modal no cambia de tamaño entre pasos */
:root { --cb-pel: #C62828; --cb-pel-txt: #C62828; }
[data-theme="dark"] { --cb-pel: #D23C3C; --cb-pel-txt: #FF8A8A; }
#cita-barra { border-top: 1px solid var(--z-borde); background: var(--z-superficie); }
#cita-barra .cita-barra-normal { display: grid; grid-template-columns: 220px minmax(0, 1fr); align-items: stretch; }
#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); }
#cita-barra .cita-puntos { display: inline-flex; gap: 5px; }
#cita-barra .cita-puntos i { width: 22px; height: 6px; border-radius: 99px; background: var(--z-borde-fuerte); }
#cita-barra .cita-puntos i.on { background: var(--z-marca); }
#cita-barra .cita-barra-der { display: flex; align-items: center; padding: 14px 28px; }
#cita-barra .cita-acc { display: flex; align-items: center; gap: 10px; width: 100%; }
#cita-barra .cita-acc-2 { display: none; }
#modal-cita.paso-2 #cita-barra .cita-acc-1 { display: none; }
#modal-cita.paso-2 #cita-barra .cita-acc-2 { display: flex; }
#cita-barra .cita-hueco { flex: 1 1 auto; }
#cita-barra .cita-barra-conf { display: none; align-items: center; gap: 14px; flex-wrap: wrap; padding: 14px 28px; background: var(--z-error-suave); }
#cita-barra.confirmando .cita-barra-normal { display: none; }
#cita-barra.confirmando .cita-barra-conf { display: flex; }
#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; }
#cita-barra .cita-conf-tx { flex: 1 1 240px; min-width: 0; }
#cita-barra .cita-conf-tx b { display: block; color: var(--z-texto); }
#cita-barra .cita-conf-tx p { margin: 2px 0 0; font-size: 13px; color: var(--z-texto-suave); }
#cita-barra .cita-conf-acc { display: flex; gap: 10px; }

.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); }
.cb-btn:focus-visible { outline: 3px solid var(--z-foco); outline-offset: 2px; }
.cb-btn[disabled] { opacity: .5; cursor: not-allowed; }
.cb-pri { background: var(--z-marca); border-color: var(--z-marca); color: var(--z-sobre-marca); }
.cb-pri:hover:not([disabled]) { background: var(--z-marca-hover); border-color: var(--z-marca-hover); }
.cb-sec { background: var(--z-superficie); border-color: var(--z-borde-fuerte); color: var(--z-texto); }
.cb-sec:hover:not([disabled]) { background: var(--z-superficie-alta); }
.cb-txt { color: var(--z-texto-suave); padding: 0 12px; }
.cb-txt:hover:not([disabled]) { background: var(--z-superficie); color: var(--z-texto); }
.cb-pel, .cb-txt.cb-pel { color: var(--cb-pel-txt); }
.cb-txt.cb-pel:hover:not([disabled]) { background: var(--z-error-suave); color: var(--cb-pel-txt); }
.cb-pelsol { background: var(--cb-pel); border-color: var(--cb-pel); color: #fff; }
.cb-pelsol:hover:not([disabled]) { filter: brightness(.92); }
#modal-cita .cita-borrar { display: inline-flex; }
#modal-cita .cita-borrar[style*="none"] { display: none; }
.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) {
  #modal-cita .cita-contenido { max-height: calc(100vh - 20px); }
  #modal-cita .cita-medio { flex-direction: column; }
  #modal-cita .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); }
  #modal-cita .cita-rail-pie { margin: 0; padding: 0; flex: none; }
#modal-cita .cita-atajos { display: none; }
  #modal-cita .cita-borrar { width: 48px; height: 48px; padding: 0; }
  #modal-cita .cita-borrar span { display: none; }
  #modal-cita .z-pasos-vertical { flex: 1 1 auto; min-width: 0; flex-direction: row; align-items: center; padding: 0; }
  #modal-cita .z-pasos-vertical .z-paso { flex-direction: row; align-items: center; width: auto; min-height: 48px; gap: 8px; }
  #modal-cita .z-pasos-vertical .z-paso small { display: none; }
  #modal-cita .z-pasos-vertical .z-pasos-barra { flex: 1 1 auto; width: auto; height: 4px; margin: 0 10px; }
  #modal-cita .z-pasos-vertical .z-pasos-relleno { width: 0; height: 100%; }
  #modal-cita .z-pasos-vertical .z-pasos-barra.hecha .z-pasos-relleno { width: 100%; }
  #modal-cita .cita-paso { max-height: calc(100vh - 190px); }
  #modal-cita .close { min-width: 48px; min-height: 48px; }
  #cita-barra .cita-barra-normal { display: block; }
  #cita-barra .cita-barra-izq { display: none; }
  #cita-barra .cita-barra-der { padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  #cita-barra .cita-acc { gap: 8px; }
  #cita-barra .cb-btn { height: 48px; padding: 0 14px; font-size: 15px; }
  #cita-barra .cb-pri { height: 52px; flex: 1 1 auto; }
  #cita-barra .cita-acc-1 .cb-sec { flex: 0 1 auto; }
  #cita-barra .cita-hueco { display: none; }
  #cita-barra .cita-acc-2 .cb-txt { flex: 0 0 auto; }
  .cb-solo-esc { display: none; }
  #cita-barra .cita-barra-conf { padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px)); }
  #cita-barra .cita-conf-acc { width: 100%; }
  #cita-barra .cita-conf-acc .cb-btn { flex: 1 1 0; }
}
@supports (height: 100dvh) {
  #modal-cita .cita-paso { max-height: calc(100dvh - 150px); }
  @media (max-width: 767px) { #modal-cita .cita-contenido { max-height: calc(100dvh - 20px); } #modal-cita .cita-paso { max-height: calc(100dvh - 190px); } }
}
.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); }
.cita-resumen-cuando { color: var(--z-texto-suave); }
@media (prefers-reduced-motion: reduce) { #modal-cita .cita-carril, #modal-cita .cita-ventana { transition: none; } }

@media (max-width: 767px) {
  .cita-fila-matricula { flex-wrap: wrap; }
  .cita-fila-matricula > div { flex-basis: 100%; }
  .cita-fila-matricula .z-matricula { margin-left: 0; }
}

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

/* Campos con esquinas redondeadas, 40 px de alto y borde de componente: los mismos que en las altas en modal (alta-modal.css) */
body.smart-style-2 #modal-cita .form-control { height: var(--z-control-md, 40px); border: 1px solid var(--z-borde-fuerte); border-radius: var(--z-radius-md) !important; box-shadow: none; }
body.smart-style-2 #modal-cita textarea.form-control { height: auto; padding: 9px 12px; border-radius: var(--z-radius-md) !important; }
body.smart-style-2 #modal-cita .form-control:focus { border-color: var(--z-foco); box-shadow: var(--z-shadow-foco); outline: 0; }
body.smart-style-2 #modal-cita .tm-tecnicos.select2-container-multi .select2-choices { min-height: var(--z-control-md, 40px); border: 1px solid var(--z-borde-fuerte); border-radius: var(--z-radius-md); }