/*
 * PARKS UI Foundation
 * Capa visual transversal para todas las vistas activas.
 * Se carga después de los estilos de cada módulo para normalizar la
 * jerarquía sin cambiar su lógica ni sus estados funcionales.
 */

:root {
  --parks-font-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --parks-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  --parks-ink: #20263d;
  --parks-ink-soft: #475467;
  --parks-muted: #667085;
  --parks-faint: #98a2b3;
  --parks-canvas: #f6f7f9;
  --parks-surface: #ffffff;
  --parks-surface-soft: #f8fafc;
  --parks-line: #e4e7ec;
  --parks-line-strong: #d0d5dd;

  --parks-primary: #2e6ac6;
  --parks-primary-dark: #2458a6;
  --parks-primary-soft: #eef4ff;
  --parks-success: #059669;
  --parks-warning: #d97706;
  --parks-danger: #dc2626;
  --parks-sidebar: #2d3250;

  --parks-text-xs: 11.5px;
  --parks-text-sm: 12.5px;
  --parks-text-md: 14px;
  --parks-text-lg: 15.5px;
  --parks-title-sm: 18px;
  --parks-title-page: 26px;
  --parks-kpi: 30px;

  --parks-radius-sm: 7px;
  --parks-radius-md: 10px;
  --parks-radius-lg: 12px;
  --parks-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04);
  --parks-shadow-md: 0 8px 24px rgba(16, 24, 40, 0.08);
  --parks-focus: 0 0 0 3px rgba(46, 106, 198, 0.18);
}

html {
  font-size: 16px;
  text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-synthesis: none;
}

body,
button,
input,
select,
textarea {
  font-family: var(--parks-font-sans);
}

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
select,
textarea {
  letter-spacing: normal;
}

body.app-shell {
  font-size: var(--parks-text-md);
  line-height: 1.5;
}

body.app-shell:not(.monitor-page) {
  color: var(--parks-ink);
  background: var(--parks-canvas);
}

body.app-shell:not(.monitor-page) ::selection {
  color: var(--parks-ink);
  background: #dbe8ff;
}

body.app-shell:not(.monitor-page) :focus-visible {
  outline: 3px solid rgba(46, 106, 198, 0.42);
  outline-offset: 2px;
}

/* Contenedores principales */
body.app-shell:not(.monitor-page) > .container,
body.app-shell:not(.monitor-page) > .contenedor,
body.app-shell:not(.monitor-page) > main:not(.projects-page):not(.pending-page),
body.app-shell:not(.monitor-page) > .projects-page,
body.app-shell:not(.monitor-page) > .pending-page {
  width: 100%;
  padding: 28px clamp(18px, 3vw, 40px);
}

body.app-shell:not(.monitor-page) > .container,
body.app-shell:not(.monitor-page) > .contenedor {
  margin-inline: auto;
}

/* Jerarquía tipográfica */
body.app-shell:not(.monitor-page) h1 {
  font-size: var(--parks-title-page) !important;
  line-height: 1.2 !important;
  font-weight: 720 !important;
  letter-spacing: -0.025em !important;
}

body.app-shell:not(.monitor-page) h2 {
  font-size: var(--parks-title-sm) !important;
  line-height: 1.3 !important;
  font-weight: 680 !important;
  letter-spacing: -0.012em !important;
}

body.app-shell:not(.monitor-page) h3 {
  font-size: var(--parks-text-lg) !important;
  line-height: 1.35 !important;
  font-weight: 660 !important;
  letter-spacing: -0.006em;
}

body.app-shell:not(.monitor-page) h4 {
  font-size: var(--parks-text-md) !important;
  line-height: 1.4 !important;
  font-weight: 650 !important;
}

body.app-shell:not(.monitor-page) p {
  line-height: 1.55;
}

body.app-shell:not(.monitor-page) small {
  font-size: var(--parks-text-sm) !important;
  line-height: 1.45 !important;
}

body.app-shell:not(.monitor-page) .card-header h2,
body.app-shell:not(.monitor-page) .panel-header h2,
body.app-shell:not(.monitor-page) .table-head h2,
body.app-shell:not(.monitor-page) .table-head h3,
body.app-shell:not(.monitor-page) .chart-card h3 {
  font-size: var(--parks-text-lg) !important;
}

body.app-shell:not(.monitor-page) .modal h2,
body.app-shell:not(.monitor-page) dialog h2,
body.app-shell:not(.monitor-page) .modal-header h2 {
  font-size: var(--parks-title-sm) !important;
}

body.app-shell:not(.monitor-page) .chat-header h1 {
  font-size: var(--parks-title-sm) !important;
  letter-spacing: -0.012em !important;
}

body.app-shell:not(.monitor-page) .container > h2 {
  margin-block: 32px 18px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--parks-line) !important;
}

body.app-shell:not(.monitor-page) .container > h1,
body.app-shell:not(.monitor-page) .contenedor > h1 {
  margin: 0 0 24px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--parks-line);
  color: var(--parks-ink) !important;
}

/* Encabezados de página */
body.app-shell:not(.monitor-page) .page-head,
body.app-shell:not(.monitor-page) .page-header,
body.app-shell:not(.monitor-page) .header-section,
body.app-shell:not(.monitor-page) .pending-page-header,
body.app-shell:not(.monitor-page) .projects-page-header,
body.app-shell:not(.monitor-page) .top-bar,
body.app-shell:not(.monitor-page) .container > .header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 24px !important;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--parks-line);
}

body.app-shell:not(.monitor-page) .page-head h1,
body.app-shell:not(.monitor-page) .page-header h1,
body.app-shell:not(.monitor-page) .header-section h1,
body.app-shell:not(.monitor-page) .pending-page-title,
body.app-shell:not(.monitor-page) .projects-heading h1,
body.app-shell:not(.monitor-page) .container > .header h1 {
  margin: 0;
  color: var(--parks-ink) !important;
}

body.app-shell:not(.monitor-page) .projects-subtitle,
body.app-shell:not(.monitor-page) .pending-page-subtitle,
body.app-shell:not(.monitor-page) .page-subtitle {
  max-width: 760px;
  margin-top: 7px;
  color: var(--parks-muted) !important;
  font-size: var(--parks-text-md) !important;
  line-height: 1.5 !important;
}

body.app-shell:not(.monitor-page) .projects-eyebrow,
body.app-shell:not(.monitor-page) .projects-section-eyebrow,
body.app-shell:not(.monitor-page) .projects-dialog-kicker,
body.app-shell:not(.monitor-page) .pending-eyebrow,
body.app-shell:not(.monitor-page) .page-eyebrow,
body.app-shell:not(.monitor-page) [class$="-kicker"],
body.app-shell:not(.monitor-page) [class$="-eyebrow"] {
  font-size: var(--parks-text-xs) !important;
  line-height: 1.35 !important;
  letter-spacing: 0.075em !important;
}

body.app-shell:not(.monitor-page) .page-eyebrow {
  margin: 0 0 5px;
  color: var(--parks-primary) !important;
  font-weight: 720;
  text-transform: uppercase;
}

body.app-shell:not(.monitor-page) .head-actions,
body.app-shell:not(.monitor-page) .page-actions,
body.app-shell:not(.monitor-page) .projects-page-actions,
body.app-shell:not(.monitor-page) .pending-page-actions,
body.app-shell:not(.monitor-page) .actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}

/* Superficies */
body.app-shell:not(.monitor-page) .card,
body.app-shell:not(.monitor-page) .panel,
body.app-shell:not(.monitor-page) .table-card,
body.app-shell:not(.monitor-page) .chart-card,
body.app-shell:not(.monitor-page) .stat-card,
body.app-shell:not(.monitor-page) .metric,
body.app-shell:not(.monitor-page) .summary-card,
body.app-shell:not(.monitor-page) .pending-kpi,
body.app-shell:not(.monitor-page) .projects-kpi,
body.app-shell:not(.monitor-page) .pending-filters,
body.app-shell:not(.monitor-page) .projects-analytics {
  border-color: var(--parks-line) !important;
  border-radius: var(--parks-radius-lg) !important;
  box-shadow: var(--parks-shadow-sm);
}

body.app-shell:not(.monitor-page) .card-header,
body.app-shell:not(.monitor-page) .table-head,
body.app-shell:not(.monitor-page) .panel-header {
  min-height: 52px;
  padding: 14px 18px !important;
  border-bottom-color: var(--parks-line) !important;
}

body.app-shell:not(.monitor-page) .card-body,
body.app-shell:not(.monitor-page) .panel-body {
  padding: 18px !important;
}

/* KPIs y métricas */
body.app-shell:not(.monitor-page) .stats-grid,
body.app-shell:not(.monitor-page) .stats,
body.app-shell:not(.monitor-page) .pending-kpi-grid,
body.app-shell:not(.monitor-page) .projects-kpi-grid,
body.app-shell:not(.monitor-page) .metric-grid,
body.app-shell:not(.monitor-page) .summary {
  gap: 14px !important;
  margin-bottom: 26px !important;
}

body.app-shell:not(.monitor-page) .stat-card,
body.app-shell:not(.monitor-page) .pending-kpi,
body.app-shell:not(.monitor-page) .projects-kpi,
body.app-shell:not(.monitor-page) .metric,
body.app-shell:not(.monitor-page) .summary-card {
  padding: 18px !important;
}

body.app-shell:not(.monitor-page) .stat-value,
body.app-shell:not(.monitor-page) .stat-val,
body.app-shell:not(.monitor-page) .stat-number,
body.app-shell:not(.monitor-page) .pending-kpi-value,
body.app-shell:not(.monitor-page) .projects-kpi-value,
body.app-shell:not(.monitor-page) .summary-card .num {
  font-size: var(--parks-kpi) !important;
  line-height: 1.1 !important;
  font-weight: 760 !important;
  letter-spacing: -0.035em !important;
}

body.app-shell:not(.monitor-page) .metric b {
  font-size: 26px !important;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

body.app-shell:not(.monitor-page) .stat-label,
body.app-shell:not(.monitor-page) .pending-kpi-head,
body.app-shell:not(.monitor-page) .projects-kpi-head,
body.app-shell:not(.monitor-page) .summary-card .lbl,
body.app-shell:not(.monitor-page) .metric small {
  font-size: var(--parks-text-sm) !important;
  line-height: 1.4 !important;
  letter-spacing: 0.025em !important;
}

body.app-shell:not(.monitor-page) .stat-icon {
  font-size: 22px !important;
  margin-bottom: 10px !important;
}

body.app-shell:not(.monitor-page) .stat-card:hover,
body.app-shell:not(.monitor-page) .pending-kpi:hover,
body.app-shell:not(.monitor-page) .projects-kpi:hover {
  transform: none !important;
  border-color: var(--parks-line-strong) !important;
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.07) !important;
}

/* Controles y acciones */
body.app-shell:not(.monitor-page) button,
body.app-shell:not(.monitor-page) .btn,
body.app-shell:not(.monitor-page) .pending-btn,
body.app-shell:not(.monitor-page) .projects-btn,
body.app-shell:not(.monitor-page) .back-btn {
  font-size: 13.5px !important;
  line-height: 1.2 !important;
  font-weight: 620;
  border-radius: var(--parks-radius-sm) !important;
}

body.app-shell:not(.monitor-page) .btn,
body.app-shell:not(.monitor-page) .pending-btn,
body.app-shell:not(.monitor-page) .projects-btn,
body.app-shell:not(.monitor-page) .back-btn {
  min-height: 40px;
  padding: 9px 14px !important;
}

body.app-shell:not(.monitor-page) .btn-sm,
body.app-shell:not(.monitor-page) .btn-small,
body.app-shell:not(.monitor-page) .projects-btn-small,
body.app-shell:not(.monitor-page) .pending-btn-small,
body.app-shell:not(.monitor-page) .close-btn,
body.app-shell:not(.monitor-page) .modal-close,
body.app-shell:not(.monitor-page) .btn-close,
body.app-shell:not(.monitor-page) .modal-solicitud-close,
body.app-shell:not(.monitor-page) [class$="-icon-btn"] {
  min-height: 32px !important;
  padding: 6px 10px !important;
  font-size: var(--parks-text-sm) !important;
}

body.app-shell:not(.monitor-page) .modal-close,
body.app-shell:not(.monitor-page) .btn-close,
body.app-shell:not(.monitor-page) .modal-solicitud-close {
  width: 32px;
  height: 32px;
  padding: 0 !important;
  display: inline-grid;
  place-items: center;
}

body.app-shell:not(.monitor-page) .btn-primary,
body.app-shell:not(.monitor-page) .btn-save,
body.app-shell:not(.monitor-page) .btn-guardar,
body.app-shell:not(.monitor-page) .pending-btn-primary,
body.app-shell:not(.monitor-page) .projects-btn-primary {
  border-color: var(--parks-primary) !important;
  background: var(--parks-primary) !important;
  color: #fff !important;
}

body.app-shell:not(.monitor-page) .btn-primary:hover,
body.app-shell:not(.monitor-page) .btn-save:hover,
body.app-shell:not(.monitor-page) .btn-guardar:hover,
body.app-shell:not(.monitor-page) .pending-btn-primary:hover,
body.app-shell:not(.monitor-page) .projects-btn-primary:hover {
  border-color: var(--parks-primary-dark) !important;
  background: var(--parks-primary-dark) !important;
}

body.app-shell:not(.monitor-page) .btn-outline,
body.app-shell:not(.monitor-page) .btn-secondary,
body.app-shell:not(.monitor-page) .btn-back,
body.app-shell:not(.monitor-page) .pending-btn-secondary,
body.app-shell:not(.monitor-page) .projects-btn-secondary,
body.app-shell:not(.monitor-page) .back-btn {
  border: 1px solid var(--parks-line-strong) !important;
  background: var(--parks-surface) !important;
  color: var(--parks-ink-soft) !important;
  box-shadow: none;
}

body.app-shell:not(.monitor-page) .btn-flotante-cliente {
  width: 56px !important;
  height: 56px !important;
  min-height: 56px !important;
  padding: 0 !important;
  font-size: 20px !important;
  animation: none !important;
}

/* Formularios */
body.app-shell:not(.monitor-page) label,
body.app-shell:not(.monitor-page) .pending-field-label,
body.app-shell:not(.monitor-page) .projects-field-label {
  color: var(--parks-ink-soft) !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  font-weight: 620 !important;
}

body.app-shell:not(.monitor-page)
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
body.app-shell:not(.monitor-page) select,
body.app-shell:not(.monitor-page) textarea {
  min-height: 40px;
  border: 1px solid var(--parks-line-strong) !important;
  border-radius: var(--parks-radius-sm) !important;
  background-color: var(--parks-surface) !important;
  color: var(--parks-ink) !important;
  font-size: var(--parks-text-md) !important;
  line-height: 1.4 !important;
}

body.app-shell:not(.monitor-page) textarea {
  min-height: 92px;
}

body.app-shell:not(.monitor-page)
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):focus,
body.app-shell:not(.monitor-page) select:focus,
body.app-shell:not(.monitor-page) textarea:focus {
  outline: none !important;
  border-color: var(--parks-primary) !important;
  box-shadow: var(--parks-focus) !important;
}

body.app-shell:not(.monitor-page) input::placeholder,
body.app-shell:not(.monitor-page) textarea::placeholder {
  color: var(--parks-faint) !important;
  opacity: 1;
}

body.app-shell:not(.monitor-page) input[disabled],
body.app-shell:not(.monitor-page) select[disabled],
body.app-shell:not(.monitor-page) textarea[disabled],
body.app-shell:not(.monitor-page) input[readonly] {
  background: #f2f4f7 !important;
  color: var(--parks-muted) !important;
}

body.app-shell:not(.monitor-page) .form-group,
body.app-shell:not(.monitor-page) .pending-field,
body.app-shell:not(.monitor-page) .projects-field {
  margin-bottom: 16px;
}

body.app-shell:not(.monitor-page) .form-group label,
body.app-shell:not(.monitor-page) .pending-field label,
body.app-shell:not(.monitor-page) .projects-field label {
  margin-bottom: 6px !important;
}

/* Tablas */
body.app-shell:not(.monitor-page) table {
  color: var(--parks-ink-soft);
  font-size: 13px !important;
}

body.app-shell:not(.monitor-page) table th,
body.app-shell:not(.monitor-page) .pending-table th,
body.app-shell:not(.monitor-page) .projects-table th {
  padding: 11px 13px !important;
  color: var(--parks-muted) !important;
  background: var(--parks-surface-soft) !important;
  border-bottom-color: var(--parks-line) !important;
  font-size: var(--parks-text-xs) !important;
  line-height: 1.35 !important;
  font-weight: 680 !important;
  letter-spacing: 0.045em !important;
}

body.app-shell:not(.monitor-page) table td,
body.app-shell:not(.monitor-page) .pending-table td,
body.app-shell:not(.monitor-page) .projects-table td {
  padding: 11px 13px !important;
  border-bottom-color: #edf0f3 !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  vertical-align: middle;
}

body.app-shell:not(.monitor-page) table tbody tr:hover td {
  background-color: #f8fafc;
}

/* Texto auxiliar, insignias y estados */
body.app-shell:not(.monitor-page) .badge,
body.app-shell:not(.monitor-page) [class^="badge-"],
body.app-shell:not(.monitor-page) [class*=" badge-"],
body.app-shell:not(.monitor-page) [class$="-badge"],
body.app-shell:not(.monitor-page) .pending-inline-tag,
body.app-shell:not(.monitor-page) .projects-inline-tag,
body.app-shell:not(.monitor-page) .pending-priority,
body.app-shell:not(.monitor-page) .projects-health {
  font-size: var(--parks-text-xs) !important;
  line-height: 1.3 !important;
  font-weight: 650 !important;
}

body.app-shell:not(.monitor-page) .pending-owner-meta,
body.app-shell:not(.monitor-page) .pending-due-note,
body.app-shell:not(.monitor-page) .pending-mobile-meta-label,
body.app-shell:not(.monitor-page) .pending-field-help,
body.app-shell:not(.monitor-page) .pending-edit-fieldset-help,
body.app-shell:not(.monitor-page) .pending-edit-check-copy small,
body.app-shell:not(.monitor-page) .pending-edit-actions-note,
body.app-shell:not(.monitor-page) .pending-detail-fact-label,
body.app-shell:not(.monitor-page) .pending-comment-author,
body.app-shell:not(.monitor-page) .pending-comment-date,
body.app-shell:not(.monitor-page) .projects-chart-header p,
body.app-shell:not(.monitor-page) .projects-chart-data,
body.app-shell:not(.monitor-page) .projects-table-hint,
body.app-shell:not(.monitor-page) .projects-project-meta,
body.app-shell:not(.monitor-page) .projects-muted,
body.app-shell:not(.monitor-page) .projects-progress-copy span,
body.app-shell:not(.monitor-page) .projects-task-warning,
body.app-shell:not(.monitor-page) .projects-client-group-count,
body.app-shell:not(.monitor-page) .projects-dialog-header p,
body.app-shell:not(.monitor-page) .projects-export-summary small,
body.app-shell:not(.monitor-page) .projects-choice small,
body.app-shell:not(.monitor-page) .projects-export-warning,
body.app-shell:not(.monitor-page) .projects-field-help {
  font-size: var(--parks-text-sm) !important;
  line-height: 1.45 !important;
}

body.app-shell:not(.monitor-page) .pending-filter-chip,
body.app-shell:not(.monitor-page) .projects-choice strong,
body.app-shell:not(.monitor-page) .projects-progress-copy strong,
body.app-shell:not(.monitor-page) .projects-money,
body.app-shell:not(.monitor-page) .projects-client-group-name,
body.app-shell:not(.monitor-page) .pending-detail-kicker,
body.app-shell:not(.monitor-page) .pending-detail-section-title span,
body.app-shell:not(.monitor-page) .pending-detail-section-title a {
  font-size: var(--parks-text-sm) !important;
}

body.app-shell:not(.monitor-page)
  :not(i)[style*="font-size:10px"],
body.app-shell:not(.monitor-page)
  :not(i)[style*="font-size: 10px"],
body.app-shell:not(.monitor-page)
  :not(i)[style*="font-size:9px"],
body.app-shell:not(.monitor-page)
  :not(i)[style*="font-size: 9px"],
body.app-shell:not(.monitor-page)
  :not(i)[style*="font-size:8px"],
body.app-shell:not(.monitor-page)
  :not(i)[style*="font-size: 8px"],
body.app-shell:not(.monitor-page)
  :not(i)[style*="font-size:7px"],
body.app-shell:not(.monitor-page)
  :not(i)[style*="font-size: 7px"] {
  font-size: var(--parks-text-xs) !important;
}

/* Pestañas, alertas y estados vacíos */
body.app-shell:not(.monitor-page) .tabs,
body.app-shell:not(.monitor-page) [role="tablist"] {
  gap: 4px;
  border-bottom-color: var(--parks-line) !important;
}

body.app-shell:not(.monitor-page) .tab-btn,
body.app-shell:not(.monitor-page) [role="tab"] {
  min-height: 42px;
  padding: 10px 14px !important;
  font-size: 13px !important;
  font-weight: 630 !important;
}

body.app-shell:not(.monitor-page) .alert,
body.app-shell:not(.monitor-page) .pending-alert,
body.app-shell:not(.monitor-page) .projects-alert {
  padding: 12px 15px !important;
  border-radius: var(--parks-radius-md) !important;
  font-size: 13.5px !important;
  line-height: 1.45 !important;
}

body.app-shell:not(.monitor-page) .empty-state,
body.app-shell:not(.monitor-page) .empty,
body.app-shell:not(.monitor-page) .vacio,
body.app-shell:not(.monitor-page) .empty-message {
  padding: 44px 22px !important;
  color: var(--parks-muted) !important;
  font-size: var(--parks-text-md) !important;
  line-height: 1.55 !important;
}

body.app-shell:not(.monitor-page) .empty-state i,
body.app-shell:not(.monitor-page) .empty i,
body.app-shell:not(.monitor-page) .vacio i {
  color: #b7c0ce;
  font-size: 36px !important;
}

/* Modales */
body.app-shell:not(.monitor-page) .modal-content,
body.app-shell:not(.monitor-page) .modal-box,
body.app-shell:not(.monitor-page) .modal-solicitud-content,
body.app-shell:not(.monitor-page) dialog {
  border-radius: 14px !important;
  border-color: var(--parks-line) !important;
  box-shadow: 0 24px 64px rgba(16, 24, 40, 0.2) !important;
}

body.app-shell:not(.monitor-page) .modal-header,
body.app-shell:not(.monitor-page) .modal-solicitud-header,
body.app-shell:not(.monitor-page) dialog header {
  padding: 18px 20px !important;
  border-bottom-color: var(--parks-line) !important;
}

body.app-shell:not(.monitor-page) .modal-body,
body.app-shell:not(.monitor-page) .modal-solicitud-body {
  padding: 20px !important;
}

/* Pantallas públicas de acceso */
body.auth-page {
  font-size: var(--parks-text-md);
  line-height: 1.5;
}

body.auth-page .login-container,
body.auth-page > .container {
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28) !important;
}

body.auth-page h1 {
  font-size: 24px !important;
  line-height: 1.25 !important;
  letter-spacing: -0.02em !important;
}

body.auth-page label {
  font-size: 13px !important;
  line-height: 1.4 !important;
}

body.auth-page
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]) {
  min-height: 44px;
  border-radius: 8px !important;
  font-size: var(--parks-text-md) !important;
}

body.auth-page button,
body.auth-page .btn {
  min-height: 44px;
  border-radius: 8px !important;
  font-size: var(--parks-text-md) !important;
}

/* Responsive */
@media (max-width: 900px) {
  body.app-shell:not(.monitor-page) .page-head,
  body.app-shell:not(.monitor-page) .page-header,
  body.app-shell:not(.monitor-page) .header-section,
  body.app-shell:not(.monitor-page) .pending-page-header,
  body.app-shell:not(.monitor-page) .projects-page-header,
  body.app-shell:not(.monitor-page) .top-bar,
  body.app-shell:not(.monitor-page) .container > .header {
    align-items: stretch;
    flex-direction: column;
    gap: 14px;
  }
}

@media (max-width: 768px) {
  body.app-shell:not(.monitor-page) > .container,
  body.app-shell:not(.monitor-page) > .contenedor,
  body.app-shell:not(.monitor-page) > main:not(.projects-page):not(.pending-page),
  body.app-shell:not(.monitor-page) > .projects-page,
  body.app-shell:not(.monitor-page) > .pending-page {
    padding: 66px 14px 24px !important;
  }

  body.app-shell:not(.monitor-page) h1 {
    font-size: 22px !important;
  }

  body.app-shell:not(.monitor-page) h2 {
    font-size: 17px !important;
  }

  body.app-shell:not(.monitor-page) h3 {
    font-size: 15px !important;
  }

  body.app-shell:not(.monitor-page) .btn,
  body.app-shell:not(.monitor-page) .pending-btn,
  body.app-shell:not(.monitor-page) .projects-btn,
  body.app-shell:not(.monitor-page) .back-btn {
    min-height: 44px;
  }

  body.app-shell:not(.monitor-page) .form-row {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }

  body.app-shell:not(.monitor-page)
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  body.app-shell:not(.monitor-page) select {
    min-height: 44px;
  }

  body.app-shell:not(.monitor-page) .stat-value,
  body.app-shell:not(.monitor-page) .stat-val,
  body.app-shell:not(.monitor-page) .stat-number,
  body.app-shell:not(.monitor-page) .pending-kpi-value,
  body.app-shell:not(.monitor-page) .projects-kpi-value,
  body.app-shell:not(.monitor-page) .summary-card .num {
    font-size: 26px !important;
  }

  /*
   * El monitor conserva su identidad de wallboard, pero en pantallas pequeñas
   * pasa de un lienzo fijo a secciones desplazables y tarjetas táctiles.
   */
  body.monitor-page {
    height: auto !important;
    min-height: 100vh;
    padding-top: 58px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.monitor-page .monitor-wrapper {
    height: auto !important;
    min-height: calc(100vh - 58px);
    overflow: visible !important;
  }

  body.monitor-page .header {
    align-items: center !important;
    flex-direction: row !important;
    gap: 10px !important;
    padding: 12px 14px !important;
  }

  body.monitor-page .header h1 {
    font-size: 19px !important;
    line-height: 1.25 !important;
    letter-spacing: -0.02em;
  }

  body.monitor-page .fecha-hora {
    margin-left: auto;
    font-size: 12px !important;
    line-height: 1.35;
    text-align: right;
  }

  body.monitor-page .tareas-dia,
  body.monitor-page .tickets-seccion,
  body.monitor-page .alarmas-seccion,
  body.monitor-page .proyectos-seccion,
  body.monitor-page .carrusel-container {
    padding: 14px !important;
    overflow: visible !important;
  }

  body.monitor-page .tareas-dia h2,
  body.monitor-page .tickets-seccion h2,
  body.monitor-page .alarmas-seccion h2,
  body.monitor-page .proyectos-seccion h2,
  body.monitor-page .carrusel-header h2 {
    margin-bottom: 10px !important;
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  body.monitor-page .tareas-carrusel-wrapper,
  body.monitor-page .tickets-track-wrapper,
  body.monitor-page .alarmas-track-wrapper,
  body.monitor-page .proyectos-carrusel-wrapper,
  body.monitor-page .carrusel-wrapper {
    height: auto !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline proximity;
    scrollbar-width: thin;
  }

  body.monitor-page .tareas-track,
  body.monitor-page .tareas-grid,
  body.monitor-page .tickets-track,
  body.monitor-page .alarmas-track,
  body.monitor-page .proyectos-track,
  body.monitor-page .carrusel-track {
    width: max-content !important;
    height: auto !important;
    transform: none !important;
  }

  body.monitor-page .tareas-track,
  body.monitor-page .tareas-grid,
  body.monitor-page .tickets-track,
  body.monitor-page .alarmas-track,
  body.monitor-page .proyectos-track,
  body.monitor-page .carrusel-track {
    gap: 12px !important;
  }

  body.monitor-page .tarea-compacta,
  body.monitor-page .ticket-card,
  body.monitor-page .alarma-card,
  body.monitor-page .proyecto-card,
  body.monitor-page .pendiente-card {
    scroll-snap-align: start;
  }

  body.monitor-page .tarea-compacta {
    width: min(82vw, 320px) !important;
    height: auto !important;
    min-height: 112px;
  }

  body.monitor-page .ticket-card,
  body.monitor-page .alarma-card {
    width: min(76vw, 280px) !important;
  }

  body.monitor-page .contenido-principal {
    display: flex;
    flex: none;
    flex-direction: column !important;
    overflow: visible !important;
  }

  body.monitor-page .proyectos-seccion {
    width: 100% !important;
    border-right: 0 !important;
    border-bottom: 2px solid #374151;
  }

  body.monitor-page .proyectos-track {
    flex-direction: row !important;
  }

  body.monitor-page .proyecto-card,
  body.monitor-page .pendiente-card {
    width: min(84vw, 330px) !important;
    height: auto !important;
    min-height: 180px;
    max-height: none !important;
  }

  body.monitor-page .carrusel-container {
    width: 100%;
    min-height: 280px;
    padding-bottom: 18px !important;
  }

  body.monitor-page .carrusel-wrapper {
    display: block !important;
  }

  body.monitor-page .carrusel-controles,
  body.monitor-page .proyectos-controles,
  body.monitor-page .progress-bar-container {
    display: none !important;
  }
}

@media (max-width: 480px) {
  body.app-shell:not(.monitor-page) > .container,
  body.app-shell:not(.monitor-page) > .contenedor,
  body.app-shell:not(.monitor-page) > main:not(.projects-page):not(.pending-page),
  body.app-shell:not(.monitor-page) > .projects-page,
  body.app-shell:not(.monitor-page) > .pending-page {
    padding-inline: 12px !important;
  }

  body.app-shell:not(.monitor-page) h1 {
    font-size: 21px !important;
  }

  body.app-shell:not(.monitor-page) .page-head,
  body.app-shell:not(.monitor-page) .page-header,
  body.app-shell:not(.monitor-page) .header-section,
  body.app-shell:not(.monitor-page) .pending-page-header,
  body.app-shell:not(.monitor-page) .projects-page-header,
  body.app-shell:not(.monitor-page) .top-bar,
  body.app-shell:not(.monitor-page) .container > .header {
    padding-bottom: 14px;
  }

  body.app-shell:not(.monitor-page) .stats-grid,
  body.app-shell:not(.monitor-page) .stats,
  body.app-shell:not(.monitor-page) .metric-grid {
    grid-template-columns: 1fr !important;
  }

  body.monitor-page .header {
    align-items: flex-start !important;
    flex-wrap: wrap;
  }

  body.monitor-page .fecha-hora {
    width: 100%;
    margin-left: 0;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.app-shell *,
  body.app-shell *::before,
  body.app-shell *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}