:root {
  --navy: #1F3864; --blue: #2E5090; --blue2: #4472C4; --soft: #D6E0F0;
  --line: #D9D9D9; --bg: #F4F6FB; --crit: #C00000; --high: #E36C09;
  --warn: #B8860B; --low: #5B9BD5; --ok: #375623;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; color: #222; background: var(--bg); }

.topbar { display: flex; align-items: center; gap: 24px; background: var(--navy);
  color: #fff; padding: 0 24px; height: 52px; }
.topbar .brand { font-weight: 700; font-size: 18px; letter-spacing: .5px; }
.topbar nav a { color: #cdd8ee; text-decoration: none; margin-right: 18px; font-size: 14px;
  line-height: 52px; border-bottom: 3px solid transparent; }
.topbar nav a.on, .topbar nav a:hover { color: #fff; border-bottom-color: #fff; }

main { max-width: 1200px; margin: 24px auto; padding: 0 24px; }
h1 { color: var(--navy); font-size: 22px; }
h2 { color: var(--navy); font-size: 16px; margin-top: 28px; border-bottom: 2px solid var(--blue); padding-bottom: 4px; }
.back a, .clear { font-size: 13px; }

/* KPIs */
.kpis { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }
.kpi { background: #fff; border: 1px solid var(--soft); border-radius: 8px; padding: 12px 16px;
  min-width: 150px; display: flex; flex-direction: column; gap: 4px; }
.kpi.alert { border-color: var(--crit); }
.kpi-lbl { font-size: 12px; color: #666; }
.kpi-val { font-size: 20px; font-weight: 700; color: var(--navy); }

.cols { display: flex; gap: 24px; flex-wrap: wrap; }
.cols section { flex: 1; min-width: 280px; }

/* Tables */
table.data, table.mini { width: 100%; border-collapse: collapse; background: #fff; font-size: 13px; }
table.data th, table.data td, table.mini td { border: 1px solid var(--line); padding: 6px 8px; }
table.data thead th { background: var(--blue); color: #fff; text-align: left; }
table.data tbody tr:nth-child(even) { background: #EEF2F8; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
table.mini td:last-child { width: 90px; }

/* Outline tree */
details.lvl { margin: 4px 0; }
details.lvl > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between;
  align-items: center; padding: 6px 12px; border-radius: 4px; }
details.lvl > summary::-webkit-details-marker { display: none; }
details.obra > summary { background: var(--navy); color: #fff; font-weight: 700; }
details.prov > summary { background: var(--blue2); color: #fff; margin-left: 14px; }
details.esp > summary { background: var(--soft); color: var(--navy); font-weight: 600; margin-left: 28px; }
details.esp .data { margin: 4px 0 10px 28px; width: calc(100% - 28px); }
.amt { font-weight: 600; font-size: 13px; opacity: .95; }

/* Filters */
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 16px 0; }
.filters select, .filters button { padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; font-size: 13px; }
.filters button { background: var(--blue); color: #fff; border: none; cursor: pointer; }
.filters .chk { font-size: 13px; }
.filters .clear { color: var(--blue); }
.summary { font-size: 13px; color: #444; font-weight: 600; }

/* Badges & estados */
.badge { display: inline-block; font-size: 11px; padding: 1px 6px; border-radius: 10px; margin: 1px;
  color: #fff; white-space: nowrap; }
.badge.crit { background: var(--crit); }
.badge.high { background: var(--high); }
.badge.warn { background: var(--warn); }
.badge.low  { background: var(--low); }
.estado { font-size: 12px; padding: 1px 8px; border-radius: 10px; }
.estado.facturado { background: #E2EFDA; color: var(--ok); }
.estado.parcial { background: #FFF2CC; color: #7D4E00; }
.estado.pendiente { background: #F2F2F2; color: #808080; }

/* OC detail */
.oc-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px;
  background: #fff; border: 1px solid var(--soft); border-radius: 8px; padding: 14px; margin: 12px 0; font-size: 14px; }
.oc-head .lbl, .filters .lbl { color: #888; font-size: 12px; display: block; }
.alert-box { background: #FFF3F3; border: 1px solid var(--crit); border-radius: 6px; padding: 10px; margin: 12px 0; }
tr.no-pago td { color: #aaa; }
.var-pos { color: var(--crit); font-weight: 600; }
.var-neg { color: var(--blue2); font-weight: 600; }
.empty { color: #888; font-style: italic; }

/* Search box & dashboard breakdown */
.filters .search { padding: 6px 10px; border: 1px solid var(--line); border-radius: 4px;
  font-size: 13px; min-width: 240px; }
.hint { font-size: 12px; color: #777; margin: 4px 0 12px; }
table.obra-table { margin: 0 0 22px; }
tr.obra-title th { background: var(--navy); color: #fff; text-align: left; font-size: 14px;
  padding: 8px 10px; }
tr.total-row td { background: #E9EEF7; border-top: 2px solid var(--blue2); }

/* Alerts matrix */
table.matrix th.chk-col, table.matrix td.chk-col { text-align: center; width: 115px; }
table.matrix th.chk-col { font-size: 11px; padding: 6px 4px; }
table.matrix td.chk-col { font-size: 12px; font-weight: bold; }
table.matrix td.chk-col.alert-yes {
  background-color: var(--crit) !important;
  color: #ffffff !important;
}
table.matrix td.chk-col.alert-no {
  background-color: var(--ok) !important;
  color: #ffffff !important;
}

/* Back-to-top floating button */
#totop { position: fixed; right: 22px; bottom: 22px; display: none; width: 44px; height: 44px;
  border: none; border-radius: 50%; background: var(--navy); color: #fff; font-size: 22px;
  cursor: pointer; box-shadow: 0 2px 10px rgba(0,0,0,.3); z-index: 50; line-height: 1; }
#totop.show { display: block; }
#totop:hover { background: var(--blue); }

/* Responsive adjustments for mobile and tablets */
@media (max-width: 768px) {
  /* Navigation Bar / Topbar wrapping */
  .topbar {
    flex-direction: column;
    height: auto;
    align-items: stretch;
    padding: 12px 16px;
    gap: 12px;
  }
  .topbar nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-start;
  }
  .topbar nav a {
    margin-right: 0;
    line-height: normal;
    padding: 8px 12px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border-bottom: none;
    font-size: 13px;
  }
  .topbar nav a.on {
    background: var(--blue2);
    color: #fff;
  }
  .topbar .header-date-filter {
    margin-left: 0 !important;
    width: 100%;
  }
  #headerDateForm {
    width: 100%;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: space-between;
  }
  #headerDateForm span {
    font-size: 12px;
  }
  #headerDateForm input[type="date"] {
    flex-grow: 1;
    width: calc(50% - 40px);
    min-width: 90px;
    padding: 6px;
  }
  #headerDateForm button {
    width: 100%;
    margin-top: 4px;
    padding: 8px;
  }

  /* Main layout margins */
  main {
    margin: 12px auto;
    padding: 0 12px;
  }

  /* Filters list stacking */
  .filters {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .filters select,
  .filters input,
  .filters button,
  .filters .search,
  .filters a.clear {
    width: 100%;
    min-width: 0 !important;
    text-align: center;
    margin-left: 0 !important;
  }
  .filters .chk {
    display: block;
    margin: 4px 0;
    text-align: left;
  }

  /* KPI cards */
  .kpis {
    gap: 8px;
  }
  .kpi {
    flex: 1 1 calc(50% - 4px);
    min-width: 120px;
  }

  /* Split columns into rows */
  .cols {
    flex-direction: column;
    gap: 16px;
  }
  .cols section {
    min-width: 0;
  }

  /* Detail summary adjustments */
  details.esp .data {
    margin-left: 10px;
    width: calc(100% - 10px);
  }
}

/* Global responsive table container utility */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 12px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
.table-responsive table {
  margin: 0 !important;
  border: none !important;
}