/* /style.css */

/* 1. Paleta de colores corporativos */
:root {
    --custom-primary-teal: #61bdb0;
    --custom-primary-teal-dark: #4aa597;
    --custom-primary-teal-light: #7accc0;
    --custom-brand-purple: #684A7A;
    --custom-brand-purple-pale: #EAE5EE; /* Color para cabeceras de tabla */
    --bs-light-rgb: 248, 249, 250;
    --bs-white: #fff;
    --bs-dark-rgb: 52, 58, 64;
}

/* 2. Estructura y fondos */
body {
    background-color: var(--bs-white);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding-top: 72px;
}

header.navbar {
    background-color: #FAF8F7 !important;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075);
    padding-top: 0.5rem;
    padding-bottom: 0.3rem;
}

.footer {
    padding: 0.6rem 0 !important;
    /*background-color: #684A7A;*/
    background-color: White;
    color: gray;
}


.main-content {
    flex: 1;
}

/* Estilos para la tabla de pacientes */
.initial-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--custom-brand-purple);
    color: var(--bs-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 1rem;
    flex-shrink: 0;
    /* --- LÍNEAS AÑADIDAS --- */
    object-fit: cover; /* Para avatares <img> */
    border: 2px solid white;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.contact-icon {
    color: #6c757d;
    font-size: 0.9em;
    margin-right: 0.5rem;
}
.contact-phone {
    font-size: 0.880rem;
    color: gray;
}

.logo-circle {
    width: 75px;
    height: 75px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--custom-primary-teal);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Utilidades */
.input-group .clear-search-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    display: none;
}
.input-group .form-control {
    padding-right: 2.5rem;
}

.password-group { position: relative; }
.password-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    background: none; border: none; cursor: pointer; color: #6c757d; z-index: 10;
}

/* 3. Colores de la marca y texto del menú */
.navbar-brand { color: var(--custom-brand-purple) !important; }
.navbar-nav .nav-link { color: rgb(var(--bs-dark-rgb)) !important; }
.navbar-nav .nav-link.active { color: var(--custom-primary-teal) !important; font-weight: 500; }
.dropdown-toggle { color: #6c757d !important; }

/* 4. Aplicación de colores corporativos a elementos de acción */
.btn-primary {
    --bs-btn-bg: var(--custom-primary-teal);
    --bs-btn-border-color: var(--custom-primary-teal);
    --bs-btn-hover-bg: var(--custom-primary-teal-light);
    --bs-btn-hover-border-color: var(--custom-primary-teal-light);
    --bs-btn-active-bg: var(--custom-primary-teal-dark);
    --bs-btn-active-border-color: var(--custom-primary-teal-dark);
}
.nav-tabs .nav-link.active,
.pagination .page-item.active .page-link {
    background-color: var(--custom-primary-teal);
    border-color: var(--custom-primary-teal-dark);
    color: white;
}
.page-link { color: var(--custom-primary-teal-dark); }
.page-link:hover { color: var(--custom-primary-teal-light); }
.badge.bg-primary { background-color: var(--custom-primary-teal-dark) !important; }
.modal-header { background-color: var(--custom-primary-teal); color: white; }
.modal-header .btn-close { filter: brightness(0) invert(1); }

/* 5. Estilos de Protocolos y Ficha */
.protocol-card { transition: all 0.2s ease-in-out; }
.protocol-card:hover { transform: translateY(-5px); box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15) !important; }

/*
  ==============================================
  MODIFICACIÓN GLOBAL HOVER DE TABLAS
  ==============================================
*/

/* 1. Define la transición suave para las celdas */
.table > tbody > tr > td {
    transition: background-color 0.2s ease-in-out;
}

/* 2. Sobreescribe la variable de color de hover de Bootstrap */
.table-hover > tbody > tr:hover > * {
    /* Aquí está la magia.
       Cambiamos la variable que Bootstrap usa por nuestro color.
       Usa 0.03 si es muy pálido, 0.05 si quieres más.
    */
    --bs-table-hover-bg: rgba(0, 0, 0, 0.02);
}

.view-ex-thumb { width: 100px; height: 60px; object-fit: cover; border-radius: 0.25rem; background-color: #343a40; }

.protocol-card .card-img-top {
    display: block;
    position: relative;
    cursor: pointer;
    background-color: #e9ecef;
}
.protocol-card .card-img-top img,
.protocol-card .card-img-top video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.protocol-card .card-img-top .no-videos-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #6c757d;
    text-align: center;
}
.protocol-card .card-img-top .no-videos-placeholder i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
}

.protocol-card .card-img-top .overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0,0,0,0.3);
    color: white;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0.5rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
.protocol-card .card-img-top:hover .overlay {
    opacity: 1;
}
.protocol-card .card-img-top .overlay-permanent {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    color: white;
    padding: 1.5rem 0.5rem 0.5rem;
    text-align: right;
    font-size: 1rem;
    font-weight: bold;
}

/* 6. Modal de Protocolos - Biblioteca de Ejercicios */
.protocol-exercise-library {
    height: 350px;
    overflow-y: auto;
}
.protocol-exercise-library .list-group-item {
    padding: 0.5rem 0.75rem;
    transition: background-color 0.15s ease-in-out;
}
.protocol-exercise-library .list-group-item:hover {
    background-color: #f8f9fa;
}
.protocol-exercise-library-thumb {
    width: 60px;
    height: 34px; /* 16:9 ratio */
    object-fit: cover;
    border-radius: 0.25rem;
    background-color: #343a40;
}

/* FIX: Contenedor de ejercicios asignados */
#assigned-exercises-visual-container {
    height: 350px;
    overflow-y: auto;
}
.assigned-item-protocol {
    border: 1px solid #dee2e6;
    background-color: #f8f9fa;
}
.assigned-item-protocol .form-control, .assigned-item-protocol .form-select {
    font-size: 0.8rem;
}
.assigned-placeholder-protocol {
    border-radius: 0.375rem;
}

/* 7. Vistas de lista para Galería y Ejercicios */
.video-list-view .list-thumbnail,
.exercise-list-view .list-thumbnail,
.protocol-list-view .list-thumbnail,
.image-list-view .list-thumbnail {
    width: 120px;
    height: 67px; /* 16:9 ratio */
    object-fit: cover;
    border-radius: 0.25rem;
    background-color: #343a40;
}

.exercise-list-view .tags-column .badge {
    margin-bottom: 2px;
    margin-right: 2px;
}

/* ================================================================== */
/* 8. ESTILOS PERSONALIZADOS DE TABLAS                                */
/* ================================================================== */
/*
 * Regla definitiva para unificar las cabeceras de tabla.
 * Apunta directamente a las celdas de cabecera (th) y usa !important
 * para garantizar la máxima prioridad sobre cualquier estilo de Bootstrap.
 */
.table > thead > tr > th {
    background-color: var(--custom-brand-purple-pale) !important;
    color: rgb(var(--bs-dark-rgb)) !important;
    border-color: #dcd6e1 !important; /* Un borde sutil que combine */
}

/* 9. ESTILO PERSONALIZADO SOLICITADO */
/* Estilo para el campo Títol en el modal de galería */
#mediaTitle {
    font-weight: bold;
    color: IndianRed !important;
    font-size: 1.15rem;
}

/* Estilo para el campo Títol en el modal de ejercicios */
#exerciseModal input[name="title"] {
    font-weight: bold;
    color: IndianRed !important;
    font-size: 1.15rem;
}

/* Estilo para el campo Títol en el modal de protocols */
#protocolModal input[name="title"] {
    font-weight: bold;
    color: IndianRed !important;
    font-size: 1.15rem;
}

/* Estilo para el campo Títol en el modal de treatments */
#treatmentModal input[name="title"] {
    font-weight: bold;
    color: IndianRed !important;
    font-size: 1.15rem;
}

/* Estilo para los campos de Títol en los modales */
#mediaTitle,
#exerciseModal input[name="title"],
#protocolModal input[name="title"],
#treatmentModal input[name="title"] {
    font-weight: bold;
    color: SteelBlue;
    font-size: 1.15rem; /* Tamaño de letra aumentado */
}

/* 10. ESTILOS PARA MODALES DE PROTOCOLO Y TRATAMIENTO */
/* Cabecera del área de ejercicios asignados */
#protocolModal .card-header.bg-primary,
#treatmentModal .card-header.bg-primary {
    background-color: var(--custom-primary-teal) !important;
}

/* Título del ejercicio en la tarjeta asignada (Color SteelBlue) */
#protocolModal .assigned-item-protocol strong.text-primary,
#treatmentModal .assigned-exercise-card strong.text-primary {
    color: SteelBlue !important;
}

/* 11. ESTILO PARA TÍTULOS/NOMBRES DENTRO DE MODALES DE "VER DETALLES" */

/* Estilo común para títulos de Media, Ejercicio, Protocolo */
#viewMediaModal .modal-body .modal-item-title,
#viewExerciseModal .modal-body .modal-item-title,
#viewProtocolModal .modal-body .modal-item-title {
    font-weight: bold;
    color: IndianRed;
    font-size: 1.1rem; /* Tamaño ligeramente aumentado */
}

/* ================================================================== */
/* 13. AJUSTES RESPONSIVE NAVBAR MÓVIL (PETICIÓN USUARIO)           */
/* ================================================================== */
/*
 * Estas reglas se aplican en pantallas más pequeñas que el
 * breakpoint 'lg' de Bootstrap (991.98px), que es cuando
 * la barra de navegación principal se colapsa.
 */
@media (max-width: 991.98px) {

    /*
     * 1. CONVERTIR EL MENÚ PRINCIPAL EN FLOTANTE
     * Modifica el menú principal colapsable (el que se activa con
     * el toggler y contiene 'Dashboard', 'Users', etc.) para que
     * flote sobre el contenido en lugar de empujarlo hacia abajo.
     *
     * La hamburguesa de "Opciones/Cierre de sesión" que mencionas
     * ya es un dropdown, por lo que debería funcionar
     * correctamente sin cambios.
     */
    .navbar-collapse.show,
    .navbar-collapse.collapsing {
        position: absolute;       /* Lo saca del flujo normal. */
        top: 100%;                /* Lo alinea justo debajo de la barra. */
        left: 0;
        right: 0;
        z-index: 1021;            /* Estándar de Bootstrap para elementos flotantes. */

        /* Estilos visuales para que coincida con la barra */
        background-color: #FAF8F7; /* Mismo fondo que header.navbar. */
        border-bottom: 1px solid #dee2e6; /* Mismo borde que header.navbar. */
        box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, .075); /* Sombra. */
    }

    /*
     * Añade un padding interior al menú flotante para que los
     * enlaces no queden pegados a los bordes.
     */
    .navbar-collapse.show .navbar-nav,
    .navbar-collapse.collapsing .navbar-nav {
         padding: 0.5rem 1rem;
    }

    /*
     * 2. MOVER ICONOS (CHAT/NOTIFICACIONES) A LA BARRA
     *
     * NO PODEMOS MOVER elementos con CSS si están DENTRO del
     * menú colapsable en el HTML.
     *
     * ESTA SOLUCIÓN ASUME que tus iconos de Chat y Notificaciones
     * ya están en la barra (fuera del .navbar-collapse) pero
     * ocultos en móvil (ej: con 'd-none d-lg-block').
     *
     * Si ese es el caso, AÑADE aquí las clases o IDs de tus iconos
     * para forzar que se muestren.
     *
     * Ejemplo (¡DEBES CAMBIAR ESTOS SELECTORES!):
     */

    /*
    .navbar-nav .tu-clase-para-icono-chat,
    .navbar-nav .tu-clase-para-icono-notificacion {
         display: flex !important;
         order: -1; // Los mueve antes de otros elementos si es necesario
    }
    */
}


/* --- ★ INICIO: CSS PARA EL EFECTO 'FLASH' (MODIFICADO) ★ --- */
  @keyframes subtle-flash {
      0%   { background-color: #ffffff; }
      70%  { background-color: #e6f7ff; } /* <-- ★ AMARILLO MÁS INTENSO ★ */
      100% { background-color: #ffffff; }
  }

  /* 1. Estilo para Grid View (Cards) */
  .card.flash-attention {
      animation: subtle-flash 2s 1;
      border: 1px solid #facc15;
      box-shadow: 0 0 10px rgba(250, 204, 21, 0.7);
  }

  /* 2. Estilo para List View (Table Rows) */
  tr.flash-attention td {
      animation: subtle-flash 2s 1;
  }
  /* --- ★ FIN: CSS PARA EL EFECTO 'FLASH' (MODIFICADO) ★ --- */

  /* --- ★ INICIO: CSS PARA EL EFECTO 'FLASH' DE ELIMINACIÓN ★ --- */
  @keyframes flash-delete {
      0%   { background-color: #ffffff; }
      30%  { background-color: #ffebee; } /* Rojo pálido */
      60%  { background-color: #ffebee; opacity: 1; }
      100% { background-color: #ffebee; opacity: 0; }
  }

  /* 1. Para Vista en Grid (Cards) */
  .card.flash-delete {
      animation: flash-delete 1.5s forwards;
      /* 'forwards' mantiene el estado final (opacity: 0) */
  }

  /* 2. Para Vista en Lista (Table Rows) */
  tr.flash-delete td {
      animation: flash-delete 1.5s forwards;
  }
  /* --- ★ FIN: CSS PARA EL EFECTO 'FLASH' DE ELIMINACIÓN ★ --- */
  /* ================================================================== */
  /* 12. FIX: MENÚ DE PACIENTE ROTO EN MÓVIL (SOBREESCRITURA)           */
  /* ================================================================== */

/* Nota: He eliminado una llave '}' extra que estaba al final de tu
   archivo original, ya que parecía ser un error. */

/* ================================================================== */
/* 14. AJUSTES RESPONSIVE PÁGINA USUARIOS (PETICIÓN USUARIO)       */
/* ================================================================== */

/*
 * Estas reglas se aplican en pantallas más pequeñas que el
 * breakpoint 'md' de Bootstrap (767.98px).
 */
@media (max-width: 767.98px) {

    /* 1. Reducir el botón "Donar d'alta" (Tu punto 1) */
    .users-header-bar .btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    /* 2. Asegurar que el título no se rompa feo */
    .users-header-bar h4 {
        font-size: 1.25rem; /* Ligeramente más pequeño que h4 normal */
    }
    
    /* 3. Ajustes para la nueva fila de filtros (Switch + Dropdown) */
    
    #pacients-panel .form-check-label {
         /* Evitar que "Només els meus" se parta en dos líneas */
        white-space: nowrap;
    }

    /* Las clases .mobile-filter-* se mueven a la Sección 17 */
}

/* ================================================================== */
/* 15. AJUSTES RESPONSIVE PÁGINA GALERÍA (PETICIÓN USUARIO)     */
/* ================================================================== */

@media (max-width: 767.98px) {

    /* 1. Reducir botones "Afegir Vídeo/Imatge" */
    .gallery-header-bar .btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }

    .gallery-header-bar h4 {
         font-size: 1.25rem;
    }

    /* Las clases .mobile-filter-* se mueven a la Sección 17 */
}

/* ================================================================== */
/* 16. AJUSTES RESPONSIVE PÁGINA EXERCICIS (PETICIÓN USUARIO)    */
/* ================================================================== */
@media (max-width: 767.98px) {
    /* 1. Reducir botón "Nou Exercici" */
    .exercises-header-bar .btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }
    .exercises-header-bar h4 {
         font-size: 1.25rem;
    }
    /* * Nota: El "text-nowrap" para "Només els meus" se añadió
     * directamente en el HTML de exercises.php, por lo que
     * no se necesita una regla CSS específica aquí.
     */
}

/* ================================================================== */
/* 17. CLASES COMPARTIDAS FILTROS RESPONSIVE (MÓVIL)            */
/* ================================================================== */
@media (max-width: 767.98px) {
    
    /* Hacer que el dropdown/select ocupe el espacio restante */
    .mobile-filter-flex-grow {
        width: 100% !important;
        max-width: none !important; /* Anular max-width en móvil */
    }
    
    /* Hacer que el buscador ocupe todo el ancho */
    .mobile-filter-full-width {
        width: 100% !important;
        max-width: none !important;
    }

    /* Hacer que los grupos de botones crezcan */
    .mobile-filter-btn-group {
         flex-grow: 1;
    }
    
    /* Distribuir botones dentro de los grupos */
    .mobile-filter-btn-group .btn {
        flex-basis: 0;
        flex-grow: 1;
    }
}

/* ================================================================== */
/* 18. AJUSTES RESPONSIVE PÁGINA PROTOCOLS (PETICIÓN USUARIO)   */
/* ================================================================== */
@media (max-width: 767.98px) {
    /* 1. Reducir botón "Nou Protocol" */
    .protocols-header-bar .btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }
    .protocols-header-bar h4 {
         font-size: 1.25rem;
    }

    /* 2. Etiqueta "Només els meus" en una línea */
    #filterMyProtocols + .form-check-label {
        white-space: nowrap;
    }
}

/* ================================================================== */
/* 19. AJUSTES RESPONSIVE PÁGINA TRACTAMENTS (PETICIÓN USUARIO) */
/* ================================================================== */
@media (max-width: 767.98px) {
    /* 1. Reducir botón "Nou Tractament" */
    .treatments-header-bar .btn {
        font-size: 0.8rem !important;
        padding: 0.3rem 0.6rem !important;
    }
    .treatments-header-bar h4 {
         font-size: 1.25rem;
    }

    /* 2. Etiqueta "Només els meus" en una línea */
    #filterMyTreatments + .form-check-label {
        white-space: nowrap;
    }
}