:root {
  --entel-blue: #005cff;
  --entel-orange: #ff3d00;
  --entel-dark-blue: #10069f;
  --entel-turquoise: #42e8b4;
}
      body {
        font-family:
          system-ui,
          -apple-system,
          BlinkMacSystemFont,
          "Segoe UI",
          Roboto,
          Helvetica,
          Arial,
          sans-serif;
        margin: 0;
        padding: 20px;
        background-color: #f0f2f5;
        color: #1c1e21;
      }
      .main-container {
        max-width: 1400px;
        margin: auto;
      }
      h1,
      h2,
      h3 {
        color: #0d2c54;
        text-align: center;
      }
      h1 {
        border-bottom: 3px solid #007bff;
        padding-bottom: 15px;
        margin-bottom: 20px;
      }
      h2 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
      }
      .container {
        background-color: #fff;
        padding: 25px;
        border-radius: 10px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        margin-bottom: 25px;
      }
      .controls-container {
        display: flex;
        gap: 15px;
        align-items: center;
        flex-wrap: wrap;
        margin-bottom: 10px;
      }
      select,
      .custom-file-upload {
        padding: 10px 15px;
        border: 1px solid #ccc;
        border-radius: 5px;
        background-color: white;
        font-size: 16px;
      }
      input[type="file"] {
        display: none;
      }
      .custom-file-upload {
        border-color: var(--entel-blue);
        background-color: var(--entel-blue);
        color: white;
        cursor: pointer;
      }

      .provider-tabs-container {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        border-bottom: 2px solid #007bff;
      }
      .provider-tab {
  padding: 14px 22px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  background-color: transparent;
  color: #495057; /* <-- GRIS MÁS OSCURO Y LEGIBLE */
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.2s ease-in-out;
  border-bottom: 3px solid transparent;
}
      .provider-tab.active {
        color: var(--entel-blue);
        background-color: #fff;
        border: 2px solid var(--entel-blue);
        border-bottom: 3px solid #fff;
      }
      .provider-tab:disabled {
        background-color: #f8f9fa;
        cursor: not-allowed;
      }

      .product-tabs-container {
        display: flex;
        gap: 5px;
        margin-bottom: 25px;
        border-bottom: 1px solid #dee2e6;
      }
      .product-tab-button {
        padding: 12px 20px;
        font-size: 16px;
        font-weight: 600;
        border: none;
        background-color: #e9ecef;
        color: #495057;
        cursor: pointer;
        border-radius: 8px 8px 0 0;
        transition: all 0.2s ease-in-out;
      }
      .product-tab-button.active {
        background-color: var(--entel-turquoise);
        color: white;
      }
      .product-tab-button:disabled {
        background-color: #f8f9fa;
        cursor: not-allowed;
      }

      .dashboard-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 25px;
      }
      .full-width {
        grid-column: 1 / -1;
      }
.grid-3-col {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: 25px;
  align-items: center; /* <-- El cambio clave es 'center' */
}
      .comparison-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 25px;
      }

      .kpi-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 20px;
      }
      .kpi-card {
        text-align: center;
        padding: 20px;
        position: relative;
      }
      .kpi-card .value {
        font-size: 2.8em;
        font-weight: bold;
        color: var(--entel-blue);
      }
      .kpi-card .label {
  font-size: 1.1em;
  color: #495057; /* <-- GRIS MÁS OSCURO Y LEGIBLE */
  margin-top: 5px;
}
      .kpi-card .comparison {
        font-size: 1em;
        font-weight: 500;
        margin-top: 8px;
      }
      .kpi-card .comparison.good {
        color: var(--entel-blue);
      }
      .kpi-card .comparison.bad {
        color: var(--entel-orange);
      }

      table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 10px;
      }
      th,
      td {
        padding: 12px;
        border-bottom: 1px solid #dee2e6;
        text-align: left;
      }
      th {
        background-color: #e9ecef;
        font-weight: 600;
      }
      #lowEpaTable th {
        cursor: pointer;
      }
      #lowEpaTable th:hover {
        background-color: #d1eaff;
      }

      #agentGoalTable td[data-status] {
        cursor: pointer;
        font-weight: bold;
        color: #0056b3;
      }
      #agentGoalTable td[data-status]:hover {
        background-color: #e9f5ff;
      }

      /* Conditional Formatting Styles */
      .nota-critica {
        background-color: #ffd4cc;
        font-weight: bold;
      }
      .nota-baja {
        background-color: #ffecb3;
      }
      .tiempo-alto {
        background-color: #ffecb3;
        font-weight: bold;
      }
      .promedio-agente-bajo {
        color: var(--entel-orange);
        font-weight: bold;
      }
      .promedio-agente-alto {
        color: var(--entel-blue);
      }

      #lowEpaTable th {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 1;
      }

      .chart-container {
        position: relative;
      }
      .chart-container .interactive-chart {
        cursor: pointer;
      }

      .chart-tooltip {
        display: none;
        position: absolute;
        top: 10px;
        right: 10px;
        background-color: rgba(0, 0, 0, 0.85);
        color: white;
        padding: 10px 15px;
        border-radius: 5px;
        font-size: 0.9em;
        z-index: 10;
        max-width: 320px;
        pointer-events: none;
        line-height: 1.5;
      }
      .chart-tooltip.visible {
        display: block;
        pointer-events: auto;
      }

      .help-toggle {
        display: inline-block;
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        border-radius: 50%;
        background-color: var(--entel-blue);
        color: white;
        font-weight: bold;
        cursor: pointer;
        font-size: 14px;
        margin-left: 8px;
        vertical-align: middle;
        -webkit-user-select: none;
        -ms-user-select: none;
        user-select: none;
      }

      .export-buttons {
        display: flex;
        gap: 10px;
        margin-bottom: 15px;
      }
      .export-btn {
        padding: 8px 12px;
        font-size: 14px;
        font-weight: 500;
        border: 1px solid #007bff;
        background-color: #e9f5ff;
        color: #007bff;
        cursor: pointer;
        border-radius: 5px;
      }
      .export-btn:hover {
        background-color: #d1eaff;
      }
      .hidden {
        display: none;
      }

      .modal {
        display: none;
        position: fixed;
        z-index: 2000;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: rgba(0, 0, 0, 0.6);
      }
      .modal-content {
        background-color: #fefefe;
        margin: 10% auto;
        padding: 20px;
        border: 1px solid #888;
        width: 80%;
        max-width: 700px;
        border-radius: 10px;
        position: relative;
      }
      .modal-close {
        color: #aaa;
        float: right;
        font-size: 28px;
        font-weight: bold;
        position: absolute;
        top: 10px;
        right: 25px;
      }
      .modal-close:hover,
      .modal-close:focus {
        color: black;
        text-decoration: none;
        cursor: pointer;
      }
      .modal-table-container {
        max-height: 400px;
        overflow-y: auto;
        margin-top: 15px;
      }

      .chart-view-toggle {
        margin-left: 20px;
        display: inline-flex;
        border: 1px solid #007bff;
        border-radius: 5px;
        overflow: hidden;
      }
      .view-btn {
        padding: 5px 12px;
        font-size: 14px;
        border: none;
        background-color: #e9f5ff;
        color: #007bff;
        cursor: pointer;
        font-weight: 500;
      }
      .view-btn.active {
        background-color: #007bff;
        color: white;
      }
	   #reiterated-product-chart-container > .chart-container {
        min-width: 0;
      }