/* .background-shapes {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
} */

/* .shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: rgba(66, 133, 244, 0.3);
    top: -150px;
    left: -150px;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: rgba(234, 67, 53, 0.3);
    bottom: -200px;
    right: -200px;
} */

.background-login {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background:
        linear-gradient(rgba(33, 37, 50, 0.55), rgba(33, 37, 50, 0.55)),
        url('../images/aguerefiestas/bg_login.png') center center / cover no-repeat fixed;
}

.bg_datatable {
    background-color: rgba(255, 255, 255, 0.9);
}

/* Aviso suave: tampoco lo usa ninguna pagina hoy, pero se deja en la marca
   para que no quede un azul suelto si alguien lo reutiliza. */
.bg_light_primary {
    background: #f2e6f6;
    color: #4d176b;
}

.bg_light_primary * {
    color: #4d176b;
}

/* Fondo de las paginas (21/09/2026): la plantilla traia un gris azulado
   (#f1f4f9, su variable --body-bg) que no es de la marca. Se cambia por un
   lavado muy claro del morado de Aguere, que deja las tarjetas blancas
   destacando igual. custom.css se carga despues del tema, asi que basta con
   redefinir la variable. */
:root {
    --body-bg: #f6f1f9;
    --body-bg-rgb: 246, 241, 249;
}

/* Secundario de la marca (21/09/2026): el salmon #e1ada2 venia del panel
   antiguo. Las cabeceras de tarjeta llevan el degradado de Aguere, el mismo
   de la barra superior y de los botones de acceso. */
.bg_secondary {
    background: linear-gradient(90deg, #943fa3 0%, #b55ebd 55%, #fab00c 100%);
    color: white;
}

/* Casi todas esas cabeceras llevan debajo del titulo una frase explicativa en
   .text-muted, que es un gris para fondo blanco: sobre el degradado no habia
   quien la leyera. Va en blanco con un punto de transparencia, para que siga
   quedando por debajo del titulo sin desaparecer. El !important es porque el
   propio .text-muted del tema lo trae. */
.bg_secondary .text-muted,
.bg_secondary small,
.modal-header .text-muted {
    color: rgba(255, 255, 255, .9) !important;
}

/* Un degradado no se puede aplicar a un color de texto o de borde (lo usa el
   spinner de carga), asi que ahi va el morado solido de la marca. */
.color_secondary {
    color: #943fa3;
}

/* Estilo para el formulario de cristal */
.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 100%;
    max-width: 450px;
    margin: 0 auto;
}

.glass-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* Wrapper del login */
.login-wrapper {
    padding: 1rem;
}

.login-container {
    min-height: 100vh;
    padding: 2rem 1rem;
}

.login-form-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 1rem;
}

/* Brand container responsive */
.brand-container {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
}

.brand-container-mobile {
    text-align: center;
    margin-bottom: 2rem;
}

.logo {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

.logo-mobile {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

/* Estilos para los inputs */
.form-floating {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-control {
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 1rem;
    transition: all 0.3s ease;
}

.form-control:focus {
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.15);
    border-color: #0d6efd;
}

/* Botón para mostrar/ocultar contraseña */
.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    padding: 0.25rem;
    z-index: 5;
    cursor: pointer;
    transition: color 0.2s ease;
}

.password-toggle:hover {
    color: #0d6efd;
}

.password-toggle:focus {
    outline: none;
    color: #0d6efd;
}

/* Ajustar padding del input cuando hay botón de toggle */
.form-floating input[type="password"] {
    padding-right: 3rem;
}

/* Botón de login */
.btn-login {
    padding: 0.8rem;
    border-radius: 10px;
    font-weight: 600;
    transition: all 0.3s ease;
    background: linear-gradient(90deg, #943fa3 0%, #b55ebd 55%, #fab00c 100%) !important;
    border: none;
    color: #fff;
}

.bg-main {
    background-image: url("../images/Piqu3/front-background.jpg");
}

.btn-login:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(148, 63, 163, 0.35);
    filter: brightness(1.05);
    color: #fff;
}

/* Iconos */
.bi {
    transition: all 0.3s ease;
}

.form-floating .bi {
    color: #6c757d;
    margin-right: 0.5rem;
}

/* Link olvidaste contraseña */
.forgot-link {
    color: #6c757d;
    text-decoration: none;
    transition: all 0.3s ease;
}

.forgot-link:hover {
    color: #943fa3;
    text-decoration: underline;
}

/* Checkbox personalizado */
.form-check-input {
    cursor: pointer;
    border-radius: 4px;
}

.form-check-input:checked {
    background-color: #943fa3;
    border-color: #943fa3;
}

.login-container {
    min-height: 100vh;
    padding: 2rem 1rem;
}

.form-floating {
    margin-bottom: 1rem;
}

.brand-container {
    text-align: center;
    margin-bottom: 2rem;
    padding: 2rem;
}

.brand-container-mobile {
    text-align: center;
    margin-bottom: 2rem;
}

.logo {
    max-width: 280px;
    width: 100%;
    height: auto;
    margin-bottom: 1.5rem;
}

.logo-mobile {
    max-width: 200px;
    width: 100%;
    height: auto;
    margin-bottom: 1rem;
}

.btn-login {
    padding: 0.75rem;
    font-weight: 500;
}

.forgot-link {
    text-decoration: none;
}

/* Responsive breakpoints */
@media (max-width: 576px) {
    .login-wrapper {
        padding: 0.5rem;
    }

    .login-container {
        padding: 1rem 0.5rem;
    }

    .glass-card {
        padding: 1.5rem;
        border-radius: 12px;
        margin: 0 0.5rem;
    }

    .brand-container-mobile h2 {
        font-size: 1.5rem;
    }

    .logo-mobile {
        max-width: 150px;
    }

    .form-floating label {
        font-size: 0.9rem;
    }

    .d-flex.justify-content-between {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start !important;
    }

    .form-check {
        order: 2;
    }

    .forgot-link {
        order: 1;
        align-self: center;
    }
}

@media (min-width: 577px) and (max-width: 768px) {
    .glass-card {
        padding: 2rem;
        max-width: 400px;
    }

    .login-form-wrapper {
        padding: 2rem;
    }
}

@media (min-width: 769px) and (max-width: 991px) {
    .glass-card {
        max-width: 420px;
    }
}

@media (max-width: 991px) {
    .login-container {
        justify-content: center !important;
    }

    .brand-container {
        display: none;
    }
}

@media (min-width: 992px) {
    .brand-container-mobile {
        display: none !important;
    }

    .login-form-wrapper {
        padding: 3rem;
    }
}

@media (max-width: 768px) {
    .order-md-last {
        margin-top: 2rem;
    }
}



#loadable_content {
    display: none;
}

img {
    object-fit: cover;
    object-position: center;
}

.content {
    margin-bottom: 50px;
}

#accordion_collapsed {
    background-color: white;
}

.min_width_max {
    min-width: max-content;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
}

.pagination>* {
    margin-top: 0.5rem;
}

.swal2-actions {
    gap: 0.5rem;
}

.swal2-actions>button+button {
    margin: 0;
}

tr.odd {
    background-color: rgba(255, 220, 201, 0.25);
}

#user_image {
    border: solid 2px rgba(255, 255, 255, 0.85);
}


.secondary_background {
    background: linear-gradient(135deg, #5D7280, #0a0a0a 200%);
}

#id_lang_flags_container img {
    object-fit: contain;
}

.visualization_mode_card {
    text-align: center;
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

.visualization_mode_content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex-grow: 1;
}

.visualization_mode_img {
    width: 100%;
}

/* BOTONES DEL INDEX */
.buttons_section {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    height: 100%;
    place-content: center;
}

.button_container {
    text-align: center;
}

.button_container button {
    font-size: 2.25rem;
    font-weight: 500;
    padding: 2rem;
    border: solid white 0.3rem;
    border-radius: 4rem;
    color: white;
    background: radial-gradient(at 50% -150%, #ffc69e, #D25600);
    box-shadow: black 0px 0px 0px 0px;
}

.button_container button:hover:not(:active) {
    scale: 1.02;
    transition: 0.2s;
}

/* //BOTONES DEL INDEX */

.profile_image {
    aspect-ratio: 1;
}

.cls-hidden {
    display: none;
}

#create_group_form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#create_group_name {
    max-width: 20rem;
}

#create_group_button {
    width: fit-content;
}

#delivery_cost_container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#delivery_cost_container input {
    width: 5rem;
}

#min_payment_container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

#min_payment_container input {
    width: 5rem;
}

#modify_group_buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

#profile_username {
    color: #003F6E;
    ;
}

#profile_button {
    background-color: #fff;
}

#profile_button:hover #profile_username {
    color: black;
}

.gallery-container {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.gallery-item {
    position: relative;
}

.img-fluid {
    max-width: 100%;
    height: auto;
    max-height: 150px;
}

.image-container {
    position: relative;
}

.delete-icon {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: red;
    /* Puedes ajustar el color según tus preferencias */
    cursor: pointer;
    /* Hace que el cursor cambie a una mano cuando pasa sobre el icono de borrar */
}

.image-container:hover .delete-icon {
    display: block;
}

#performance_range_select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    padding: 0 0.3rem;
}

/* ANALYTICS - TOP PRODUCTS */
.top_products_img_container {
    border: solid #d83f13;
    border-radius: 25%;
    overflow: hidden;
}

.top_products_img_container img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.product_div {
    padding: 1rem;
    gap: 0.5rem;
    display: flex;
    flex-direction: column;
}

.top_products_info_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.top_products_total {
    font-weight: bold;
    margin: 0;
}

.top_products_category {
    color: grey;
}

.top_products_name {
    font-weight: bold;
}

/* end ANALYTICS - TOP PRODUCTS */

.alert_custom {
    --alert-color: #35bade;
    --alert-bg: #35bade20;
    --alert-border-color: #35bade;
    --alert-link-color: #003f6e;
    --alert-link-hover-color: #003f6e;
}

.restaurant_only {
    display: none;
}

/* .form-control-feedback-icon{
    position: absolute;
    top: 50%;
    right: 50px;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
  } */


@media (max-width: 768px) {
    .form-control-feedback-icon {
        display: none;
    }
}

/* FUNCIONALIDADES - MEJORAS DE DISEÑO */
.functionalities-section {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    border-radius: 15px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.functionality-card {
    background: rgba(255, 255, 255, 0.95);
    border-radius: 12px;
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.functionality-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
}

.functionality-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e9ecef;
}

.functionality-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 1rem;
    font-size: 1.5rem;
    color: white;
}

.functionality-icon.payments {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.functionality-icon.orders {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.functionality-icon.delivery {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.functionality-icon.general {
    background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.functionality-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: #2c3e50;
}

.functionality-subtitle {
    margin: 0;
    font-size: 0.9rem;
    color: #6c757d;
}

.functionality-options {
    display: grid;
    gap: 1rem;
}

.functionality-option {
    display: flex;
    align-items: center;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
}

.functionality-option:hover {
    background: #e9ecef;
    border-color: #dee2e6;
}

.functionality-option.has-input {
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.option-label {
    display: flex;
    align-items: center;
    margin: 0;
    font-weight: 500;
    color: #495057;
    cursor: pointer;
}

.option-checkbox {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    cursor: pointer;
    accent-color: #007bff;
}

.option-input {
    max-width: 120px;
    padding: 0.5rem;
    border: 1px solid #ced4da;
    border-radius: 6px;
    background: white;
    font-size: 0.9rem;
}

.option-input:focus {
    outline: none;
    border-color: #007bff;
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25);
}

.option-unit {
    font-size: 0.9rem;
    color: #6c757d;
    margin-left: 0.5rem;
}

.save-button-container {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dee2e6;
}

.btn-save-functionalities {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    padding: 0.8rem 2rem;
    border-radius: 25px;
    color: white;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-save-functionalities:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-save-functionalities:active {
    transform: translateY(0);
}

@media (max-width: 768px) {
    .functionality-card {
        padding: 1rem;
    }

    .functionality-header {
        flex-direction: column;
        text-align: center;
    }

    .functionality-icon {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }

    .functionality-option.has-input {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Transición suave para el campo de coste de envío */
#delivery_cost_container {
    transition: all 0.3s ease;
    overflow: hidden;
}

/* /FUNCIONALIDADES - MEJORAS DE DISEÑO */

.navbar {
    background-color: #ffffff;
    background-image: linear-gradient(90deg, #943fa3 0%, #b55ebd 50%, #fab00c 100%);
    background-repeat: no-repeat;
    background-position: bottom left;
    background-size: 100% 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.navbar .navbar-nav-link,
.navbar #profile_username {
    color: #212532 !important;
}

.sidebar {
    background-color: #212532;
    box-shadow: none !important;
}

.sidebar .sidebar-section,
.sidebar .sidebar-content {
    background-color: transparent !important;
}

.sidebar-section,
.page-header {
    height: 80px;
}

.page-header {
    background-color: #ffffff;
    border-bottom: 1px solid rgba(33, 37, 50, 0.1);
}

.page-header-content>div,
.page-header-content>div>a {
    color: #212532 !important;
}

.page-header-content>div>a.text-body.active,
.page-header-content>div>a.text-body:active,
.page-header-content>div>a.text-body:focus,
.page-header-content>div>a.text-body:hover,
.page-header-content>div>a.text-body {
    color: #943fa3 !important;
}

.page-container {
    height: 100%;
}

.page-content {
    height: 100%;
}

/* Dialogos (21/09/2026): la cabecera y los botones venian en el azul del
   panel antiguo. Cabecera con el degradado de la marca, como las tarjetas. */
.modal-header {
    background-image: linear-gradient(90deg, #943fa3 0%, #b55ebd 55%, #fab00c 100%);
}

.modal-title {
    color: #fff;
}

/* "Guardar": la accion principal, con el morado fuerte de la marca. El
   "Cancelar" de abajo lleva el lila claro, asi se distinguen de un vistazo. */
.btn-modal-primary {
    background: #943fa3;
    color: #fff;
}

.btn-modal-primary:hover {
    background: #b55ebd;
    color: #fff;
}

/* "Cancelar" de los dialogos: el morado claro de la marca, ni el degradado ni
   el morado fuerte. No es la accion principal del dialogo, asi que no debe
   pesar mas que el boton de al lado. */
.btn-modal-secondary {
    background: #b55ebd;
    color: #fff;
}

.btn-modal-secondary:hover {
    background: #943fa3;
    color: #fff;
}

/* Tercer boton de dialogo: hoy no lo usa ninguna pagina, se deja en el dorado
   de la marca con el texto oscuro (en dorado, el blanco no se lee). */
.btn-modal-tertiary {
    background: #fab00c;
    color: #3e1748;
}

.btn-modal-tertiary:hover {
    background: #e09d0a;
    color: #3e1748;
}

.card-profile {
    position: relative;
    background: linear-gradient(90deg, #943fa3 0%, #b55ebd 55%, #fab00c 100%);
    overflow: hidden;
    z-index: 0;
}

.card-profile::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('../images/Tejineando/tejineando_splash.png') center center / cover no-repeat fixed;
    opacity: 0.2;
    z-index: -1;
}

/* Botón "de cristal" para usar sobre el gradiente de .card-profile: un
   outline normal deja verse el degradado a través y queda sucio. */
.btn-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

/* Misma familia que .btn-glass, pero con tinte rojo: para acciones que deben
   destacar (p.ej. cerrar sesión) sin romper la estética de cristal. */
.btn-glass-danger {
    background: rgb(240 0 23 / 50%);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
}

.btn-glass-danger:hover {
    background: rgb(240 0 23 / 70%);
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.custom-bg-image {
    background-image: url("../images/Piqu3/front-background.jpg");
    background-size: cover;
    background-position: center;
    height: 100%;
}

/* Casilla de imagen (crear/editar item): miniatura del fichero actual o un
   icono por defecto, con overlay de cambiar/quitar al hover. El lado más
   largo de la imagen se ajusta a los 10rem del contenedor (object-fit:
   contain) y queda centrada, sin que su tamaño altere el layout. */
.item-image-tile {
    width: 10rem;
    height: 10rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    margin: 0 auto;
}

.item-image-tile-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.item-image-tile-placeholder {
    color: #adb5bd;
    font-size: 2.5rem;
}

.item-image-tile-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.55);
}

/* Piezas nuevas de un conjunto (14/09/2026): casillas de 7rem para que
   quepan las cuatro combinaciones con aire entre ellas. */
.set-new-tile .item-image-tile {
    width: 7rem;
    height: 7rem;
}

.item-image-tile:hover .item-image-tile-overlay {
    display: flex;
}
/* "Así queda puesto" (22/09/2026): el cuerpo del personaje con una prenda
   encima. Lo usan el Probador y el formulario de items. Las dos imágenes
   comparten el lienzo de 1200 x 1920, así que basta con apilarlas al mismo
   tamaño para que encajen. */
.puesto-caja {
    position: relative;
    width: 7rem;
    aspect-ratio: 600 / 960;
    margin: 0 auto;
    background: #efe7f3;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
}

.puesto-caja img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.puesto-caja .puesto-arte {
    z-index: 2;
}