/*
 * Capa de transición shadcn/ui para módulos HTML heredados.
 * Mantiene los selectores y eventos actuales mientras el shell ya opera en React.
 */
:root {
  --sh-background: #f7f8fa;
  --sh-foreground: #101828;
  --sh-surface: #ffffff;
  --sh-muted: #f2f4f7;
  --sh-muted-foreground: #667085;
  --sh-border: #e4e7ec;
  --sh-input: #d0d5dd;
  --sh-primary: #b42318;
  --sh-primary-hover: #912018;
  --sh-primary-foreground: #ffffff;
  --sh-success: #067647;
  --sh-warning: #b54708;
  --sh-danger: #b42318;
  --sh-radius: .625rem;
  --sh-shadow: 0 1px 2px rgba(16,24,40,.05);
}

html { background: transparent; }
body, body.frame-body { background: var(--sh-background) !important; color: var(--sh-foreground); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; }
body.frame-body { padding: 0 !important; }
.frame-page { width: 100%; max-width: none !important; padding: 1.25rem 1.5rem 2.5rem !important; }
.frame-page > .page-head { display: none !important; }

/* Superficies */
.card, .panel, .box, .widget, .kpi, .metric-card, .table-card, .content-card,
.dashboard-card, .emergency-card, .directory-card, .maintenance-card,
.config-card, .audit-card, .floor-card, .person-card, .summary-card {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: var(--sh-radius) !important;
  box-shadow: var(--sh-shadow) !important;
}

.card-header, .panel-header, .section-header {
  background: transparent !important;
  border-bottom: 1px solid var(--sh-border) !important;
  color: var(--sh-foreground) !important;
}

/* Botones shadcn */
.btn, button.btn, a.btn {
  min-height: 2.5rem;
  border: 1px solid var(--sh-border) !important;
  border-radius: .5rem !important;
  background: var(--sh-surface) !important;
  color: var(--sh-foreground) !important;
  box-shadow: var(--sh-shadow) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease !important;
}
.btn:hover, button.btn:hover, a.btn:hover { background: var(--sh-muted) !important; }
.btn-primary, .btn-danger, .activate-alert, [data-action="activate"] {
  background: var(--sh-primary) !important;
  border-color: var(--sh-primary) !important;
  color: var(--sh-primary-foreground) !important;
}
.btn-primary:hover, .btn-danger:hover, .activate-alert:hover, [data-action="activate"]:hover {
  background: var(--sh-primary-hover) !important;
  border-color: var(--sh-primary-hover) !important;
}
.btn-warning { background: #f79009 !important; border-color: #f79009 !important; color: #fff !important; }
.btn-success { background: var(--sh-success) !important; border-color: var(--sh-success) !important; color: #fff !important; }
.btn-soft, .btn-secondary { background: var(--sh-muted) !important; color: #344054 !important; }
.btn:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid #f97066 !important; outline-offset: 2px !important; }

/* Formularios */
input:not([type="checkbox"]):not([type="radio"]), select, textarea, .form-control, .building-select {
  min-height: 2.5rem;
  border: 1px solid var(--sh-input) !important;
  border-radius: .5rem !important;
  background: var(--sh-surface) !important;
  color: var(--sh-foreground) !important;
  box-shadow: var(--sh-shadow) !important;
  padding: .55rem .75rem !important;
}
label, .field label { color: #344054 !important; font-weight: 600 !important; font-size: .875rem !important; }
.field, .form-group { margin-bottom: 1rem !important; }

/* Tablas */
.table-wrap, .table-responsive { border: 1px solid var(--sh-border) !important; border-radius: var(--sh-radius) !important; overflow: auto !important; background: var(--sh-surface) !important; }
table { width: 100%; border-collapse: separate !important; border-spacing: 0 !important; background: var(--sh-surface) !important; }
thead, table thead tr { background: #f9fafb !important; }
th { color: #475467 !important; font-size: .75rem !important; font-weight: 700 !important; letter-spacing: .02em !important; text-transform: uppercase; }
th, td { border-color: var(--sh-border) !important; padding: .75rem 1rem !important; }
tbody tr:hover { background: #f9fafb !important; }

/* Estados y alertas */
.badge, .status, .chip, .pill { border-radius: 999px !important; border: 1px solid var(--sh-border) !important; box-shadow: none !important; font-weight: 600 !important; }
.status-ok, .badge-success, .success { color: var(--sh-success) !important; background: #ecfdf3 !important; border-color: #abefc6 !important; }
.status-warning, .badge-warning, .warning { color: var(--sh-warning) !important; background: #fffaeb !important; border-color: #fedf89 !important; }
.status-danger, .badge-danger, .danger { color: var(--sh-danger) !important; background: #fef3f2 !important; border-color: #fecdca !important; }
.alert, .msg { border-radius: var(--sh-radius) !important; border: 1px solid var(--sh-border) !important; box-shadow: none !important; }

/* Modales */
.modal-backdrop-global, .modal-backdrop { background: rgba(7,17,31,.68) !important; backdrop-filter: blur(3px); }
.modal-box, .modal-content, .modal-box-global {
  background: var(--sh-surface) !important;
  border: 1px solid var(--sh-border) !important;
  border-radius: .75rem !important;
  box-shadow: 0 24px 48px rgba(16,24,40,.22) !important;
}

/* Pestañas y toolbars */
.tabs, .segmented, .toolbar { border-color: var(--sh-border) !important; background: transparent !important; }
.tab, .tabs button, .segmented button { border-radius: .45rem !important; }
.tab.active, .tabs button.active, .segmented button.active { background: var(--sh-foreground) !important; color: #fff !important; }

/* Login */
body.auth-page { min-height: 100vh; }
.auth-card { border: 1px solid rgba(255,255,255,.12) !important; border-radius: .875rem !important; background: rgba(255,255,255,.98) !important; box-shadow: 0 30px 60px rgba(0,0,0,.35) !important; }
.auth-card .brand-mark { background: var(--sh-primary) !important; color: #fff !important; border-radius: .625rem !important; }

@media (max-width: 720px) {
  .frame-page { padding: 1rem .75rem 2rem !important; }
  th, td { padding: .65rem .75rem !important; }
  .modal-box, .modal-content, .modal-box-global { width: calc(100% - 1rem) !important; max-width: none !important; }
}

/* RC 3.4.2: el marco nunca debe crear scroll horizontal global. Los únicos
   desplazamientos permitidos quedan contenidos en tablas, matrices y modales. */
html, body, .frame-page, #pageContent { width: 100%; max-width: 100%; }
body.frame-body { overflow-x: hidden !important; }
.frame-page { overflow-x: clip !important; }
.frame-page img, .frame-page svg, .frame-page canvas, .frame-page iframe { max-width: 100%; }
.table-wrap, .table-responsive, .building-state-matrix, .matrix-scroll, .modal-body {
  overscroll-behavior: contain;
}
@media (max-width: 720px) {
  .frame-page > *, .dashboard-grid, .dashboard-kpis, .maintenance-kpis,
  .directory-tabs, .card, .panel { min-width: 0 !important; max-width: 100% !important; }
}

/* ========================================================================
   RC3.28.8 · Contraste global en Vista Comando
   shadcn-legacy se carga después de app.css; por eso esta capa debe ser la
   última fuente de verdad para las páginas heredadas dentro del iframe.
   No afecta los modales que deliberadamente se mantienen claros.
   ======================================================================== */
html.dark-palette-frame,
body.dark-palette-frame{
  background:#041326!important;
  color:#eef8ff!important;
}

.dark-palette-frame .frame-page,
.dark-palette-frame .frame-page #pageContent{
  background:#041326!important;
  color:#eef8ff!important;
}

/* Superficies principales */
.dark-palette-frame .frame-page .card,
.dark-palette-frame .frame-page .panel,
.dark-palette-frame .frame-page .box,
.dark-palette-frame .frame-page .widget,
.dark-palette-frame .frame-page .kpi,
.dark-palette-frame .frame-page .metric-card,
.dark-palette-frame .frame-page .table-card,
.dark-palette-frame .frame-page .content-card,
.dark-palette-frame .frame-page .directory-card,
.dark-palette-frame .frame-page .maintenance-card,
.dark-palette-frame .frame-page .audit-card,
.dark-palette-frame .frame-page .summary-card,
.dark-palette-frame .frame-page .pro-kpi,
.dark-palette-frame .frame-page .directory-tabs{
  background:#0b2035!important;
  color:#eef8ff!important;
  border-color:#1d4d70!important;
  box-shadow:none!important;
}

/* Títulos, contenido y textos secundarios */
.dark-palette-frame .frame-page h1,
.dark-palette-frame .frame-page h2,
.dark-palette-frame .frame-page h3,
.dark-palette-frame .frame-page h4,
.dark-palette-frame .frame-page h5,
.dark-palette-frame .frame-page h6,
.dark-palette-frame .frame-page b,
.dark-palette-frame .frame-page strong,
.dark-palette-frame .frame-page .section-title,
.dark-palette-frame .frame-page .audit-action,
.dark-palette-frame .frame-page .maintenance-type b,
.dark-palette-frame .frame-page .directory-head h3{
  color:#f7fbff!important;
}
.dark-palette-frame .frame-page p,
.dark-palette-frame .frame-page .muted,
.dark-palette-frame .frame-page small,
.dark-palette-frame .frame-page .small,
.dark-palette-frame .frame-page .directory-head span,
.dark-palette-frame .frame-page .audit-table-head span,
.dark-palette-frame .frame-page .maintenance-table-head span,
.dark-palette-frame .frame-page .pro-kpi span,
.dark-palette-frame .frame-page .pro-kpi small{
  color:#9db9cd!important;
}

/* Formularios del contenido. Los modales claros están fuera de .frame-page. */
.dark-palette-frame .frame-page label,
.dark-palette-frame .frame-page .field label{
  color:#dcecf7!important;
}
.dark-palette-frame .frame-page input:not([type="checkbox"]):not([type="radio"]),
.dark-palette-frame .frame-page select,
.dark-palette-frame .frame-page textarea,
.dark-palette-frame .frame-page .form-control{
  background:#f8fbfd!important;
  color:#102235!important;
  border-color:#7f9eb5!important;
}
.dark-palette-frame .frame-page input::placeholder,
.dark-palette-frame .frame-page textarea::placeholder{
  color:#6c8293!important;
  opacity:1!important;
}

/* Tablas: no mezclar filas blancas con texto heredado claro. */
.dark-palette-frame .frame-page .table-wrap,
.dark-palette-frame .frame-page .table-responsive{
  background:#071a2e!important;
  border-color:#1d4d70!important;
}
.dark-palette-frame .frame-page table,
.dark-palette-frame .frame-page .data-table{
  background:#071a2e!important;
  color:#eef8ff!important;
}
.dark-palette-frame .frame-page thead,
.dark-palette-frame .frame-page table thead tr,
.dark-palette-frame .frame-page .data-table thead,
.dark-palette-frame .frame-page .data-table thead tr{
  background:#0c2741!important;
}
.dark-palette-frame .frame-page th,
.dark-palette-frame .frame-page .data-table th{
  color:#f5fbff!important;
  border-color:#275777!important;
}
.dark-palette-frame .frame-page td,
.dark-palette-frame .frame-page .data-table td{
  color:#dcecf7!important;
  background:#0a2035!important;
  border-color:#1f4b6a!important;
}
.dark-palette-frame .frame-page tbody tr:nth-child(even) td,
.dark-palette-frame .frame-page .data-table tbody tr:nth-child(even) td{
  background:#092039!important;
}
.dark-palette-frame .frame-page tbody tr:hover td,
.dark-palette-frame .frame-page .data-table tbody tr:hover td{
  background:#10304d!important;
}

/* Directorio */
.dark-palette-frame .frame-page .directory-tab{
  background:#0c2741!important;
  border-color:#275777!important;
  color:#dcecf7!important;
}
.dark-palette-frame .frame-page .directory-tab i{color:#28d0b4!important}
.dark-palette-frame .frame-page .directory-tab.active{
  background:#123554!important;
  border-color:#22b8a7!important;
  color:#fff!important;
  box-shadow:0 0 0 2px rgba(34,184,167,.16)!important;
}

/* Mantenimiento */
.dark-palette-frame .frame-page .maintenance-toolbar h2,
.dark-palette-frame .frame-page .maintenance-table-head h3,
.dark-palette-frame .frame-page .maintenance-table td b{
  color:#f7fbff!important;
}
.dark-palette-frame .frame-page .maintenance-toolbar p,
.dark-palette-frame .frame-page .maintenance-table td small{
  color:#9db9cd!important;
}

/* Auditoría */
.dark-palette-frame .frame-page .audit-filter-card,
.dark-palette-frame .frame-page .audit-table-card{
  background:#0b2035!important;
  border-color:#1d4d70!important;
}
.dark-palette-frame .frame-page .audit-table td b,
.dark-palette-frame .frame-page .audit-table .audit-action{
  color:#f7fbff!important;
}
.dark-palette-frame .frame-page .audit-date,
.dark-palette-frame .frame-page .audit-table .muted{
  color:#9db9cd!important;
}

/* Badges siguen usando colores semánticos, pero con mayor legibilidad. */
.dark-palette-frame .frame-page .badge.b-info{background:#163a66!important;color:#d7e9ff!important;border-color:#315f91!important}
.dark-palette-frame .frame-page .badge.b-ok{background:#113d31!important;color:#a7f3d0!important;border-color:#237a5e!important}
.dark-palette-frame .frame-page .badge.b-warn{background:#4b3510!important;color:#fde68a!important;border-color:#8a651c!important}
.dark-palette-frame .frame-page .badge.b-danger{background:#4a1d26!important;color:#fecdd3!important;border-color:#8e3348!important}

/* Botones secundarios dentro del contenido */
.dark-palette-frame .frame-page .btn-soft,
.dark-palette-frame .frame-page .btn-secondary{
  background:#10304d!important;
  color:#eef8ff!important;
  border-color:#2a638b!important;
}
.dark-palette-frame .frame-page .btn-soft:hover,
.dark-palette-frame .frame-page .btn-secondary:hover{
  background:#164166!important;
}