:root {
  --brand:#013232;
  --brand-2:#064747;
  --accent:#3bb5a6;
  --accent-dark:#2da293;
  --bg:#f5f8f7;
  --panel:#ffffff;
  --text:#123232;
  --muted:#607676;
  --border:rgba(1,50,50,.12);
  --shadow:0 22px 70px rgba(1,50,50,.08);

  --low:#dcefe8;
  --media:#f0e7bd;
  --alta:#f0bf78;
  --muyalta:#e67f65;
  --critica:#99343b;

  --low-text:#245543;
  --media-text:#67581d;
  --alta-text:#66410f;
  --muyalta-text:#653024;
  --critica-text:#fff;
}

* { box-sizing:border-box; }

body {
  margin:0;
  background:
    radial-gradient(circle at top right, rgba(59,181,166,.14), transparent 28%),
    var(--bg);
  color:var(--text);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

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

button, select, input, textarea {
  border:1px solid var(--border);
  border-radius:14px;
}

button { cursor:pointer; }

.hero {
  background:linear-gradient(135deg, var(--brand), var(--brand-2));
  color:#fff;
  padding:34px 42px 38px;
}

.hero-inner {
  max-width:1500px;
  margin:0 auto;
}

.eyebrow,
.section-kicker {
  margin:0 0 8px;
  text-transform:uppercase;
  letter-spacing:.18em;
  font-size:.72rem;
  font-weight:900;
  color:rgba(255,255,255,.7);
}

.eyebrow.dark,
.section-kicker {
  color:var(--accent-dark);
}

h1 {
  margin:0 0 10px;
  font-size:clamp(2.2rem, 4.5vw, 4.9rem);
  line-height:.92;
  letter-spacing:-.05em;
}

.subtitle {
  margin:0;
  color:rgba(255,255,255,.76);
  font-size:1.05rem;
}

.app-shell {
  max-width:1500px;
  margin:0 auto;
  padding:28px 42px 52px;
  display:grid;
  grid-template-columns:minmax(0, 1fr) 330px;
  gap:24px;
  align-items:start;
}

.main-panel,
.panel {
  background:rgba(255,255,255,.94);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
}

.main-panel {
  border-radius:30px;
  padding:28px;
  min-width:0;
}

.side-panel {
  display:flex;
  flex-direction:column;
  gap:16px;
}

.panel {
  border-radius:22px;
  padding:20px;
}

.panel h3 {
  margin:0 0 8px;
  font-size:1.05rem;
}

.muted {
  color:var(--muted);
  line-height:1.55;
  margin:0;
}

.small {
  font-size:.84rem;
  margin:8px 0 14px;
}

.period-bar {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}

.period-bar h2 {
  margin:0;
  font-size:clamp(2rem, 4vw, 4.1rem);
  letter-spacing:-.055em;
  color:var(--brand);
}

.period-controls {
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:10px;
}

.period-controls label {
  display:flex;
  flex-direction:column;
  gap:5px;
  color:var(--muted);
  font-size:.78rem;
  font-weight:800;
}

.control-group {
  display:flex;
  align-items:end;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.hidden {
  display:none !important;
}

select,
input,
textarea {
  padding:11px 12px;
  background:#fff;
  color:var(--text);
}

.icon-btn,
.ghost-btn,
.secondary-btn,
.outline-btn {
  background:#fff;
  color:var(--brand);
  font-weight:900;
}

.icon-btn {
  width:42px;
  height:42px;
  border-radius:50%;
}

.ghost-btn {
  padding:10px 15px;
  border-radius:999px;
}

.full-btn {
  width:100%;
  border:0;
  background:var(--accent);
  color:#fff;
  font-weight:900;
  padding:13px 18px;
  border-radius:999px;
  box-shadow:0 14px 34px rgba(59,181,166,.24);
  margin-bottom:10px;
}

.full-btn:hover {
  background:var(--accent-dark);
}

.outline-btn {
  width:100%;
  padding:12px 16px;
  border-radius:999px;
}

.secondary-btn {
  width:100%;
  padding:12px 14px;
  margin:12px 0 10px;
}

.score-summary {
  display:grid;
  grid-template-columns:260px 1fr;
  gap:14px;
  margin-bottom:24px;
}

.period-score-card,
.distribution-card {
  border:1px solid var(--border);
  border-radius:24px;
  background:linear-gradient(180deg, #fff, #f8fbfa);
  padding:20px;
}

.period-score-card {
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.period-score-card .score-label {
  color:var(--muted);
  font-weight:800;
  font-size:.86rem;
}

.period-score-card strong {
  display:block;
  font-size:4.8rem;
  line-height:.9;
  letter-spacing:-.08em;
  color:var(--brand);
}

.period-score-card small {
  color:var(--muted);
}

.distribution-head {
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  margin-bottom:16px;
}

.distribution-head strong {
  color:var(--brand);
}

.distribution-head small {
  color:var(--muted);
}

.distribution-bars {
  display:flex;
  overflow:hidden;
  border-radius:999px;
  height:18px;
  margin-bottom:16px;
  border:1px solid rgba(1,50,50,.08);
  background:#edf4f2;
}

.distribution-segment.low { background:var(--low); }
.distribution-segment.media { background:var(--media); }
.distribution-segment.alta { background:var(--alta); }
.distribution-segment.muyalta { background:var(--muyalta); }
.distribution-segment.critica { background:var(--critica); }

.category-counts {
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  gap:8px;
}

.category-pill {
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px 9px;
  background:#fff;
}

.category-pill strong {
  display:block;
  font-size:1.35rem;
  color:var(--brand);
}

.category-pill span {
  font-size:.78rem;
  color:var(--muted);
}

.category-pill {
  position:relative;
  overflow:hidden;
}

.category-pill strong,
.category-pill span {
  color: var(--brand);
}

.category-pill.low {
  background: color-mix(in srgb, var(--low) 65%, white);
}

.category-pill.media {
  background: color-mix(in srgb, var(--media) 65%, white);
}

.category-pill.alta {
  background: color-mix(in srgb, var(--alta) 65%, white);
}

.category-pill.muyalta {
  background: color-mix(in srgb, var(--muyalta) 70%, white);
}

.category-pill.critica {
  background: color-mix(in srgb, var(--critica) 70%, white);
}
.calendar-area {
  border-top:1px solid var(--border);
  padding-top:22px;
}

.calendar-topline {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:14px;
}

.calendar-topline h3 {
  margin:0;
  font-size:1.4rem;
  color:var(--brand);
}

.calendar-header,
.calendar-grid.month-grid {
  display:grid;
  grid-template-columns:repeat(7, minmax(90px, 1fr));
}

.calendar-header {
  background:var(--brand);
  color:#fff;
  border-radius:18px 18px 0 0;
  overflow:hidden;
}

.calendar-header div {
  text-align:center;
  font-size:.75rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:12px 8px;
}

.calendar-grid {
  background:#fff;
}

.calendar-grid.month-grid {
  border-left:1px solid var(--border);
  border-bottom:1px solid var(--border);
  border-radius:0 0 22px 22px;
  overflow:hidden;
}

.calendar-grid.range-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(112px, 1fr));
  gap:10px;
  background:transparent;
}

.day {
  min-height:184px;
  border:0;
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:12px;
  text-align:left;
  position:relative;
  transition:transform .16s ease, box-shadow .16s ease;
  color:var(--text);
}

.range-grid .day {
  border:1px solid var(--border);
  border-radius:18px;
  min-height:176px;
}

.day:hover {
  transform:translateY(-2px);
  z-index:3;
  box-shadow:0 16px 40px rgba(1,50,50,.14);
}

.month-grid .day:nth-child(7n) {
  border-right:0;
}

.day.blank {
  background:#f2f5f4;
  cursor:default;
}

.day.blank:hover {
  transform:none;
  box-shadow:none;
}

.day-date {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:8px;
}

.day-number {
  font-size:1.22rem;
  font-weight:950;
  opacity:.95;
}

.day-month {
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-weight:900;
  opacity:.68;
  margin-left:4px;
}

.signal-dot {
  width:8px;
  height:8px;
  border-radius:50%;
  background:currentColor;
  opacity:.65;
  margin-top:6px;
}

.score-wrap {
  margin-top:13px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:8px;
}

.score-value {
  font-size:2.45rem;
  line-height:.86;
  font-weight:950;
  letter-spacing:-.08em;
}

.score-level {
  text-align:right;
  font-size:.64rem;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:3px;
}

.revenue-mini,
.revenue-table {
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:6px 8px;
}

.revenue-mini {
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.36);
}

.metric-item span {
  display:block;
  font-size:.54rem;
  line-height:1.1;
  font-weight:950;
  text-transform:uppercase;
  letter-spacing:.06em;
  opacity:.68;
  white-space:nowrap;
}

.metric-item strong {
  display:block;
  font-size:.78rem;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.02em;
  white-space:nowrap;
}

.revenue-table {
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  background:#f8fbfa;
}

.revenue-table .metric-item {
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
}

.revenue-table .metric-item span {
  color:var(--muted);
  opacity:1;
  font-size:.72rem;
}

.revenue-table .metric-item strong {
  color:var(--brand);
  font-size:1.1rem;
}

.day.low { background:var(--low); color:var(--low-text); }
.day.media { background:var(--media); color:var(--media-text); }
.day.alta { background:var(--alta); color:var(--alta-text); }
.day.muyalta { background:var(--muyalta); color:var(--muyalta-text); }
.day.critica { background:var(--critica); color:var(--critica-text); }

details summary {
  cursor:pointer;
  color:var(--brand);
  font-weight:950;
}

.toggle {
  display:block;
  padding:8px 0;
  color:var(--muted);
}

.toggle input {
  margin-right:8px;
}

.import-box {
  display:flex;
  flex-direction:column;
  gap:8px;
  color:var(--muted);
  font-size:.88rem;
  font-weight:800;
}

.modal {
  position:fixed;
  inset:0;
  background:rgba(1,32,32,.58);
  z-index:40;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
}

.modal.show {
  display:flex;
}

.modal-card {
  width:min(760px, 100%);
  max-height:90vh;
  overflow:auto;
  background:#fff;
  border-radius:28px;
  padding:28px;
  position:relative;
  box-shadow:0 32px 90px rgba(0,0,0,.26);
}

.form-card {
  width:min(560px, 100%);
}

.close {
  position:absolute;
  top:18px;
  right:18px;
  width:42px;
  height:42px;
  border:0;
  background:#f0f5f4;
  color:var(--brand);
  border-radius:50%;
  font-size:1.5rem;
  line-height:1;
  font-weight:500;
}

.modal-card h2 {
  margin:0 44px 16px 0;
  color:var(--brand);
  font-size:1.9rem;
  letter-spacing:-.035em;
}

.compact-score {
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin:18px 0 22px;
}

.compact-score div {
  border:1px solid var(--border);
  background:#f8fbfa;
  border-radius:18px;
  padding:16px;
}

.compact-score span {
  display:block;
  color:var(--muted);
  font-size:.82rem;
  font-weight:800;
}

.compact-score strong {
  color:var(--brand);
  font-size:2.1rem;
  line-height:1;
}

.detail-section {
  margin-top:22px;
}

.detail-section h3 {
  margin:0 0 12px;
  color:var(--brand);
}

.indicator-table {
  border:1px solid var(--border);
  border-radius:18px;
  overflow:hidden;
}

.indicator-row {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:12px;
  padding:13px 15px;
  border-bottom:1px solid var(--border);
  align-items:center;
}

.indicator-row:last-child {
  border-bottom:0;
}

.indicator-name {
  color:var(--muted);
  font-weight:800;
}

.indicator-value {
  color:var(--brand);
  font-weight:900;
}

.level-badge {
  display:inline-flex;
  border-radius:999px;
  padding:5px 10px;
  font-size:.8rem;
  font-weight:900;
  background:#eef7f6;
  color:var(--brand);
}

.own-event-card,
.bi-score-card {
  border:1px solid var(--border);
  border-radius:18px;
  padding:14px;
  margin-bottom:10px;
  background:#f8fbfa;
}

.own-event-card strong,
.bi-score-card strong {
  color:var(--brand);
}

.delete-btn {
  margin-top:10px;
  border:0;
  background:#f0f5f4;
  color:var(--brand);
  font-weight:800;
  padding:8px 12px;
  border-radius:999px;
}

.event-form {
  display:flex;
  flex-direction:column;
  gap:14px;
}

.event-form label {
  display:flex;
  flex-direction:column;
  gap:7px;
  color:var(--muted);
  font-size:.88rem;
  font-weight:800;
}

textarea {
  min-height:86px;
  resize:vertical;
}

.expert-only {
  border-top:1px solid var(--border);
  padding-top:18px;
}

.calibration-list {
  padding-left:20px;
  color:var(--text);
  line-height:1.65;
}

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

  .side-panel {
    order:-1;
  }
}

@media (max-width:820px) {
  .hero {
    padding:28px 20px;
  }

  .app-shell {
    padding:20px;
  }

  .main-panel {
    padding:20px;
    border-radius:24px;
  }

  .period-bar {
    flex-direction:column;
  }

  .period-controls {
    align-items:stretch;
    width:100%;
  }

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

  .score-summary {
    grid-template-columns:1fr;
  }

  .category-counts {
    grid-template-columns:repeat(2, 1fr);
  }

  .calendar-header,
  .calendar-grid.month-grid {
    grid-template-columns:repeat(7, minmax(42px, 1fr));
  }

  .calendar-header div {
    font-size:.62rem;
    padding:9px 4px;
  }

  .day {
    min-height:98px;
    padding:7px;
  }

  .day-number {
    font-size:.86rem;
  }

  .day-month {
    display:none;
  }

  .score-wrap {
    margin-top:13px;
  }

  .score-value {
    font-size:1.65rem;
  }

  .score-level,
  .revenue-mini {
    display:none;
  }

  .indicator-row {
    grid-template-columns:1fr;
    gap:4px;
  }

  .compact-score {
    grid-template-columns:1fr;
  }
}
.app-footer {
  margin-top: 32px;
  padding: 18px 24px 24px;
  text-align: center;
  font-size: 13px;
}

.app-footer p {
  margin: 0;
  font-size: inherit;
  line-height: 1.6;
}

.app-footer a {
  font-size: inherit;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}

.app-footer a:hover {
  text-decoration: none;
  opacity: 0.75;
}