/* ========================================================================== 
   v106 · Sistema visual unificado de modales
   Densidad sobria, controles compactos y jerarquía uniforme en todo el ERP.
   Se carga después de theme.css y pos.css para actuar como capa final.
   ========================================================================== */

:root {
    --modal-control-height: 38px;
    --modal-radius: 10px;
    --modal-field-radius: 7px;
    --modal-border: #d9dee8;
    --modal-divider: #e7eaf0;
    --modal-text: #252938;
    --modal-muted: #7a8292;
    --modal-surface-soft: #f7f8fa;
    --modal-primary: var(--ui-primary, #351078);
}

/* Base común para cualquier <dialog> del sistema. */
dialog {
    font-family: var(--font-body, "Montserrat", sans-serif);
    color: var(--modal-text);
}

dialog::backdrop {
    background: rgba(22, 25, 35, .46);
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}

dialog label {
    color: #363b49;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 550;
}

dialog input:not([type="checkbox"]):not([type="radio"]),
dialog select,
dialog textarea {
    min-height: var(--modal-control-height) !important;
    padding: 7px 10px !important;
    border-radius: var(--modal-field-radius) !important;
    font-family: var(--font-body, "Montserrat", sans-serif) !important;
    font-size: 13px !important;
    line-height: 20px !important;
}

dialog textarea {
    min-height: 72px !important;
    padding-block: 8px !important;
}

dialog .button {
    min-height: var(--modal-control-height) !important;
    padding: 8px 14px !important;
    border-radius: var(--modal-field-radius) !important;
    font-family: var(--font-body, "Montserrat", sans-serif) !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Modales CRUD reutilizables: Clientes, Proveedores, Productos, Marcas, etc.
   -------------------------------------------------------------------------- */
.app-modal {
    width: min(850px, calc(100vw - 40px));
    max-width: 850px;
    max-height: min(84vh, 720px);
    border: 1px solid #dfe3ea;
    border-radius: var(--modal-radius) !important;
    box-shadow: 0 22px 58px rgba(20, 23, 34, .20);
}

.entity-modal-wide,
.product-modal {
    width: min(900px, calc(100vw - 40px));
    max-width: 900px;
}

.address-book-modal {
    width: min(920px, calc(100vw - 40px));
    max-width: 920px;
}

.entity-modal-compact {
    width: min(540px, calc(100vw - 40px));
    max-width: 540px;
}

.app-modal-panel {
    max-height: min(84vh, 720px);
}

.app-modal-header {
    padding: 14px 18px 12px !important;
    gap: 16px;
    border-bottom: 1px solid var(--modal-divider);
}

.app-modal-header h2 {
    margin: 1px 0 2px;
    color: #202431;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
}

.app-modal-header p {
    margin: 0;
    max-width: 680px;
    color: var(--modal-muted);
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.modal-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--modal-primary);
    font-size: 10px !important;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.modal-close {
    width: 30px !important;
    height: 30px !important;
    min-width: 30px;
    min-height: 30px;
    border-radius: 6px !important;
    background: transparent;
    color: #979eaa;
    font-size: 20px !important;
    line-height: 1;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #545b68;
}

.modal-tabs {
    gap: 3px;
    padding: 0 18px !important;
    border-bottom: 1px solid var(--modal-divider);
    background: #fff;
}

.modal-tab {
    min-height: 39px !important;
    padding: 10px 13px 9px !important;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 7px 7px 0 0;
    color: #778092;
    background: transparent;
    font: 550 13px/1.2 var(--font-body, "Montserrat", sans-serif) !important;
}

.modal-tab:hover {
    color: var(--modal-primary);
    background: #fafafa;
}

.modal-tab.is-active {
    color: var(--modal-primary);
    border-bottom-color: var(--modal-primary);
    background: #f2f3f5;
    font-weight: 650 !important;
}

.app-modal-grid {
    padding: 14px 18px !important;
    gap: 11px !important;
}

.app-modal .form-section-grid {
    gap: 10px 12px !important;
}

.app-modal .form-section-grid label,
.app-modal .form-section-grid .form-field,
.app-modal-grid label,
.app-modal-grid .form-field {
    gap: 5px !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
    font-weight: 550 !important;
}

.app-modal .form-section > legend {
    margin-bottom: 10px;
    font-size: 13px;
    line-height: 1.35;
}

.app-modal .form-section > legend small,
.app-modal small {
    font-size: 11px;
    line-height: 1.4;
}

.app-modal-footer {
    padding: 11px 18px !important;
    gap: 8px;
    border-top: 1px solid var(--modal-divider);
    background: #fbfbfc;
}

.app-modal-footer .button {
    min-width: 94px;
}

.async-save-button {
    min-width: 128px !important;
}

.modal-form-alert {
    margin: 10px 18px 0 !important;
    padding: 8px 10px !important;
    border-radius: 7px !important;
    font-size: 12px !important;
}

/* Clientes y proveedores: dos columnas limpias como patrón maestro del ERP. */
.entity-modal .form-section-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.entity-modal .apiperu-document-control,
.entity-modal .apiperu-exchange-control {
    min-height: var(--modal-control-height);
    margin-top: 4px;
    gap: 6px;
}

.entity-modal .apiperu-document-button,
.entity-modal .apiperu-exchange-button {
    min-height: var(--modal-control-height) !important;
    padding-inline: 13px !important;
    white-space: nowrap;
}

.entity-modal .apiperu-field-status {
    min-height: 13px;
    margin-top: 2px;
    font-size: 10.5px;
    line-height: 1.35;
}

/* Libro de direcciones: misma densidad que los datos principales. */
.entity-address-card {
    border-radius: 8px !important;
}

.entity-address-layout {
    gap: 10px 12px !important;
}

.entity-address-layout label {
    gap: 5px !important;
}

.ubigeo-picker {
    margin-top: 4px !important;
}

.ubigeo-picker-trigger {
    min-height: var(--modal-control-height) !important;
    padding: 7px 10px !important;
    border-radius: var(--modal-field-radius) !important;
}

.ubigeo-picker-trigger,
.ubigeo-picker-trigger [data-ubigeo-display],
.ubigeo-picker-option {
    font-size: 13px !important;
}

.ubigeo-picker-option {
    min-height: 36px !important;
    padding: 7px 13px !important;
}

.entity-address-add {
    min-height: 36px !important;
}

/* --------------------------------------------------------------------------
   Modales POS / impresión / anulaciones.
   -------------------------------------------------------------------------- */
.sale-completion-dialog {
    border-radius: 11px !important;
}

.sale-completion-panel {
    border-radius: 11px !important;
    box-shadow: 0 22px 58px rgba(20, 23, 34, .20) !important;
}

.sale-completion-header {
    padding: 18px 20px 13px !important;
    gap: 14px;
}

.sale-completion-icon {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    font-size: 18px !important;
}

.sale-completion-eyebrow {
    font-size: 10px !important;
}

.sale-completion-header h2 {
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 550 !important;
}

.sale-completion-close {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    border-radius: 7px !important;
    font-size: 20px !important;
}

.sale-completion-status {
    margin-inline: 20px !important;
    padding: 10px 12px !important;
    border-radius: 8px !important;
}

.sale-completion-print {
    padding: 16px 20px !important;
}

.sale-completion-print h3 {
    font-size: 14px !important;
}

.sale-completion-print p {
    font-size: 12px !important;
}

.sale-completion-footer {
    padding: 11px 20px 13px !important;
}

/* --------------------------------------------------------------------------
   Personalización de accesos directos.
   -------------------------------------------------------------------------- */
.quick-actions-dialog,
.quick-actions-panel {
    border-radius: 11px !important;
}

.quick-actions-dialog {
    box-shadow: 0 22px 58px rgba(20, 23, 34, .20) !important;
}

.quick-actions-header {
    padding: 17px 20px 14px !important;
    gap: 16px !important;
}

.quick-actions-eyebrow {
    margin-bottom: 3px !important;
    font-size: 10px !important;
}

.quick-actions-header h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
}

.quick-actions-header p {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.quick-actions-close {
    width: 30px !important;
    height: 30px !important;
    border-radius: 7px !important;
    font-size: 18px !important;
}

.quick-actions-fields {
    gap: 10px !important;
    padding: 15px 20px 17px !important;
}

.quick-actions-footer {
    padding: 11px 20px 13px !important;
}

/* --------------------------------------------------------------------------
   Series de productos/inventario/venta.
   -------------------------------------------------------------------------- */
.product-series-dialog,
.inventory-series-dialog,
.sale-series-dialog {
    border-radius: 11px !important;
    box-shadow: 0 22px 58px rgba(20, 23, 34, .20) !important;
}

.product-series-dialog-header,
.inventory-series-dialog-header,
.sale-series-dialog-header {
    padding: 16px 18px 13px !important;
    gap: 14px !important;
}

.product-series-dialog-header h2,
.inventory-series-dialog-header h2,
.sale-series-dialog-header h2 {
    font-family: var(--font-body, "Montserrat", sans-serif) !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.product-series-dialog-header p,
.inventory-series-dialog-header p,
.sale-series-dialog-header p {
    font-family: var(--font-body, "Montserrat", sans-serif) !important;
    font-size: 11px !important;
    line-height: 1.45 !important;
}

.product-series-dialog-summary,
.inventory-series-dialog-summary,
.sale-series-dialog-summary {
    padding: 10px 18px !important;
}

.product-series-table-wrap,
.inventory-series-table-wrap,
.sale-series-table-wrap {
    padding-inline: 18px !important;
}

.product-series-dialog-footer,
.inventory-series-dialog-footer,
.sale-series-dialog-footer {
    padding: 10px 18px !important;
}

/* --------------------------------------------------------------------------
   Servicio técnico: misma escala que el resto del sistema.
   -------------------------------------------------------------------------- */
.service-intake-dialog {
    width: min(900px, calc(100vw - 34px)) !important;
    max-width: 900px !important;
    border-radius: 11px !important;
    box-shadow: 0 22px 58px rgba(20, 23, 34, .20) !important;
}

.service-intake-header {
    padding: 17px 20px 13px !important;
    gap: 16px !important;
}

.service-intake-eyebrow {
    margin-bottom: 3px !important;
    font-size: 10px !important;
}

.service-intake-header h2 {
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
}

.service-intake-header p {
    margin-top: 4px !important;
    font-size: 12px !important;
}

.service-intake-close {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
    border-radius: 7px !important;
    font-size: 20px !important;
}

.service-intake-scroll {
    padding: 14px 20px 7px !important;
}

.service-intake-modal input:not([type="checkbox"]):not([type="radio"]),
.service-intake-modal select,
.service-intake-modal textarea,
.service-readonly-field {
    min-height: var(--modal-control-height) !important;
    border-radius: var(--modal-field-radius) !important;
    padding: 7px 10px !important;
    font-size: 13px !important;
}

.service-customer-add {
    min-height: var(--modal-control-height) !important;
}

.service-intake-tabs {
    margin-top: 13px !important;
}

.service-intake-tabs button {
    padding: 9px 13px 8px !important;
    border-radius: 7px 7px 0 0 !important;
    font-size: 13px !important;
    font-weight: 550 !important;
}

.service-intake-panel {
    padding: 13px 2px 8px !important;
}

.service-intake-footer {
    padding: 11px 20px 13px !important;
    gap: 14px !important;
}

/* --------------------------------------------------------------------------
   Revisión de descuentos y otros modales especiales.
   -------------------------------------------------------------------------- */
.quotation-discount-review-dialog {
    border-radius: 11px !important;
    box-shadow: 0 22px 58px rgba(20, 23, 34, .20) !important;
}

.quotation-discount-review-header {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 12px !important;
    padding: 17px 20px 14px !important;
}

.quotation-discount-review-icon {
    width: 38px !important;
    height: 38px !important;
    font-size: 17px !important;
}

.quotation-discount-review-header h2 {
    margin: 1px 0 4px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
}

.quotation-discount-review-header p {
    font-size: 12px !important;
    line-height: 1.45 !important;
}

.quotation-discount-review-warning {
    margin: 12px 20px 0 !important;
    padding: 9px 11px !important;
}

.quotation-discount-review-summary {
    padding: 14px 20px !important;
}

/* Responsive: conservar comodidad táctil sin volver a la escala grande. */
@media (max-width: 760px) {
    .app-modal,
    .entity-modal-wide,
    .product-modal,
    .address-book-modal,
    .entity-modal-compact {
        width: calc(100vw - 18px) !important;
        max-width: none !important;
        max-height: calc(100dvh - 18px) !important;
        border-radius: 9px !important;
    }

    .app-modal-panel {
        max-height: calc(100dvh - 18px) !important;
    }

    .entity-modal .form-section-grid.cols-2 {
        grid-template-columns: 1fr;
    }

    .entity-modal .form-section-grid .span-2 {
        grid-column: auto;
    }

    .app-modal-header,
    .app-modal-grid,
    .app-modal-footer {
        padding-inline: 14px !important;
    }

    .modal-tabs {
        padding-inline: 14px !important;
    }

    .service-intake-header,
    .service-intake-scroll,
    .service-intake-footer,
    .quick-actions-header,
    .quick-actions-fields,
    .quick-actions-footer {
        padding-inline: 14px !important;
    }
}

/* Alineación vertical consistente cuando una columna incluye ayuda/estado. */
.entity-modal .form-section-grid.cols-2 {
    align-items: start;
}