/*
 * Responsive layout baseline
 * ---------------------------
 * Shared visual rules for every authenticated module.  This file deliberately
 * contains presentation-only overrides: routes, forms, data and permissions
 * remain untouched.  Module-specific styles can still opt into a narrower
 * layout where that is part of the component's purpose (for example, login
 * and password forms).
 */

:root {
  --layout-gutter: clamp(12px, 1.65vw, 40px);
  --layout-gap: clamp(12px, 1.35vw, 28px);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body .wrapper {
  min-height: 100vh;
}

/* AdminLTE's content area expands naturally while retaining safe gutters. */
body .wrapper .content-wrapper {
  min-height: calc(100vh - var(--notary-header-height, 58px));
  width: auto;
}

body .wrapper .content-wrapper > .content,
body .wrapper .content-wrapper > .content-header {
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}

body .wrapper .content-wrapper > .content {
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
  padding-top: clamp(14px, 1.4vw, 28px);
  padding-bottom: clamp(20px, 2vw, 42px);
}

body .wrapper .content-wrapper > .content-header {
  padding-left: var(--layout-gutter);
  padding-right: var(--layout-gutter);
}

/* Bootstrap containers should not leave a fixed 1170px island on large screens. */
body .wrapper .content-wrapper .container,
body .wrapper .content-wrapper .container-fluid {
  box-sizing: border-box;
  max-width: none;
  width: 100%;
}

/* Keep Bootstrap gutters consistent when cards/forms are laid out in rows. */
body .wrapper .content-wrapper .row {
  margin-left: calc(var(--layout-gap) * -0.5);
  margin-right: calc(var(--layout-gap) * -0.5);
}

body .wrapper .content-wrapper .row > [class*="col-"] {
  box-sizing: border-box;
  padding-left: calc(var(--layout-gap) * 0.5);
  padding-right: calc(var(--layout-gap) * 0.5);
}

body .wrapper .content-wrapper img,
body .wrapper .content-wrapper iframe,
body .wrapper .content-wrapper video,
body .wrapper .content-wrapper canvas {
  max-width: 100%;
}

/* Tables remain readable and use all available width; overflow is local. */
body .wrapper .content-wrapper table {
  max-width: 100%;
}

body .wrapper .content-wrapper .table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

body .wrapper .content-wrapper .table-responsive > table {
  width: 100%;
}

/* DataTables writes an inline width during initialisation.  Keep that width
 * inside its available panel and let the horizontal scroll stay local. */
body .wrapper .content-wrapper .dataTables_wrapper,
body .wrapper .content-wrapper .dataTables_scroll,
body .wrapper .content-wrapper .dataTables_scrollHead,
body .wrapper .content-wrapper .dataTables_scrollBody {
  max-width: 100%;
  width: 100%;
}

body .wrapper .content-wrapper .dataTables_scrollBody {
  overflow-x: auto;
}

body .wrapper .content-wrapper table.dataTable {
  width: 100% !important;
}

/* Common dashboard/card grids grow with the viewport instead of stopping at
 * two columns.  Existing explicit grids keep their own component rules. */
body .wrapper .content-wrapper .dashboard-grid,
body .wrapper .content-wrapper .cards-grid,
body .wrapper .content-wrapper .kpi-grid,
body .wrapper .content-wrapper .notary-dashboard-grid,
body .wrapper .content-wrapper .notary-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

body .wrapper .content-wrapper .small-box,
body .wrapper .content-wrapper .box,
body .wrapper .content-wrapper .panel,
body .wrapper .content-wrapper .card {
  max-width: none;
}

/* Cotización is intentionally a document-sized surface.  Keep its ticket
 * and form proportions independent from the global dashboard gutters. */
body .wrapper .content-wrapper.cotizacion-page > .content {
  padding: 20px 24px 32px;
}

body .wrapper .content-wrapper.cotizacion-form-page > .content {
  margin-left: auto;
  margin-right: auto;
  max-width: 1180px;
}

body .wrapper .content-wrapper .cotizacion-form-card .row {
  margin-left: -8px;
  margin-right: -8px;
}

body .wrapper .content-wrapper .cotizacion-form-card .row > [class*="col-"] {
  padding-left: 8px;
  padding-right: 8px;
}

/* Do not let long labels or action bars force horizontal scrolling. */
body .wrapper .content-wrapper .box-header,
body .wrapper .content-wrapper .panel-heading,
body .wrapper .content-wrapper .card-header,
body .wrapper .content-wrapper .card-footer,
body .wrapper .content-wrapper .btn-toolbar,
body .wrapper .content-wrapper .form-actions {
  max-width: 100%;
  overflow-wrap: anywhere;
}

/* High-contrast assignment notices in the dark theme. */
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .asignacion-leyenda-compacta,
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .asignado-notaria-badge {
  background: #243b53 !important;
  border-color: #8bd5ff !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .asignacion-leyenda-compacta strong {
  color: #ffffff !important;
}

/* Dark-theme contrast for the document/observation modals. */
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-observaciones-expediente .observacion-historial-item,
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-observaciones-expediente .observaciones-empty {
  background: #2a3038 !important;
  border-color: #566474 !important;
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-observaciones-expediente .observacion-historial-item p,
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-observaciones-expediente .observacion-historial-meta strong {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-observaciones-expediente .observacion-historial-meta time,
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-observaciones-expediente .observaciones-empty {
  color: #cbd5e1 !important;
}

html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-asignacion .missing-column {
  background: #2a3038 !important;
  border-color: #566474 !important;
}

html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-asignacion .missing-column h5,
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-asignacion .missing-person,
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-asignacion .missing-document,
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-asignacion .missing-empty {
  color: #f3f4f6 !important;
}

html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .modal-asignacion .alert-documentos {
  background: #263544 !important;
  border-color: #6c9fbd !important;
  color: #e5f3fb !important;
}

html[data-theme="dark"] body .wrapper .content-wrapper .documents-feedback {
  background: #3b3020 !important;
  border-color: #d6a84f !important;
  color: #fff3c4 !important;
}

html[data-theme="dark"] body .wrapper .content-wrapper .documents-feedback > i,
html[data-theme="dark"] body .wrapper .content-wrapper .documents-feedback span {
  color: #ffe08a !important;
}

/* Keep the navigation action visible in the light theme as well. */
html[data-theme="light"] body .wrapper .app-back-button,
html[data-theme="custom"] body .wrapper .app-back-button {
  background: linear-gradient(145deg, #34495e, #263746) !important;
  border-color: rgba(255, 255, 255, .12) !important;
  color: #ffffff !important;
}

html[data-theme="light"] body .wrapper .app-back-button .fa,
html[data-theme="custom"] body .wrapper .app-back-button .fa {
  color: #ffffff !important;
}

html[data-theme="light"] body .wrapper .app-back-button:hover,
html[data-theme="light"] body .wrapper .app-back-button:focus,
html[data-theme="custom"] body .wrapper .app-back-button:hover,
html[data-theme="custom"] body .wrapper .app-back-button:focus {
  background: linear-gradient(145deg, #3b5368, #2c3e50) !important;
  color: #ffffff !important;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .modal-content {
    background: #1f2933;
    color: #f5f7fa;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .cita-expediente-ayuda,
html[data-theme="dark"] body .wrapper .modal-cita-expediente label {
    color: #dbe7f0;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .form-control {
    background: #263746;
    border-color: #587086;
    color: #fff;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .modal-body {
    background: #1f2933;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .cita-expediente-field {
    background: #263746;
    border-color: #587086;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .cita-expediente-field label,
html[data-theme="dark"] body .wrapper .modal-cita-expediente .cita-expediente-ayuda strong {
    color: #f5f7fa;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .cita-expediente-field small,
html[data-theme="dark"] body .wrapper .modal-cita-expediente .cita-expediente-ayuda {
    color: #c5d3df;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .btn-cita-cancelar {
    background: #263746;
    border-color: #587086;
    color: #f5f7fa;
}
html[data-theme="dark"] body .wrapper .modal-cita-expediente .cita-expediente-reglas span {
    background: #304454 !important;
    border-color: #587086 !important;
    color: #e5f1f8 !important;
}
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .card-cita-agendada,
html[data-theme="dark"] body .wrapper .content-wrapper.inmueble-page .card-cita-activa {
    background: #263746;
    color: #fff;
    border-color: #65b9e8;
}
html[data-theme="dark"] body .wrapper .ver-exp-wrap .cotizacion-expediente-panel {
    background: var(--app-surface-2, #263746) !important;
    color: var(--app-text, #f5f7fa) !important;
}
html[data-theme="dark"] body .wrapper .ver-exp-wrap .cotizacion-file-row {
    background: var(--app-surface-3, #304454) !important;
    border-color: var(--app-border, #587086) !important;
}
html[data-theme="dark"] body .wrapper .ver-exp-wrap .cotizacion-file-row strong,
html[data-theme="dark"] body .wrapper .ver-exp-wrap .cotizacion-upload-form label {
    color: var(--app-text, #f5f7fa) !important;
}
html[data-theme="dark"] body .wrapper .ver-exp-wrap .cotizacion-file-row span,
html[data-theme="dark"] body .wrapper .ver-exp-wrap .cotizacion-upload-form small {
    color: #c5d3df !important;
}
html[data-theme="dark"] body .wrapper .ver-exp-wrap .cotizacion-upload-form {
    border-top-color: var(--app-border, #587086) !important;
}
html[data-theme="dark"] body .wrapper .ver-exp-wrap #cotizacionPdf {
    background: var(--app-input-bg, #263746) !important;
    border-color: var(--app-border, #587086) !important;
    color: var(--app-input-text, #f5f7fa) !important;
}
html[data-theme="light"] body .wrapper .ver-exp-wrap .exp-side-card {
    background: #ffffff !important;
    border-color: #c7d3de !important;
}
html[data-theme="light"] body .wrapper .ver-exp-wrap .exp-side-head {
    background: #2c3e50 !important;
    color: #ffffff !important;
}
html[data-theme="light"] body .wrapper .ver-exp-wrap .exp-side-head h3 {
    color: #ffffff !important;
}
html[data-theme="light"] body .wrapper .ver-exp-wrap .exp-side-head p {
    color: #eaf2f8 !important;
}
html[data-theme="light"] body .wrapper .ver-exp-wrap .exp-side-row {
    border-bottom-color: #d8e2ea !important;
}
html[data-theme="light"] body .wrapper .ver-exp-wrap .exp-side-row span,
html[data-theme="light"] body .wrapper .ver-exp-wrap .amount-card span {
    color: #52616f !important;
}
html[data-theme="light"] body .wrapper .ver-exp-wrap .exp-side-row strong,
html[data-theme="light"] body .wrapper .ver-exp-wrap .amount-card strong {
    color: #1f2d3a !important;
}
html[data-theme="dark"] body .wrapper .notifications-menu > .notifications-dropdown {
    background: var(--app-surface, #1f2933) !important;
}
html[data-theme="dark"] body .wrapper .notification-item {
    background: var(--app-surface, #1f2933) !important;
    border-bottom-color: var(--app-border, #405566) !important;
    color: var(--app-text, #f5f7fa) !important;
}
html[data-theme="dark"] body .wrapper .notification-item:hover,
html[data-theme="dark"] body .wrapper .notification-item:focus {
    background: var(--app-surface-3, #304454) !important;
}
html[data-theme="dark"] body .wrapper .notification-copy strong,
html[data-theme="dark"] body .wrapper .notifications-empty strong {
    color: #f5f7fa !important;
}
html[data-theme="dark"] body .wrapper .notification-copy > span,
html[data-theme="dark"] body .wrapper .notification-copy small,
html[data-theme="dark"] body .wrapper .notifications-empty,
html[data-theme="dark"] body .wrapper .notifications-empty small {
    color: #c5d3df !important;
}
html[data-theme="dark"] body .wrapper .notification-icon {
    background: #304454 !important;
    color: #b7e2f6 !important;
}
html[data-theme="dark"] body .wrapper .modal-acuse-firma .modal-content {
    background: #1f2933 !important;
    color: #f5f7fa !important;
}
html[data-theme="dark"] body .wrapper .modal-acuse-firma .modal-body {
    background: #1f2933 !important;
}
html[data-theme="dark"] body .wrapper .acuse-firma-brand {
    border-bottom-color: #405566 !important;
}
html[data-theme="dark"] body .wrapper .acuse-firma-brand h3,
html[data-theme="dark"] body .wrapper .acuse-firma-grid strong {
    color: #f5f7fa !important;
}
html[data-theme="dark"] body .wrapper .acuse-firma-brand p,
html[data-theme="dark"] body .wrapper .acuse-firma-grid span,
html[data-theme="dark"] body .wrapper .acuse-firma-qr small {
    color: #c5d3df !important;
}
html[data-theme="dark"] body .wrapper .acuse-firma-grid > div {
    background: #304454 !important;
    border-color: #526b7d !important;
}
html[data-theme="dark"] body .wrapper .acuse-firma-documento {
    background: #f8fafc !important;
    color: #243746 !important;
    border-color: #526b7d !important;
}
html[data-theme="dark"] body .wrapper .acuse-firma-meta span,
html[data-theme="dark"] body .wrapper .acuse-firma-meta strong,
html[data-theme="dark"] body .wrapper .acuse-firma-pie,
html[data-theme="dark"] body .wrapper .acuse-firma-pie small {
    color: #405566 !important;
}
html[data-theme="dark"] body .wrapper .acuse-firma-qr h4 {
    color: #243746 !important;
}

@media (min-width: 1600px) {
  :root {
    --layout-gutter: clamp(28px, 2.35vw, 64px);
    --layout-gap: clamp(16px, 1.5vw, 34px);
  }
}

@media (min-width: 1400px) {
  /* Shared dashboard and summary grids can use additional monitor width. */
  body .wrapper .content-wrapper .dashboard-container,
  body .wrapper .content-wrapper .alertas-grid,
  body .wrapper .content-wrapper .amount-grid,
  body .wrapper .content-wrapper .cashbook-history-grid,
  body .wrapper .content-wrapper .document-grid,
  body .wrapper .content-wrapper .doc-grid,
  body .wrapper .content-wrapper .estatus-resumen-grid,
  body .wrapper .content-wrapper .estatus-summary-grid,
  body .wrapper .content-wrapper .estatus-tramites-grid,
  body .wrapper .content-wrapper .finance-v2-mini-grid,
  body .wrapper .content-wrapper .info-grid,
  body .wrapper .content-wrapper .kpi-grid,
  body .wrapper .content-wrapper .montos-grid,
  body .wrapper .content-wrapper .notary-dashboard-grid,
  body .wrapper .content-wrapper .notary-kpi-grid,
  body .wrapper .content-wrapper .people-grid,
  body .wrapper .content-wrapper .resumen-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  }

  /* The expediente status summary is a fixed four-step sequence, so keep
   * its counters on one horizontal line while desktop space allows it. */
  body .wrapper .content-wrapper .section-flujo-expediente .estatus-resumen-grid {
    grid-template-columns: repeat(4, minmax(96px, 1fr));
  }
}

@media (max-width: 991px) {
  body .wrapper .content-wrapper > .content,
  body .wrapper .content-wrapper > .content-header {
    padding-left: 14px;
    padding-right: 14px;
  }
}

@media (max-width: 767px) {
  body .wrapper .content-wrapper > .content,
  body .wrapper .content-wrapper > .content-header {
    padding-left: 10px;
    padding-right: 10px;
  }

  body .wrapper .content-wrapper .row {
    margin-left: -6px;
    margin-right: -6px;
  }

  body .wrapper .content-wrapper .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
  }

  body .wrapper .content-wrapper .table-responsive {
    margin-bottom: 14px;
  }

  body .wrapper .content-wrapper.cotizacion-page > .content {
    padding: 14px;
  }
}