/* Estilos Generales y Responsivos */
body {
    background-color: #f8f9fa;
    padding-top: 0; /* Ajustar si la altura del navbar cambia */
}

.card {
    border: none;
    border-radius: 0.5rem;
}

.table-responsive {
    max-height: 75vh;
    border: 1px solid #dee2e6;
    border-radius: 0.25rem;
    overflow-x: auto;
}

#resultsTable thead {
    position: sticky;
    top: 0;
    z-index: 1;
}

#resultsTable th,
#resultsTable td {
    white-space: nowrap;
    padding: 0.5rem;
    font-size: 0.875rem;
    vertical-align: middle;
}

.month-header {
    min-width: 65px;
    text-align: right;
    font-size: 0.8rem;
}

td.text-end { text-align: right !important; }
td.keyword-cell { white-space: normal; min-width: 150px; max-width: 250px; font-weight: 500; }
td.intent-cell { text-align: center; min-width: 120px; }

/* Contenedor de Sugerencias de Ubicación */
.suggestions-dropdown {
    position: absolute; top: 100%; left: 0; right: 0; z-index: 1050;
    max-height: 200px; overflow-y: auto; display: none; border: 1px solid #ced4da;
    border-top: none; border-bottom-left-radius: 0.25rem; border-bottom-right-radius: 0.25rem;
    background-color: white;
}
.suggestions-dropdown .list-group-item { cursor: pointer; padding: 0.5rem 0.75rem; font-size: 0.9rem; border: none; border-bottom: 1px solid #eee; }
.suggestions-dropdown .list-group-item:last-child { border-bottom: none; }
.suggestions-dropdown .list-group-item:hover,
.suggestions-dropdown .list-group-item.active { background-color: #e9ecef; }

/* Estado de Autenticación API y Modo Sandbox en Botón Dropdown */
#apiAuthStatus .dropdown-toggle::after { display: none; }
#apiAuthStatus .btn { padding: 0.375rem 0.75rem; }
#apiAuthStatus .btn.sandbox-active-btn { border-color: #0dcaf0; color: #0dcaf0; } /* Ciano para botón Sandbox */
#apiAuthStatus .dropdown-item i.fa-toggle-on { color: var(--bs-info); } /* Icono On Sandbox */
#apiAuthStatus .dropdown-item i.fa-toggle-off { color: var(--bs-secondary); } /* Icono Off Sandbox */


/* Badges Keyword Difficulty (KD) */
.kd-badge { padding: 0.3em 0.6em; font-size: 0.78em; font-weight: 600; }
.kd-very-low  { background-color: #d1e7dd; color: #0f5132; border: 1px solid #badbcc; }
.kd-low       { background-color: #cff4fc; color: #055160; border: 1px solid #b6effb; }
.kd-medium    { background-color: #fff3cd; color: #664d03; border: 1px solid #ffecb5; }
.kd-high      { background-color: #ffe6d0; color: #843d0c; border: 1px solid #ffd9b8; }
.kd-very-high { background-color: #f8d7da; color: #842029; border: 1px solid #f5c2c7; }

/* Estilo Resaltado para Average KD */
#averageDifficultyBadge {
    font-size: 0.9em; /* Más grande */
    padding: 0.45em 0.8em; /* Más padding */
    font-weight: 700; /* Más negrita */
    vertical-align: middle;
    margin-left: 0.5rem; /* Espacio a la izquierda */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    border: 1px solid rgba(0,0,0,0.2);
    color: #0d6efd; /* Color del texto */
    /* El color de fondo se aplica dinámicamente en JS */
}

/* Badges/Texto Intención */
.intent-icon { margin-right: 0.3rem; width: 1em; }
.intent-commercial    { color: #0d6efd; }
.intent-transactional { color: #dc3545; }
.intent-informational { color: #198754; }
.intent-navigational  { color: #fd7e14; }
.intent-unknown       { color: #6c757d; font-style: italic; }

/* Switch Sandbox más grande en Navbar */
#sandboxToggleContainer .form-switch-lg { padding-left: 4.2em; display: flex; align-items: center; }
#sandboxToggleContainer .form-switch-lg .form-check-input { height: 1.8em; width: 3.6em; cursor: pointer; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23adb5bd'/%3e%3c/svg%3e"); background-position: left center; transition: background-position 0.15s ease-in-out, background-color 0.2s ease-in-out; margin-top: 0; }
#sandboxToggleContainer .form-switch-lg .form-check-input:checked { background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
#sandboxToggleContainer .form-switch-lg .form-check-label { padding-left: 0.5em; font-weight: 500; transition: color 0.2s ease-in-out; cursor: pointer; } /* Añadido cursor pointer */
/* Colores dinámicos para etiqueta y switch */
#sandboxToggleContainer.sandbox-active .form-check-label { color: #0dcaf0 !important; /* Cian brillante */ }
#sandboxToggleContainer.sandbox-active .form-check-input { background-color: #0dcaf0; border-color: #0a9cb7; }
#sandboxToggleContainer.live-active .form-check-label { color: #ffc107 !important; /* Amarillo/Naranja para Live */ }
#sandboxToggleContainer.live-active .form-check-input { background-color: #ffc107; border-color: #d9a60d; }

/* Responsividad */
@media (max-width: 767.98px) {
    body { padding-top: 0; }
    #resultsCard .card-header { flex-direction: column; align-items: flex-start !important; }
    #downloadButtons { margin-top: 0.5rem; width: 100%; display: flex; justify-content: space-between; }
    #downloadButtons .btn { flex-grow: 1; }
    .navbar-brand { font-size: 1rem; }
    main.container-fluid { padding-left: 0.5rem; padding-right: 0.5rem; }
    .card-body { padding: 0.75rem; }
    #resultsTable th, #resultsTable td { font-size: 0.8rem; padding: 0.4rem; }
    .month-header { font-size: 0.75rem; min-width: 55px; }
    td.keyword-cell { max-width: 150px; }
    td.intent-cell { min-width: 100px; font-size: 0.75rem;}
    #sandboxToggleContainer { margin-right: 0.5rem !important; }
    #sandboxToggleContainer .form-switch-lg { padding-left: 3.5em; }
    #sandboxToggleContainer .form-switch-lg .form-check-input { height: 1.5em; width: 3em; }
    #sandboxToggleContainer .form-check-label { font-size: 0.75rem; }
    #averageDifficultyBadge { margin-left: 0; margin-top: 0.5rem; }
}

/* Contadores Keywords */
.keyword-count-ok { color: var(--bs-success); }
.keyword-count-warn { color: var(--bs-warning); }
.keyword-count-error { color: var(--bs-danger); font-weight: bold; }

/* Placeholder */
::placeholder { color: #adb5bd !important; opacity: 1; }

/* Estilos para Ordenamiento de Tabla V20+ */
#resultsTable th.sortable {
    cursor: pointer;
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    padding-right: 1.5em; /* Espacio para la flecha */
    white-space: nowrap; /* Evitar que el texto salte de línea con la flecha */
}

/* Estilo base de la flecha (tenue, gris) */
#resultsTable th.sortable::before,
#resultsTable th.sortable::after {
    content: '';
    position: absolute;
    right: 0.5em;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    opacity: 0.3;
}

/* Flecha hacia arriba (para estado no ordenado o asc) */
#resultsTable th.sortable::before {
    border-bottom: 5px solid #6c757d; /* Gris */
    top: 40%; /* Ligeramente arriba */
    transform: translateY(-50%);
}

/* Flecha hacia abajo (para estado no ordenado o desc) */
#resultsTable th.sortable::after {
    border-top: 5px solid #6c757d; /* Gris */
    top: 60%; /* Ligeramente abajo */
     transform: translateY(-50%);
}

/* Mostrar ambas flechas tenues al pasar el mouse si NO está ordenada */
#resultsTable th.sortable:not(.sorted-asc):not(.sorted-desc):hover::before,
#resultsTable th.sortable:not(.sorted-asc):not(.sorted-desc):hover::after {
   opacity: 0.5;
}

/* Ocultar flecha correspondiente y mostrar la activa con opacidad completa */
#resultsTable th.sorted-asc::before {
    opacity: 1;
     border-bottom-color: currentColor; /* Usar color del texto */
}
#resultsTable th.sorted-asc::after {
    opacity: 0; /* Ocultar flecha hacia abajo */
}

#resultsTable th.sorted-desc::after {
    opacity: 1;
    border-top-color: currentColor; /* Usar color del texto */
}
#resultsTable th.sorted-desc::before {
    opacity: 0; /* Ocultar flecha hacia arriba */
}