/*==============================
PREVIEW IMAGE
==============================*/

.preview-image {
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #ccc;
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 8px;
    border: 1px solid #ccc;
}

.preview-image-athlete {
    object-fit: cover;
    border-radius: 12px; /* un poco más redondo */
    width: 100%;
    max-width: 220px;
    height: 220px;
    background-color: #111; /* opcional en modo oscuro */
    border-radius: 50%; /* 🔥 redondo */
    border: 2px solid #444;
}

/*=============================
SHAKE INPUTS
=============================*/

@keyframes shake {
    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.shake {
    animation: shake 0.3s ease-in-out;
}

/*=======================
TABLES
=======================*/

/* Asegura alineación en DataTables también */
table.dataTable td,
table.dataTable th {
    vertical-align: middle !important;
    text-align: center;
    white-space: nowrap;
}

/* Ajuste de columna para ID */
.table td:nth-child(1),
.table th:nth-child(1) {
    width: 60px;
}

/* Nombre más flexible en pantallas grandes */
.table td:nth-child(2),
.table th:nth-child(2) {
    max-width: 250px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Email con truncado si es largo */
.table td:nth-child(3),
.table th:nth-child(3) {
    max-width: 250px;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Acciones más compactas con iconos */
.table td:last-child,
.table th:last-child {
    width: 120px;
}

/* Íconos de acción más pequeños pero visibles */
.table .btn i {
    font-size: 0.95rem;
}

.table .btn {
    padding: 0.25rem 0.4rem;
}

/* Imagen centrada y con borde redondo */
.table td.image {
    text-align: center;
}

.table img.rounded-circle {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 2px solid #dee2e6;
}

/*===========================
SWEETALERT
===========================*/

.swal2-popup.explode-swal {
    background: #000 url('https://media.tenor.com/uOjqXq2nw08AAAAC/explosion.gif') center center
        no-repeat;
    background-size: cover;
    color: #0f0;
    font-family: monospace;
    text-shadow: 0 0 10px lime;
}

.swal2-popup.bsod-swal {
    background: #0000aa;
    color: #fff;
    font-family: Consolas, monospace;
    border: none;
    text-align: left;
}

.swal2-input[type='number']::-webkit-inner-spin-button,
.swal2-input[type='number']::-webkit-outer-spin-button {
    appearance: none;
    margin: 0;
}

.swal2-input[type='number'] {
    appearance: textfield;
}

/*=======================
NAVBAR
=======================*/

.navbar {
    border-style: solid;
    border-width: 0 0 1px 0;
}

.branch-switcher {
    min-width: 180px;
    max-width: 220px;
    border-radius: 0.4rem;
}

/*==========================
BREADCRUMB
==========================*/

.app-main .app-content-header .breadcrumb {
    padding: 0 12px;
}

/*====================
ITI
====================*/

/* Estilo para integrar intl-tel-input con Bootstrap 5 */
.iti {
    width: calc(100% - 48px);
}

.iti--allow-dropdown input.form-control {
    padding-left: 58px !important; /* espacio para la bandera */
}

.iti__flag-container {
    z-index: 4;
    left: 0.75rem; /* mismo padding que .input-group-text */
}

.iti input {
    background-color: var(--bs-body-bg); /* respeta el fondo */
    color: var(--bs-body-color); /* texto claro si estás en dark mode */
    /* border: 1px solid #ced4da; */
    border-radius: 0 0.375rem 0.375rem 0;
    height: 100%;
}

/* Corrige cuando está dentro de input-group */
.input-group .iti {
    flex: 1 1 auto;
}

.iti input:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25);
}

.iti__country-list {
    background-color: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border-color: #444 !important;
    z-index: 10000 !important; /* opcional por si se oculta detrás de algo */
}

.iti__country:hover,
.iti__country.iti__highlight {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--bs-body-color) !important;
}

.iti__divider {
    border-top: 1px solid #555 !important;
}

/* Opcional: ajustar banderas o texto si se ve desalineado */
.iti__flag-container {
    background-color: transparent;
}

/*========================
SELECT2
========================*/
[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection {
    background-color: #222 !important;
    color: #eee !important;
    border-color: #444;
}

[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection__rendered {
    color: #eee !important;
}

[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-selection__placeholder {
    color: #aaa !important;
}

[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-dropdown {
    background-color: #222 !important;
    color: #eee !important;
    border-color: #444;
    box-shadow: 0 0 10px #000;
}

[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-search__field {
    background-color: #333 !important;
    color: #eee !important; /* ← Aquí el cambio */
    border: 1px solid #444;
}

[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option {
    background-color: transparent;
    color: #eee;
    padding: 6px 12px;
}
[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--highlighted {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #eee !important;
}

[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__option--selected {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #fff !important;
}

[data-bs-theme='dark'] .select2-container--bootstrap-5 .select2-results__group {
    color: #999;
    font-weight: 600;
    padding: 4px 12px;
}

/* En modo oscuro, el ícono TikTok será claro */
[data-bs-theme='dark'] .icon-tiktok,
[data-bs-theme='dark'] .text-not-answer {
    color: #eee !important;
}

/* En modo claro, el ícono TikTok será oscuro */
[data-bs-theme='light'] .icon-tiktok,
[data-bs-theme='light'] .text-not-answer {
    color: #111 !important;
}

/*===============================
FOTO DE ATLETA
===============================*/

.border-male {
    border: 3px solid #0d6efd; /* azul */
}

.border-female {
    border: 3px solid #d63384; /* rosa */
}

.border-other {
    border: 3px solid #6f42c1; /* morado */
}

/* FIX BTN GROUP FORM */

.btn-group .btn-group-form {
    display: inline-flex;
    margin: 0;
    padding: 0;
}

.btn-group .btn-group-form > .btn {
    border-radius: 0;
}

.btn-group .btn-group-form:first-child > .btn {
    border-top-left-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
}

.btn-group .btn-group-form:last-child > .btn {
    border-top-right-radius: 0.25rem;
    border-bottom-right-radius: 0.25rem;
}

/*=======================
POS
=======================*/

.pos-body {
    min-height: 100vh;
    overflow-x: hidden;
}

.pos-main {
    min-height: 100vh;
    padding: 1.5rem;
}

/*=======================
TEMPUS
=======================*/
/* blanco en modo oscuro */

/*
.tempus-dominus-widget .fa-chevron-left,
.tempus-dominus-widget .fa-chevron-right {
    color: #fff !important;
    opacity: 0.8;
}

.tempus-dominus-widget .fa-chevron-left:hover,
.tempus-dominus-widget .fa-chevron-right:hover {
    opacity: 1;
}
*/