:root {
      --ink: #17202a;
      --muted: #647184;
      --line: #dbe2ea;
      --surface: #ffffff;
      --soft: #f5f7fa;
      --navy: #21384f;
      --teal: #0f8b8d;
      --green: #2e7d54;
      --yellow: #b7791f;
      --red: #bd3b3b;
      --blue: #2f6f9f;
      --shadow: 0 18px 45px rgba(23, 32, 42, 0.12);
      --radius: 8px;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      min-height: 100vh;
      font-family: Inter, "Segoe UI", Arial, sans-serif;
      color: var(--ink);
      background: #eef2f5;
      letter-spacing: 0;
    }

    button, input, select {
      font: inherit;
    }

    button {
      border: 0;
      cursor: pointer;
      border-radius: var(--radius);
      font-weight: 700;
    }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 280px 1fr;
    }

    .sidebar {
      background: var(--navy);
      color: white;
      padding: 24px 18px;
      display: flex;
      flex-direction: column;
      gap: 18px;
    }

    .brand {
      padding: 6px 6px 18px;
      border-bottom: 1px solid rgba(255,255,255,0.18);
    }

    .brand strong {
      display: block;
      font-size: 1.2rem;
      margin-bottom: 6px;
    }

    .brand span {
      color: rgba(255,255,255,0.72);
      font-size: 0.9rem;
    }

    .clinic-panel {
      background: rgba(255,255,255,0.09);
      border: 1px solid rgba(255,255,255,0.14);
      border-radius: var(--radius);
      padding: 14px;
    }

    .clinic-panel small {
      display: block;
      color: rgba(255,255,255,0.7);
      margin-bottom: 6px;
    }

    .clinic-code {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      background: rgba(255,255,255,0.15);
      border-radius: var(--radius);
      font-family: Consolas, monospace;
      font-weight: 800;
      margin-top: 10px;
    }

    .nav {
      display: grid;
      gap: 6px;
    }

    .nav button {
      display: flex;
      align-items: center;
      gap: 10px;
      width: 100%;
      padding: 11px 12px;
      color: rgba(255,255,255,0.78);
      background: transparent;
      text-align: left;
      border: 1px solid transparent;
    }

    .nav button.active,
    .nav button:hover {
      background: rgba(255,255,255,0.12);
      color: white;
      border-color: rgba(255,255,255,0.16);
    }

    .sidebar-actions {
      margin-top: auto;
      display: grid;
      gap: 8px;
    }

    .ghost-btn {
      color: white;
      background: rgba(255,255,255,0.12);
      padding: 11px 12px;
    }

    .main {
      padding: 26px;
      overflow: auto;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 22px;
    }

    .topbar h1 {
      margin: 0 0 5px;
      font-size: clamp(1.6rem, 3vw, 2.1rem);
      line-height: 1.1;
    }

    .topbar p {
      margin: 0;
      color: var(--muted);
    }

    .primary-btn {
      background: var(--teal);
      color: white;
      padding: 12px 16px;
      box-shadow: 0 9px 22px rgba(15, 139, 141, 0.2);
      white-space: nowrap;
    }

    .secondary-btn {
      background: #e8eef4;
      color: var(--navy);
      padding: 11px 14px;
      white-space: nowrap;
    }

    .view { display: none; }
    .view.active { display: block; }

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

    .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: 0 1px 0 rgba(23, 32, 42, 0.03);
    }

    .card.pad { padding: 18px; }

    .metric-card {
      min-height: 146px;
      display: grid;
      gap: 10px;
      align-content: start;
      padding: 16px;
      border-top: 4px solid var(--blue);
    }

    .metric-card.bad { border-top-color: var(--red); }
    .metric-card.ok { border-top-color: var(--yellow); }
    .metric-card.good { border-top-color: var(--green); }
    .metric-card.great { border-top-color: var(--teal); }

    .metric-label {
      color: var(--muted);
      font-size: 0.88rem;
      font-weight: 700;
      text-transform: uppercase;
    }

    .metric-value {
      font-size: clamp(1.35rem, 3vw, 2rem);
      font-weight: 850;
      line-height: 1;
    }

    .metric-note {
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.35;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      width: fit-content;
      border-radius: 999px;
      padding: 5px 9px;
      font-weight: 800;
      font-size: 0.78rem;
    }

    .badge.bad { color: #7d2020; background: #ffe4e4; }
    .badge.ok { color: #744b0f; background: #fff1ce; }
    .badge.good { color: #1f5d3e; background: #dcf5e7; }
    .badge.great { color: #076668; background: #d9f5f2; }
    .badge.info { color: #214f74; background: #e1eef8; }

    .form-card {
      padding: 18px;
    }

    .form-card h2,
    .card h2 {
      margin: 0 0 12px;
      font-size: 1.15rem;
    }

    .form-card p {
      margin: 0 0 18px;
      color: var(--muted);
      line-height: 1.45;
    }

    .field {
      display: grid;
      gap: 7px;
      margin-bottom: 14px;
    }

    .field label {
      font-size: 0.92rem;
      font-weight: 750;
    }

    .field input,
    .field select {
      width: 100%;
      border: 1px solid var(--line);
      background: white;
      padding: 11px 12px;
      border-radius: var(--radius);
      color: var(--ink);
    }

    .field input:focus,
    .field select:focus {
      outline: 3px solid rgba(15,139,141,0.14);
      border-color: var(--teal);
    }

    .hint {
      color: var(--muted);
      font-size: 0.84rem;
      line-height: 1.35;
    }

    .period-strip {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      margin-bottom: 16px;
    }

    .period-card {
      background: white;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 14px;
      min-height: 112px;
    }

    .period-card strong {
      display: block;
      margin-bottom: 7px;
      color: var(--navy);
    }

    .period-card p {
      margin: 0;
      color: var(--muted);
      font-size: 0.92rem;
      line-height: 1.42;
    }

    .trend-panel {
      margin-top: 16px;
      padding: 18px;
      overflow-x: auto;
    }

    .trend-bars {
      display: grid;
      grid-template-columns: repeat(12, minmax(74px, 1fr));
      gap: 10px;
      align-items: end;
      min-height: 210px;
      padding-top: 12px;
    }

    .trend-bar {
      display: grid;
      gap: 8px;
      align-items: end;
      text-align: center;
      color: var(--muted);
      font-size: 0.8rem;
      min-width: 0;
    }

    .trend-bar span {
      display: block;
      background: var(--teal);
      border-radius: 6px 6px 0 0;
      min-height: 8px;
    }

    .trend-bar strong {
      color: var(--ink);
      font-size: 0.82rem;
      overflow-wrap: anywhere;
    }

    .month-input {
      min-width: 118px;
    }

    .table-wrap {
      overflow-x: auto;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      background: white;
      border-radius: var(--radius);
      overflow: hidden;
    }

    th, td {
      padding: 13px 14px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      vertical-align: top;
    }

    th {
      color: var(--muted);
      background: #f7f9fb;
      font-size: 0.82rem;
      text-transform: uppercase;
    }

    tr:last-child td { border-bottom: 0; }

    .diagnosis-list {
      display: grid;
      gap: 12px;
    }

    .diagnosis {
      border-left: 4px solid var(--blue);
      background: white;
      padding: 15px;
      border-radius: var(--radius);
      border-top: 1px solid var(--line);
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }

    .diagnosis.bad { border-left-color: var(--red); }
    .diagnosis.ok { border-left-color: var(--yellow); }
    .diagnosis.good { border-left-color: var(--green); }
    .diagnosis.great { border-left-color: var(--teal); }

    .diagnosis strong {
      display: block;
      margin-bottom: 6px;
    }

    .diagnosis p {
      margin: 0;
      color: var(--muted);
      line-height: 1.45;
    }

    .login-screen {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 22px;
      background:
        linear-gradient(rgba(33, 56, 79, 0.86), rgba(33, 56, 79, 0.86)),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='760' viewBox='0 0 1200 760'%3E%3Crect width='1200' height='760' fill='%23eff5f4'/%3E%3Cg fill='none' stroke='%230f8b8d' stroke-opacity='.25' stroke-width='2'%3E%3Cpath d='M110 620 C240 450 330 500 430 320 S690 160 840 240 S1030 330 1110 150'/%3E%3Cpath d='M80 230 C210 250 260 110 390 140 S560 300 710 210 S940 90 1120 270'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='.72'%3E%3Crect x='120' y='120' width='210' height='120' rx='8'/%3E%3Crect x='390' y='170' width='270' height='150' rx='8'/%3E%3Crect x='720' y='120' width='310' height='190' rx='8'/%3E%3Crect x='180' y='390' width='280' height='170' rx='8'/%3E%3Crect x='560' y='430' width='360' height='140' rx='8'/%3E%3C/g%3E%3C/svg%3E");
      background-size: cover;
      background-position: center;
    }

    .login-card {
      width: min(940px, 100%);
      display: grid;
      grid-template-columns: 1fr 1fr;
      background: white;
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: var(--shadow);
    }

    .login-copy {
      padding: 34px;
      background: #f7fafb;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 14px;
    }

    .login-copy h1 {
      margin: 0;
      font-size: clamp(2rem, 5vw, 3.1rem);
      line-height: 1;
      color: var(--navy);
    }

    .login-copy p {
      margin: 0;
      color: var(--muted);
      line-height: 1.5;
      font-size: 1.05rem;
    }

    .login-form {
      padding: 34px;
      display: grid;
      align-content: center;
      gap: 18px;
    }

    .login-form h2 {
      margin: 0;
      color: var(--navy);
    }

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

    .empty-state {
      padding: 22px;
      text-align: center;
      color: var(--muted);
      background: white;
      border: 1px dashed var(--line);
      border-radius: var(--radius);
    }

    .print-only { display: none; }

    @media (max-width: 920px) {
      .app-shell { grid-template-columns: 1fr; }
      .sidebar { position: static; }
      .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .login-card { grid-template-columns: 1fr; }
    }

    @media print {
      body { background: white; }
      .sidebar, .topbar .split-actions, .login-screen { display: none !important; }
      .app-shell { display: block; }
      .main { padding: 0; }
      .view { display: block !important; page-break-after: always; }
      .card, .metric-card, .diagnosis { box-shadow: none; break-inside: avoid; }
      .print-only { display: block; }
    }

    /* =========================================
   ESTILOS PARA BUSCADORES Y DROPDOWNS
   ========================================= */
.searchable-dropdown { 
  position: relative; 
  margin-top: 8px; 
}
.searchable-dropdown input { 
  width: 100%; 
  padding: 9px 12px; 
  border-radius: var(--radius); 
  border: 1px solid rgba(255,255,255,0.2); 
  background: rgba(255,255,255,0.15); 
  color: white; 
  font-weight: bold; 
}
.searchable-dropdown input::placeholder { 
  color: rgba(255,255,255,0.6); 
  font-weight: normal; 
}
.searchable-dropdown input:focus { 
  background: white; 
  color: var(--ink); 
  outline: none; 
}
.dropdown-list { 
  position: absolute; 
  top: 100%; 
  left: 0; 
  right: 0; 
  background: white; 
  border-radius: var(--radius); 
  box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Sombra más elegante */
  border: 1px solid var(--line);
  max-height: 260px; 
  overflow-y: auto; 
  z-index: 999; 
  display: none; 
  margin-top: 8px; 
}

/* =========================================
   DROPDOWN DE BÚSQUEDA POLISHED (GHL STYLE)
   ========================================= */

/* Contenedor principal de la lista */
.dropdown-list { 
  position: absolute; 
  top: 100%; 
  left: 0; 
  right: 0; 
  background: white; /* Mantenemos blanco para contraste interno, o cámbialo a #1a2a3a para full dark */
  border-radius: var(--radius); 
  box-shadow: 0 10px 30px rgba(0,0,0,0.3); /* Sombra más profunda y elegante */
  border: 1px solid var(--line); /* */
  max-height: 280px; 
  overflow-y: auto; 
  z-index: 999; 
  display: none; 
  margin-top: 8px; 
  overflow-x: hidden;
}

/* Estilo para el scrollbar (barra de desplazamiento) */
.dropdown-list::-webkit-scrollbar {
  width: 7px;
}
.dropdown-list::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 10px;
}

/* CADA ELEMENTO DE LA LISTA (div) */
.dropdown-list div { 
  padding: 14px 16px; /* Más espacio para respirar */
  color: var(--navy); /* */
  cursor: pointer; 
  border-bottom: 1px solid #f1f5f9; /* Línea divisoria suave */
  font-size: 0.9rem;
  font-weight: 500;
  display: flex; /* Alineación para iconos y texto */
  align-items: center;
  gap: 12px;
  transition: all 0.2s ease; /* Transición suave para todos los efectos */
  position: relative;
}

/* Quitar la línea al último elemento */
.dropdown-list div:last-child { border-bottom: none; }

/* 1. EFECTO HOVER: Resalta al pasar el mouse (Style GHL) */
.dropdown-list div:hover { 
  background: #f0f7f7; /* Un fondo cyan muy clarito */
  color: var(--teal); /* */
  padding-left: 20px; /* Efecto de desplazamiento sutil */
}

/* 2. ESTADO SELECCIONADO: La clínica activa */
.dropdown-list div.active {
  background-color: var(--navy); /* Fondo azul oscuro */
  color: white;
  font-weight: 700;
}

/* El icono pequeño de la clínica (Style GHL) */
.clinic-icon {
  font-size: 1.1rem;
  color: var(--muted); /* */
}

/* Ajuste de icono cuando el elemento está activo */
.dropdown-list div.active .clinic-icon {
  color: rgba(255,255,255,0.7);
}

/* El checkmark que aparece solo cuando está seleccionado */
.dropdown-list div.active::after {
  content: "✓";
  position: absolute;
  right: 16px;
  color: var(--teal); /* */
  font-weight: bold;
}

.searchable-dropdown { position: relative; }
.clinic-search-icon {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255,255,255,0.5);
  font-size: 0.9rem;
  pointer-events: none; /* No interfiere con el clic del input */
}