/* Switch de modo oscuro */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    z-index: 10000;
}
.theme-switch input[type="checkbox"] {
    height: 0;
    width: 0;
    visibility: hidden;
    position: absolute;
}
.theme-switch-label {
    display: flex;
    align-items: center;
    font-weight: 600;
    font-size: 1em;
    color: #fff;
    letter-spacing: 0.01em;
    margin-left: 10px;
}
.theme-switch .slider {
    width: 56px;
    height: 36px;
    background: #ffffff;
    border-radius: 34px;
    position: relative;
    transition: background 0.35s;
    box-shadow: 0 1px 6px #0002;
}
.theme-switch .slider:before {
    content: "";
    position: absolute;
    top: 4px;
    left: 5px;
    width: 32px;
    height: 26px;
    background: #ff6200;
    border-radius: 50%;
    transition: .34s cubic-bezier(.5,2,.5,1);
    box-shadow: 0 1.5px 8px #0184ff24;
}
.theme-switch input:checked + .slider {
    background: linear-gradient(90deg, #2e7fff 0%, #232b42 100%);
}
.theme-switch input:checked + .slider:before {
    transform: translateX(16px) rotate(180deg);
    background: #232b42;
    -webkit-transform: translateX(14px) rotate(180deg);
    -moz-transform: translateX(16px) rotate(180deg);
    -ms-transform: translateX(16px) rotate(180deg);
    -o-transform: translateX(16px) rotate(180deg);
}
.theme-switch .slider i {
    position: absolute;
    top: 3px;
    left: 11px;
    font-size: 19px;
    color: #ffffff;
    transition: opacity .22s;
}
.theme-switch .slider .moon {
    left: 27px;
    color: #7fcfff;
    opacity: 0;
}
.theme-switch input:checked + .slider .sun {
    opacity: 0;
}
.theme-switch input:checked + .slider .moon {
    opacity: 1;
}
.theme-switch .slider .sun {
    opacity: 1;
}
body.fade-theme {
    transition: background 0.45s cubic-bezier(.3,2,.3,1), color 0.34s, filter 0.37s;
    filter: blur(0.6px);
}
/* Botón menú público: solo icono en móvil, texto en desktop */
@media (max-width: 767.98px) {
    .btn-ir-menu-publico span {
        display: none !important;
    }
    .btn-ir-menu-publico {
        padding: 0.43em 0.78em !important;
        min-width: 0 !important;
        font-size: 1.25em !important;
    }
    .theme-switch .slider {
        width: 46px;
        height: 32px;
        min-width: 36px;
    }
    .theme-switch .slider:before {
        width: 28px;
        height: 25px;
        top: 3px;
        left: 4px;
    }
    .theme-switch input:checked + .slider:before {
        transform: translateX(10px) rotate(180deg);
        -webkit-transform: translateX(10px) rotate(180deg);
        -moz-transform: translateX(10px) rotate(180deg);
        -ms-transform: translateX(10px) rotate(180deg);
        -o-transform: translateX(10px) rotate(180deg);
}
    .theme-switch .slider i {
        font-size: 18px;
        left: 9px;
        top: 3px;
    }
    .theme-switch .slider .moon {
        left: 20px;
    }
}
@media (min-width: 768px) {
    .btn-ir-menu-publico span {
        display: inline !important;
    }
    .btn-ir-menu-publico {
        padding: 0.43em 1.4em !important;
        font-size: 1.08em !important;
    }
}


/* ---- MODO OSCURO GLOBAL ---- */
body.dark-mode {
    background: #181a1b !important;
    color: #f1f3fa !important;
}

/* Header, navbar, footer */
body.dark-mode .header-bar-modern,
body.dark-mode footer {
    background: linear-gradient(90deg, #1b1e2e 70%, #023767 100%) !important;
    color: #fff !important;
    box-shadow: 0 2px 24px #01234840;
}
body.dark-mode .panel-title-modern,
body.dark-mode .footer-yt-dev,
body.dark-mode .footer-links a,
body.dark-mode .footer-links a:visited {
    color: #b1e0ff !important;
}
body.dark-mode .footer-links a:hover {
    color: #ffd700 !important;
}

body.dark-mode .navbar-logo,
body.dark-mode .bienvenida-logo-movil {
    background: #1b2235 !important;
    border-color: #232c44 !important;
    box-shadow: 0 0 12px #01234855;
}

/* BIENVENIDA */
body.dark-mode .bienvenida-card-modern,
body.dark-mode .bienvenida-card-modern-movil {
    background: linear-gradient(90deg, #232b42 80%, #176ba0 100%) !important;
    color: #f1f3fa !important;
}
body.dark-mode .bienvenido-pill,
body.dark-mode .bienvenida-movil-pill {
    background: #212b3a !important;
    color: #53c1ff !important;
}

body.dark-mode .admin-welcome-bar {
    background: linear-gradient(90deg, #232944 60%, #1c2333 100%) !important;
    color: #fff !important;
}
body.dark-mode .admin-welcome-bar .bi,
body.dark-mode .admin-welcome-bar .fw-semibold,
body.dark-mode .admin-welcome-bar .fw-bold {
    color: #fff !important;
}
body.dark-mode .admin-panel-badge,
body.dark-mode .admin-welcome-bar .badge {
    background: #191e2b !important;
    color: #7fcfff !important; /* celeste llamativo */
    border: 1px solid #294470 !important;
}

/* ==== CARD Y FORMULARIOS ==== */
body.dark-mode .card,
body.dark-mode .card-body {
    background: rgba(34, 41, 68, 0.96) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 4px 32px #000a !important;
}

body.dark-mode label,
body.dark-mode .form-label,
body.dark-mode .fw-bold,
body.dark-mode .fw-semibold {
    color: #b8c0d4 !important;
}

body.dark-mode .form-control,
body.dark-mode .form-control-lg {
    background: #181f2e !important;
    color: #fff !important;
    border: 1.5px solid #25304b !important;
}
body.dark-mode .form-control:focus {
    background: #232944 !important;
    color: #fff !important;
    border-color: #4db5ff !important;
    box-shadow: 0 0 0 0.18rem #25d2ff44 !important;
}

body.dark-mode .input-icon-2025 input {
    background: #181f2e !important;
    color: #fff !important;
}

body.dark-mode .invalid-feedback {
    color: #ff8080 !important;
}

body.dark-mode .btn-gradient,
body.dark-mode .btn-gradient-alt {
    background: linear-gradient(90deg, #0e5c92 60%, #396b9d 100%) !important;
    color: #fff !important;
    border: none !important;
}
body.dark-mode .btn-gradient:hover,
body.dark-mode .btn-gradient-alt:hover {
    background: linear-gradient(90deg, #1e2e4a 60%, #2e83e6 100%) !important;
    color: #fff !important;
}

body.dark-mode .bi {
    color: #7fcfff !important;
}




/* Si usas sombra en la card, oscurece un poco en dark */
body.dark-mode .card.shadow-lg {
    box-shadow: 0 8px 40px #0128  !important;
}

/* --- Placeholders bien visibles en dark mode --- */
body.dark-mode ::placeholder, 
body.dark-mode input::placeholder, 
body.dark-mode textarea::placeholder {
    color: #b8c0d4 !important;   /* Gris claro legible */
    opacity: 1 !important;       /* Sin opacidad baja */
}
body.dark-mode .form-control::placeholder {
    color: #b8c0d4 !important;
    opacity: 1 !important;
}

/* ====== TABLAS Y CARDS DE HORARIOS ====== */
body.dark-mode .table,
body.dark-mode .table thead,
body.dark-mode .table tbody,
body.dark-mode .table tr,
body.dark-mode .table td,
body.dark-mode .table th {
    background: #212944 !important;
    color: #e8f1ff !important;
    border-color: #29324b !important;
}

/* ===== BADGES MODO OSCURO ===== */
body.dark-mode .badge-flat-cyan {
    background: linear-gradient(90deg, #1f4057 60%, #19324a 100%) !important;
    color: #76e0fa !important;  /* cyan suave */
    border: none !important;
}
body.dark-mode .badge-flat-blue {
    background: linear-gradient(90deg, #233c7c 60%, #21385a 100%) !important;
    color: #a9c7ff !important;  /* azul claro */
    border: none !important;
}
body.dark-mode .badge-flat-yellow {
    background: linear-gradient(90deg, #4a3e19 60%, #473c17 100%) !important;
    color: #d8bd24 !important;  /* amarillo pastel */
    border: none !important;
}

/* Cambia el color del icono en los badges */
body.dark-mode .badge-flat-cyan .bi,
body.dark-mode .badge-flat-blue .bi,
body.dark-mode .badge-flat-yellow .bi {
    color: inherit !important; /* que use el mismo color del texto */
}

/* Mejor borde en la tabla para modo oscuro */
body.dark-mode .table,
body.dark-mode .table td,
body.dark-mode .table th {
    border-color: #29324b !important;
}

/* Iconos de reloj e input group en modo oscuro */
body.dark-mode .input-group-text .bi,
body.dark-mode .bi-clock,
body.dark-mode .bi-clock-history {
    color: #b8c0d4 !important;  /* Blanco suave */
    opacity: 1 !important;
}


/* Card y fondo */
body.dark-mode .card,
body.dark-mode .card-body {
    background: #222845 !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 8px 40px #011b3c77 !important;
    border-radius: 3%;
    -webkit-border-radius: 3%;
    -moz-border-radius: 3%;
    -ms-border-radius: 3%;
    -o-border-radius: 3%;
}
/* Label y feedback */
body.dark-mode .form-label,
body.dark-mode .fw-semibold,
body.dark-mode label {
    color: #b8c0d4 !important;
}
body.dark-mode .invalid-feedback {
    color: #ff8080 !important;
}
/* INPUTS */
body.dark-mode .form-control,
body.dark-mode .form-control-lg,
body.dark-mode input[type="time"],
body.dark-mode select.form-select {
    background: #181f2e !important;
    color: #fff !important;
    border: 1.5px solid #25304b !important;
}
body.dark-mode .form-control:focus,
body.dark-mode select.form-select:focus {
    background: #232944 !important;
    color: #fff !important;
    border-color: #4db5ff !important;
    box-shadow: 0 0 0 0.18rem #25d2ff44 !important;
}
/* Placeholder */
body.dark-mode ::placeholder {
    color: #b8c0d4 !important;
    opacity: 1 !important;
}
/* ICONOS dentro de input group o campos */
body.dark-mode .input-group-text .bi,
body.dark-mode .bi-clock,
body.dark-mode .bi-clock-history {
    color: #b8c0d4 !important;
}
/* --- SELECT --- */
body.dark-mode .form-select {
    background: #181f2e !important;
    color: #fff !important;
    border: 1.5px solid #25304b !important;
}
body.dark-mode .form-select option {
    background: #232944 !important;
    color: #e8f1ff !important;
}
/* Placeholder de select (el primer option) */
body.dark-mode .form-select option[value=""] {
    color: #7a8aad !important;
}


/* Enlace destacado modo oscuro */
body.dark-mode .text-warning,
body.dark-mode #btnVerTerminos {
    color: #ffe47a !important;              /* Amarillo brillante */
    font-weight: 700 !important;            /* Más grueso */
    text-shadow: 0 1px 6px #1c233300;       /* Suave halo */
    border-bottom: 2px dashed #ffe47a4a;    /* Línea discontinua al pasar mouse */
    transition: color .18s, border .15s;
}
body.dark-mode .text-warning:hover,
body.dark-mode #btnVerTerminos:hover {
    color: #fff07c !important;
    border-bottom: 2px solid #ffe47a;
    text-decoration: underline;
}

/* Botones */
body.dark-mode .btn,
body.dark-mode .btn-gradient,
body.dark-mode .btn-gradient-alt,
body.dark-mode .btn-gradient-horario,
body.dark-mode .btn-ir-menu-publico,
body.dark-mode .btn-aceptar-terminos,
body.dark-mode .btn-scroll-top,
body.dark-mode .btn-whatsapp {
    background: linear-gradient(90deg, #272c33 70%, #1c2837 100%) !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 8px #0003;
}

body.dark-mode .btn-cerrar-sesion-flat {
    background: #26272b !important;
    color: #ff4444 !important;
    border: none !important;
}
body.dark-mode .btn-cerrar-sesion-flat:hover,
body.dark-mode .btn-cerrar-sesion-flat:focus {
    background: #e23d3d !important;
    color: #fff !important;
}

body.dark-mode .btn-outline-dark {
    background: #212a35 !important;
    color: #fff !important;
    border-color: #444 !important;
}
body.dark-mode .btn-outline-dark:hover {
    background: #293147 !important;
    color: #fff !important;
    border-color: #666 !important;
}

/* Inputs, selects, forms */
body.dark-mode .form-control,
body.dark-mode .form-select,
body.dark-mode .input-group-text {
    background: #22252b !important;
    color: #e4e9ef !important;
    border-color: #23252b !important;
}

body.dark-mode .form-control:focus {
    border-color: #1e90ff !important;
    background: #22294d !important;
    color: #fff !important;
}

/* Cards, tablas, modals */
body.dark-mode .card,
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-footer,
body.dark-mode .table,
body.dark-mode .table th,
body.dark-mode .table td,
body.dark-mode .dropdown-menu {
    background: #23242a !important;
    color: #e4e9ef !important;
    border-color: #353740 !important;
}
body.dark-mode .text-muted,
body.dark-mode .text-muted * {
    color: #b8c0d4 !important; /* gris claro legible en fondo oscuro */
}
body.dark-mode .modal-modern-terms .modal-header {
    background: linear-gradient(90deg, #243c68 75%, #2b537a 100%) !important;
    color: #fff !important;
}

body.dark-mode .modal-modern-terms .modal-body,
body.dark-mode .modal-modern-terms .modal-footer {
    background: #22294d !important;
    color: #e4e9ef !important;
}

/* Alerts */
body.dark-mode .alert-modern {
    background: linear-gradient(90deg, #252b37 0%, #243042 100%) !important;
    color: #fff !important;
    box-shadow: 0 4px 24px #09163355;
}
body.dark-mode .alert-success-modern {
    background: linear-gradient(90deg, #187a4a 0%, #205e6d 100%) !important;
}
body.dark-mode .alert-error-modern {
    background: linear-gradient(90deg, #782b28 0%, #5a2d3d 100%) !important;
}
body.dark-mode .alert-info-modern {
    background: linear-gradient(90deg, #376c77 0%, #4e3572 100%) !important;
}
body.dark-mode .btn-close-modern {
    color: #fff !important;
    opacity: 0.7 !important;
}
body.dark-mode .btn-close-modern:hover {
    opacity: 1 !important;
}

/* Links */
body.dark-mode a {
    color: #78c9ff !important;
}
body.dark-mode a.text-warning {
    color: #ffd65b !important;
}
body.dark-mode a:hover,
body.dark-mode a:focus {
    color: #b4e3ff !important;
}

body.dark-mode .text-primary { color: #75aaff !important; }
body.dark-mode .text-danger { color: #ff5757 !important; }

/* Preloader */
body.dark-mode #preloader-panel2025 {
    background: linear-gradient(130deg, #161c2e 60%, #263052 100%) !important;
}
body.dark-mode .preloader-logo-dark {
    background: linear-gradient(135deg,#232d42 70%,#0b1425 100%) !important;
    box-shadow: 0 10px 48px #0009, 0 2px 10px #1e294977 !important;
}
body.dark-mode .preloader-title-dark {
    color: #c8e3ff !important;
    text-shadow: 0 4px 22px #12418466;
}
body.dark-mode .preloader-desc-dark {
    color: #a7c8e6 !important;
}
body.dark-mode .preloader-bar-outer {
    background: #232d42 !important;
    border: 1.6px solid #355083 !important;
}
body.dark-mode .preloader-bar-inner {
    background: linear-gradient(90deg, #51eaa8 20%, #23b8e6 70%, #1978e3 100%) !important;
}
body.dark-mode .preloader-bar-label {
    color: #51eaff !important;
}

/* WhatsApp/Scroll floats */
body.dark-mode .btn-whatsapp {
    background: linear-gradient(135deg, #177d4e 60%, #145d41 100%) !important;
    color: #fff !important;
}
body.dark-mode .btn-whatsapp:hover {
    background: linear-gradient(135deg, #128c7e 60%, #25d366 100%) !important;
}
body.dark-mode .btn-scroll-top {
    background: linear-gradient(135deg, #183362 70%, #1761b4 100%) !important;
    color: #fff !important;
}
body.dark-mode .btn-scroll-top:hover {
    background: linear-gradient(135deg, #23e3fa 70%, #0184ff 100%) !important;
    color: #fff !important;
}

/* Iconos */
body.dark-mode .bi {
    color: #b1e0ff !important;
}

/* Ajustes responsive y otros */
@media (max-width: 600px) {
    body.dark-mode .header-bar-modern { border-radius: 2.6em !important; }
    body.dark-mode .bienvenida-card-modern-movil {
        background: linear-gradient(90deg, #243a5a 85%, #19587a 100%) !important;
        color: #fff !important;
    }
}


/* =========================
   MODO OSCURO ADMIN/MENÚ
   ========================= */

body.dark-mode #autocomplete-admin {
    background: #232844 !important;
    color: #e7efff !important;
    border-radius: 1.2em;
    border: 2px solid #27b8ff22;
    box-shadow: 0 4px 20px #27b8ff28;
    padding: 0.6em 0 0.3em 0;
    /* Si usas scroll por muchos resultados */
    max-height: 290px;
    overflow-y: auto;
}

body.dark-mode #autocomplete-admin div,
body.dark-mode #autocomplete-admin .suggestion {
    color: #e7efff !important;
    background: transparent !important;
    border-radius: .9em;
    font-weight: 500;
    padding: .5em 1.3em;
    cursor: pointer;
    transition: background 0.14s, color 0.14s;
}

body.dark-mode #autocomplete-admin div:hover,
body.dark-mode #autocomplete-admin .suggestion:hover,
body.dark-mode #autocomplete-admin .suggestion.selected {
    background: #1a2038 !important;
    color: #27b8ff !important;
}

/* Input de búsqueda - modo oscuro */
body.dark-mode .form-control,
body.dark-mode .form-select {
    background: #232844 !important;
    color: #f5f6fa !important;
    border: 1.7px solid #233258 !important;
    box-shadow: 0 2px 7px #1a223344;
}

body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder {
    color: #8495c4 !important;
    opacity: 1;
}


/* INPUTS, SELECTS Y GRUPOS (OPTIMIZADO MODO OSCURO) */
body.dark-mode .input-group .form-control,
body.dark-mode .input-group .form-select {
    background: #232844 !important;
    color: #f5f6fa !important;
    border: 2px solid #233258 !important;
    box-shadow: 0 2px 8px #011b3c33 !important;
}

body.dark-mode .input-group .form-control:focus,
body.dark-mode .input-group .form-select:focus {
    background: #232944 !important;
    color: #fff !important;
    border-color: #29edaa !important; /* Verde neón suave para validación */
    box-shadow: 0 0 0 0.17rem #29edaa44 !important;
}

body.dark-mode .input-group .form-control.is-valid,
body.dark-mode .input-group .form-select.is-valid {
    border-color: #23ce83 !important;
    box-shadow: 0 0 0 0.18rem #22ce8333 !important;
    background: #1f3430 !important;
    color: #b2ffe8 !important;
}
body.dark-mode .input-group .form-control.is-invalid,
body.dark-mode .input-group .form-select.is-invalid {
    border-color: #ff6363 !important;
    box-shadow: 0 0 0 0.18rem #ff636344 !important;
    background: #2c2022 !important;
    color: #ffd2d2 !important;
}

/* Iconos de validación */
body.dark-mode .input-group-text.bg-transparent .bi-check-circle-fill {
    color: #32ffb5 !important; /* Verde validación */
}
body.dark-mode .input-group-text.bg-transparent .bi-x-circle-fill {
    color: #ff6767 !important; /* Rojo error */
}

/* Placeholder */
body.dark-mode .form-control::placeholder,
body.dark-mode .form-select::placeholder,
body.dark-mode .input-group .form-control::placeholder {
    color: #8495c4 !important;
    opacity: 1 !important;
}

/* SELECT: opción por defecto (gris claro) */
body.dark-mode .form-select option[value=""] {
    color: #7889ad !important;
}

/* --- UPLOAD MODERNO (DARK) --- */
body.dark-mode .upload-area-modern {
    background: linear-gradient(100deg, #202739 75%, #25304b 100%) !important;
    border: 2.7px dashed #3ecfff !important;
}
body.dark-mode .upload-area-modern.dragover {
    border-color: #25d2ff !important;
    background: linear-gradient(100deg, #232c46 70%, #27324e 100%) !important;
}
body.dark-mode .upload-text-modern,
body.dark-mode .upload-icon-modern {
    color: #7fcfff !important;
}
body.dark-mode .img-preview-modern {
    border: 3px solid #7fcfff30 !important;
    background: #232844 !important;
}
body.dark-mode .btn-remove-image-modern {
    background: linear-gradient(135deg, #ff6363 70%, #ff2323 100%) !important;
    color: #fff !important;
    box-shadow: 0 3px 10px #ff232355 !important;
}
body.dark-mode .btn-remove-image-modern:hover,
body.dark-mode .btn-remove-image-modern:focus {
    background: linear-gradient(135deg, #b72136 70%, #e32929 100%) !important;
}

/* --- MENSAJES DE VALIDACIÓN --- */
body.dark-mode #mensaje-validacion,
body.dark-mode #mensaje-validacion-precio,
body.dark-mode #mensaje-validacion-categoria {
    color: #35e3b3 !important;
}
body.dark-mode #mensaje-validacion.text-danger,
body.dark-mode #mensaje-validacion-precio.text-danger,
body.dark-mode #mensaje-validacion-categoria.text-danger {
    color: #ff7676 !important;
}
body.dark-mode #mensaje-validacion.text-success,
body.dark-mode #mensaje-validacion-precio.text-success,
body.dark-mode #mensaje-validacion-categoria.text-success {
    color: #3debb3 !important;
}

/* --- MODALES (DARK) --- */
body.dark-mode .modal-content,
body.dark-mode .modal-header,
body.dark-mode .modal-footer {
    background: #212944 !important;
    color: #e4e9ef !important;
    border-color: #353740 !important;
}
body.dark-mode .modal-alert-red2025 {
    background: #d12e35 !important;
    color: #fff !important;
}
body.dark-mode .icon-alert2025 {
    color: #fff !important;
    filter: drop-shadow(0 0 8px #ff232399);
}

/* Eliminar fondo negro del input-group-text de validación en modo oscuro */
body.dark-mode .input-group-text.bg-transparent {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Si tu input tiene border-radius grande y ves esquinas raras, ajusta aquí: */
body.dark-mode .input-group-text.bg-transparent {
    border-radius: 0 2em 2em 0 !important;
    /* O iguala a tu input si lo tienes personalizado */
}

body.dark-mode .login-container-2025 {
    background: linear-gradient(135deg, #181a1b 70%, #223 100%) !important;
}
body.dark-mode .login-card-2025.card {
    background: #232944 !important;
    color: #fff !important;
}
body.dark-mode .form-control,
body.dark-mode .form-control:focus {
    background: #181f2e !important;
    color: #fff !important;
    border: 1.5px solid #25304b !important;
}
body.dark-mode .input-group-text .bi { color: #b8c0d4 !important; }
body.dark-mode .btn-gradient {
    background: linear-gradient(90deg, #0e5c92 60%, #396b9d 100%) !important;
}
body.dark-mode .alert-danger { background: #291718 !important; color: #ff8080 !important;}
body.dark-mode label, body.dark-mode .form-label { color: #b8c0d4 !important; }

 /* Fondo claro por defecto */
    .dark-mode-bg {
        background-color: #ffffff;
    }

    .dark-mode-text {
        color: #1e1e1e;
    }

    /* SOLO cuando esté activado el modo oscuro */
    body.dark-mode .dark-mode-bg {
        background-color: #1f1f1f !important;
    }

    body.dark-mode .dark-mode-text {
        color: #f1f1f1 !important;
    }

    body.dark-mode .text-muted {
        color: #b0b0b0 !important;
    }

    /* Si usas links o íconos oscuros por defecto */
    body.dark-mode a,
    body.dark-mode i {
        color: #f1f1f1;
    }