/*
 * Sistema único de modales de Zuricar. Se carga en todas las páginas (php/plantillas/header.html.php).
 *
 *  1. Confirmación compacta (.zo-modal-descartar): icono de gravedad, título, texto y dos botones.
 *     Peligro (rojo, solo destruir) · aviso (ámbar) · información (naranja de marca).
 *  2. Aspecto común de los modales con formulario (los clásicos de SmartAdmin y los de rediseño): título en tinta, pie con borde,
 *     Cancelar y Volver en blanco con borde, acción principal en naranja de marca, destructiva en rojo.
 *  3. Cajas de mensaje oscuras (.divMessageBox) con el mismo aspecto que la confirmación compacta.
 *  4. Aviso sin bloqueo (.zm-aviso), que sustituye a alert().
 *
 * Solo variables --z-* de css/zuricar-tokens.css (tema claro y oscuro).
 * Carpeta: css/ · Fichero: zuricar-modales.css · Permisos: 644
 */

/* ===== 1. Confirmación compacta ===== */
body.smart-style-2 .zo-modal-descartar .modal-dialog { width: 420px; max-width: calc(100% - 32px); display: flex; align-items: center; min-height: calc(100vh - 60px); margin: 30px auto; }
body.smart-style-2 .zo-modal-descartar .modal-content { width: 100%; border: 0; border-radius: var(--z-radius-lg); box-shadow: var(--z-shadow-lg, 0 20px 50px rgba(0,0,0,.3)); overflow: hidden; background: var(--z-superficie); }
body.smart-style-2 .zo-descartar-cuerpo { display: flex; gap: var(--z-space-4); padding: var(--z-space-6) var(--z-space-6) var(--z-space-3); }
body.smart-style-2 .zo-descartar-cuerpo h4 { margin: 0 0 6px; color: var(--z-texto); font-size: var(--z-text-base); font-weight: var(--z-weight-semibold); }
body.smart-style-2 .zo-descartar-cuerpo p { margin: 0; color: var(--z-texto-suave); font-size: var(--z-text-sm); }
body.smart-style-2 .zo-descartar-cuerpo p + p { margin-top: 8px; }
body.smart-style-2 .zo-descartar-cuerpo .zo-estado-datos { color: var(--z-texto); font-weight: var(--z-weight-medium); font-variant-numeric: tabular-nums; }
body.smart-style-2 .zo-descartar-cuerpo .zo-estado-nota { font-size: var(--z-text-xs); }
body.smart-style-2 .zo-descartar-icono { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--z-error-suave); color: var(--z-error); font-size: 17px; }
body.smart-style-2 .zo-descartar-icono.zo-icono-aviso { background: var(--z-aviso-suave); color: var(--z-aviso); }
body.smart-style-2 .zo-descartar-icono.zo-icono-info { background: var(--z-marca-suave); color: var(--z-marca-texto); }
body.smart-style-2 .zo-descartar-pie { display: flex; justify-content: flex-end; gap: var(--z-space-3); padding: var(--z-space-4) var(--z-space-6) var(--z-space-6); }
body.smart-style-2 .zo-modal-descartar .zo-btn { display: inline-flex; align-items: center; gap: var(--z-space-2); height: var(--z-control-md); padding: 0 var(--z-space-5); border: 1px solid var(--z-borde-fuerte); border-radius: var(--z-radius-pill); background: var(--z-superficie); color: var(--z-texto); font-size: var(--z-text-sm); font-weight: var(--z-weight-medium); text-decoration: none; cursor: pointer; }
body.smart-style-2 .zo-modal-descartar .zo-btn:hover { background: var(--z-superficie-alta); }
body.smart-style-2 .zo-modal-descartar .zo-btn-primario { background: var(--z-marca); border-color: var(--z-marca); color: var(--z-sobre-marca); }
body.smart-style-2 .zo-modal-descartar .zo-btn-primario:hover, body.smart-style-2 .zo-modal-descartar .zo-btn-primario:focus { background: var(--z-marca-oscuro); border-color: var(--z-marca-oscuro); color: #fff; }
body.smart-style-2 .zo-modal-descartar .zo-btn-peligro { background: var(--z-error); border-color: var(--z-error); color: #fff; }
body.smart-style-2 .zo-modal-descartar .zo-btn-peligro:hover, body.smart-style-2 .zo-modal-descartar .zo-btn-peligro:focus { color: #fff; filter: brightness(.92); }
/* Variante llamativa (zConfirmar con destacado: true): cerrar sesión */
body.smart-style-2 .zo-destacado .modal-content { border-top: 6px solid var(--z-marca); }
body.smart-style-2 .zo-destacado .zo-descartar-cuerpo { flex-direction: column; align-items: center; text-align: center; padding-top: var(--z-space-8, 32px); }
body.smart-style-2 .zo-destacado .zo-descartar-icono { width: 76px; height: 76px; font-size: 32px; background: var(--z-marca); color: var(--z-sobre-marca); box-shadow: 0 0 0 10px var(--z-marca-suave); margin-bottom: var(--z-space-3); }
body.smart-style-2 .zo-destacado .zo-descartar-cuerpo h4 { font-size: var(--z-text-xl, 22px); font-weight: 700; }
body.smart-style-2 .zo-destacado .zo-descartar-pie { flex-direction: column-reverse; }
body.smart-style-2 .zo-destacado .zo-btn { justify-content: center; width: 100%; height: 46px; font-weight: 600; }
body.smart-style-2 .zo-modal-descartar .zo-btn[disabled] { opacity: .5; pointer-events: none; }

/* ===== 2. Aspecto común de los modales con formulario ===== */
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .modal-content { border: 0; border-radius: var(--z-radius-lg); box-shadow: var(--z-shadow-lg, 0 20px 50px rgba(0,0,0,.3)); overflow: hidden; background: var(--z-superficie); }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .modal-header { padding: 22px 28px 16px; background: var(--z-superficie); border-bottom: 1px solid var(--z-borde); }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) h4.modal-title { color: var(--z-texto) !important; font-size: var(--z-text-lg); font-weight: var(--z-weight-semibold) !important; line-height: 1.35; }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .modal-header p { margin: 6px 0 0; color: var(--z-texto-suave); font-size: var(--z-text-sm); }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .modal-header .close { margin-top: 0; opacity: 1; color: var(--z-texto-suave) !important; text-shadow: none; font-size: 24px; }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .modal-header .close:hover { color: var(--z-texto) !important; }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .smart-form footer,
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .modal-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 28px; background: var(--z-superficie); border-top: 1px solid var(--z-borde); }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .smart-form footer:after { display: none; }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .modal-footer .btn + .btn { margin-left: 0; }
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) footer .btn,
body.smart-style-2 .modal:not(.zo-modal-descartar):not(.zo-modal-crear) .modal-footer .btn { float: none !important; margin: 0 !important; height: var(--z-control-md); padding: 0 20px; border-radius: var(--z-radius-pill); font-size: var(--z-text-sm); font-weight: var(--z-weight-medium); text-shadow: none; box-shadow: none; display: inline-flex; align-items: center; gap: 6px; }
/* Cancelar y Volver: blanco con borde */
body.smart-style-2 .modal footer .btn.bg-color-yellow, body.smart-style-2 .modal footer .btn-default, body.smart-style-2 .modal .modal-footer .btn-default, body.smart-style-2 .modal .modal-footer .btn.bg-color-yellow { background: var(--z-superficie) !important; border: 1px solid var(--z-borde-fuerte) !important; color: var(--z-texto) !important; }
body.smart-style-2 .modal footer .btn.bg-color-yellow:hover, body.smart-style-2 .modal footer .btn-default:hover, body.smart-style-2 .modal .modal-footer .btn-default:hover { background: var(--z-superficie-alta) !important; }
/* Acción principal: naranja de marca */
body.smart-style-2 .modal footer .btn-info, body.smart-style-2 .modal footer .btn-primary, body.smart-style-2 .modal footer .btn-success, body.smart-style-2 .modal footer .btn.bg-color-teal, body.smart-style-2 .modal .modal-footer .btn-primary, body.smart-style-2 .modal .modal-footer .btn-info { background: var(--z-marca) !important; border: 1px solid var(--z-marca) !important; color: var(--z-sobre-marca) !important; }
body.smart-style-2 .modal footer .btn-info:hover, body.smart-style-2 .modal footer .btn-primary:hover, body.smart-style-2 .modal footer .btn-success:hover, body.smart-style-2 .modal .modal-footer .btn-primary:hover { background: var(--z-marca-oscuro) !important; border-color: var(--z-marca-oscuro) !important; color: #fff !important; }
/* Destruir: rojo */
body.smart-style-2 .modal footer .btn-danger, body.smart-style-2 .modal footer .btn.bg-color-red, body.smart-style-2 .modal .modal-footer .btn-danger { background: var(--z-error) !important; border: 1px solid var(--z-error) !important; color: #fff !important; }

/* ===== 3. Cajas de mensaje oscuras: mismo aspecto que la confirmación compacta ===== */
.divMessageBox { background: rgba(10, 12, 16, .55) !important; }
.divMessageBox .MessageBoxContainer { position: fixed !important; top: 50% !important; left: 50% !important; width: 420px !important; max-width: calc(100% - 32px); transform: translate(-50%, -50%); padding: 24px !important; background: var(--z-superficie) !important; color: var(--z-texto) !important; border-radius: var(--z-radius-lg); box-shadow: var(--z-shadow-lg, 0 20px 50px rgba(0,0,0,.3)); }
.divMessageBox .MessageBoxMiddle { left: 0 !important; width: 100% !important; padding: 0 !important; }
.divMessageBox .MessageBoxMiddle .MsgTitle { display: block; margin-bottom: 8px; color: var(--z-texto); font-size: var(--z-text-base) !important; font-weight: var(--z-weight-semibold) !important; letter-spacing: 0 !important; }
.divMessageBox .MessageBoxMiddle .MsgTitle .fa { color: var(--z-error) !important; }
.divMessageBox .MessageBoxMiddle .pText { margin: 0 0 18px; color: var(--z-texto-suave); font-size: var(--z-text-sm); font-style: normal !important; }
.divMessageBox .MessageBoxButtonSection { display: flex; justify-content: flex-end; gap: 12px; height: auto !important; }
.divMessageBox .MessageBoxButtonSection button { float: none !important; margin: 0 !important; height: var(--z-control-md); padding: 0 20px !important; border-radius: var(--z-radius-pill); font-size: var(--z-text-sm) !important; font-weight: var(--z-weight-medium) !important; text-shadow: none; box-shadow: none; }
body.smart-style-2 .divMessageBox .MessageBoxButtonSection button.btn.btn-default { background: var(--z-superficie) !important; border: 1px solid var(--z-borde-fuerte) !important; color: var(--z-texto) !important; }
body.smart-style-2 .divMessageBox .MessageBoxButtonSection button.btn.bg-color-yellow { background: var(--z-error) !important; border: 1px solid var(--z-error) !important; color: #fff !important; }

/* ===== 4. Aviso sin bloqueo (sustituye a alert()) ===== */
.zm-avisos { position: fixed; left: 50%; bottom: 24px; z-index: 100001; display: flex; flex-direction: column; gap: 8px; align-items: center; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); pointer-events: none; }
.zm-aviso { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: var(--z-radius-pill); background: #14161A; color: #fff; font-size: var(--z-text-sm); box-shadow: 0 8px 24px rgba(0,0,0,.28); pointer-events: auto; animation: zm-aviso-in .18s ease-out; }
.zm-aviso .fa { font-size: 15px; }
.zm-aviso.zm-error .fa { color: #F07A7A; } .zm-aviso.zm-ok .fa { color: #5DC083; } .zm-aviso.zm-aviso-i .fa { color: #E7B54C; }
@keyframes zm-aviso-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .zm-aviso { animation: none; } }


/* ===== 5. Altas con ficha viva (nuevo vehículo, nuevo artículo): formulario a la izquierda y vista previa a la derecha =====
   Marcado en php/plantillas/modales/nuevo-vehiculo.html.php y nuevo-articulo.html.php; comportamiento en js/scripts/modales.js. */
body.smart-style-2 .zmf-dialog { width: 920px; max-width: calc(100% - 32px); }
body.smart-style-2 .zmf-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 290px; }
body.smart-style-2 .zmf-izq { min-width: 0; padding: 20px 28px 8px; } /* sin overflow propio: las listas de autocompletar no se recortan; si no cabe, hace scroll el modal */
body.smart-style-2 .zmf-der { background: var(--z-fondo); border-left: 1px solid var(--z-borde); padding: 20px; box-sizing: border-box; min-height: 0; width: auto; float: none; } /* sin box-sizing, el min-height:100% heredado sumaba el relleno y la columna tapaba 40 px del pie */
/* Pie alineado con las dos columnas: Cancelar y Guardar en la del formulario y, debajo de la vista previa, la misma franja de fondo */
@media (min-width: 768px) {
  body.smart-style-2 .modal.zmf-modal[data-zmf] .zmf-form footer { display: grid; grid-template-columns: minmax(0, 1fr) 290px; align-items: center; padding: 0 !important; }
  body.smart-style-2 .modal.zmf-modal[data-zmf] .zmf-form footer::after { content: ""; display: block !important; grid-column: 2; grid-row: 1; align-self: stretch; background: var(--z-fondo); border-left: 1px solid var(--z-borde); }
  body.smart-style-2 .modal.zmf-modal[data-zmf] .zmf-form footer .btn { grid-column: 1; grid-row: 1; margin-top: 14px !important; margin-bottom: 14px !important; }
  body.smart-style-2 .modal.zmf-modal[data-zmf] .zmf-form footer .btn:first-child { justify-self: start; margin-left: 28px !important; margin-right: 0 !important; }
  body.smart-style-2 .modal.zmf-modal[data-zmf] .zmf-form footer .btn:last-child { justify-self: end; margin-right: 28px !important; margin-left: 0 !important; }
}
body.smart-style-2 .zmf-rejilla { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 14px; }
body.smart-style-2 .zmf-c3 { grid-column: span 3; } body.smart-style-2 .zmf-c4 { grid-column: span 4; } body.smart-style-2 .zmf-c5 { grid-column: span 5; }
body.smart-style-2 .zmf-c6 { grid-column: span 6; } body.smart-style-2 .zmf-c7 { grid-column: span 7; } body.smart-style-2 .zmf-c12 { grid-column: span 12; }
body.smart-style-2 .zmf-form .label { font-size: var(--z-text-xs); font-weight: var(--z-weight-semibold); color: var(--z-texto-suave); }
/* Botón «+» dentro del campo (alta de cliente, marca, modelo, familia, proveedor) */
body.smart-style-2 .zmf-form .input:has(.zmf-mas) input[type="text"] { padding-right: 44px; }
body.smart-style-2 .zmf-mas { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--z-marca-suave); color: var(--z-marca-texto); text-decoration: none; }
body.smart-style-2 .zmf-mas:hover, body.smart-style-2 .zmf-mas:focus { background: var(--z-marca); color: var(--z-sobre-marca); text-decoration: none; }
body.smart-style-2 .zmf-fijo input { background: var(--z-superficie-alta); color: var(--z-texto); font-weight: var(--z-weight-medium); }
/* Desplegables de datos opcionales, con su contador alineado a la derecha */
body.smart-style-2 .zmf-acc { border: 1px solid var(--z-borde); border-radius: var(--z-radius-md); margin: 0 0 10px; overflow: hidden; }
body.smart-style-2 .zmf-acc > button { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border: 0; background: var(--z-superficie); color: var(--z-texto); font-weight: var(--z-weight-semibold); text-align: left; cursor: pointer; }
body.smart-style-2 .zmf-acc > button:hover { background: var(--z-superficie-alta); }
body.smart-style-2 .zmf-acc > button .zmf-n { margin-left: auto; min-width: 54px; text-align: right; color: var(--z-texto-suave); font-size: var(--z-text-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
body.smart-style-2 .zmf-acc > button .fa { width: 14px; color: var(--z-texto-suave); transition: transform .15s; }
body.smart-style-2 .zmf-acc.on > button .fa { transform: rotate(180deg); }
body.smart-style-2 .zmf-cu { display: none; padding: 14px 14px 0; border-top: 1px solid var(--z-borde); }
body.smart-style-2 .zmf-acc.on .zmf-cu { display: block; }
/* I.V.A. en pastillas; el select real queda fuera de la vista porque lo leen las pantallas */
body.smart-style-2 .zmf-iva { display: flex; gap: 6px; }
body.smart-style-2 .zmf-iva button { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 4px; white-space: nowrap; border: 1px solid var(--z-borde-fuerte); border-radius: var(--z-radius-md); background: var(--z-superficie); color: var(--z-texto); cursor: pointer; }
body.smart-style-2 .zmf-iva button.on { background: var(--z-marca-suave); border-color: var(--z-marca); color: var(--z-marca-texto); font-weight: var(--z-weight-bold); }
body.smart-style-2 .zmf-iva-select { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/* Vista previa */
body.smart-style-2 .zmf-eyebrow { margin-bottom: 10px; font-size: 11px; font-weight: var(--z-weight-semibold); letter-spacing: .07em; text-transform: uppercase; color: var(--z-texto-suave); }
body.smart-style-2 .zmf-tarj { background: var(--z-superficie); border: 1px solid var(--z-borde); border-radius: var(--z-radius-lg); padding: 16px; }
body.smart-style-2 .zmf-tarj h5 { margin: 12px 0 0; font-size: var(--z-text-base); font-weight: var(--z-weight-semibold); color: var(--z-texto); word-break: break-word; }
body.smart-style-2 .zmf-tarj > .zmf-sub:first-child + h5 { margin-top: 4px; }
body.smart-style-2 .zmf-sub { margin-top: 2px; font-size: var(--z-text-sm); color: var(--z-texto-suave); word-break: break-word; }
body.smart-style-2 .zmf-placa.vacio .z-matricula-texto { opacity: .35; }
body.smart-style-2 .zmf-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 12px; }
body.smart-style-2 .zmf-chips span { font-size: 11px; background: var(--z-superficie-alta); border-radius: 999px; padding: 3px 9px; color: var(--z-texto); }
body.smart-style-2 .zmf-prog { height: 6px; margin-top: 14px; border-radius: 99px; background: var(--z-superficie-alta); overflow: hidden; }
body.smart-style-2 .zmf-prog i { display: block; height: 100%; width: 0; background: var(--z-marca); transition: width .2s; }
body.smart-style-2 .zmf-progt { margin-top: 5px; font-size: var(--z-text-xs); color: var(--z-texto-suave); }
body.smart-style-2 .zmf-pvp { margin-top: 14px; padding: 12px 14px; border-radius: var(--z-radius-md); background: var(--z-marca-suave); }
body.smart-style-2 .zmf-pvp .zmf-l { display: flex; justify-content: space-between; padding: 2px 0; font-size: var(--z-text-sm); color: var(--z-texto-suave); font-variant-numeric: tabular-nums; }
body.smart-style-2 .zmf-pvp .zmf-t { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--z-marca); font-weight: var(--z-weight-bold); color: var(--z-texto); }
body.smart-style-2 .zmf-pvp .zmf-t span:last-child { font-size: 24px; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) {
  body.smart-style-2 .zmf-cuerpo { grid-template-columns: minmax(0, 1fr); }
  body.smart-style-2 .zmf-der { border-left: 0; border-top: 1px solid var(--z-borde); }
  body.smart-style-2 .zmf-rejilla > section { grid-column: span 12; }
}