/**
 * Estilos personalizados mínimos para el panel de administración
 * Complementa AdminLTE sin reemplazarlo
 */

/* Ajustes para imágenes de perfil en el grid */
.img-circle {
    border-radius: 50%;
}

/* Asegurar que las tablas sean responsive */
.table-responsive {
    overflow-x: auto;
}

/* Espaciado adicional para forms */
.form-actions {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}

/* Perfil de artista en vista detalle */
.profile-image-container {
    text-align: center;
    margin-bottom: 1rem;
}

.profile-image-large {
    width: 200px;
    height: 200px;
    object-fit: cover;
}

/* Placeholder para imagen de perfil */
.profile-placeholder {
    width: 200px;
    height: 200px;
    background: #f4f6f9;
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: #adb5bd;
    margin: 0 auto;
}

/* Cover de música */
.musica-cover-small {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 0.25rem;
}

.musica-cover-large {
    width: 200px;
    height: 200px;
    object-fit: cover;
    border-radius: 0.25rem;
}

/* Reproductor de audio en formularios */
.audio-player-container {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
}

.audio-player-container audio {
    width: 100%;
    max-width: 400px;
}

/* Preview de imágenes en formularios */
.image-preview-container {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 0.25rem;
}

.image-preview-container img {
    max-width: 200px;
    border-radius: 0.25rem;
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
}

/* Texto de letras con formato */
.lyrics-text {
    font-family: 'Courier New', Courier, monospace;
    white-space: pre-wrap;
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.25rem;
    max-height: 500px;
    overflow-y: auto;
}

/* Enlaces sociales en vista de artista */
.social-links-list {
    list-style: none;
    padding: 0;
}

.social-links-list li {
    padding: 0.5rem 0;
    border-bottom: 1px solid #dee2e6;
}

.social-links-list li:last-child {
    border-bottom: none;
}

/* Estadísticas adicionales */
.stat-item {
    text-align: center;
    padding: 1rem;
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #007bff;
}

.stat-label {
    font-size: 0.875rem;
    color: #6c757d;
    text-transform: uppercase;
}

/* Dark-mode */
.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > *, .dark-mode .admin-card h2 {
    color: #fff;
}

.dark-mode a {
    color: #73adeb;
}

.dark-mode .admin-card{
    background-color: #343a40;
    color: #fff;
}

.dark-mode .archivos-table td {
    border-top-color: rgba(255,255,255,0.08);
    color: #ddd;
}

.dark-mode .archivos-section-title {
    border-bottom-color: rgba(255,255,255,0.12);
}

.dark-mode .archivos-tool-card {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.1);
}

.dark-mode .archivos-tool-card:hover {
    border-color: rgba(255,255,255,0.25);
}

.dark-mode .archivos-separator {
    background: rgba(255,255,255,0.2);
}

/* Light mode overrides for archivos tab */
body:not(.dark-mode) .archivos-section-title {
    color: #6c757d;
    border-bottom-color: rgba(0,0,0,0.1);
}

body:not(.dark-mode) .archivos-table td {
    border-top-color: rgba(0,0,0,0.06);
}

body:not(.dark-mode) .archivos-tool-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
}

body:not(.dark-mode) .archivos-tool-card:hover {
    border-color: rgba(0,0,0,0.25);
}

body:not(.dark-mode) .archivos-separator {
    background: rgba(0,0,0,0.15);
}

.dark-mode .content-text{
    background: #3f3f3f;
    color: inherit;
}
.dark-mode .detail-view td {
    color: inherit !important;
}

.pagination {
    display: flex;
    padding-left: 0;
    list-style: none;
    border-radius: 0.25rem;
}

.pagination li {
    margin: 0 2px;
}

/* Dark-mode */
.pagination li a, .pagination li span {
    position: relative;
    display: block;
    padding: 0.5rem 0.75rem;
    color: #007bff;
    background-color: #fff;
    border: 1px solid #dee2e6;
    text-decoration: none;
}
.dark-mode .pagination li a, .pagination li span {
    color:#fff!important;
    background-color: #343a40!important;
}

.pagination li a:hover {
    color: #0056b3;
    background-color: #e9ecef;
}
.dark-mode .pagination li a:hover{
    background-color:#818d99!important;
}

.dark-mode tr:hover td, .dark-mode tr td > a:hover{
    color:#fff!important;
}

.dark-mode .small-box >.small-box-footer:hover {
    color:#fff;
}
.dark-mode .btn-tool:hover {
    color:#fff;
}
.dark-mode .list-group-item {
    color:#fff;
}
.dark-mode .detail-view th {
    color:#fff!important;
    background-color:#343a40!important;
}
.dark-mode .table th, .dark-mode .table-striped tbody tr:nth-child(odd)   {
    background-color:#343a40!important;
}
.dark-mode .alert-light {
    background-color: transparent
}
.dark-mode .alert-light {
    color: white;
}
.dark-mode input:-webkit-autofill{
    -webkit-box-shadow: 0 0 0 1000px #212529 inset;
}
.pagination .active span, .pagination .active a {
    z-index: 1;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.pagination .disabled span, .pagination .disabled a {
    color: #6c757d;
    pointer-events: none;
    background-color: #fff;
    border-color: #dee2e6;
}

.text-bronze {
    color: #CD7F32;
}

.background-blur {
    filter: blur(11px) brightness(0.4) !important;
}

@media (max-width: 662px) {
    .card-body,.grid-view{
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }
}



.campos-en-tablas {
    border:none;
    height: 48px;
    padding-inline: 16px;
}

.campos-en-tablas-multiple {
    height: 70px;
}

textarea.campos-en-tablas {
    min-height: 48px;
}
textarea.campos-en-tablas-multiple {
    min-height: 70px;
}
select.campos-en-tablas {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: white;
    padding-right: 30px;
}

.dark-mode select.campos-en-tablas {
    background-color: #1f2327;
}

.select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%;
}

.select-wrapper::after {
    content: "\f107";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    transition: transform 0.2s;
}

.select-wrapper.open::after {
    transform: translateY(-50%) rotate(180deg);
}

td:has(.campos-en-tablas) {
    padding:0 !important;
}
td:has(.campos-en-tablas-multiple) {
    border-right: 1px solid black;
}
td:has(.campos-en-tablas-multiple-documento) {
    border-right: 1px solid black;
}

div#status-cover.upload-status.error {
    color: #f00;
}

/* =============================================
   API Provider Cards - domain-api-configuracion
   ============================================= */
.api-provider-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.api-provider-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

/* Indicador semáforo */
.api-semaforo {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.api-semaforo-checking {
    animation: semaforo-pulse 1s ease-in-out infinite;
}

@keyframes semaforo-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.8); }
}

/* Categorías colapsables */
.api-category-card > .card-header {
    background-color: #f8f9fa;
}

/* Dark mode - API cards */
.dark-mode .api-provider-card:hover {
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.dark-mode .api-category-card > .card-header {
    background-color: #3a3f44;
}

.dark-mode .api-semaforo {
    border-color: rgba(255,255,255,0.2);
}

/* =============================================
   Lanzamiento Stepper - Version blocks & Encuesta
   ============================================= */
.version-block {
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-bottom: 1rem;
    position: relative;
}

.version-block .btn-remove-version {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
}

.dark-mode .version-block {
    border-color: rgba(255,255,255,0.15);
}

.encuesta-section-stepper #encuesta-fields {
    background: rgba(0,0,0,0.02);
    border-radius: 0.5rem;
    padding: 1rem;
    margin-top: 0.5rem;
}

.dark-mode .encuesta-section-stepper #encuesta-fields {
    background: rgba(255,255,255,0.05);
}

.dark-mode .alert-info {
    background-color: #1e3a5f !important;
    border-color: #2c5282 !important;
    color: #dbeafe !important;
}

.dark-mode .alert-info i {
    color: #93c5fd !important;
}

.dark-mode .note-toolbar,
.dark-mode .trumbowyg-box,
.dark-mode .trumbowyg-button-pane {
    background: #343a40 !important;
    border-color: #495057 !important;
}

.dark-mode .note-btn,
.dark-mode .trumbowyg-button-pane button {
    background: #495057 !important;
    border-color: #6c757d !important;
    color: #fff !important;
}

.dark-mode .note-btn:hover,
.dark-mode .trumbowyg-button-pane button:hover {
    background: #5a6268 !important;
    color: #fff !important;
}

.dark-mode .note-editor.note-frame .note-editing-area .note-editable,
.dark-mode .trumbowyg-editor {
    background: #3a4047 !important;
    color: #fff !important;
}

.dark-mode .note-placeholder,
.dark-mode .trumbowyg-editor::placeholder {
    color: #adb5bd !important;
}