/*
 * Capa visual moderna de ArqSP.
 * IMPORTANTE:
 * - Solo actúa en pantalla.
 * - No modifica cálculos, formularios ni reglas de negocio.
 * - No altera los estilos de impresión existentes.
 */
@media screen {
  :root {
    --arq-ui-bg: #f4f7fb;
    --arq-ui-surface: #ffffff;
    --arq-ui-surface-soft: #f8fafc;
    --arq-ui-sidebar: #102a43;
    --arq-ui-sidebar-2: #0b2239;
    --arq-ui-primary: #126f63;
    --arq-ui-primary-dark: #0e5a50;
    --arq-ui-primary-soft: #eaf6f3;
    --arq-ui-blue: #2563eb;
    --arq-ui-text: #172033;
    --arq-ui-muted: #68758b;
    --arq-ui-border: #e3e9f2;
    --arq-ui-danger: #c9363e;
    --arq-ui-danger-dark: #a92731;
    --arq-ui-success: #16835f;
    --arq-ui-warning: #b87513;
    --arq-ui-shadow: 0 8px 28px rgba(16, 42, 67, .08);
    --arq-ui-shadow-sm: 0 4px 14px rgba(16, 42, 67, .07);
    --arq-ui-radius: 16px;
    --arq-ui-sidebar-width: 246px;
  }

  html {
    background: var(--arq-ui-bg);
  }

  body {
    background:
      radial-gradient(circle at 92% 2%, rgba(18,111,99,.06), transparent 25%),
      var(--arq-ui-bg) !important;
    color: var(--arq-ui-text) !important;
    font-family:
      Inter,
      ui-sans-serif,
      system-ui,
      -apple-system,
      BlinkMacSystemFont,
      "Segoe UI",
      sans-serif !important;
    min-height: 100vh;
    margin: 0 !important;
    padding: 22px 26px 42px !important;
    box-sizing: border-box;
  }

  body.has-panel-menu {
    padding-left: calc(var(--arq-ui-sidebar-width) + 28px) !important;
  }

  body * {
    box-sizing: border-box;
  }

  /* Barra superior */
  .top {
    position: relative;
    z-index: 30;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 18px !important;
    margin: 0 0 20px !important;
    padding: 16px 18px !important;
    background: rgba(255,255,255,.94) !important;
    border: 1px solid var(--arq-ui-border) !important;
    border-radius: var(--arq-ui-radius) !important;
    box-shadow: var(--arq-ui-shadow-sm) !important;
    backdrop-filter: blur(10px);
  }

  .page-title,
  .top h1,
  .top h2 {
    margin: 0 0 4px !important;
    color: var(--arq-ui-text) !important;
    font-weight: 800 !important;
    letter-spacing: -.02em !important;
  }

  .badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 5px 9px !important;
    border-radius: 999px !important;
    background: var(--arq-ui-primary-soft) !important;
    color: var(--arq-ui-primary-dark) !important;
    border: 1px solid rgba(18,111,99,.14) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
  }

  .subtle {
    color: var(--arq-ui-muted) !important;
  }

  /* Navegación lateral estilo software administrativo */
  .menu {
  position: fixed !important;
  inset: 0 auto 0 0 !important;
  width: var(--arq-ui-sidebar-width) !important;
  z-index: 80 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 160px 14px 22px !important;
  overflow-y: auto !important;
  background:
    linear-gradient(180deg, var(--arq-ui-sidebar), var(--arq-ui-sidebar-2)) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: 10px 0 34px rgba(8, 31, 50, .13) !important;
}

.menu::before {
  content: "";
  position: absolute;
  top: 18px;
  left: 16px;
  right: 16px;
  height: 100px;
  background: url("../img/isologo_superagro.png") no-repeat center center;
  background-size: contain;
}

.menu::after {
  content: "Gestión de caja";
  position: absolute;
  top: 128px;
  left: 18px;
  right: 18px;
  color: rgba(255,255,255,.68);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
}

  .menu .btn,
  .menu a.btn {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 43px !important;
    margin: 0 !important;
    padding: 10px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: rgba(255,255,255,.78) !important;
    box-shadow: none !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;
  }

  .menu .btn::before {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border-radius: 7px;
    background: rgba(255,255,255,.08);
    color: rgba(255,255,255,.88);
    font-size: 13px;
    font-weight: 900;
  }

  .menu a[href*="index.php"]::before { content: "▦"; }
  .menu a[href*="planillas.php"]::before { content: "▤"; }
  .menu a[href*="reportes.php"]::before { content: "▥"; }
  .menu a[href*="flujo_caja.php"]::before { content: "$"; }
  .menu a[href*="flujos_caja_enviados.php"]::before { content: "↻"; }
  .menu a[href*="usuarios.php"]::before { content: "◉"; }
  .menu a[href*="trabajadores_pdv.php"]::before { content: "♙"; }

  .menu .btn:hover,
  .menu .btn:focus-visible {
    background: rgba(255,255,255,.09) !important;
    color: #ffffff !important;
    transform: none !important;
  }

  .menu .btn.is-active,
  .menu .btn.panel-nav-active {
    background: #ffffff !important;
    color: var(--arq-ui-sidebar) !important;
    border-color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
  }

  .menu .btn.is-active::before,
  .menu .btn.panel-nav-active::before {
    background: var(--arq-ui-primary-soft);
    color: var(--arq-ui-primary-dark);
  }

  /* Botones */
  .btn,
  button.btn,
  a.btn,
  button[type="submit"] {
    border-radius: 9px !important;
    border: 1px solid var(--arq-ui-primary) !important;
    background: var(--arq-ui-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(18,111,99,.13) !important;
    font-weight: 750 !important;
    text-decoration: none !important;
    transition:
      background .16s ease,
      border-color .16s ease,
      box-shadow .16s ease,
      transform .16s ease !important;
  }

  .btn:hover,
  button.btn:hover,
  a.btn:hover,
  button[type="submit"]:hover {
    background: var(--arq-ui-primary-dark) !important;
    border-color: var(--arq-ui-primary-dark) !important;
    color: #ffffff !important;
    box-shadow: 0 6px 16px rgba(18,111,99,.18) !important;
    transform: translateY(-1px);
  }

  .btn-secondary,
  a.btn-secondary,
  button.btn-secondary {
    background: #ffffff !important;
    color: #334155 !important;
    border-color: #d6deea !important;
    box-shadow: 0 2px 8px rgba(15,23,42,.05) !important;
  }

  .btn-secondary:hover,
  a.btn-secondary:hover,
  button.btn-secondary:hover {
    background: #f7f9fc !important;
    color: #172033 !important;
    border-color: #c3cedd !important;
  }

  .btn-danger,
  button.btn-danger,
  a.btn-danger {
    background: var(--arq-ui-danger) !important;
    border-color: var(--arq-ui-danger) !important;
    color: #ffffff !important;
  }

  .btn-danger:hover,
  button.btn-danger:hover,
  a.btn-danger:hover {
    background: var(--arq-ui-danger-dark) !important;
    border-color: var(--arq-ui-danger-dark) !important;
  }

  .btn-edit {
    background: #2b6cb0 !important;
    border-color: #2b6cb0 !important;
  }

  /* Superficies */
  .section-card,
  .card,
  .report-kpi,
  .fc-sent-card,
  .report-graphic-card,
  .readonly-note {
    background: var(--arq-ui-surface) !important;
    border: 1px solid var(--arq-ui-border) !important;
    border-radius: var(--arq-ui-radius) !important;
    box-shadow: var(--arq-ui-shadow-sm) !important;
  }

  .section-card {
    margin-bottom: 18px !important;
    padding: 18px !important;
  }

  .section-title {
    color: var(--arq-ui-text) !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
  }

  .kpi,
  .report-kpis {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
    margin: 0 0 18px !important;
  }

  .kpi .card,
  .report-kpi {
    position: relative;
    overflow: hidden;
    min-height: 105px;
    padding: 16px 17px !important;
  }

  .kpi .card::before,
  .report-kpi::before {
    content: "";
    position: absolute;
    left: 0;
    top: 16px;
    bottom: 16px;
    width: 4px;
    border-radius: 0 5px 5px 0;
    background: var(--arq-ui-primary);
  }

  .kpi .label,
  .report-kpi > span {
    color: var(--arq-ui-muted) !important;
    font-weight: 700 !important;
    font-size: 12px !important;
  }

  .kpi .value,
  .report-kpi > strong {
    margin-top: 8px !important;
    color: var(--arq-ui-text) !important;
    font-size: clamp(20px, 2vw, 28px) !important;
    font-weight: 850 !important;
    letter-spacing: -.03em;
  }

  /* Formularios */
  input,
  select,
  textarea {
    min-height: 40px;
    border: 1px solid #d8e0ec !important;
    border-radius: 9px !important;
    background: #ffffff !important;
    color: var(--arq-ui-text) !important;
    box-shadow: inset 0 1px 2px rgba(15,23,42,.02) !important;
  }

  input:focus,
  select:focus,
  textarea:focus {
    outline: 3px solid rgba(18,111,99,.12) !important;
    border-color: var(--arq-ui-primary) !important;
    box-shadow: none !important;
  }

  label {
    color: #354155;
    font-weight: 700;
  }

  .filters,
  .report-filters,
  .fc-filter-form {
    gap: 12px !important;
  }

  /* Tablas */
  .table-wrap,
  .report-table-wrap,
  .report-gp-table-scroll {
    border: 1px solid var(--arq-ui-border) !important;
    border-radius: 13px !important;
    background: #ffffff !important;
    box-shadow: none !important;
  }

  table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
  }

  table thead th {
    position: sticky;
    top: 0;
    z-index: 4;
    background: #f6f8fb !important;
    color: #334155 !important;
    border-bottom: 1px solid #dfe6ef !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    text-transform: none !important;
  }

  table tbody td {
    border-bottom-color: #edf1f6 !important;
    color: #344054;
  }

  table tbody tr:hover td {
    background: #f9fbfd !important;
  }

  .money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }

  /* Hero de reportes/flujo */
  .report-hero,
  .fc-hero {
    border-radius: 18px !important;
    border: 1px solid rgba(18,111,99,.15) !important;
    background:
      linear-gradient(135deg, #ffffff 0%, #f0f8f6 100%) !important;
    box-shadow: var(--arq-ui-shadow-sm) !important;
  }

  .report-hero h1,
  .fc-hero h1 {
    color: var(--arq-ui-text) !important;
    letter-spacing: -.03em;
  }

  .report-eyebrow,
  .fc-eyebrow {
    color: var(--arq-ui-primary) !important;
    font-weight: 850 !important;
  }

  /* Usuarios */
  .perm-card {
    border: 1px solid #dfe6ef !important;
    border-radius: 10px !important;
    background: #fafbfd !important;
  }

  .perm-card:hover {
    border-color: #b9d8d2 !important;
    background: #f2faf8 !important;
  }

  .edit-user-box {
    border-radius: 12px;
  }

  /* Flujos enviados */
  .fc-sent-grid {
    gap: 16px !important;
  }

  .fc-sent-card {
    transition: transform .16s ease, box-shadow .16s ease;
  }

  .fc-sent-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--arq-ui-shadow) !important;
  }

  .fc-sent-actions {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .fc-delete-flow-form {
    display: inline-flex;
    margin: 0;
  }

  .fc-delete-notice {
    grid-column: 1 / -1;
    margin-bottom: 2px;
  }

  /* Login */
  body.panel-login-page {
    display: grid !important;
    place-items: center !important;
    min-height: 100vh !important;
    padding: 28px !important;
    background:
      radial-gradient(circle at 20% 15%, rgba(18,111,99,.14), transparent 25%),
      radial-gradient(circle at 85% 80%, rgba(37,99,235,.08), transparent 24%),
      #f3f6fa !important;
  }

  .panel-login-page .wrap {
    width: min(100%, 430px) !important;
    margin: 0 !important;
    padding: 32px !important;
    border: 1px solid var(--arq-ui-border) !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 22px 60px rgba(16,42,67,.14) !important;
  }

  .panel-login-page .wrap::before {
    content: "ARQSP";
    display: block;
    margin-bottom: 18px;
    color: var(--arq-ui-primary-dark);
    font-size: 27px;
    font-weight: 900;
    letter-spacing: .08em;
  }

  .panel-login-page .wrap h2 {
    margin: 0 0 5px !important;
    color: var(--arq-ui-text) !important;
    font-size: 25px !important;
    font-weight: 850 !important;
    letter-spacing: -.025em;
  }

  .panel-login-page form {
    display: grid;
    gap: 12px;
    margin-top: 20px;
  }

  .panel-login-page input {
    width: 100% !important;
    min-height: 48px;
    padding: 0 14px !important;
  }

  .panel-login-page button[type="submit"] {
    min-height: 48px;
    margin-top: 2px;
  }

  .panel-login-password {
    position: relative;
    width: 100%;
  }

  .panel-login-password > input {
    padding-right: 94px !important;
  }

  .panel-password-toggle {
    position: absolute;
    top: 50%;
    right: 7px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 34px;
    padding: 0 10px;
    border: 0;
    border-radius: 7px;
    background: #eef4f8;
    color: #334155;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
  }

  .panel-password-toggle:hover,
  .panel-password-toggle:focus-visible {
    background: var(--arq-ui-primary-soft);
    color: var(--arq-ui-primary-dark);
    outline: 2px solid rgba(18,111,99,.15);
  }

  .panel-password-toggle__icon {
    font-size: 12px;
  }

  /* Reportes gráficos */
  .report-graphic-badge {
    display: inline-flex;
    align-items: center;
    padding: 9px 12px;
    border: 1px solid rgba(18,111,99,.18);
    border-radius: 999px;
    background: #ffffff;
    color: var(--arq-ui-primary-dark);
    font-size: 12px;
    font-weight: 800;
  }

  .report-graphics-dashboard {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    width: 100%;
  }

  .report-graphic-card {
    min-width: 0;
    padding: 17px;
  }

  .report-graphic-card--wide {
    grid-column: 1 / -1;
  }

  .report-graphic-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
  }

  .report-graphic-card__head h3 {
    margin: 0 0 3px;
    color: var(--arq-ui-text);
    font-size: 16px;
    font-weight: 850;
  }

  .report-graphic-card__head p {
    margin: 0;
    color: var(--arq-ui-muted);
    font-size: 12px;
  }

  .report-graphic-chip {
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    background: var(--arq-ui-primary-soft);
    color: var(--arq-ui-primary-dark);
    font-size: 11px;
    font-weight: 800;
  }

  .report-graphic-canvas {
    width: 100%;
    min-height: 290px;
    overflow: hidden;
    border-radius: 12px;
    background:
      linear-gradient(180deg, #fbfcfe, #ffffff);
  }

  .report-graphic-canvas--tall {
    min-height: 360px;
  }

  .report-svg-chart {
    display: block;
    width: 100%;
    height: auto;
    max-height: 620px;
  }

  .chart-grid-line {
    stroke: #e7edf4;
    stroke-width: 1;
  }

  .chart-zero-line {
    stroke: #98a5b6;
    stroke-width: 1.4;
    stroke-dasharray: 5 5;
  }

  .chart-axis-label,
  .chart-legend-label,
  .chart-category-label {
    fill: #667085;
    font-family: inherit;
    font-size: 12px;
    font-weight: 650;
  }

  .chart-category-label {
    fill: #344054;
    font-weight: 750;
  }

  .chart-axis-label--x {
    font-size: 11px;
  }

  .chart-value-label {
    fill: #ffffff;
    font-family: inherit;
    font-size: 10px;
    font-weight: 800;
  }

  .chart-line {
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .chart-point {
    stroke: #ffffff;
    stroke-width: 2;
  }

  .chart-bar {
    opacity: .92;
  }

  .series-1 { stroke: #126f63; fill: #126f63; }
  .series-2 { stroke: #3b82f6; fill: #3b82f6; }
  .series-3 { stroke: #8b5cf6; fill: #8b5cf6; }
  .series-4 { stroke: #d97706; fill: #d97706; }
  .series-positive { stroke: #17845f; fill: #17845f; }
  .series-negative { stroke: #c9363e; fill: #c9363e; }

  .chart-donut-track {
    stroke: #edf1f6;
  }

  .chart-donut-segment {
    fill: none;
    stroke-linecap: butt;
  }

  circle.series-1,
  circle.series-2,
  circle.series-3,
  circle.series-4 {
    fill: currentColor;
  }

  .chart-donut-total-label {
    fill: #667085;
    font-size: 12px;
    font-weight: 700;
  }

  .chart-donut-total-value {
    fill: #172033;
    font-size: 18px;
    font-weight: 850;
  }

  .report-graphic-empty {
    display: grid;
    place-items: center;
    min-height: 270px;
    padding: 24px;
    color: var(--arq-ui-muted);
    font-size: 13px;
    text-align: center;
  }

  .report-graphic-table-wrap {
    max-height: 480px;
    overflow: auto;
  }

  /* Notificaciones */
  .notice,
  .err {
    border-radius: 11px !important;
  }

  /* Responsive */
  @media (max-width: 1180px) {
    .kpi,
    .report-kpis {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .report-graphics-dashboard {
      grid-template-columns: 1fr;
    }

    .report-graphic-card--wide {
      grid-column: auto;
    }
  }

  @media (max-width: 920px) {
    body,
    body.has-panel-menu {
      padding: 14px !important;
    }

    .menu {
      position: sticky !important;
      top: 0 !important;
      width: 100% !important;
      height: auto !important;
      inset: auto !important;
      z-index: 70 !important;
      flex-direction: row !important;
      overflow-x: auto !important;
      overflow-y: hidden !important;
      padding: 9px !important;
      margin: 0 0 14px !important;
      border-radius: 13px !important;
      box-shadow: var(--arq-ui-shadow-sm) !important;
    }

    .menu::before,
    .menu::after {
      display: none;
    }

    .menu .btn,
    .menu a.btn {
      width: auto !important;
      min-width: max-content !important;
      min-height: 38px !important;
    }

    .top {
      position: static;
      padding: 14px !important;
    }
  }

  @media (max-width: 640px) {
    .kpi,
    .report-kpis {
      grid-template-columns: 1fr !important;
    }

    .top {
      align-items: flex-start !important;
      flex-direction: column !important;
    }

    .panel-login-page .wrap {
      padding: 24px 20px !important;
    }
  }
}


/* ================================================================
 * Encabezado unificado de módulos - 2026-08-12
 * Solo presentación. No altera formularios, cálculos ni lógica PHP.
 * ================================================================ */
@media screen {
  .panel-module-header {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 190px !important;
    margin: 0 0 20px !important;
    padding: 28px 190px 28px !important;
    overflow: hidden;
    text-align: center !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(18,111,99,.08), transparent 34%),
      linear-gradient(135deg, #ffffff 0%, #f6fbfa 100%) !important;
    border: 1px solid #dbe8e5 !important;
    border-radius: 20px !important;
    box-shadow: 0 12px 34px rgba(16,42,67,.09) !important;
  }

  .panel-module-header::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 5px;
    height: 100%;
    background: linear-gradient(180deg, #126f63, #1a8a78);
  }

  .panel-module-header__content {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: min(100%, 980px);
    margin: 0 auto;
    text-align: center !important;
  }

  .panel-module-header__content .page-title,
  .panel-module-header__content h1,
  .panel-module-header__content h2 {
    margin: 7px 0 7px !important;
    color: var(--arq-ui-text) !important;
    font-size: clamp(26px, 2.15vw, 36px) !important;
    line-height: 1.12 !important;
    font-weight: 880 !important;
    letter-spacing: -.035em !important;
    text-align: center !important;
  }

  .panel-module-eyebrow,
  .panel-module-header .report-eyebrow,
  .panel-module-header .fc-eyebrow {
    display: block !important;
    margin: 0 !important;
    color: var(--arq-ui-primary) !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    font-weight: 900 !important;
    letter-spacing: .075em !important;
    text-transform: uppercase !important;
    text-align: center !important;
  }

  .panel-module-description {
    width: min(100%, 860px);
    margin: 0 auto 12px !important;
    color: #657287 !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    text-align: center !important;
  }

  .panel-module-header__content > .badge {
    margin: 0 auto !important;
  }

  .panel-module-header__actions {
    position: absolute;
    top: 50%;
    right: 28px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    min-width: 126px;
    transform: translateY(-50%);
  }

  .panel-module-header__actions .btn,
  .panel-module-header__actions .report-graphic-badge {
    width: 100%;
    margin: 0 !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap;
  }

  .panel-module-header__actions .report-graphic-badge {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
  }

  /* Reportes usa el mismo encabezado unificado. */
  .report-hero.panel-module-header {
    grid-template-columns: none !important;
  }

  /* Logo institucional en el login en reemplazo del texto ARQSP. */
  .panel-login-page .wrap::before {
    content: "" !important;
    display: block !important;
    width: min(100%, 250px) !important;
    height: 132px !important;
    margin: 0 auto 20px !important;
    background:
      url("../img/isologo_superagro.png")
      no-repeat center center / contain !important;
  }

  .panel-login-page .wrap h2,
  .panel-login-page .wrap > .subtle {
    text-align: center !important;
  }

  /* ============================================================
   * Ampliación interactiva de gráficos
   * ============================================================ */
  .report-graphic-card.panel-chart-zoomable {
    cursor: zoom-in;
    transition:
      transform .18s ease,
      box-shadow .18s ease,
      border-color .18s ease !important;
  }

  .report-graphic-card.panel-chart-zoomable:hover {
    transform: translateY(-2px);
    border-color: rgba(18,111,99,.34) !important;
    box-shadow: 0 14px 34px rgba(16,42,67,.13) !important;
  }

  .report-graphic-card.panel-chart-zoomable:focus-visible {
    outline: 3px solid rgba(18,111,99,.18);
    outline-offset: 3px;
  }

  .panel-chart-zoom-hint {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    margin-left: auto;
    padding: 4px 8px;
    border: 1px solid #dbe7e4;
    border-radius: 999px;
    background: #ffffff;
    color: var(--arq-ui-primary-dark);
    font-size: 11px;
    font-weight: 850;
    white-space: nowrap;
  }

  .panel-chart-modal {
    position: fixed;
    inset: 0;
    z-index: 10050;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(8, 20, 34, .74);
    backdrop-filter: blur(6px);
  }

  .panel-chart-modal.is-open {
    display: flex;
  }

  body.panel-chart-modal-open {
    overflow: hidden !important;
  }

  .panel-chart-modal__dialog {
    position: relative;
    width: min(96vw, 1500px);
    max-height: 92vh;
    overflow: auto;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 30px 90px rgba(0,0,0,.32);
  }

  .panel-chart-modal__close {
    position: sticky;
    top: 0;
    z-index: 5;
    float: right;
    display: inline-grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 0 8px 12px;
    border: 1px solid #dbe3ed;
    border-radius: 12px;
    background: #ffffff;
    color: #263449;
    box-shadow: 0 5px 16px rgba(15,23,42,.10);
    font-size: 24px;
    font-weight: 700;
    cursor: pointer;
  }

  .panel-chart-modal__close:hover,
  .panel-chart-modal__close:focus-visible {
    background: #f4f8f7;
    border-color: #b7d6d0;
    color: var(--arq-ui-primary-dark);
  }

  .panel-chart-modal__content {
    clear: both;
  }

  .panel-chart-modal__content .report-graphic-card {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 18px !important;
    cursor: default !important;
    transform: none !important;
    box-shadow: none !important;
  }

  .panel-chart-modal__content .panel-chart-zoom-hint {
    display: none !important;
  }

  .panel-chart-modal__content .report-graphic-canvas,
  .panel-chart-modal__content .report-graphic-canvas--tall {
    min-height: 560px !important;
    overflow: visible !important;
  }

  .panel-chart-modal__content .report-svg-chart {
    width: 100% !important;
    max-height: none !important;
  }

  @media (max-width: 1100px) {
    .panel-module-header {
      padding-left: 150px !important;
      padding-right: 150px !important;
    }

    .panel-module-header__actions {
      right: 18px;
      min-width: 112px;
    }
  }

  @media (max-width: 920px) {
    .panel-module-header {
      min-height: 0 !important;
      padding: 22px 18px !important;
      flex-direction: column !important;
      gap: 16px !important;
    }

    .panel-module-header__actions {
      position: static;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;
      min-width: 0;
      transform: none;
      justify-content: center;
      align-items: center;
    }

    .panel-module-header__actions .btn,
    .panel-module-header__actions .report-graphic-badge {
      width: auto;
    }

    .panel-chart-modal {
      padding: 12px;
    }

    .panel-chart-modal__dialog {
      width: 100%;
      max-height: 95vh;
      padding: 14px;
    }

    .panel-chart-modal__content .report-graphic-canvas,
    .panel-chart-modal__content .report-graphic-canvas--tall {
      min-height: 420px !important;
    }
  }
}


/* ================================================================
 * ANCHO UNIFICADO DE MÓDULOS + ENCABEZADO ÚNICO FLUJO DE CAJA
 * 2026-08-12
 * Solo presentación. No altera formularios, cálculos ni consultas.
 * ================================================================ */
@media screen {
  :root {
    --arq-ui-content-width: 1540px;
  }

  /*
   * Todos los bloques principales usan exactamente el mismo ancho.
   * Esto evita que encabezado, filtros, KPIs y tablas queden escalonados.
   */
  .panel-module-header,
  .section-card,
  .kpi,
  .report-kpis,
  .fc-info-grid,
  .fc-sheet-wrap,
  .fc-bottom-actions,
  .fc-view-toolbar,
  .fc-sent-grid,
  .table-wrap {
    width: 100% !important;
    max-width: var(--arq-ui-content-width) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Anular límites antiguos de 1400px usados por Reportes. */
  .report-hero.panel-module-header,
  .report-filter-card,
  .report-kpis {
    width: 100% !important;
    max-width: var(--arq-ui-content-width) !important;
  }

  /* Estos dos viven dentro de la tarjeta principal y deben ocuparla completa. */
  .report-table-head,
  .report-table-wrap {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /*
   * Flujo de Caja: el encabezado general y el antiguo hero quedaron
   * consolidados en una sola tarjeta. Los controles funcionales mantienen
   * exactamente sus mismos IDs y acciones.
   */
  .panel-module-header--flow {
    min-height: 248px !important;
    padding-left: 220px !important;
    padding-right: 220px !important;
  }

  .panel-module-header--flow .panel-module-header__content {
    width: min(100%, 960px) !important;
  }

  .panel-module-header--flow .panel-module-description {
    width: min(100%, 920px) !important;
    margin-bottom: 14px !important;
  }

  .panel-module-header__actions--flow {
    right: 28px !important;
    min-width: 168px !important;
  }

  .panel-module-header__actions--flow .btn,
  .panel-module-header__actions--flow .fc-readonly-badge {
    width: 168px !important;
    min-height: 40px !important;
  }

  .panel-module-header__actions--flow .fc-readonly-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Mantener una separación vertical uniforme entre bloques del flujo. */
  .fc-filter-card {
    margin-top: 0 !important;
    margin-bottom: 18px !important;
  }

  .fc-info-grid {
    margin-top: 0 !important;
  }

  @media (max-width: 1180px) {
    .panel-module-header--flow {
      padding-left: 190px !important;
      padding-right: 190px !important;
    }

    .panel-module-header__actions--flow {
      right: 18px !important;
      min-width: 152px !important;
    }

    .panel-module-header__actions--flow .btn,
    .panel-module-header__actions--flow .fc-readonly-badge {
      width: 152px !important;
    }
  }

  @media (max-width: 920px) {
    .panel-module-header--flow {
      min-height: 0 !important;
      padding: 22px 18px !important;
    }

    .panel-module-header__actions--flow {
      position: static !important;
      width: 100% !important;
      min-width: 0 !important;
      transform: none !important;
      display: grid !important;
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
      gap: 9px !important;
    }

    .panel-module-header__actions--flow .btn,
    .panel-module-header__actions--flow .fc-readonly-badge {
      width: 100% !important;
    }
  }

  @media (max-width: 560px) {
    .panel-module-header__actions--flow {
      grid-template-columns: 1fr !important;
    }
  }
}


/* ================================================================
 * COLORES DE ACCIONES RÁPIDAS
 * 2026-08-12
 * Solo presentación. No modifica enlaces, filtros ni lógica PHP.
 * ================================================================ */
@media screen {
  /*
   * HOY
   * Usa el mismo verde principal del botón Filtrar.
   */
  .section-card .actions-inline > a[href^="index.php?fi="],
  .section-card .actions-inline > a[href^="planillas.php?fi="] {
    background: var(--arq-ui-primary) !important;
    border-color: var(--arq-ui-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(18,111,99,.15) !important;
  }

  .section-card .actions-inline > a[href^="index.php?fi="]:hover,
  .section-card .actions-inline > a[href^="planillas.php?fi="]:hover {
    background: var(--arq-ui-primary-dark) !important;
    border-color: var(--arq-ui-primary-dark) !important;
    color: #ffffff !important;
  }

  /*
   * RECARGAR
   * Azul corporativo: acción informativa / actualización.
   */
  .section-card .actions-inline > a[href="index.php"],
  .section-card .actions-inline > a[href="planillas.php"] {
    background: #2f6fb2 !important;
    border-color: #2f6fb2 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(47,111,178,.16) !important;
  }

  .section-card .actions-inline > a[href="index.php"]:hover,
  .section-card .actions-inline > a[href="planillas.php"]:hover {
    background: #255c95 !important;
    border-color: #255c95 !important;
    color: #ffffff !important;
  }

  /*
   * LIMPIAR
   * Ámbar sobrio: indica restablecer filtros sin confundirse
   * con una acción destructiva como Salir o Eliminar.
   */
  .report-filter-actions > a.btn-secondary {
    background: #b7791f !important;
    border-color: #b7791f !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(183,121,31,.16) !important;
  }

  .report-filter-actions > a.btn-secondary:hover {
    background: #966318 !important;
    border-color: #966318 !important;
    color: #ffffff !important;
  }
}


/* ================================================================
 * COLORES SEMÁNTICOS - TABLA DE ARQUEOS
 * 2026-08-12
 * Solo presentación. No modifica enlaces, permisos ni lógica PHP.
 * ================================================================ */
@media screen {
  /*
   * Motivo de Edición = violeta.
   * Es una acción de auditoría / historial, distinta a Ver arqueo.
   */
  .arqueo-edit-reason-btn {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(124,58,237,.17) !important;
  }

  .arqueo-edit-reason-btn:hover {
    background: #6d28d9 !important;
    border-color: #6d28d9 !important;
    color: #ffffff !important;
  }

  /*
   * Arqueo PDF = azul índigo.
   * Documento principal del arqueo.
   */
  .btn-arqueo-pdf {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(37,99,235,.17) !important;
  }

  .btn-arqueo-pdf:hover {
    background: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
    color: #ffffff !important;
  }

  /*
   * Soporte PDF = ámbar/naranja sobrio.
   * Distingue visualmente el soporte del documento principal.
   */
  .btn-soporte-pdf {
    background: #d97706 !important;
    border-color: #d97706 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(217,119,6,.17) !important;
  }

  .btn-soporte-pdf:hover {
    background: #b45309 !important;
    border-color: #b45309 !important;
    color: #ffffff !important;
  }

  /*
   * Ver arqueo = verde institucional.
   * Acción primaria de consulta.
   */
  .btn-view-arqueo {
    background: var(--arq-ui-primary) !important;
    border-color: var(--arq-ui-primary) !important;
    color: #ffffff !important;
  }

  .btn-view-arqueo:hover {
    background: var(--arq-ui-primary-dark) !important;
    border-color: var(--arq-ui-primary-dark) !important;
    color: #ffffff !important;
  }

  /*
   * Editar = azul medio.
   * Mantiene su semántica de modificación.
   */
  .btn-edit {
    background: #2f6fb2 !important;
    border-color: #2f6fb2 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 10px rgba(47,111,178,.17) !important;
  }

  .btn-edit:hover {
    background: #255c95 !important;
    border-color: #255c95 !important;
    color: #ffffff !important;
  }

  /*
   * Eliminar = rojo.
   * Conserva el color de peligro ya utilizado por el sistema.
   */
  .actions-inline .btn-danger {
    background: var(--arq-ui-danger) !important;
    border-color: var(--arq-ui-danger) !important;
    color: #ffffff !important;
  }

  .actions-inline .btn-danger:hover {
    background: var(--arq-ui-danger-dark) !important;
    border-color: var(--arq-ui-danger-dark) !important;
    color: #ffffff !important;
  }
}
/* =====================================================================
   LOGIN PANEL — MICROINTERACCIONES PROFESIONALES
   2026-09-23
   Solo presentación del login. No altera autenticación ni reglas PHP.
   ===================================================================== */
@media screen {
  body.panel-login-page {
    --login-pointer-x: 50%;
    --login-pointer-y: 45%;
    position: relative !important;
    overflow-x: hidden;
    isolation: isolate;
  }

  /* Luz ambiental que responde suavemente al puntero. */
  body.panel-login-page::before {
    content: "";
    position: fixed;
    inset: -22%;
    z-index: -2;
    pointer-events: none;
    background:
      radial-gradient(
        circle at var(--login-pointer-x) var(--login-pointer-y),
        rgba(18,111,99,.13) 0,
        rgba(18,111,99,.065) 17%,
        transparent 38%
      );
    transition: background-position .22s ease;
  }

  /* Halo decorativo de baja intensidad para dar profundidad. */
  body.panel-login-page::after {
    content: "";
    position: fixed;
    z-index: -1;
    width: 360px;
    height: 360px;
    left: -110px;
    bottom: -145px;
    pointer-events: none;
    border-radius: 50%;
    background: rgba(18,111,99,.055);
    filter: blur(2px);
    animation: panelLoginOrbFloat 11s ease-in-out infinite alternate;
  }

  .panel-login-page .wrap {
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(14px) scale(.985);
    box-shadow: 0 22px 60px rgba(16,42,67,.14) !important;
    transition:
      transform .55s cubic-bezier(.22,.8,.24,1),
      opacity .45s ease,
      box-shadow .22s ease,
      border-color .22s ease !important;
  }

  .panel-login-page .wrap.is-ready {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  .panel-login-page .wrap:hover {
    border-color: rgba(18,111,99,.24) !important;
    box-shadow:
      0 28px 72px rgba(16,42,67,.17),
      0 0 0 1px rgba(18,111,99,.025) !important;
  }

  /* Línea superior corporativa con desplazamiento muy suave. */
  .panel-login-page .wrap::after {
    content: "";
    position: absolute;
    top: 0;
    left: -38%;
    width: 38%;
    height: 3px;
    border-radius: 0 999px 999px 0;
    background: linear-gradient(
      90deg,
      rgba(18,111,99,0),
      rgba(18,111,99,.95),
      rgba(37,99,235,.72),
      rgba(18,111,99,0)
    );
    animation: panelLoginTopSweep 5.8s ease-in-out 1.1s infinite;
    pointer-events: none;
  }

  /* El logo conserva el diseño actual, solo entra con suavidad. */
  .panel-login-page .wrap::before {
    animation: panelLoginLogoIn .75s cubic-bezier(.22,.8,.24,1) .08s both;
    transform-origin: center center;
  }

  .panel-login-page .wrap h2 {
    animation: panelLoginContentIn .55s ease .18s both;
  }

  .panel-login-page .panel-login-form {
    animation: panelLoginContentIn .6s ease .26s both;
  }

  .panel-login-page .panel-login-input {
    transition:
      border-color .18s ease,
      box-shadow .18s ease,
      background .18s ease,
      transform .18s ease !important;
  }

  .panel-login-page .panel-login-input:hover {
    border-color: #c3d4d0 !important;
    background: #fcfefd !important;
  }

  .panel-login-page .panel-login-input:focus {
    transform: translateY(-1px);
    box-shadow:
      0 0 0 4px rgba(18,111,99,.10),
      0 7px 18px rgba(16,42,67,.05) !important;
  }

  .panel-login-page .panel-login-input:valid:not(:placeholder-shown) {
    border-color: rgba(18,111,99,.44) !important;
  }

  .panel-login-page .panel-password-toggle {
    transition:
      background .18s ease,
      color .18s ease,
      transform .18s ease,
      box-shadow .18s ease;
  }

  .panel-login-page .panel-password-toggle:hover {
    transform: translateY(-50%) scale(1.025);
    box-shadow: 0 4px 10px rgba(18,111,99,.09);
  }

  .panel-login-page .panel-login-submit {
    position: relative;
    overflow: hidden;
    isolation: isolate;
  }

  .panel-login-page .panel-login-submit::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -55%;
    left: -35%;
    width: 28%;
    height: 210%;
    transform: rotate(18deg);
    background: rgba(255,255,255,.20);
    transition: left .55s ease;
  }

  .panel-login-page .panel-login-submit:hover::after {
    left: 112%;
  }

  .panel-login-page .panel-login-submit:active {
    transform: translateY(0) scale(.992) !important;
  }

  .panel-login-submit__spinner {
    display: none;
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    border: 2px solid rgba(255,255,255,.35);
    border-top-color: #ffffff;
    border-radius: 50%;
  }

  .panel-login-submit.is-loading .panel-login-submit__spinner {
    display: inline-block;
    animation: panelLoginSpin .72s linear infinite;
  }

  .panel-login-submit.is-loading {
    cursor: wait !important;
    opacity: .92;
  }

  .panel-login-security {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 1px auto -2px;
    padding: 6px 10px;
    border: 1px solid rgba(18,111,99,.11);
    border-radius: 999px;
    background: #f7fbfa;
    color: #536579;
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .01em;
  }

  .panel-login-security__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
    background: var(--arq-ui-success);
    box-shadow: 0 0 0 4px rgba(22,131,95,.09);
    animation: panelLoginStatusPulse 2.6s ease-in-out infinite;
  }

  .panel-login-page .err {
    animation: panelLoginErrorIn .38s cubic-bezier(.36,.07,.19,.97) both;
  }

  @keyframes panelLoginContentIn {
    from {
      opacity: 0;
      transform: translateY(9px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes panelLoginLogoIn {
    from {
      opacity: 0;
      transform: translateY(-8px) scale(.96);
    }
    to {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }

  @keyframes panelLoginTopSweep {
    0%, 15% {
      left: -38%;
      opacity: 0;
    }
    28% {
      opacity: 1;
    }
    62% {
      opacity: .85;
    }
    78%, 100% {
      left: 106%;
      opacity: 0;
    }
  }

  @keyframes panelLoginOrbFloat {
    from {
      transform: translate3d(0, 0, 0) scale(1);
    }
    to {
      transform: translate3d(36px, -28px, 0) scale(1.08);
    }
  }

  @keyframes panelLoginSpin {
    to {
      transform: rotate(360deg);
    }
  }

  @keyframes panelLoginStatusPulse {
    0%, 100% {
      box-shadow: 0 0 0 3px rgba(22,131,95,.08);
    }
    50% {
      box-shadow: 0 0 0 7px rgba(22,131,95,.02);
    }
  }

  @keyframes panelLoginErrorIn {
    0% {
      opacity: 0;
      transform: translateX(0);
    }
    35% {
      opacity: 1;
      transform: translateX(-4px);
    }
    70% {
      transform: translateX(4px);
    }
    100% {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @media (max-width: 640px) {
    body.panel-login-page::after {
      width: 260px;
      height: 260px;
    }

    .panel-login-security {
      width: max-content;
      max-width: 100%;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    body.panel-login-page::after,
    .panel-login-page .wrap::after,
    .panel-login-page .wrap::before,
    .panel-login-page .wrap h2,
    .panel-login-page .panel-login-form,
    .panel-login-security__dot,
    .panel-login-submit__spinner,
    .panel-login-page .err {
      animation: none !important;
    }

    .panel-login-page .wrap {
      opacity: 1 !important;
      transform: none !important;
      transition: none !important;
    }

    .panel-login-page .panel-login-submit::after {
      display: none;
    }
  }
}
/* =====================================================================
   LOGIN PANEL — AJUSTES VISUALES 2026-09-23
   Comfortaa + título verde animado + barrido superior/inferior.
   Solo presentación: no altera autenticación ni lógica PHP.
   ===================================================================== */
@media screen {

  /* Título con la tipografía solicitada y el verde institucional. */
  .panel-login-page .wrap h2.panel-login-title {
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 5px !important;
    color: #126f63 !important;
    font-family: "Archivo Black", "Segoe UI", sans-serif !important;
    font-size: 25px !important;
    line-height: 1.25 !important;
    font-weight: 700 !important;
    letter-spacing: .012em !important;
    text-align: center !important;

    /*
     * Brillo tipo "Ingresar": el texto permanece verde y una franja
     * luminosa lo recorre periódicamente de izquierda a derecha.
     */
    background:
      linear-gradient(
        110deg,
        #126f63 0%,
        #126f63 36%,
        #44a88f 47%,
        #8fd8c7 50%,
        #44a88f 53%,
        #126f63 64%,
        #126f63 100%
      );
    background-size: 240% 100%;
    background-position: 115% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

    animation:
      panelLoginContentIn .55s ease .18s both,
      panelLoginTitleShine 3.6s ease-in-out 1.1s infinite;
  }

  /* La línea superior pasa más seguido que antes. */
  .panel-login-page .wrap::after {
    animation: panelLoginTopSweep 3.6s ease-in-out .45s infinite !important;
  }

  /* Misma animación en la parte inferior de la tarjeta. */
  .panel-login-page .panel-login-sweep {
    position: absolute;
    z-index: 4;
    left: -38%;
    width: 38%;
    height: 3px;
    pointer-events: none;
    border-radius: 999px;
    background:
      linear-gradient(
        90deg,
        rgba(18,111,99,0),
        rgba(18,111,99,.95),
        rgba(37,99,235,.72),
        rgba(18,111,99,0)
      );
    opacity: 0;
  }

  .panel-login-page .panel-login-sweep--bottom {
    bottom: 0;
    animation: panelLoginBottomSweep 3.6s ease-in-out 1.75s infinite;
  }

  @keyframes panelLoginTitleShine {
    0%, 22% {
      background-position: 115% 0;
    }
    52% {
      background-position: 48% 0;
    }
    78%, 100% {
      background-position: -18% 0;
    }
  }

  @keyframes panelLoginBottomSweep {
    0%, 15% {
      left: -38%;
      opacity: 0;
    }
    28% {
      opacity: 1;
    }
    62% {
      opacity: .85;
    }
    78%, 100% {
      left: 106%;
      opacity: 0;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .panel-login-page .wrap h2.panel-login-title,
    .panel-login-page .panel-login-sweep--bottom {
      animation: none !important;
    }

    .panel-login-page .wrap h2.panel-login-title {
      background: none !important;
      color: #126f63 !important;
      -webkit-text-fill-color: #126f63 !important;
    }

    .panel-login-page .panel-login-sweep--bottom {
      display: none !important;
    }
  }
}