:root {
  --roma-red: #d71920;
  --roma-red-dark: #9e1218;
  --roma-green: #168153;
  --roma-green-soft: #e8f5ee;
  --roma-blue: #075ca8;
  --roma-blue-deep: #0b2d4a;
  --roma-blue-soft: #eaf3fb;
  --ink: #101114;
  --panel: #191b1f;
  --panel-soft: #24272d;
  --line: #383d45;
  --muted: #aeb4bd;
  --text: #f5f6f7;
  --white: #ffffff;
  --field: #f4f5f6;
  --field-text: #181a1f;
  --success: #1f9d63;
  --warning: #d69b21;
  --danger: #c53636;
  --radius: 8px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body,
#app {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #101114;
  color: var(--text);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

button,
.kpi-card,
.control-card,
.panel,
.wow-kpi-card,
.tv-card,
.esg-card,
.industrial-kpi,
.live-flow-node,
.industrial-alert,
.evidence-detail,
.process-node,
.timeline-item {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
}

button:hover,
.wow-kpi-card:hover,
.tv-card:hover,
.esg-card:hover,
.process-node:hover,
.timeline-item:hover {
  transform: translateY(-1px);
}

.login-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    linear-gradient(120deg, rgba(181, 18, 27, 0.24), rgba(16, 17, 20, 0.2)),
    repeating-linear-gradient(135deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 18px),
    #101114;
}

.login-panel {
  width: min(100%, 440px);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
}

.context-panel {
  width: min(100%, 520px);
}

.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
}

.brand-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--roma-red);
  font-weight: 900;
  color: var(--white);
}

.mir-module-icon {
  display: block;
  aspect-ratio: 1;
  object-fit: contain;
  flex: 0 0 auto;
}

.mir-module-icon--loading {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.brand-title {
  margin: 0;
  font-size: 1.45rem;
  letter-spacing: 0;
}

.brand-subtitle {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.field-grid {
  display: grid;
  gap: 16px;
}

.field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.field label {
  color: var(--muted);
  font-weight: 700;
  font-size: 0.88rem;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 14px;
  background: var(--field);
  color: var(--field-text);
}

.field textarea {
  resize: vertical;
  min-height: 92px;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid rgba(181, 18, 27, 0.35);
  border-color: var(--roma-red);
}

.primary-btn,
.secondary-btn,
.danger-btn {
  min-height: 54px;
  border: 0;
  border-radius: var(--radius);
  padding: 0 18px;
  font-weight: 900;
}

.primary-btn {
  background: var(--roma-red);
  color: var(--white);
}

.primary-btn:hover {
  background: var(--roma-red-dark);
}

.secondary-btn {
  background: var(--panel-soft);
  color: var(--text);
  border: 1px solid var(--line);
}

.danger-btn {
  background: var(--danger);
  color: var(--white);
}

.login-hint {
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.quick-login {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 18px;
}

.file-launch-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: #f3f6f9;
}

.file-launch-panel {
  width: min(100%, 640px);
  display: grid;
  justify-items: start;
  gap: 14px;
  padding: clamp(26px, 5vw, 44px);
  background: #ffffff;
  color: #1d2f3d;
  border: 1px solid #d8e1e8;
  border-top: 5px solid #075ca8;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(23, 60, 88, 0.12);
}

.file-launch-panel h1,
.file-launch-panel p {
  margin: 0;
}

.file-launch-panel h1 {
  font-size: clamp(1.55rem, 4vw, 2.15rem);
  line-height: 1.15;
}

.file-launch-panel p {
  color: #4c6070;
  line-height: 1.6;
}

.file-launch-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  margin-top: 4px;
  text-decoration: none;
}

.file-launch-help {
  padding: 12px 14px;
  background: #eef4f8;
  border-left: 4px solid #52758f;
  border-radius: 8px;
  color: #263f50 !important;
  font-size: 0.9rem;
}

.role-chip {
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-soft);
  color: var(--text);
  font-weight: 900;
}

.role-chip:hover {
  border-color: var(--roma-red);
}

.error-box,
.success-box,
.notice-box {
  border-radius: var(--radius);
  padding: 12px 14px;
  font-weight: 800;
  line-height: 1.45;
  border: 1px solid transparent;
}

.error-box {
  background: #fff0ef;
  color: #7d201c;
  border-color: #efb9b5;
  border-left: 4px solid #b9362f;
}

.success-box {
  background: #edf8f2;
  color: #18583c;
  border-color: #b7ddc8;
  border-left: 4px solid #2f8a5d;
}

.notice-box {
  color: #263f50;
  background: #eef4f8;
  border-color: #c4d4df;
  border-left: 4px solid #52758f;
}

.notice-box.notice-pending {
  color: #6b4300;
  background: #fff7e6;
  border-color: #ecd39c;
  border-left-color: #bd7800;
}

.notice-box.notice-reviewed {
  color: #163f66;
  background: #edf5ff;
  border-color: #bdd5ec;
  border-left-color: #2f6fa6;
}

.notice-box.notice-positive {
  color: #18583c;
  background: #edf8f2;
  border-color: #b7ddc8;
  border-left-color: #2f8a5d;
}

.notice-box.notice-critical {
  color: #7d201c;
  background: #fff0ef;
  border-color: #efb9b5;
  border-left-color: #b9362f;
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
  background: #f2f3f5;
  color: #191b20;
}

.sidebar {
  background: var(--ink);
  color: var(--text);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-btn {
  width: 100%;
  min-height: 48px;
  text-align: left;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 0 12px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
}

.nav-btn.active,
.nav-btn:hover {
  background: var(--panel-soft);
  color: var(--white);
  border-color: var(--line);
}

.user-card {
  margin-top: auto;
  display: grid;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.user-name {
  font-weight: 900;
}

.user-role {
  color: var(--muted);
  font-size: 0.9rem;
}

.main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  min-height: 76px;
  padding: 16px 24px;
  background: var(--white);
  border-bottom: 1px solid #d9dde3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.topbar h1 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: 0;
}

.topbar p {
  margin: 4px 0 0;
  color: #66707b;
}

.topbar-module-title {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
}

.mir-module-icon--header {
  width: 42px;
  height: 42px;
  border-radius: 11px;
}

.topbar-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.content {
  padding: 24px;
  display: grid;
  gap: 22px;
}

.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.kpi-card,
.panel,
.record-card {
  background: var(--white);
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
}

.kpi-card {
  padding: 18px;
}

.control-hero {
  min-height: 150px;
  border-radius: var(--radius);
  background:
    linear-gradient(120deg, rgba(181, 18, 27, 0.92), rgba(16, 17, 20, 0.96)),
    #101114;
  color: #ffffff;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.control-hero p {
  margin: 0 0 8px;
  font-weight: 950;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.76);
}

.control-hero h2 {
  margin: 0;
  font-size: 2rem;
  letter-spacing: 0;
}

.control-hero span {
  display: inline-block;
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
}

.control-status {
  min-width: 220px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  padding: 16px;
  display: grid;
  gap: 6px;
}

.control-status strong {
  font-size: 1.15rem;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.control-card {
  min-height: 128px;
  border: 1px solid #d9dde3;
  border-left: 5px solid var(--roma-red);
  border-radius: var(--radius);
  background: #ffffff;
  padding: 16px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.control-card span {
  color: #66707b;
  font-weight: 900;
}

.control-card strong {
  font-size: 1.55rem;
  color: #14171c;
}

.control-card p {
  margin: 0;
  color: #7a838c;
  font-weight: 800;
}

.scada-panel {
  border-top: 5px solid #16181d;
}

.scada-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.scada-card {
  min-height: 132px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #fbfcfd;
  padding: 15px;
  display: grid;
  align-content: space-between;
  gap: 10px;
}

.scada-card div {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #4f5863;
  font-weight: 950;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.scada-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #24a148;
  box-shadow: 0 0 0 4px rgba(36, 161, 72, 0.12);
}

.scada-card.atencion .scada-dot,
.scada-card.seguimiento .scada-dot {
  background: #d69b21;
  box-shadow: 0 0 0 4px rgba(214, 155, 33, 0.16);
}

.scada-card.preparado .scada-dot {
  background: #5f6b7a;
  box-shadow: 0 0 0 4px rgba(95, 107, 122, 0.14);
}

.scada-card strong {
  color: #111318;
  font-size: 1.45rem;
  line-height: 1.05;
}

.scada-card p {
  margin: 0;
  color: #68727d;
  font-weight: 800;
}

.kpi-label {
  margin: 0 0 10px;
  color: #68727d;
  font-weight: 800;
}

.kpi-value {
  margin: 0;
  font-size: 2rem;
  font-weight: 950;
}

.kpi-note {
  margin: 8px 0 0;
  color: #7a838c;
}

.panel {
  padding: 20px;
  min-width: 0;
}

.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 16px;
  min-width: 0;
}

.panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
}

.capture-layout {
  display: grid;
  gap: 18px;
}

.quick-capture-card {
  background: var(--white);
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  padding: 24px;
}

.capture-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.capture-header h2 {
  margin: 0;
  font-size: 1.45rem;
}

.capture-header p {
  margin: 4px 0 0;
  color: #66707b;
}

.folio-badge {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius);
  padding: 0 14px;
  background: rgba(181, 18, 27, 0.1);
  color: #8b1017;
  font-weight: 950;
  white-space: nowrap;
}

.save-confirmation {
  min-height: 72px;
  border: 2px solid rgba(31, 157, 99, 0.36);
  border-radius: var(--radius);
  background: rgba(31, 157, 99, 0.1);
  color: #0d5f39;
  padding: 14px 16px;
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
}

.save-confirmation strong {
  font-size: 1.15rem;
}

.save-confirmation span {
  font-weight: 850;
}

.capture-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}

.step-badge {
  min-height: 42px;
  border-radius: var(--radius);
  background: #eef1f5;
  color: #4f5863;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 10px;
  font-size: 0.86rem;
  font-weight: 950;
}

.step-badge.done {
  background: rgba(181, 18, 27, 0.1);
  color: #8b1017;
}

.capture-section {
  display: grid;
  gap: 10px;
  margin-bottom: 20px;
}

.capture-label {
  color: #4f5863;
  font-size: 0.95rem;
  font-weight: 950;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.capture-label span,
.weight-field label span,
.optional-panel summary span {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: #191b20;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 950;
}

.choice-grid {
  display: grid;
  gap: 10px;
}

.area-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.department-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.specific-area-grid {
  margin-top: 10px;
}

.waste-grid {
  grid-template-columns: repeat(auto-fit, minmax(154px, 1fr));
}

.choice-btn {
  min-height: 96px;
  border: 2px solid #d9dde3;
  border-radius: var(--radius);
  padding: 12px;
  background: #f7f8fa;
  color: #191b20;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  text-align: center;
  touch-action: manipulation;
}

.choice-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  color: #ffffff;
  background: #5b6570;
  font-size: 0.9rem;
  font-weight: 950;
}

.choice-btn strong {
  font-size: 1.05rem;
}

.choice-btn small {
  color: #747e88;
  font-size: 0.78rem;
  font-weight: 950;
}

.choice-btn.selected {
  border-color: var(--roma-red);
  background: rgba(181, 18, 27, 0.09);
  box-shadow: inset 0 0 0 1px var(--roma-red);
}

.choice-btn.selected .choice-icon {
  background: var(--roma-red);
}

.waste-pet .choice-icon { background: #1f9d63; }
.waste-car .choice-icon { background: #9a6a2f; }
.waste-alu .choice-icon { background: #65717d; }
.waste-tar .choice-icon { background: #825c36; }
.waste-vtf .choice-icon { background: #2f80a8; }
.waste-por .choice-icon { background: #2f7d6d; }
.waste-ply .choice-icon { background: #2f80a8; }
.waste-cha .choice-icon { background: #3b4148; }
.waste-mer .choice-icon { background: #a36b00; }
.waste-gen .choice-icon { background: #5b6570; }
.waste-pla .choice-icon { background: #1e7a88; }

.capture-main-grid {
  display: grid;
  grid-template-columns: minmax(340px, 0.85fr) 1fr;
  gap: 16px;
  align-items: end;
}

.weight-field label {
  color: #4f5863;
  font-size: 0.95rem;
  font-weight: 950;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 8px;
}

.weight-input-wrap {
  min-height: 92px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  border: 2px solid #d9dde3;
  border-radius: var(--radius);
  background: #f7f8fa;
  padding: 0 16px;
}

.weight-input-wrap:focus-within {
  border-color: var(--roma-red);
  box-shadow: 0 0 0 3px rgba(181, 18, 27, 0.18);
}

.weight-input-wrap input {
  min-height: 86px;
  border: 0;
  outline: 0;
  padding: 0;
  background: transparent;
  font-size: 2.8rem;
  font-weight: 950;
  color: #111318;
}

.weight-input-wrap span {
  color: #6b747e;
  font-size: 1.15rem;
  font-weight: 950;
}

.scale-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

.scale-actions .secondary-btn {
  min-height: 58px;
}

.scale-badge {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(92, 102, 112, 0.14);
  color: #4f5863;
  font-size: 0.82rem;
  font-weight: 950;
}

.scale-badge.auto {
  background: rgba(31, 157, 99, 0.14);
  color: #0e6d41;
}

.scale-reading {
  margin: 8px 0 0;
  color: #4f5863;
  font-weight: 800;
}

.scale-reading-card {
  margin-top: 12px;
  border: 2px solid #cfd5dd;
  border-radius: var(--radius);
  background: #ffffff;
  padding: 14px;
}

.scale-reading-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.scale-reading-grid div {
  min-height: 72px;
  border-radius: var(--radius);
  background: #f4f5f6;
  padding: 10px;
  display: grid;
  align-content: center;
  gap: 4px;
}

.scale-reading-grid span {
  color: #69737e;
  font-size: 0.75rem;
  font-weight: 950;
  text-transform: uppercase;
}

.scale-reading-grid strong {
  color: #15181d;
  font-size: 0.95rem;
  font-weight: 950;
}

.scale-state.stable {
  color: #0e6d41;
}

.scale-state.unstable {
  color: #a36b00;
}

.scale-warning-list {
  margin: 12px 0 0;
  padding: 10px 12px 10px 28px;
  border-radius: var(--radius);
  background: rgba(214, 155, 33, 0.13);
  color: #684600;
  font-weight: 800;
}

.scale-warning-list li + li {
  margin-top: 6px;
}

.scale-confirm-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  margin-top: 12px;
}

.scale-confirm-actions button:disabled {
  cursor: not-allowed;
  opacity: 0.72;
}

.optional-panel {
  margin-top: 16px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #f7f8fa;
}

.optional-panel summary {
  min-height: 52px;
  padding: 14px;
  cursor: pointer;
  font-weight: 950;
  display: flex;
  align-items: center;
  gap: 8px;
}

.optional-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  padding: 0 14px 14px;
}

.capture-actions {
  position: sticky;
  bottom: 0;
  margin: 18px -20px -20px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.94);
  border-top: 1px solid #d9dde3;
}

.save-capture-btn {
  width: 100%;
  min-height: 76px;
  font-size: 1.16rem;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.filter-panel {
  padding: 16px;
}

.filter-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
  min-width: 0;
}

.form-grid .full {
  grid-column: 1 / -1;
}

.form-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 18px;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
}

.data-table th,
.data-table td {
  padding: 13px 12px;
  border-bottom: 1px solid #e4e7eb;
  text-align: left;
  vertical-align: top;
}

.data-table th {
  color: #5c6670;
  font-size: 0.84rem;
  text-transform: uppercase;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
}

.status-pendiente {
  background: rgba(214, 155, 33, 0.16);
  color: #8a5b00;
}

.status-validado,
.status-autorizado {
  background: rgba(31, 157, 99, 0.14);
  color: #0e6d41;
}

.status-salida_autorizada {
  background: #e4f6ed;
  color: #126e45;
}

.status-venta_borrador {
  background: #fff3df;
  color: #7a4b00;
}

.status-venta_confirmada,
.status-facturada,
.status-cobrada {
  background: #e4f6ed;
  color: #126e45;
}

.status-preparada,
.status-programado,
.status-embarcado {
  background: #e8f1fb;
  color: #175b91;
}

.status-rechazado {
  background: rgba(197, 54, 54, 0.14);
  color: #9c2020;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.module-card {
  min-height: 124px;
  padding: 16px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #fff;
  display: grid;
  align-content: space-between;
}

.module-card strong {
  font-size: 1rem;
}

.module-card span {
  color: #69727c;
}

.catalog-card {
  align-content: start;
}

.catalog-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #4f5863;
  line-height: 1.5;
}

.report-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.integration-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.trend-grid,
.control-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.trend-card,
.ranking-panel {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  padding: 16px;
  background: #f7f8fa;
}

.trend-card > strong,
.ranking-panel > strong {
  display: block;
  margin-bottom: 12px;
}

.ranking-row {
  display: grid;
  grid-template-columns: 30px 1fr 92px;
  gap: 10px;
  align-items: center;
  padding: 9px 0;
  border-top: 1px solid #e1e5eb;
}

.ranking-row span {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: #191b20;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 950;
}

.ranking-row b {
  display: block;
  color: #191b20;
  font-size: 0.9rem;
}

.ranking-row i {
  display: block;
  height: 8px;
  margin-top: 5px;
  border-radius: 999px;
  background: #e1e5eb;
  overflow: hidden;
}

.ranking-row em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--roma-red);
}

.ranking-row > strong {
  text-align: right;
  color: #191b20;
  font-size: 0.9rem;
}

.trend-bars {
  display: grid;
  gap: 10px;
}

.trend-row {
  display: grid;
  grid-template-columns: 92px 1fr 92px;
  gap: 10px;
  align-items: center;
  color: #4f5863;
  font-size: 0.9rem;
}

.trend-row div {
  height: 12px;
  border-radius: 999px;
  background: #e1e5eb;
  overflow: hidden;
}

.trend-row i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--roma-red);
}

.trend-row b {
  color: #191b20;
  text-align: right;
}

.alert-list {
  display: grid;
  gap: 10px;
}

.alert-item {
  border-radius: var(--radius);
  padding: 14px;
  font-weight: 900;
  display: grid;
  gap: 5px;
}

.alert-item span {
  display: block;
}

.alert-item.warning {
  background: #fff7e6;
  color: #6b4300;
}

.alert-item.critical {
  background: #fff0ef;
  color: #7d201c;
}

.alert-item.info {
  background: #eef4f8;
  color: #263f50;
}

.recent-movement-panel {
  gap: 10px;
}

.executive-hero {
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(181, 18, 27, 0.94), rgba(16, 17, 20, 0.98)),
    #101114;
  color: #ffffff;
  padding: 24px;
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(190px, 0.35fr);
  gap: 18px;
  box-shadow: 0 18px 50px rgba(16, 17, 20, 0.24);
}

.executive-hero-copy h2 {
  margin: 8px 0 10px;
  font-size: 2.1rem;
  letter-spacing: 0;
}

.executive-hero-copy p {
  max-width: 780px;
  margin: 0;
  color: rgba(255, 255, 255, 0.82);
  font-weight: 800;
  line-height: 1.5;
}

.executive-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.executive-hero-meta span {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.08);
  font-weight: 900;
  font-size: 0.82rem;
}

.executive-hero-score {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.1);
  padding: 18px;
  display: grid;
  align-content: center;
  gap: 8px;
}

.executive-hero-score span {
  color: rgba(255, 255, 255, 0.76);
  font-weight: 950;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.executive-hero-score strong {
  font-size: 3rem;
  line-height: 1;
}

.executive-hero-score i,
.ranking-row i {
  display: block;
}

.executive-hero-score i {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
}

.executive-hero-score em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #ffffff;
}

.wow-kpi-grid {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.wow-kpi-card {
  min-height: 118px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  padding: 14px;
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 12px;
}

.wow-kpi-card span,
.esg-card span {
  width: 42px;
  height: 42px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: #ffffff;
  color: var(--roma-red);
  font-weight: 950;
}

.wow-kpi-card p,
.wow-kpi-card small {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-weight: 850;
}

.wow-kpi-card strong {
  display: block;
  margin: 4px 0;
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.1;
}

.tv-control-center {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #ffffff;
  padding: 20px;
}

.tv-control-center.active {
  border-color: rgba(181, 18, 27, 0.4);
  box-shadow: 0 14px 40px rgba(181, 18, 27, 0.12);
}

.tv-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #68727d;
  font-weight: 900;
}

.tv-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.tv-card {
  min-height: 142px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #f7f8fa;
  padding: 15px;
  display: grid;
  align-content: space-between;
}

.tv-card > span {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: #24a148;
  box-shadow: 0 0 0 5px rgba(36, 161, 72, 0.12);
}

.tv-card strong {
  color: #68727d;
  font-size: 0.82rem;
  text-transform: uppercase;
}

.tv-card b {
  color: #111318;
  font-size: 1.55rem;
  line-height: 1.05;
}

.tv-card p {
  margin: 0;
  color: #68727d;
  font-weight: 800;
}

.esg-panel {
  border-left: 5px solid #24a148;
}

.esg-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.esg-card {
  min-height: 168px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background:
    linear-gradient(180deg, rgba(36, 161, 72, 0.08), rgba(255, 255, 255, 0)),
    #ffffff;
  padding: 16px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.esg-card span {
  background: rgba(36, 161, 72, 0.12);
  color: #1d7f3a;
}

.esg-card strong {
  color: #68727d;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.esg-card b {
  color: #111318;
  font-size: 1.45rem;
}

.esg-card p {
  margin: 0;
  color: #68727d;
  font-weight: 800;
  line-height: 1.35;
}

.evidence-center {
  border-top: 5px solid #191b20;
}

.evidence-search {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}

.evidence-layout {
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(320px, 1fr);
  gap: 16px;
}

.evidence-photo,
.evidence-detail {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #f7f8fa;
  overflow: hidden;
}

.evidence-photo {
  min-height: 280px;
  display: grid;
  place-items: center;
}

.evidence-photo img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
}

.evidence-placeholder {
  width: 100%;
  height: 100%;
  min-height: 280px;
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, rgba(16, 17, 20, 0.05) 0 1px, transparent 1px 18px),
    #eef1f4;
  color: #66707b;
  font-weight: 950;
}

.evidence-detail {
  padding: 18px;
}

.evidence-detail h3 {
  margin: 6px 0 14px;
  color: #111318;
  font-size: 1.5rem;
}

.evidence-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.evidence-facts div {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #ffffff;
  padding: 12px;
  display: grid;
  gap: 4px;
}

.evidence-facts span {
  color: #68727d;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.evidence-facts strong {
  color: #111318;
  overflow-wrap: anywhere;
}

.client-summary {
  display: grid;
  gap: 18px;
}

.client-hero {
  min-height: 360px;
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(181, 18, 27, 0.92), rgba(16, 17, 20, 0.96)),
    #101114;
  color: #ffffff;
  padding: 28px;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) minmax(260px, 0.42fr);
  gap: 24px;
  align-items: center;
  box-shadow: 0 24px 80px rgba(16, 17, 20, 0.32);
}

.client-hero h2 {
  margin: 10px 0;
  max-width: 860px;
  font-size: 2.6rem;
  letter-spacing: 0;
}

.client-hero p {
  margin: 0;
  max-width: 820px;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
  line-height: 1.5;
}

.client-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.client-hero-card {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.09);
  padding: 20px;
  display: grid;
  gap: 8px;
}

.client-hero-card span {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.client-hero-card strong {
  color: #ffffff;
  font-size: 2rem;
}

.client-presentation-guide,
.client-flow-card,
.client-checklist {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #ffffff;
  padding: 20px;
}

.client-presentation-guide {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(300px, 1fr);
  gap: 18px;
  align-items: center;
  border-top: 5px solid var(--roma-red);
}

.client-presentation-guide h2,
.client-flow-card h2,
.client-checklist h2 {
  margin: 6px 0;
  color: #111318;
}

.client-presentation-guide p {
  margin: 0;
  color: #66707b;
  font-weight: 800;
}

.client-progress {
  display: grid;
  gap: 12px;
}

.client-progress i {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e5eb;
}

.client-progress em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--roma-red), #191b20);
}

.client-progress span {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.client-progress b {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #e9edf2;
  color: #66707b;
}

.client-progress b.done {
  background: rgba(181, 18, 27, 0.1);
  color: var(--roma-red);
}

.client-value-grid,
.client-check-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.client-story-card,
.client-check-grid article,
.client-flow-steps article {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #ffffff;
  padding: 16px;
}

.client-story-card strong,
.client-check-grid strong,
.client-flow-steps strong {
  display: block;
  color: #111318;
  font-size: 1.05rem;
}

.client-story-card ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #66707b;
  font-weight: 800;
  line-height: 1.45;
}

.client-flow-steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
}

.client-flow-steps article.active {
  border-color: rgba(181, 18, 27, 0.42);
  background: rgba(181, 18, 27, 0.06);
}

.client-flow-steps span,
.client-check-grid span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #191b20;
  color: #ffffff;
  font-size: 0.78rem;
  font-weight: 950;
}

.client-flow-steps p,
.client-check-grid p {
  margin: 8px 0 0;
  color: #66707b;
  font-weight: 800;
  line-height: 1.4;
}

.client-check-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.client-presentation-shell .sidebar {
  background: #111318;
}

.client-presentation-shell .topbar {
  background: #ffffff;
}

.client-presentation-shell .topbar p {
  color: #66707b;
}

.section-eyebrow {
  color: var(--roma-red);
  font-size: 0.78rem;
  font-weight: 950;
  letter-spacing: 0;
  text-transform: uppercase;
}

.industrial-control {
  border-radius: var(--radius);
  background:
    linear-gradient(135deg, rgba(181, 18, 27, 0.18), rgba(16, 17, 20, 0.86)),
    radial-gradient(circle at 72% 12%, rgba(255, 255, 255, 0.08), transparent 28%),
    #101114;
  color: #ffffff;
  padding: 22px;
  display: grid;
  gap: 18px;
  box-shadow: 0 24px 80px rgba(16, 17, 20, 0.32);
}

.industrial-control.presentation {
  min-height: calc(100vh - 48px);
  align-content: start;
}

.industrial-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.industrial-header h2 {
  margin: 8px 0 8px;
  font-size: 2.25rem;
  letter-spacing: 0;
}

.industrial-header p {
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 800;
}

.industrial-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.78);
  font-weight: 900;
}

.industrial-kpi-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px;
}

.industrial-kpi {
  min-height: 128px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  padding: 15px;
  display: grid;
  align-content: space-between;
}

.industrial-kpi span,
.live-flow-node strong,
.signal-row span {
  color: rgba(255, 255, 255, 0.68);
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.industrial-kpi strong {
  color: #ffffff;
  font-size: 1.35rem;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.industrial-kpi p {
  margin: 0;
  color: rgba(255, 255, 255, 0.66);
  font-weight: 800;
}

.live-flow-panel,
.industrial-panel {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.07);
  padding: 18px;
}

.industrial-control .panel-header h2 {
  color: #ffffff;
}

.industrial-control .muted-text {
  color: rgba(255, 255, 255, 0.62);
}

.live-badge {
  min-height: 34px;
  border-radius: 999px;
  background: rgba(36, 161, 72, 0.14);
  color: #9ff0c9;
  padding: 8px 12px;
  font-weight: 950;
}

.live-badge::before {
  content: "";
  width: 9px;
  height: 9px;
  display: inline-block;
  margin-right: 8px;
  border-radius: 999px;
  background: #24a148;
  box-shadow: 0 0 0 0 rgba(36, 161, 72, 0.54);
  animation: livePulse 1.7s infinite;
}

.live-flow-track {
  display: grid;
  grid-template-columns: repeat(7, minmax(130px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.live-flow-node {
  position: relative;
  min-height: 178px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius);
  background: rgba(16, 17, 20, 0.34);
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 8px;
  animation: nodeRise 420ms ease both;
  animation-delay: var(--delay);
}

.live-flow-node::after {
  content: "";
  position: absolute;
  top: 32px;
  right: -10px;
  width: 20px;
  height: 2px;
  background: rgba(255, 255, 255, 0.24);
}

.live-flow-node:last-child::after {
  display: none;
}

.live-flow-node i {
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #6f7782;
}

.live-flow-node.active i {
  background: #24a148;
  box-shadow: 0 0 0 5px rgba(36, 161, 72, 0.14);
  animation: livePulse 1.8s infinite;
}

.live-flow-node > span {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.1);
  color: #ffffff;
  font-weight: 950;
  font-size: 0.78rem;
}

.live-flow-node b {
  color: #ffffff;
  font-size: 1.08rem;
  line-height: 1.18;
}

.live-flow-node p {
  margin: 0;
  color: rgba(255, 255, 255, 0.64);
  font-weight: 800;
  line-height: 1.35;
}

.industrial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 0.85fr;
  gap: 14px;
}

.industrial-alerts,
.activity-feed,
.signal-list {
  display: grid;
  gap: 10px;
}

.industrial-alert,
.activity-feed article {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.08);
  padding: 12px;
}

.industrial-alert {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
}

.industrial-alert > span {
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 999px;
  background: #6f7782;
}

.industrial-alert.normal > span,
.industrial-alert.ready > span {
  background: #24a148;
  box-shadow: 0 0 0 4px rgba(36, 161, 72, 0.12);
}

.industrial-alert.standby > span {
  background: #d69b21;
  box-shadow: 0 0 0 4px rgba(214, 155, 33, 0.12);
}

.industrial-alert strong,
.activity-feed strong,
.signal-row strong {
  color: #ffffff;
}

.industrial-alert p,
.activity-feed p,
.activity-feed small {
  margin: 3px 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-weight: 800;
}

.activity-feed span {
  color: #9ff0c9;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.signal-row {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 8px;
  align-items: center;
}

.signal-row i {
  grid-column: 1 / -1;
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
}

.signal-row em {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--roma-red), #24a148);
}

@keyframes livePulse {
  0% { box-shadow: 0 0 0 0 rgba(36, 161, 72, 0.42); }
  70% { box-shadow: 0 0 0 10px rgba(36, 161, 72, 0); }
  100% { box-shadow: 0 0 0 0 rgba(36, 161, 72, 0); }
}

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

.guided-demo-panel {
  display: grid;
  grid-template-columns: minmax(260px, 0.8fr) minmax(320px, 1.2fr);
  gap: 18px;
  border-top: 5px solid var(--roma-red);
  background:
    linear-gradient(135deg, rgba(181, 18, 27, 0.06), rgba(25, 27, 31, 0.03)),
    #ffffff;
}

.guided-demo-copy h2,
.report-cover h2 {
  margin: 8px 0 10px;
  color: #111318;
  font-size: 1.55rem;
}

.guided-demo-copy p,
.report-cover p {
  margin: 0;
  color: #56616c;
  font-weight: 800;
  line-height: 1.5;
}

.guided-demo-status {
  display: grid;
  gap: 14px;
}

.guided-demo-meta {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #f7f8fa;
  padding: 14px;
}

.guided-demo-meta strong {
  color: #111318;
  font-size: 1.2rem;
}

.guided-demo-meta span {
  color: #66707b;
  font-weight: 800;
  text-align: right;
}

.guided-progress {
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: #e1e5eb;
}

.guided-progress i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--roma-red), #191b20);
  transition: width 260ms ease;
}

.guided-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.guided-steps span {
  border: 1px solid #d9dde3;
  border-radius: 999px;
  background: #ffffff;
  color: #66707b;
  padding: 7px 10px;
  font-size: 0.78rem;
  font-weight: 950;
}

.guided-steps span.done {
  border-color: rgba(36, 161, 72, 0.3);
  background: rgba(36, 161, 72, 0.1);
  color: #1d7f3a;
}

.guided-steps span.active {
  border-color: rgba(181, 18, 27, 0.34);
  background: rgba(181, 18, 27, 0.1);
  color: var(--roma-red);
}

.guided-demo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.case-panel {
  border-left: 5px solid var(--roma-red);
}

.case-flow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.case-flow span {
  border: 1px solid #d9dde3;
  border-radius: 999px;
  background: #f7f8fa;
  color: #3f4954;
  padding: 8px 11px;
  font-size: 0.82rem;
  font-weight: 900;
}

.case-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.case-report-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.process-panel {
  overflow: hidden;
}

.process-total {
  color: var(--roma-red);
  font-size: 1.15rem;
}

.process-flow {
  display: grid;
  grid-template-columns: repeat(8, minmax(150px, 1fr));
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
}

.process-node {
  position: relative;
  min-height: 158px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #fbfcfd;
  padding: 14px;
  display: grid;
  align-content: start;
  gap: 8px;
}

.process-node::after {
  content: "";
  position: absolute;
  top: 28px;
  right: -10px;
  width: 18px;
  height: 2px;
  background: var(--roma-red);
}

.process-node:last-child::after {
  display: none;
}

.process-node span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #191b20;
  color: #ffffff;
  font-weight: 950;
  font-size: 0.78rem;
}

.process-node strong {
  color: #111318;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.process-node b {
  color: var(--roma-red);
  font-size: 1rem;
  line-height: 1.2;
}

.process-node p {
  margin: 0;
  color: #66707b;
  font-weight: 800;
  line-height: 1.35;
}

.operation-timeline {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.timeline-item {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #ffffff;
  padding: 14px;
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
}

.timeline-item > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(181, 18, 27, 0.1);
  color: var(--roma-red);
  font-weight: 950;
}

.timeline-item strong,
.timeline-item b {
  display: block;
}

.timeline-item strong {
  color: #66707b;
  font-size: 0.78rem;
  text-transform: uppercase;
}

.timeline-item b {
  margin: 4px 0;
  color: #111318;
  font-size: 1rem;
}

.timeline-item p {
  margin: 0;
  color: #66707b;
  font-weight: 800;
  line-height: 1.35;
}

.executive-report-panel {
  display: grid;
  grid-template-columns: minmax(240px, 0.65fr) minmax(320px, 1fr);
  gap: 16px;
  border-left: 5px solid #191b20;
}

.report-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.trace-chain {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.trace-step {
  border: 1px solid #d9dde3;
  border-top: 4px solid var(--roma-red);
  border-radius: var(--radius);
  background: #ffffff;
  padding: 12px;
  min-width: 0;
}

.trace-step span {
  display: block;
  color: #66707b;
  font-size: 0.76rem;
  font-weight: 950;
  text-transform: uppercase;
}

.trace-step strong {
  display: block;
  margin-top: 7px;
  color: #14171c;
  font-size: 1rem;
  overflow-wrap: anywhere;
}

.trace-step p {
  margin: 6px 0 0;
  color: #68727d;
  font-size: 0.82rem;
  font-weight: 800;
}

.movement-row {
  border: 1px solid #e1e5eb;
  border-radius: var(--radius);
  padding: 10px;
  display: grid;
  gap: 4px;
}

.movement-row span {
  color: #68727d;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.movement-row b {
  color: #14171c;
}

.movement-row small {
  color: #66707b;
  font-weight: 800;
}

.plant-map-shell {
  min-height: 260px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background:
    repeating-linear-gradient(90deg, rgba(25, 27, 31, 0.035) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(25, 27, 31, 0.035) 0 1px, transparent 1px 48px),
    #f7f8fa;
  padding: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.plant-zone {
  min-height: 92px;
  border: 2px solid #d9dde3;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.9);
  display: grid;
  align-content: center;
  gap: 6px;
  padding: 12px;
  text-align: left;
}

.plant-zone strong {
  color: #191b20;
}

.plant-zone span {
  color: #66707b;
  font-weight: 900;
}

.plant-zone:hover {
  border-color: var(--roma-red);
}

.intelligence-panel {
  border-color: rgba(181, 18, 27, 0.28);
}

.intelligence-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.intelligence-metric {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #f7f8fa;
  padding: 14px;
  display: grid;
  gap: 6px;
}

.intelligence-metric span {
  color: #66707b;
  font-weight: 900;
}

.intelligence-metric strong {
  color: #191b20;
  font-size: 1.35rem;
}

.intelligence-metric p {
  margin: 0;
  color: #7a838c;
  font-weight: 800;
}

.intelligence-columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.intelligence-card {
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #ffffff;
  padding: 16px;
}

.intelligence-card > strong {
  display: block;
  margin-bottom: 12px;
}

.intelligence-row,
.observation-item,
.rule-row {
  border-top: 1px solid #e4e7eb;
  padding: 10px 0;
  display: grid;
  gap: 4px;
}

.intelligence-row b,
.observation-item span,
.rule-row span {
  color: #191b20;
}

.intelligence-row span,
.observation-item p {
  margin: 0;
  color: #66707b;
  line-height: 1.35;
}

.intelligence-row.warning,
.observation-item.warning {
  border-left: 4px solid var(--warning);
  padding-left: 10px;
}

.intelligence-row.critical,
.observation-item.critical {
  border-left: 4px solid var(--danger);
  padding-left: 10px;
}

.intelligence-row.info,
.observation-item.info {
  border-left: 4px solid #4d7ea8;
  padding-left: 10px;
}

.recommendation-item {
  margin: 0;
  border-top: 1px solid #e4e7eb;
  padding: 10px 0;
  color: #191b20;
  font-weight: 800;
  line-height: 1.35;
}

.rule-row {
  grid-template-columns: 1fr auto;
  align-items: center;
}

.rule-row b {
  color: var(--roma-red);
}

.observation-panel,
.ai-readiness {
  margin-top: 14px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: #f7f8fa;
  padding: 16px;
  display: grid;
  gap: 8px;
}

.ai-readiness {
  grid-template-columns: auto 1fr;
  align-items: center;
}

.ai-readiness span {
  color: #66707b;
  font-weight: 800;
}

.integration-card {
  min-height: 132px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  padding: 16px;
  background: #f7f8fa;
  display: grid;
  gap: 8px;
}

.integration-card strong {
  color: #191b20;
}

.integration-card span {
  width: fit-content;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 10px;
  background: rgba(181, 18, 27, 0.1);
  color: #8b1017;
  font-size: 0.78rem;
  font-weight: 950;
}

.integration-card p {
  margin: 0;
  color: #69727c;
  line-height: 1.35;
}

.master-catalog-panel {
  display: grid;
  gap: 16px;
}

.master-catalog-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.master-waste-card,
.waste-config-card {
  border: 1px solid #d9dde3;
  border-left: 6px solid var(--waste-color, var(--roma-red));
  border-radius: var(--radius);
  padding: 16px;
  background: #ffffff;
  display: grid;
  gap: 12px;
}

.master-waste-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
}

.master-waste-head > span {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  display: grid;
  place-items: center;
  background: var(--waste-color, var(--roma-red));
  color: #ffffff;
  font-weight: 950;
}

.master-waste-card strong,
.waste-config-card strong {
  color: #17191d;
}

.master-waste-card p,
.waste-config-card p,
.master-waste-head p {
  margin: 0;
  color: #626b76;
  line-height: 1.42;
}

.master-waste-card dl,
.waste-config-card dl {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.master-waste-card dt,
.waste-config-card dt {
  color: #717b86;
  font-size: 0.76rem;
  font-weight: 900;
  text-transform: uppercase;
}

.master-waste-card dd,
.waste-config-card dd {
  margin: 2px 0 0;
  color: #17191d;
  font-weight: 850;
}

.waste-config-card {
  margin-top: 12px;
  background: #f8f9fb;
}

.waste-config-card > div:first-child span {
  color: #8b1017;
  font-size: 0.78rem;
  font-weight: 950;
  text-transform: uppercase;
}

.check-row {
  min-height: 54px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #202329;
  font-weight: 850;
}

.check-row input {
  width: 22px;
  height: 22px;
}

.trace-form {
  margin-bottom: 16px;
  align-items: end;
}

.trace-result {
  display: grid;
  gap: 14px;
  margin-bottom: 16px;
}

.trace-result h3 {
  margin: 0;
  color: #191b20;
}

.empty-state {
  padding: 28px;
  text-align: center;
  color: #69727c;
  border: 1px dashed #c8ced6;
  border-radius: var(--radius);
}

.photo-preview {
  max-width: 180px;
  border-radius: var(--radius);
  border: 1px solid #d9dde3;
  display: block;
  margin-top: 8px;
}

.reject-field {
  margin-top: 14px;
}

.table-btn {
  min-height: 44px;
  color: var(--text);
}

.muted-text {
  color: #69727c;
}

.tv-mode-shell .sidebar {
  display: none;
}

.tv-mode-shell {
  grid-template-columns: 1fr;
}

.tv-mode-shell .main {
  min-width: 0;
}

.tv-mode-shell .topbar {
  background: #101114;
  color: #ffffff;
  border-bottom: 1px solid #2d323a;
}

.tv-mode-shell .content {
  background: #0f1115;
}

.tv-mode-shell .executive-hero {
  min-height: 420px;
  align-content: center;
}

.tv-mode-shell .wow-kpi-card,
.tv-mode-shell .tv-card {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

@media (max-width: 980px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 10;
    padding: 14px;
  }

  .nav-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .user-card {
    display: none;
  }

  .kpi-grid,
  .module-grid,
  .control-grid,
  .industrial-kpi-strip,
  .industrial-grid,
  .client-value-grid,
  .client-check-grid,
  .client-flow-steps,
  .scada-grid,
  .case-grid,
  .wow-kpi-grid,
  .tv-grid,
  .esg-grid,
  .trace-chain,
  .operation-timeline,
  .report-metrics,
  .evidence-facts,
  .control-columns,
  .intelligence-grid,
  .intelligence-columns,
  .plant-map-shell {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .guided-demo-panel,
  .executive-report-panel,
  .executive-hero,
  .client-hero,
  .client-presentation-guide,
  .industrial-header,
  .evidence-layout {
    grid-template-columns: 1fr;
  }

  .industrial-header {
    display: grid;
  }

  .industrial-header-actions {
    justify-content: flex-start;
  }

  .evidence-search {
    grid-template-columns: 1fr;
  }

  .control-hero {
    align-items: flex-start;
    flex-direction: column;
  }

  .capture-steps {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .area-grid,
  .waste-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capture-main-grid,
  .filter-grid,
  .optional-grid,
  .integration-grid,
  .trend-grid,
  .master-catalog-grid,
  .control-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .login-panel {
    padding: 22px;
  }

  .content {
    padding: 16px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .topbar-actions,
  .topbar-actions button {
    width: 100%;
  }

  .kpi-grid,
  .module-grid,
  .control-grid,
  .industrial-kpi-strip,
  .industrial-grid,
  .client-value-grid,
  .client-check-grid,
  .client-flow-steps,
  .scada-grid,
  .case-grid,
  .wow-kpi-grid,
  .tv-grid,
  .esg-grid,
  .trace-chain,
  .operation-timeline,
  .report-metrics,
  .evidence-facts,
  .control-columns,
  .intelligence-grid,
  .intelligence-columns,
  .plant-map-shell,
  .form-grid,
  .nav-list,
  .quick-login,
  .area-grid,
  .department-grid,
  .waste-grid,
  .capture-main-grid,
  .filter-grid,
  .optional-grid,
  .integration-grid,
  .trend-grid,
  .master-catalog-grid {
    grid-template-columns: 1fr;
  }

  .guided-demo-meta {
    display: grid;
  }

  .guided-demo-meta span {
    text-align: left;
  }

  .ai-readiness {
    grid-template-columns: 1fr;
  }

  .master-waste-card dl,
  .waste-config-card dl {
    grid-template-columns: 1fr;
  }

  .trend-row {
    grid-template-columns: 1fr;
  }

  .trend-row b {
    text-align: left;
  }

  .quick-capture-card {
    padding: 16px;
  }

  .capture-header {
    flex-direction: column;
  }

  .capture-steps,
  .area-grid,
  .waste-grid,
  .capture-main-grid,
  .optional-grid {
    grid-template-columns: 1fr;
  }

  .choice-btn {
    min-height: 82px;
    grid-template-columns: auto 1fr auto;
    justify-items: start;
    text-align: left;
  }

  .weight-input-wrap input {
    font-size: 2.25rem;
  }

  .scale-reading-grid,
  .scale-confirm-actions {
    grid-template-columns: 1fr;
  }

  .capture-actions {
    margin: 18px -16px -16px;
    padding: 12px 16px;
  }

  .data-table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* Identidad del módulo: Integración de Servicios Ambientales Industriales. */
body {
  background: #f4f7f9;
  color: #17212b;
}

.app-shell {
  background: #f4f7f9;
}

.login-shell {
  background:
    radial-gradient(circle at 18% 15%, rgba(22, 129, 83, 0.16), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(7, 92, 168, 0.18), transparent 30%),
    linear-gradient(145deg, rgba(215, 25, 32, 0.08), rgba(255, 255, 255, 0.94) 48%, rgba(7, 92, 168, 0.08)),
    #f4f7f9;
}

.login-panel {
  background: #ffffff;
  border-color: #d9e2e8;
  color: #17212b;
  box-shadow: 0 24px 80px rgba(11, 45, 74, 0.16);
}

.login-panel .brand-subtitle,
.login-panel .field label,
.login-panel .login-hint {
  color: #526270;
}

.login-panel .role-chip,
.login-panel .secondary-btn {
  background: #ffffff;
  border-color: #cbd9e5;
  color: #17324a;
}

.login-panel .role-chip:hover,
.login-panel .secondary-btn:hover {
  border-color: var(--roma-blue);
  background: var(--roma-blue-soft);
}

.sidebar {
  background-color: var(--roma-blue-deep);
  background-image:
    radial-gradient(circle at 88% 5%, rgba(22, 129, 83, 0.32), transparent 24%),
    linear-gradient(180deg, #0d3656 0%, #0b2d4a 58%, #09253d 100%);
  border-right: 3px solid rgba(22, 129, 83, 0.72);
}

.brand-lockup {
  border-left: 4px solid var(--roma-red);
  border-bottom: 2px solid var(--roma-green);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.nav-btn.active,
.nav-btn:hover {
  border-color: rgba(255, 255, 255, 0.18);
  border-left-color: var(--roma-red);
  background: rgba(255, 255, 255, 0.12);
}

.nav-context {
  border-color: rgba(22, 129, 83, 0.58);
  background: rgba(22, 129, 83, 0.13);
}

.topbar {
  border-bottom: 1px solid #d6e1ea;
  box-shadow: inset 0 -2px 0 rgba(7, 92, 168, 0.08);
}

.quiet-btn {
  border-color: #c9d9e6;
  color: #17324a;
}

.quiet-btn:hover {
  border-color: var(--roma-blue);
  background: var(--roma-blue-soft);
  color: var(--roma-blue-deep);
}

.control-hero,
.executive-hero {
  background:
    radial-gradient(circle at 84% 20%, rgba(22, 129, 83, 0.34), transparent 28%),
    linear-gradient(135deg, var(--roma-red) 0%, #9c2630 33%, var(--roma-blue-deep) 100%);
}

.industrial-control {
  background:
    radial-gradient(circle at 78% 8%, rgba(22, 129, 83, 0.34), transparent 24%),
    linear-gradient(135deg, rgba(215, 25, 32, 0.92), rgba(11, 45, 74, 0.98) 62%),
    var(--roma-blue-deep);
}

.executive-hero-score em {
  background: var(--roma-green);
}

.service-hero.client {
  border-left-color: var(--roma-green);
}

.service-hero.internal {
  border-left-color: var(--roma-blue);
}

.evidence-center {
  border-top-color: var(--roma-blue);
}

.esg-panel {
  border-left-color: var(--roma-green);
}

/* Expediente de servicio vivo: operativo, legible y seguro por proyección. */
.live-intro,
.service-hero,
.section-heading,
.service-card-head,
.service-card-actions,
.service-hero-actions,
.service-meta,
.cut-actions,
.live-event,
.live-event-tail,
.close-list article > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.live-intro {
  margin-bottom: 18px;
  border-left: 4px solid var(--roma-red);
}

.live-intro h2,
.service-hero h2,
.service-card h2,
.service-section h2 {
  margin: 5px 0 8px;
  color: #1c2229;
}

.live-intro p,
.service-hero p,
.service-card p,
.service-section > p,
.methodology-note,
.muted-copy {
  color: #69737d;
  line-height: 1.5;
}

.service-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
}

.service-card {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid #e0e4e8;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(30, 39, 48, 0.05);
}

.service-card h2 { font-size: 1.15rem; }
.service-card p { margin: -4px 0 0; min-height: 42px; }
.service-card-head small { color: #78828d; font-weight: 800; }

.service-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: #53606c;
  font-size: 0.88rem;
  line-height: 1.45;
}

.service-context b { color: #1f2932; }

.service-context .site-type {
  color: #176c48;
  font-weight: 750;
}

.service-context-hero { margin: 2px 0 8px; }

.service-presentation-note { margin: 2px 0 10px; }

.status-pill,
.material-chip {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 850;
}

.status-pill { padding: 5px 9px; background: #eef1f4; color: #39434d; }
.status-pill.en_captura { background: #fff3df; color: #8a5700; }
.status-pill.pendiente_validacion { background: #fff3df; color: #7a4b00; }
.status-pill.validado, .status-pill.cerrado { background: #e4f6ed; color: #167449; }
.status-pill.ajuste { background: #eef4f8; color: #263f50; }

.service-metrics,
.live-kpi-grid,
.finance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.service-metrics > div,
.finance-grid > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border-radius: 7px;
  background: #f6f7f8;
}

.service-metrics span,
.finance-grid span,
.live-event small,
.simple-list small {
  color: #78828d;
  font-size: 0.76rem;
}

.service-metrics strong,
.finance-grid strong { color: #1f2932; font-size: 1rem; }
.service-card-actions { align-items: stretch; flex-wrap: wrap; }
.service-card-actions button { flex: 1; min-height: 44px; }

.test-service-classification {
  align-items: flex-start;
  padding: 12px;
  border: 1px solid #dfc992;
  border-radius: 8px;
  background: #fff9ea;
}

.test-service-classification span {
  display: grid;
  gap: 3px;
  color: #5d4213;
}

.test-service-classification small {
  color: #765c2d;
  line-height: 1.4;
}

.test-delete-control {
  display: grid;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #edf0f2;
}

.danger-outline-btn {
  min-height: 42px;
  border: 1px solid #d7a4a1;
  border-radius: var(--radius);
  padding: 0 14px;
  background: #fff;
  color: #8a2722;
  font-weight: 850;
}

.danger-outline-btn:hover:not(:disabled) {
  border-color: #b9362f;
  background: #fff3f2;
}

.danger-outline-btn:disabled {
  cursor: not-allowed;
  border-color: #d9dfe4;
  background: #f6f7f8;
  color: #7a858f;
}

.test-delete-control small {
  color: #68747f;
  line-height: 1.4;
}

.test-delete-control small.eligible { color: #7a4b00; }
.test-delete-control small.blocked { color: #596772; }

.destructive-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(18, 31, 42, 0.58);
  backdrop-filter: blur(3px);
}

.destructive-modal {
  width: min(680px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  display: grid;
  gap: 16px;
  padding: clamp(20px, 4vw, 30px);
  border: 1px solid #e5b9b6;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(13, 29, 41, 0.28);
}

.destructive-modal-heading,
.destructive-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.destructive-modal-heading h2 { margin: 4px 0 0; color: #6e211d; }

.destructive-warning {
  margin: 0;
  padding: 12px 14px;
  border-left: 4px solid #b9362f;
  border-radius: 8px;
  background: #fff3f2;
  color: #6e211d;
  font-weight: 750;
  line-height: 1.5;
}

.test-delete-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}

.test-delete-summary > div {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #f5f7f9;
}

.test-delete-summary dt { color: #697681; font-size: 0.76rem; font-weight: 800; }
.test-delete-summary dd { margin: 0; color: #1f2d38; font-weight: 850; overflow-wrap: anywhere; }
.destructive-confirmation-form { margin-top: 2px; }
.destructive-modal-actions { justify-content: flex-end; }
.destructive-modal-actions button { min-width: 180px; }

.service-hero { margin-bottom: 16px; border-left: 4px solid #8b1017; flex-wrap: wrap; }
.service-hero > div:first-child { flex: 1 1 420px; min-width: 0; }
.service-hero.client { border-left-color: #28714c; }
.service-hero.internal { border-left-color: var(--roma-blue); }
.service-hero.operator { border-left-color: var(--roma-green); }
.service-hero-actions { align-self: stretch; flex: 0 1 260px; flex-wrap: wrap; }
.service-meta { justify-content: flex-start; flex-wrap: wrap; color: #6b7580; font-size: 0.82rem; font-weight: 750; }

.live-kpi-grid {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin-bottom: 16px;
}

.live-kpi-grid .kpi-card {
  min-width: 0;
  overflow: hidden;
}

.live-kpi-grid .kpi-value {
  font-size: clamp(1.45rem, 2.2vw, 2rem);
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.methodology-note {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid #efdca9;
  border-radius: 8px;
  background: #fff9eb;
}

.service-section { margin-bottom: 16px; }
.section-heading { margin-bottom: 16px; align-items: flex-start; }
.section-heading h2 { font-size: 1.16rem; }
.cut-actions { flex-wrap: wrap; }
.cut-actions .quiet-btn { min-height: 38px; }

.material-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.material-chip { gap: 6px; padding: 7px 10px; background: #f0f3f5; color: #3c4650; }

.live-event-list,
.live-finance-list,
.simple-list,
.close-list { display: grid; gap: 9px; }
.live-event { padding: 12px; border: 1px solid #e1e5e9; border-radius: 8px; background: #fff; }
.live-event > div:first-child { display: grid; gap: 3px; }
.live-event > div:first-child span { color: #48535e; font-weight: 750; }
.live-event-tail { align-items: center; color: #6b7580; font-size: .81rem; text-align: right; }
.live-event-copy { min-width: 0; }
.live-event-observation,
.live-event-internal-note { margin: 3px 0 0; color: #53616d; font-size: .81rem; line-height: 1.4; }
.live-event-internal-note { padding: 7px 9px; border-left: 3px solid var(--roma-blue); background: #f1f7fb; color: #244c68; }
.live-event-audit { margin-top: 5px; padding-top: 5px; border-top: 1px solid #edf0f2; line-height: 1.4; }

.operator-capture-shell { display: grid; gap: 14px; max-width: 860px; margin: 0 auto; }
.operator-capture-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; border-left: 4px solid var(--roma-green); }
.operator-capture-header h2 { margin: 5px 0 8px; color: #1c2229; }
.operator-capture-header p { margin: 0 0 8px; color: #66717b; }
.operator-capture-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.operator-capture-form [hidden] { display: none !important; }
.operator-capture-form .span-2,
.operator-capture-form .operator-save-btn { grid-column: 1 / -1; }
.operator-primary-field select { min-height: 54px; border-color: #9ec9b1; background: #f5fbf7; font-size: 1rem; font-weight: 800; }
.operator-save-btn { min-height: 54px; justify-self: stretch; font-size: 1rem; }
.operator-status-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.operator-status-grid article { display: grid; gap: 4px; padding: 14px; border: 1px solid #dce5e9; border-radius: 9px; background: #fff; }
.operator-status-grid span { color: #64727d; font-size: .78rem; font-weight: 800; }
.operator-status-grid strong { color: #173c58; font-size: 1.3rem; }
.operator-event { border-left: 3px solid #b8d9c5; }
.operator-expenses { border-left: 4px solid #d69b20; }
.operator-expense-row { display: grid; grid-template-columns: 1fr auto; gap: 3px 14px; padding: 10px 0; border-bottom: 1px solid #edf0f2; }
.operator-expense-row small { grid-column: 1 / -1; color: #8b640b; }

.internal-finance { border-color: #e8c9cc; }
.finance-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 14px 0; }
.finance-grid > div { background: #fff6f6; }
.live-finance-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 8px 0; border-bottom: 1px solid #edf0f2; color: #56616b; }
.live-finance-list strong { color: #1d252c; }
.correction-history { margin-top: 14px; color: #5b6570; }
.correction-history summary { cursor: pointer; color: #8b1017; font-weight: 850; }

.service-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.simple-list > div { display: grid; gap: 3px; padding: 10px 0; border-bottom: 1px solid #edf0f2; }
.simple-list strong { color: #34404b; }
.simple-list span { color: #66717b; font-size: .87rem; }
.close-list article { padding: 13px; border-radius: 8px; border: 1px solid #e1e5e9; background: #fafbfc; }
.close-list article p { margin: 8px 0 4px; color: #3f4a54; font-weight: 750; }
.close-list article small { color: #6e7882; }

.live-form { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.live-form .span-2, .live-form > button, .progressive-details { grid-column: span 2; }
.live-form > .primary-btn, .live-form > .secondary-btn { justify-self: start; }
.progressive-details { padding: 14px; border: 1px solid #e1e5e9; border-radius: 8px; background: #fafbfc; }
.progressive-details summary { cursor: pointer; color: var(--roma-blue-deep); font-weight: 850; }
.finance-inputs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 14px; }
.correction-panel { margin-bottom: 16px; border-color: #ebc8cc; }
.close-form { margin-bottom: 16px; padding: 14px; border: 1px dashed #d2d8dd; border-radius: 8px; background: #fafbfc; }

@media (max-width: 760px) {
  .daily-hero,
  .daily-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .daily-hero-status {
    justify-items: start;
  }

  .daily-overview-grid,
  .daily-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-action-buttons {
    width: 100%;
    justify-content: flex-start;
  }

  .live-intro, .service-hero, .section-heading, .live-event, .live-event-tail { align-items: flex-start; flex-direction: column; }
  .service-card-actions, .service-hero-actions { width: 100%; }
  .service-hero-actions button { flex: 1; }
  .service-metrics, .finance-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .service-two-column, .live-form, .finance-inputs { grid-template-columns: 1fr; }
  .live-form .span-2, .live-form > button, .progressive-details { grid-column: span 1; }
  .live-event-tail { width: 100%; text-align: left; }
  .test-delete-summary { grid-template-columns: 1fr; }
  .destructive-modal-heading { align-items: flex-start; }
  .destructive-modal-actions { align-items: stretch; flex-direction: column-reverse; }
  .destructive-modal-actions button { width: 100%; min-width: 0; }
}

@media (max-width: 480px) {
  .daily-overview-grid,
  .daily-metric-grid {
    grid-template-columns: 1fr;
  }

  .daily-service-choice,
  .daily-action-buttons button {
    width: 100%;
  }
}

/* Repositorio histórico: separado visual y técnicamente de la operación activa. */
.history-intro,
.history-separation-banner,
.history-period,
.history-close,
.history-party-list span,
.history-support-list span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.history-intro {
  border-top: 4px solid #1f6594;
}

.history-intro h2,
.history-detail-hero h2 {
  color: #173f5c;
}

.history-lock {
  min-width: 190px;
  padding: 14px 16px;
  border: 1px solid #cddce6;
  border-radius: 10px;
  background: #f5f9fc;
  color: #173f5c;
  text-align: right;
}

.history-lock strong,
.history-lock span {
  display: block;
}

.history-lock span {
  margin-top: 4px;
  color: #637683;
  font-size: .82rem;
}

.history-separation-banner {
  margin: 0 0 18px;
  padding: 12px 16px;
  border: 1px solid #cfe6d8;
  border-radius: 9px;
  background: #f1faf5;
  color: #225e41;
}

.history-separation-banner span {
  color: #4e6e60;
  font-size: .86rem;
}

.history-card {
  border-top: 3px solid #2b6f9d;
}

.history-status,
.read-only-pill,
.internal-only-pill {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: 5px 9px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .055em;
}

.history-status {
  background: #e5f6ed;
  color: #126e45;
}

.read-only-pill {
  background: #e8f1f8;
  color: #185579;
}

.internal-only-pill {
  background: #fff1df;
  color: #7b4b00;
}

.history-card > p {
  display: grid;
  gap: 4px;
  min-height: 54px;
}

.history-card > p span,
.history-period span {
  color: #657783;
  font-size: .8rem;
}

.history-period {
  padding: 10px 12px;
  border-radius: 8px;
  background: #f4f8fb;
  color: #244f6c;
}

.history-metrics strong {
  font-size: .9rem;
  line-height: 1.25;
}

.history-finance-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  padding: 10px;
  border-radius: 8px;
  background: #f7f9fb;
  color: #435866;
  font-size: .73rem;
  font-weight: 800;
}

.history-detail-hero {
  border-top: 4px solid #1f6594;
}

.history-count-explainer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: -4px 0 16px;
}

.history-count-explainer article {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid #cddde8;
  border-radius: 9px;
  background: #f5f9fc;
  color: #244f6c;
}

.history-count-explainer span {
  color: #526b7a;
  font-size: .82rem;
  line-height: 1.45;
}

.history-event {
  border-left: 3px solid #75a8ca;
}

.history-methodology {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: #fff8ea;
  color: #6a4a0c;
  font-size: .82rem;
}

.history-internal-panel {
  border-top: 4px solid #bd3038;
  background: #fff;
}

.history-internal-status {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  flex-direction: column;
}

.history-pass-pill {
  display: inline-flex;
  width: fit-content;
  padding: 6px 10px;
  border: 1px solid #9dccb3;
  border-radius: 999px;
  background: #e9f7ef;
  color: #0d633e;
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .04em;
}

.history-pass-pill.pending {
  border-color: #e2c989;
  background: #fff8e8;
  color: #765000;
}

.history-finance-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.history-finance-grid .kpi-card {
  background: #f7f9fb;
  box-shadow: none;
}

.history-party-list,
.history-support-list,
.history-contract-list {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.history-party-list span,
.history-support-list span,
.history-contract-list span {
  padding: 10px 12px;
  border: 1px solid #dce5ea;
  border-radius: 8px;
  background: #fff;
}

.history-party-list small,
.history-support-list small,
.history-contract-list small {
  color: #657783;
}

.history-v08-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #cfe1ec;
  border-left: 4px solid #2873a4;
  border-radius: 9px;
  background: #f4f9fc;
}

.history-v08-summary h3,
.history-v08-summary p {
  margin: 0;
}

.history-v08-summary h3 {
  margin-top: 4px;
  color: #173f5c;
}

.history-v08-summary p {
  max-width: 420px;
  color: #526b7a;
  font-size: .84rem;
  line-height: 1.45;
}

.history-economic-status {
  display: block;
  margin-top: 5px;
  color: #1d5677;
  font-size: .72rem;
  font-style: normal;
  font-weight: 800;
}

.history-weight-line {
  color: #1d5677;
  font-weight: 800;
}

.history-internal-note {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 7px;
  background: #fff5df;
  color: #6b4900;
  font-size: .82rem;
}

.history-weight-reconciliation {
  display: grid;
  gap: 9px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #cfe1ec;
  border-radius: 9px;
  background: #f4f9fc;
}

.history-weight-reconciliation h3,
.history-weight-reconciliation p {
  margin: 0;
}

.history-weight-reconciliation p {
  color: #485e6b;
  font-size: .84rem;
}

.history-weight-reconciliation small {
  display: block;
  margin-top: 5px;
  color: #526b7a;
}

.history-internal-incidents {
  display: grid;
  gap: 6px;
  padding-top: 11px;
  border-top: 1px solid #d8e6ef;
}

.history-internal-incidents > strong {
  color: #7a3c13;
  font-size: .76rem;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.history-finance-details {
  margin-top: 14px;
  border: 1px solid #dce5ea;
  border-radius: 9px;
  background: #fff;
}

.history-finance-details summary {
  padding: 12px 14px;
  color: #1d5677;
  cursor: pointer;
  font-weight: 850;
}

.history-finance-details > div {
  display: grid;
  gap: 7px;
  padding: 0 14px 14px;
}

.history-finance-details span {
  display: grid;
  gap: 3px;
  padding-top: 8px;
  border-top: 1px solid #e5ecef;
}

.history-finance-details small {
  color: #657783;
}

.history-difference-list {
  display: grid;
  gap: 10px;
}

.history-difference-list article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid #eadfc6;
  border-radius: 8px;
  background: #fffaf0;
}

.history-difference-list p {
  margin: 4px 0 0;
  color: #6e6658;
}

.history-severity {
  height: fit-content;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff1df;
  color: #7b4b00;
  font-size: .67rem;
  font-weight: 900;
  text-transform: uppercase;
}

.history-severity.high {
  background: #fde8e8;
  color: #9a252a;
}

.history-severity.resolved {
  background: #e5f4ec;
  color: #17643b;
}

.history-severity.info {
  background: #e9f2f8;
  color: #1d5677;
}

.history-close {
  padding: 14px;
  border: 1px solid #cfe1ec;
  border-radius: 9px;
  background: #f6fafc;
}

.history-close > div {
  display: grid;
  gap: 4px;
}

.history-close > div:last-child {
  justify-items: end;
  text-align: right;
}

.history-close span,
.history-close small {
  color: #647681;
  font-size: .78rem;
}

@media (max-width: 900px) {
  .history-finance-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .history-intro,
  .history-separation-banner,
  .history-close {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-lock {
    width: 100%;
    text-align: left;
  }

  .history-finance-grid,
  .history-finance-strip,
  .history-count-explainer {
    grid-template-columns: 1fr;
  }

  .history-v08-summary {
    align-items: flex-start;
    flex-direction: column;
  }

  .history-internal-status {
    align-items: flex-start;
  }

  .history-close > div:last-child {
    justify-items: start;
    text-align: left;
  }
}

/* Modelo interno universal: ventas, cobranza y gastos. */
.finance-universal-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.finance-universal-summary article {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #d8e5ed;
  border-radius: 10px;
  background: #f8fbfd;
}

.finance-universal-summary span,
.finance-universal-summary small {
  color: #627789;
  font-size: .75rem;
  font-weight: 750;
}

.finance-universal-summary strong {
  color: #183b57;
  font-size: 1.08rem;
  overflow-wrap: anywhere;
}

.finance-rule-note,
.finance-schema-pending {
  display: flex;
  gap: 8px;
  margin: 12px 0 18px;
  padding: 11px 13px;
  border: 1px solid #ead9a9;
  border-left: 4px solid #d59a1a;
  border-radius: 9px;
  background: #fffaf0;
  color: #66552b;
}

.finance-admin-columns,
.finance-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.finance-admin-block,
.expense-policy-panel,
.expense-review-panel {
  margin-top: 16px;
  padding: 15px;
  border: 1px solid #dce6ed;
  border-radius: 11px;
  background: #fff;
}

.finance-admin-block h3,
.expense-policy-panel h3,
.expense-review-panel h3 {
  margin: 0 0 10px;
  color: #173c58;
}

.expense-policy-panel > div:first-child p {
  margin: 3px 0 12px;
  color: #627586;
}

.expense-policy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 9px;
}

.expense-policy-grid article {
  display: grid;
  gap: 5px;
  padding: 11px;
  border-radius: 9px;
  background: #f5f9fc;
}

.expense-policy-grid span,
.expense-policy-grid small {
  color: #617687;
  font-size: .76rem;
}

.expense-policy-grid strong { color: #193f5d; }

.finance-entry-tools {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid #d5e2eb;
  border-radius: 10px;
  background: #f7fafc;
}

.finance-entry-tools > summary {
  cursor: pointer;
  color: #173f5d;
  font-weight: 850;
}

.finance-form-grid { margin-top: 16px; }

.expense-review-list { display: grid; gap: 8px; }

.expense-review-row {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) minmax(180px, .8fr) auto;
  align-items: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #e2e8ed;
  border-radius: 9px;
  background: #fbfcfd;
}

.expense-review-row > div { display: grid; gap: 3px; }
.expense-review-row span,
.expense-review-row small { color: #657887; font-size: .77rem; }

.value-status.agreed { background: #e8f1fb; color: #175b91; border: 1px solid #b6d3e8; }

@media (max-width: 760px) {
  .finance-admin-columns,
  .finance-form-grid,
  .expense-review-row {
    grid-template-columns: 1fr;
  }

  .finance-rule-note,
  .finance-schema-pending {
    flex-direction: column;
  }

  .expense-review-row .quiet-btn,
  .finance-admin-block .secondary-btn {
    width: 100%;
  }
}

/* Operational cutover: real-service setup without demo master data. */
.operational-setup {
  border-color: #bfd4e8;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 38%);
}

.operational-setup > summary {
  cursor: pointer;
  list-style: none;
}

.operational-setup > summary::-webkit-details-marker {
  display: none;
}

.operational-setup > summary span {
  display: grid;
  gap: 4px;
}

.operational-setup > summary b {
  color: #12395b;
  font-size: 1.05rem;
}

.operational-setup > summary small {
  color: #647789;
}

.operational-setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.setup-card {
  align-content: start;
  margin: 0;
  padding: 18px;
  border: 1px solid #dbe6ef;
  border-radius: 14px;
  background: #ffffff;
}

.setup-card h3 {
  grid-column: 1 / -1;
  margin: 0 0 4px;
  color: #163a58;
}

.setup-card .section-eyebrow,
.setup-card > button,
.setup-card > .check-row {
  grid-column: 1 / -1;
}

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

.operational-material-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #dbe6ef;
}

.material-admin-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #f4f8fb;
}

.material-admin-row small {
  color: #5f7385;
}

.clean-empty-state {
  text-align: center;
  border-style: dashed;
  background: #fbfdff;
}

.live-price-list {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.live-price-list > div {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 6px 16px;
  padding: 12px;
  border: 1px solid #dce6ee;
  border-radius: 10px;
  background: #f8fbfd;
}

.live-price-list > div > small {
  grid-column: 1 / -1;
  color: #667887;
}

@media (max-width: 760px) {
  .operational-setup-grid {
    grid-template-columns: 1fr;
  }

  .setup-card-wide {
    grid-column: auto;
  }

  .material-admin-row {
    grid-template-columns: 1fr;
  }

  .material-admin-row .quiet-btn {
    width: 100%;
  }
}

/* Pilot publication workflow: one operation, controlled client projection. */
.publication-flow,
.client-publication-note,
.capture-publication-note {
  margin-bottom: 16px;
  border: 1px solid #cbdde9;
  border-left: 4px solid var(--roma-blue);
  border-radius: 10px;
  background: #f7fbfe;
}

.publication-flow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.publication-flow h2 {
  margin: 5px 0;
  color: #173c58;
  font-size: 1.08rem;
}

.publication-flow p,
.client-publication-note span,
.capture-publication-note span {
  margin: 0;
  color: #5b7181;
  line-height: 1.45;
}

.publication-flow-counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(86px, 1fr));
  gap: 8px;
}

.publication-flow-counts span {
  display: grid;
  gap: 2px;
  padding: 10px;
  border: 1px solid #d5e2eb;
  border-radius: 8px;
  background: #ffffff;
  color: #667886;
  font-size: 0.72rem;
  text-align: center;
}

.publication-flow-counts b {
  color: #173c58;
  font-size: 1.1rem;
}

.publication-control {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}

.publication-badge,
.value-status {
  display: inline-flex;
  align-items: center;
  width: max-content;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 0.75rem;
  font-weight: 850;
}

.publication-badge.draft { background: #fff1df; color: #8b5600; }
.publication-badge.reviewed { background: #e8f1fb; color: #175b91; }
.publication-badge.published { background: #e5f6ed; color: #126e45; }
.value-status.projected { background: #e8f1fb; color: #175b91; }
.value-status.estimated { background: #fff1df; color: #8b5600; }
.value-status.real { background: #e8f5ee; color: #126e45; }
.value-status.reconciled { background: #e5f6ed; color: #0c6640; border: 1px solid #98cfb2; }

.client-publication-note,
.capture-publication-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px 14px;
}

.client-publication-note {
  border-left-color: var(--roma-green);
  background: #f4fbf7;
}

.capture-publication-note {
  margin-top: 14px;
}

.client-publication-note strong,
.capture-publication-note strong {
  color: #163f5b;
  white-space: nowrap;
}

.financial-disclaimer {
  padding: 10px 12px;
  border-left: 3px solid #d8a126;
  background: #fff9ec;
  color: #6f5a27 !important;
}

.internal-finance {
  border-color: #cbdde9;
  border-left: 4px solid var(--roma-blue);
}

.internal-finance .finance-grid > div {
  background: #f5f9fc;
}

.live-finance-list > div > span {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
}

.amount-status-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(116px, .55fr);
  gap: 8px;
}

@media (max-width: 760px) {
  .publication-flow,
  .client-publication-note,
  .capture-publication-note {
    flex-direction: column;
  }

  .publication-flow-counts {
    width: 100%;
  }

  .publication-control {
    justify-content: flex-start;
  }

  .client-publication-note strong,
  .capture-publication-note strong {
    white-space: normal;
  }

  .operator-capture-header { flex-direction: column; }
  .operator-capture-header button { width: 100%; }
  .operator-capture-form { grid-template-columns: 1fr; padding: 16px; }
  .operator-capture-form .span-2,
  .operator-capture-form .operator-save-btn { grid-column: 1; }
  .operator-status-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  .publication-flow-counts,
  .amount-status-row {
    grid-template-columns: 1fr;
  }
}

/* MIR DEV 02: shared ROMA shell and operational simplification. */
.app-shell {
  background: #eef1f4;
}

.sidebar {
  background-color: var(--roma-blue-deep);
  background-image:
    radial-gradient(circle at 92% 5%, rgba(22, 129, 83, 0.34), transparent 26%),
    linear-gradient(180deg, #105b87 0%, #0c466d 56%, #083450 100%);
  background-size: auto, 100% 100%;
  border-right: 2px solid rgba(22, 129, 83, 0.62);
  gap: 18px;
}

.brand-lockup {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  padding: 10px;
  background: #ffffff;
  border-radius: var(--radius);
  color: #1d2329;
}

.login-brand {
  display: grid;
  grid-template-columns: 82px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}

.login-brand .mir-module-icon--access {
  display: block;
  width: 82px;
  height: 82px;
  border-radius: 18px;
}

.login-brand .brand-title {
  margin: 0;
}

.login-brand .brand-subtitle {
  margin: 4px 0 0;
}

.brand-lockup .mir-module-icon--navigation {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

.brand-lockup strong,
.brand-lockup span {
  display: block;
}

.brand-lockup strong {
  font-size: 0.96rem;
}

.brand-lockup span {
  margin-top: 2px;
  color: #68727d;
  font-size: 0.78rem;
  font-weight: 750;
}

.nav-list {
  gap: 5px;
}

.nav-btn {
  min-height: 54px;
  padding: 8px 12px;
  display: grid;
  gap: 2px;
  align-content: center;
}

.nav-btn span {
  font-size: 0.9rem;
}

.nav-btn small {
  color: #c7d8e5;
  font-size: 0.7rem;
  font-weight: 700;
}

.nav-btn.active,
.nav-btn:hover {
  border-color: rgba(255, 255, 255, 0.26);
  border-left-color: var(--roma-red);
  background: rgba(255, 255, 255, 0.14);
}

.nav-context {
  border-color: rgba(22, 129, 83, 0.64);
  background: rgba(22, 129, 83, 0.16);
}

.nav-secondary {
  margin-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  padding-top: 10px;
}

.nav-secondary summary {
  cursor: pointer;
  color: #d9e9f5;
  font-size: 0.78rem;
  font-weight: 850;
}

.nav-secondary > div {
  display: grid;
  gap: 5px;
  margin-top: 8px;
}

.daily-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid #c8dce9;
  border-left: 5px solid var(--roma-blue);
  background: linear-gradient(135deg, #ffffff 0%, #f2f8fc 62%, #eff8f3 100%);
}

.daily-hero .section-eyebrow,
.daily-actions .section-eyebrow {
  color: var(--roma-blue);
}

.daily-hero h2,
.daily-actions h2 {
  margin: 5px 0 0;
  color: #12324a;
}

.daily-hero p,
.daily-actions p {
  margin: 7px 0 0;
  color: #5b6b78;
  line-height: 1.45;
}

.daily-hero-status {
  display: grid;
  justify-items: end;
  gap: 5px;
  color: #5c7180;
  font-size: 0.78rem;
}

.daily-hero-status strong {
  color: #153d5a;
  font-size: 1rem;
}

.daily-service-switcher {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.daily-service-choice {
  min-width: min(100%, 270px);
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid #d0dde7;
  border-radius: 10px;
  background: #ffffff;
  color: #1a3448;
  text-align: left;
}

.daily-service-choice span {
  color: #657786;
  font-size: 0.78rem;
}

.daily-service-choice.active,
.daily-service-choice:hover {
  border-color: var(--roma-blue);
  box-shadow: 0 6px 18px rgba(7, 92, 168, 0.12);
}

.daily-service-choice.active {
  background: var(--roma-blue-soft);
  border-left: 4px solid var(--roma-green);
}

.daily-overview-grid,
.daily-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.daily-context-card {
  display: grid;
  gap: 6px;
  min-height: 116px;
  padding: 16px;
  border: 1px solid #dce5eb;
  border-radius: 10px;
  background: #ffffff;
}

.daily-context-card--service {
  border-top: 3px solid var(--roma-blue);
}

.daily-context-card span,
.daily-context-card small {
  color: #667986;
  font-size: 0.77rem;
}

.daily-context-card strong {
  color: #183a53;
  line-height: 1.25;
}

.daily-metric-grid {
  margin-top: 14px;
}

.daily-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 14px;
  border-color: #d7e5ec;
  background: #ffffff;
}

.daily-action-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.daily-actions .secondary-btn {
  background: #ffffff;
  border-color: #a8c9df;
  color: var(--roma-blue-deep);
}

.daily-actions .secondary-btn:hover {
  background: var(--roma-blue-soft);
  border-color: var(--roma-blue);
}

.service-card-actions .secondary-btn,
.service-hero-actions .secondary-btn,
.case-report-actions .secondary-btn {
  background: #ffffff;
  border-color: #a8c9df;
  color: var(--roma-blue-deep);
}

.service-card-actions .secondary-btn:hover,
.service-hero-actions .secondary-btn:hover,
.case-report-actions .secondary-btn:hover {
  background: var(--roma-blue-soft);
  border-color: var(--roma-blue);
}

.daily-close-action {
  border-color: rgba(22, 129, 83, 0.42);
  color: #116641;
}

.user-card {
  gap: 8px;
}

.environment-badge {
  width: fit-content;
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0 8px;
  font-size: 0.67rem;
  font-weight: 900;
  letter-spacing: 0.04em;
}

.environment-badge.dev {
  background: rgba(214, 155, 33, 0.18);
  color: #f4c766;
}

.environment-badge.production {
  background: rgba(31, 157, 99, 0.2);
  color: #9ff0c9;
}

.user-menu summary {
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  list-style: none;
}

.user-menu summary::-webkit-details-marker {
  display: none;
}

.user-menu summary b,
.user-menu summary small {
  display: block;
}

.user-menu summary b {
  color: #ffffff;
  font-size: 0.86rem;
}

.user-menu summary small {
  margin-top: 2px;
  color: #aeb5bd;
  font-size: 0.74rem;
}

.user-initial {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--roma-red);
  color: #ffffff;
  font-weight: 900;
}

.user-menu > div {
  display: grid;
  gap: 5px;
  margin-top: 10px;
}

.menu-action,
.quiet-btn {
  min-height: 42px;
  border: 1px solid #d8dde3;
  border-radius: 6px;
  padding: 0 12px;
  background: #ffffff;
  color: #39414a;
  font-weight: 800;
}

.menu-action {
  border-color: rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #d4d9de;
  text-align: left;
}

.menu-action:hover {
  border-color: rgba(255, 255, 255, 0.34);
  color: #ffffff;
}

.topbar {
  min-height: 84px;
  padding: 18px 28px;
  border-bottom-color: #d9dde3;
}

.topbar-actions {
  align-items: center;
}

.section-eyebrow {
  color: var(--roma-red);
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.content {
  max-width: 1640px;
  width: 100%;
  padding: 28px;
}

.control-mode-switcher,
.operator-pending-note,
.executive-note {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px 20px;
  border: 1px solid #d9dde3;
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(215, 25, 32, 0.08), transparent 38%), #ffffff;
}

.control-mode-switcher h2,
.operator-pending-note h2,
.executive-note h2 {
  margin: 4px 0 0;
  color: #1d2329;
  font-size: 1.18rem;
}

.control-mode-switcher p,
.operator-pending-note p,
.executive-note p {
  margin: 5px 0 0;
  color: #68727d;
  line-height: 1.45;
}

.segmented-control {
  display: inline-flex;
  padding: 4px;
  border: 1px solid #d8dde3;
  border-radius: 7px;
  background: #f6f7f8;
}

.segmented-control button {
  min-height: 36px;
  border: 0;
  border-radius: 5px;
  padding: 0 12px;
  background: transparent;
  color: #68727d;
  font-size: 0.82rem;
  font-weight: 850;
}

.segmented-control button.active {
  background: #ffffff;
  color: #1d2329;
  box-shadow: 0 1px 3px rgba(25, 31, 38, 0.12);
}

.executive-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
}

.executive-note span,
.operator-pending-note > strong {
  color: #8f1218;
  font-size: 0.82rem;
  font-weight: 900;
}

.capture-mission {
  margin: -4px 0 18px;
  color: #68727d;
  font-size: 0.88rem;
  line-height: 1.45;
}

.waste-rules {
  margin-top: 10px;
}

.waste-rules summary {
  cursor: pointer;
  color: #8b1017;
  font-size: 0.86rem;
  font-weight: 850;
}

.waste-rules p {
  margin-top: 10px;
}

.capture-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 18px -24px -24px;
  padding: 14px 24px;
  border-top: 1px solid #e0e4e8;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}

.save-capture-btn {
  min-width: min(100%, 280px);
}

@media (max-width: 1180px) {
  .executive-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 980px) {
  .app-shell,
  .sidebar,
  .main,
  .topbar,
  .topbar-module-title,
  .nav-list,
  .user-card {
    min-width: 0;
  }

  .sidebar {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 12px 16px;
  }

  .brand-lockup {
    grid-template-columns: 48px minmax(0, 1fr);
    align-items: center;
  }

  .nav-list {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.48) transparent;
  }

  .nav-list::-webkit-scrollbar { height: 4px; }
  .nav-list::-webkit-scrollbar-track { background: transparent; }
  .nav-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.48); }

  .nav-btn {
    flex: 0 0 164px;
  }

  .nav-secondary {
    flex: 0 0 164px;
  }

  .user-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  .user-menu > div {
    position: absolute;
    right: 16px;
    min-width: 220px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 8px;
    background: #191b1f;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  }

  .capture-history {
    display: none;
  }
}

@media (max-width: 640px) {
  .content {
    padding: 16px;
  }

  .topbar {
    min-height: auto;
    padding: 16px;
  }

  .topbar-actions {
    width: auto;
  }

  .topbar-actions .quiet-btn {
    width: auto;
  }

  .brand-lockup {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .brand-lockup .mir-module-icon--navigation {
    width: 42px;
    height: 42px;
  }

  .topbar-module-title {
    gap: 10px;
  }

  .mir-module-icon--header {
    width: 36px;
    height: 36px;
  }

  .control-mode-switcher,
  .operator-pending-note,
  .executive-note {
    align-items: flex-start;
    flex-direction: column;
  }

  .executive-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .capture-mission {
    font-size: 0.84rem;
  }

  .capture-actions {
    margin: 18px -16px -16px;
    padding: 12px 16px;
  }

  .save-capture-btn {
    width: 100%;
  }
}

/* Pilot daily workflow: responsive rules live after the shared shell overrides. */
@media (max-width: 760px) {
  .daily-hero,
  .daily-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .daily-hero-status {
    justify-items: start;
  }

  .daily-overview-grid,
  .daily-metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .daily-action-buttons {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .daily-overview-grid,
  .daily-metric-grid {
    grid-template-columns: 1fr;
  }

  .daily-service-choice,
  .daily-action-buttons button {
    width: 100%;
  }
}