/* Shared visual language carried over from Cocina. Screen styles only. */
@media screen {
  :root {
    --atlas-visual-navy: #061224;
    --atlas-visual-navy-mid: #0a1d33;
    --atlas-visual-green: #a4e879;
    --atlas-visual-editable: #e6f6d9;
    --atlas-visual-reference: #fbf8f2;
    --atlas-visual-white: #f7fbff;
    --atlas-visual-line: #e4e9ed;
    --atlas-visual-gloss:
      linear-gradient(118deg, transparent 0%, #e1efff14 22%, #e1efff03 34%, transparent 48%),
      radial-gradient(ellipse at 12% 0%, #2a4d7280 0%, transparent 65%),
      linear-gradient(145deg, #0a1d33 0%, #061224 60%, #030b17 100%);
    --atlas-visual-shadow: 0 12px 26px #0612241c, 0 2px 7px #0612240d;
  }

  /* Summary and status metrics: glossy navy, green information, centred layout. */
  html body :is(
    #kpis.kpis > .kpi,
    .summary > .metric,
    #stockProgress > .metric,
    #receivedOrdersSummary > .metric,
    .incident-kpis > .incident-kpi,
    #receiptSummary > .summary-card,
    .receipt-summary > .summary-card,
    .center-manager-kpis > article,
    .center-manager-month-grid > article,
    .manager-control-kpis > article,
    .difference-summary-grid > article,
    .report-kpis > .report-kpi,
    .attendance-totals > div,
    .stats > span,
    .center-incident-summary > div,
    .center-store-metrics > span,
    #centerProductionSummary.center-production-summary,
    .dashboard-kpis > .dashboard-kpi
  ) {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    min-height: 144px;
    padding: 18px 14px;
    border: 0 !important;
    border-radius: 18px !important;
    background: var(--atlas-visual-gloss) !important;
    color: var(--atlas-visual-green) !important;
    box-shadow: var(--atlas-visual-shadow), inset 0 1px 0 #ffffff24 !important;
    text-align: center;
  }

  html body :is(
    #kpis.kpis > .kpi,
    .summary > .metric,
    #stockProgress > .metric,
    #receivedOrdersSummary > .metric,
    #receiptSummary > .summary-card,
    .receipt-summary > .summary-card,
    .center-manager-kpis > article,
    .center-manager-month-grid > article,
    .manager-control-kpis > article,
    #centerProductionSummary.center-production-summary
  ) > div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
    align-content: center;
    gap: 4px !important;
    width: 100%;
    text-align: center;
  }

  html body :is(
    #kpis.kpis > .kpi,
    .summary > .metric,
    #stockProgress > .metric,
    #receivedOrdersSummary > .metric,
    .incident-kpis > .incident-kpi,
    #receiptSummary > .summary-card,
    .receipt-summary > .summary-card,
    .center-manager-kpis > article,
    .center-manager-month-grid > article,
    .manager-control-kpis > article,
    .difference-summary-grid > article,
    .report-kpis > .report-kpi,
    .attendance-totals > div,
    .stats > span,
    .center-incident-summary > div,
    .center-store-metrics > span,
    #centerProductionSummary.center-production-summary,
    .dashboard-kpis > .dashboard-kpi
  ) :is(small, span, p, strong, b, div, output) {
    color: inherit !important;
    text-align: center;
  }

  html body :is(
    #kpis.kpis > .kpi,
    .summary > .metric,
    #stockProgress > .metric,
    #receivedOrdersSummary > .metric,
    .incident-kpis > .incident-kpi,
    #receiptSummary > .summary-card,
    .receipt-summary > .summary-card,
    .center-manager-kpis > article,
    .center-manager-month-grid > article,
    .manager-control-kpis > article,
    .report-kpis > .report-kpi,
    .attendance-totals > div,
    .stats > span,
    .center-incident-summary > div,
    .center-store-metrics > span,
    .dashboard-kpis > .dashboard-kpi
  ) :is(.kpi-icon, .metric-icon, .summary-icon, .report-kpi-icon) {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: var(--atlas-visual-green) !important;
    box-shadow: none !important;
  }

  html body :is(
    #kpis.kpis > .kpi,
    .summary > .metric,
    #stockProgress > .metric,
    #receivedOrdersSummary > .metric,
    .incident-kpis > .incident-kpi,
    #receiptSummary > .summary-card,
    .receipt-summary > .summary-card,
    .center-manager-kpis > article,
    .center-manager-month-grid > article,
    .manager-control-kpis > article,
    .difference-summary-grid > article,
    .report-kpis > .report-kpi,
    .attendance-totals > div,
    .stats > span,
    .center-incident-summary > div,
    .center-store-metrics > span,
    .dashboard-kpis > .dashboard-kpi
  ) :is(.kpi-icon, .metric-icon, .summary-icon, .report-kpi-icon) svg {
    width: 36px;
    height: 36px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  html body :is(
    #kpis.kpis > .kpi,
    .summary > .metric,
    #stockProgress > .metric,
    #receivedOrdersSummary > .metric,
    .incident-kpis > .incident-kpi,
    #receiptSummary > .summary-card,
    .receipt-summary > .summary-card,
    .center-manager-kpis > article,
    .center-manager-month-grid > article,
    .manager-control-kpis > article,
    .difference-summary-grid > article,
    .report-kpis > .report-kpi,
    .attendance-totals > div,
    .stats > span,
    .center-incident-summary > div,
    .center-store-metrics > span,
    .dashboard-kpis > .dashboard-kpi
  ) :is(strong, b, output) {
    font-size: clamp(30px, 3vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.08;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
  }

  html body :is(
    #kpis.kpis > .kpi,
    .summary > .metric,
    #stockProgress > .metric,
    #receivedOrdersSummary > .metric,
    .incident-kpis > .incident-kpi,
    #receiptSummary > .summary-card,
    .receipt-summary > .summary-card,
    .center-manager-kpis > article,
    .center-manager-month-grid > article,
    .manager-control-kpis > article,
    .difference-summary-grid > article,
    .report-kpis > .report-kpi,
    .attendance-totals > div,
    .stats > span,
    .center-incident-summary > div,
    .center-store-metrics > span,
    .dashboard-kpis > .dashboard-kpi
  ) :is(small, span):not(.kpi-icon):not(.metric-icon):not(.summary-icon):not(.report-kpi-icon) {
    max-width: 100%;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }

  html body :is(
    #kpis.kpis > .kpi,
    .summary > .metric,
    #stockProgress > .metric,
    #receivedOrdersSummary > .metric,
    .incident-kpis > .incident-kpi,
    #receiptSummary > .summary-card,
    .receipt-summary > .summary-card,
    .center-manager-kpis > article,
    .center-manager-month-grid > article,
    .manager-control-kpis > article,
    .difference-summary-grid > article,
    .report-kpis > .report-kpi,
    .attendance-totals > div,
    .stats > span,
    .center-incident-summary > div,
    .center-store-metrics > span,
    .dashboard-kpis > .dashboard-kpi
  ) p {
    max-width: 42ch;
    margin: 0;
    color: var(--atlas-visual-white) !important;
    font-size: 13px;
    line-height: 1.4;
  }

  html body #centerProductionSummary.center-production-summary :is(small, p) {
    color: var(--atlas-visual-white) !important;
  }

  html body .stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
  }

  html body :is(.kpis, .summary, .incident-kpis, .receipt-summary, .center-manager-kpis,
    .center-manager-month-grid, .manager-control-kpis, .difference-summary-grid, .report-kpis) {
    align-items: stretch;
  }

  html body .tracking-summary > .tracking-card {
    cursor: pointer;
    transition: box-shadow .16s ease, transform .16s ease;
  }
  html body .tracking-summary > .tracking-card:is(:hover, .active, [aria-pressed="true"]) {
    box-shadow: 0 14px 28px #06122440, inset 0 0 0 2px var(--atlas-visual-green) !important;
  }
  html body .tracking-summary > .tracking-card:focus-visible,
  html body .incident-kpis > .incident-kpi:focus-visible {
    outline: 3px solid var(--atlas-visual-green) !important;
    outline-offset: 3px;
  }
  html body .tracking-summary > .tracking-card .tracking-received-title {
    display: grid;
    justify-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--atlas-visual-green);
    text-align: center;
  }
  html body .tracking-summary > .tracking-card .tracking-received-split {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  html body .tracking-summary > .tracking-card .tracking-received-split button {
    min-width: 84px;
    padding: 7px 10px;
    border: 1px solid #ffffff35;
    border-radius: 10px;
    background: #ffffff12;
    color: var(--atlas-visual-white);
  }
  html body .tracking-summary > .tracking-card .tracking-received-split button :is(span, strong) {
    color: inherit !important;
  }

  /* Floating white cards for records, forms and module content. */
  html body :is(
    .form-panel, .filter-panel, .database, .recent, .summary-table, .records,
    .filters-panel, .config-filters, .form-card, .panel, .section-card,
    .record-card, .incident-card, .review-card, .supplier-card,
    .employee-store-card, .employee-summary-card, .employee-punch-record,
    .attendance-reminder, .employee-day, .uploadrow, .order, .order-card,
    .receipt-card, .shipment-card, .production-card, .product-card,
    .recipe-card, .entity-preview, .report-card
  ) {
    border: 0 !important;
    border-radius: 16px !important;
    background-color: #fff !important;
    box-shadow: var(--atlas-visual-shadow) !important;
  }

  html body :is(.card, .toolbar, .filters, .form-section, .workspace-card) {
    border: 0 !important;
    border-radius: 16px !important;
    background-color: #fff;
    box-shadow: var(--atlas-visual-shadow) !important;
  }

  /* Cream references and softly green editable values, with no hard borders. */
  html body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]) {
    box-sizing: border-box;
    max-width: 100%;
    border: 0 !important;
    border-radius: 6px !important;
    color: #14263d;
    box-shadow: 0 2px 8px #06122412 !important;
  }
  html body :is(select, input[type="search"], input[readonly], input:disabled, textarea[readonly], textarea:disabled) {
    background-color: var(--atlas-visual-reference) !important;
  }
  html body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="search"]):not([readonly]):not(:disabled), textarea:not([readonly]):not(:disabled)) {
    background-color: var(--atlas-visual-editable) !important;
    font-weight: 650;
  }
  html body :is(input, select, textarea):not([type="checkbox"]):not([type="radio"]):focus-visible {
    outline: 3px solid #a4e879 !important;
    outline-offset: 2px;
  }
  html body :is(input[type="checkbox"], input[type="radio"]) { accent-color: #176d5d; }
  html body .login :is(input, select, textarea) {
    border: 1px solid #c8d7d9 !important;
    border-radius: 11px !important;
    background: #fff !important;
    box-shadow: none !important;
  }
  html body .login .card {
    border: 1px solid #d9e3e3 !important;
    border-radius: 22px !important;
    background: #fff !important;
    box-shadow: 0 16px 50px #00313e14 !important;
  }

  /* Tables sit in one floating card; inner scrollers stay visually transparent. */
  html body :is(
    .table-wrap, .table-container, .table-card, .inventory-class-table,
    .purchase-review-table, .waste-assignment-table, .temperature-matrix-wrap,
    .attendance-week-table-wrap,
    div:has(> table):not(.purchase-format-table):not(.table-scroll):not(.product-fiche-scroll):not(.production-history-scroll):not(.table-wrap):not(.table-container):not(.table-card):not(.inventory-class-table):not(.purchase-review-table):not(.waste-assignment-table):not(.temperature-matrix-wrap):not(.attendance-week-table-wrap),
    section:has(> table):not(.purchase-format-table), article:has(> table):not(.purchase-format-table),
    .data-panel:has(table)
  ) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    border: 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: var(--atlas-visual-shadow) !important;
    overflow: hidden;
  }
  html body :is(.table-wrap, .table-container, .table-card, .inventory-class-table, .purchase-review-table, .waste-assignment-table, .temperature-matrix-wrap, .attendance-week-table-wrap) { overflow-x: auto; }
  html body :is(.table-scroll, .table-responsive) {
    max-width: 100%;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow-x: auto;
  }
  html body :is(.professional-card, .report-card, .card, .panel, .section-card, .review-card, .box, dialog, .temperature-week) :is(.table-wrap, .table-container, .table-card, .purchase-review-table, .waste-assignment-table, .temperature-matrix-wrap, .attendance-week-table-wrap, .database) {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body table { border-collapse: collapse; border-spacing: 0; background: #fff; }
  html body table thead th {
    background: #e5f0f8 !important;
    color: #18314c !important;
    font-weight: 700;
  }
  html body table :is(th, td) {
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    border-bottom: 1px solid var(--atlas-visual-line) !important;
  }

  /* Detail dialogs float above the page without a blurred background. */
  html body dialog {
    border: 0 !important;
    border-radius: 18px !important;
    box-shadow: 0 22px 64px #06122430 !important;
  }
  html body dialog::backdrop {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html body dialog :is([data-close], .dialog-close, .close-dialog, button[aria-label*="Cerrar"], button[aria-label*="cerrar"]) {
    display: inline-grid;
    place-items: center;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 0;
    border: 0 !important;
    border-radius: 50% !important;
    background: #e8f1f8 !important;
    color: #10233f !important;
    box-shadow: none !important;
  }

  @media (max-width: 760px) {
    html body :is(
      #kpis.kpis > .kpi, .summary > .metric, #stockProgress > .metric,
      #receivedOrdersSummary > .metric, .incident-kpis > .incident-kpi,
      #receiptSummary > .summary-card, .receipt-summary > .summary-card,
      .center-manager-kpis > article, .center-manager-month-grid > article,
      .manager-control-kpis > article, .difference-summary-grid > article,
      .report-kpis > .report-kpi, .attendance-totals > div, .stats > span,
      .center-incident-summary > div, .center-store-metrics > span,
      #centerProductionSummary.center-production-summary, .dashboard-kpis > .dashboard-kpi
    ) { min-height: 132px; padding: 14px 9px; gap: 6px; }

    html body :is(
      #kpis.kpis > .kpi, .summary > .metric, #stockProgress > .metric,
      #receivedOrdersSummary > .metric, .incident-kpis > .incident-kpi,
      #receiptSummary > .summary-card, .receipt-summary > .summary-card,
      .center-manager-kpis > article, .center-manager-month-grid > article,
      .manager-control-kpis > article, .difference-summary-grid > article,
      .report-kpis > .report-kpi, .attendance-totals > div, .stats > span,
      .center-incident-summary > div, .center-store-metrics > span,
      #centerProductionSummary.center-production-summary, .dashboard-kpis > .dashboard-kpi
    ) :is(strong, b, output) { font-size: clamp(26px, 6vw, 32px) !important; }

    html body :is(
      #kpis.kpis > .kpi, .summary > .metric, #stockProgress > .metric,
      #receivedOrdersSummary > .metric, .incident-kpis > .incident-kpi,
      #receiptSummary > .summary-card, .receipt-summary > .summary-card,
      .center-manager-kpis > article, .center-manager-month-grid > article,
      .manager-control-kpis > article, .difference-summary-grid > article,
      .report-kpis > .report-kpi, .attendance-totals > div, .stats > span,
      .center-incident-summary > div, .center-store-metrics > span,
      #centerProductionSummary.center-production-summary, .dashboard-kpis > .dashboard-kpi
    ) :is(small, span):not(.kpi-icon):not(.metric-icon):not(.summary-icon):not(.report-kpi-icon) {
      font-size: 13px;
    }
    html body .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
    html body :is(.card, .panel, .record-card, .incident-card, .review-card, .order, .employee-punch-record) {
      border-radius: 14px !important;
    }
  }

  @media (max-width: 360px) {
    html body :is(
      #kpis.kpis > .kpi, .summary > .metric, #stockProgress > .metric,
      #receivedOrdersSummary > .metric, .incident-kpis > .incident-kpi,
      #receiptSummary > .summary-card, .receipt-summary > .summary-card,
      .center-manager-kpis > article, .center-manager-month-grid > article,
      .manager-control-kpis > article, .difference-summary-grid > article,
      .report-kpis > .report-kpi, .attendance-totals > div, .stats > span,
      .center-incident-summary > div, .center-store-metrics > span,
      #centerProductionSummary.center-production-summary, .dashboard-kpis > .dashboard-kpi
    ) :is(strong, b, output) { font-size: 24px !important; }
  }
}