/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Estilos personalizados para cards de procedimientos */

/* Animación de entrada para cards */
@keyframes cardSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.procedure-card {
  animation: cardSlideIn 0.3s ease-out;
}

/* Efecto de hover mejorado */
.procedure-card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Separación entre cards */
.procedure-card + .procedure-card {
  margin-top: 1.5rem;
}

/* Línea divisoria sutil entre cards */
.procedure-card::after {
  content: '';
  position: absolute;
  bottom: -0.75rem;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(156, 163, 175, 0.3), transparent);
}

/* Efecto de profundidad para secciones internas */
.card-section {
  position: relative;
  overflow: hidden;
}

.card-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(156, 163, 175, 0.2), transparent);
}

/* Badges de estado mejorados */
.status-badge {
  position: relative;
  overflow: hidden;
}

.status-badge::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: left 0.5s;
}

.status-badge:hover::before {
  left: 100%;
}

/* Efecto de pulso para estados pendientes */
.status-pending {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

/* Estilos para botón de cerrar modal (estandarizado) */
.close-button {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2rem;
  height: 2rem;
  border: none;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.375rem;
  transition: all 0.2s ease-in-out;
  z-index: 10;
}

.close-button:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.close-button:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(147, 51, 234, 0.5);
}

/* Dark mode para botón de cerrar */
.dark .close-button {
  color: #9ca3af;
}

.dark .close-button:hover {
  background-color: #4b5563;
  color: #f9fafb;
}

/* Mejoras para modo oscuro */
.dark .procedure-card {
  border-color: rgba(75, 85, 99, 0.5);
}

.dark .procedure-card:hover {
  border-color: rgba(156, 163, 175, 0.8);
}

/* Efecto de glassmorphism sutil */
.glass-effect {
  backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.95);
}

.dark .glass-effect {
  background: rgba(31, 41, 55, 0.95);
}

/* Botones con efecto de profundidad */
.btn-depth {
  position: relative;
  transition: all 0.2s ease;
}

.btn-depth:active {
  transform: translateY(1px);
}

.btn-depth::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%, rgba(0, 0, 0, 0.1) 100%);
  border-radius: inherit;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.btn-depth:hover::before {
  opacity: 1;
}

/* Responsive improvements */
@media (max-width: 768px) {
  .procedure-card {
    margin-bottom: 1rem;
  }
  
  .procedure-card:hover {
    transform: translateY(-2px) scale(1.01);
  }
}

/* Loading skeleton para cards */
.card-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.dark .card-skeleton {
  background: linear-gradient(90deg, #374151 25%, #4b5563 50%, #374151 75%);
  background-size: 200% 100%;
}

/* Estilos para datepicker en modales */
.easepick-wrapper {
  z-index: 999999 !important;
}

/* Asegurar que el datepicker se muestre por encima del modal */
.modal .easepick-wrapper {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Ajustar posición del datepicker en modales */
.modal .easepick-calendar {
  position: fixed !important;
  z-index: 999999 !important;
}

/* Asegurar que el backdrop del modal no interfiera */
.modal .fixed.inset-0.bg-gray-600.bg-opacity-50 {
  z-index: 40;
}

.modal .relative.bg-white {
  z-index: 50;
}

/* Posicionamiento de dropdowns del header - BASE PARA TODAS LAS PANTALLAS */
#apps-dropdown,
#dropdown-2,
[data-notifications-target="dropdown"],
[data-search-target="dropdown"],
[data-search-target="desktopResults"] {
  position: fixed !important;
  top: 80px !important;
  right: 16px !important;
  left: auto !important;
  transform: none !important;
  z-index: 9999 !important;
  margin: 0 !important;
  inset: auto !important;
  /* Override cualquier estilo inline de Flowbite */
  bottom: auto !important;
  /* Forzar desde el viewport, no desde el contenedor padre */
  width: auto !important;
  max-width: 400px !important;
}

/* Responsive positioning */
@media (max-width: 640px) {
  #apps-dropdown,
  #dropdown-2,
  [data-notifications-target="dropdown"],
  [data-search-target="dropdown"],
  [data-search-target="desktopResults"] {
    right: 8px !important;
    top: 70px !important;
  }
}

/* Tablet positioning */
@media (min-width: 641px) and (max-width: 1023px) {
  #apps-dropdown,
  #dropdown-2,
  [data-notifications-target="dropdown"],
  [data-search-target="dropdown"],
  [data-search-target="desktopResults"] {
    right: 20px !important;
    top: 82px !important;
  }
}

/* Desktop positioning más específico */
@media (min-width: 1024px) {
  #apps-dropdown,
  #dropdown-2,
  [data-notifications-target="dropdown"],
  [data-search-target="dropdown"],
  [data-search-target="desktopResults"] {
    right: 24px !important;
    top: 85px !important;
  }
}

/* Ajuste específico para cuando el input de búsqueda desktop está visible */
@media (min-width: 641px) {
  /* Forzar posición fija desde el borde derecho */
  body:has([data-search-target="inputWrapper"]:not(.hidden)) #apps-dropdown,
  body:has([data-search-target="inputWrapper"]:not(.hidden)) #dropdown-2,
  body:has([data-search-target="inputWrapper"]:not(.hidden)) [data-notifications-target="dropdown"] {
    right: 24px !important;
    position: fixed !important;
    top: 85px !important;
    left: auto !important;
  }
}

/* Fallback para navegadores que no soportan :has() */
@supports not (selector(:has(*))) {
  @media (min-width: 641px) {
    #apps-dropdown,
    #dropdown-2,
    [data-notifications-target="dropdown"] {
      right: 24px !important;
      position: fixed !important;
      top: 85px !important;
      left: auto !important;
    }
  }
}

/* Apps dropdown con scroll interno */
#apps-dropdown {
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  width: min(400px, calc(100vw - 32px));
}

/* Estados activos para iconos */
.header-icon.active {
  color: #7c3aed !important;
  background-color: #f3f4f6 !important;
}

/* Estados hover consistentes para iconos */
.header-icon:hover {
  color: #7c3aed !important;
  background-color: #f3f4f6 !important;
  transition: all 0.2s ease-in-out;
}

/* Estilos para búsqueda */
.search-container {
  max-width: 600px;
}

.results-container {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.results-visible {
  max-height: 1000px;
  opacity: 1 !important;
  visibility: visible !important;
}

.avatar-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgb(126 58 242/var(--tw-bg-opacity, 1));
  color: white;
  font-weight: 600;
}

/* Comportamiento responsive para la barra de búsqueda */
@media (min-width: 641px) {
  .search-container [data-search-target="dropdown"] {
    display: none !important;
  }
}

/* Import signature pad styles */
@import "signature_pad.css";

/* ===== ESTILOS PARA MODALES ===== */
/* Los modales ahora usan el sistema global de Flowbite y close_modal_controller.js */

/* ===== ESTILOS PARA MODALES ===== */
/* Los modales ahora usan el sistema global de Flowbite y modal_controller.js */

/* ===== ANIMACIONES PARA CARDS COLAPSABLES ===== */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.animate-fadeIn {
  animation: fadeIn 0.3s ease-out;
}

.animate-fadeOut {
  animation: fadeOut 0.2s ease-in;
}

/* ===== ESTILOS PARA TABLAS DEL HISTORIAL ===== */
.history-table {
  border-collapse: separate;
  border-spacing: 0;
}

.history-table th {
  position: sticky;
  top: 0;
  z-index: 10;
}

.history-table tbody tr:hover {
  background-color: rgba(124, 58, 237, 0.05);
  transition: background-color 0.2s ease;
}

/* Estilos para paginación */
.pagy-nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pagy-nav a {
  transition: all 0.2s ease;
}

.pagy-nav a:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Responsive para tablas */
@media (max-width: 768px) {
  .history-table {
    font-size: 0.875rem;
  }
  
  .history-table th,
  .history-table td {
    padding: 0.5rem 0.25rem;
  }
}

/* Estilos específicos para botones de cerrar */
.close-button {
  background: none;
  border: none;
  color: #6b7280;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.close-button:hover {
  background-color: #f3f4f6;
  color: #374151;
}

.close-button:focus {
  outline: 2px solid #7c3aed;
  outline-offset: 2px;
}

/* Asegurar que los modales de empleados tengan el z-index correcto */
.modal:has(.employee-modal-content) {
  z-index: 60 !important;
}

/* Fallback para navegadores que no soportan :has() */
@supports not (selector(:has(*))) {
  .modal.employee-modal-active {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 60 !important;
  }
}

/* Asegurar que los modales de empleados tengan el backdrop correcto */
.modal:has(.employee-modal-content) .bg-gray-600.bg-opacity-50 {
  z-index: 55 !important;
}

/* CRÍTICO: Asegurar que el contenido del modal esté por encima del backdrop */
.modal:has(.employee-modal-content) .relative {
  z-index: 70 !important;
  position: relative !important;
}

/* Asegurar que el modal principal tenga el z-index correcto */
.modal:has(.employee-modal-content) {
  z-index: 60 !important;
}

/* CRÍTICO: Asegurar que el turbo_frame del modal esté por encima */
.modal:has(.employee-modal-content) turbo-frame {
  z-index: 70 !important;
  position: relative !important;
}

/* SOLUCIÓN SEGURA: Solo para modales de empleados específicamente */
/* ⚠️ IMPORTANTE: Estos estilos SOLO afectan a modales con clase .employee-modal-content */
/* ✅ NO interfieren con otros modales del sistema */

/* 1. Modal principal de empleados - z-index moderado */
.modal:has(.employee-modal-content) {
  z-index: 60 !important;
}

/* 2. Contenido del modal de empleados - por encima del backdrop */
.employee-modal-content {
  z-index: 65 !important;
  position: relative !important;
}

/* 3. Backdrop del modal de empleados - por debajo del contenido */
.modal:has(.employee-modal-content) .bg-gray-600.bg-opacity-50 {
  z-index: 55 !important;
  position: fixed !important;
}

/* 4. Elementos específicos del modal de empleados */
.employee-modal-content .close-button,
.employee-modal-content button,
.employee-modal-content input,
.employee-modal-content textarea,
.employee-modal-content a {
  z-index: 66 !important;
  position: relative !important;
}

/* 5. Asegurar que el backdrop no interfiera con la interacción (solo empleados) */
.modal:has(.employee-modal-content) .bg-gray-600.bg-opacity-50 {
  pointer-events: none !important;
}

/* Mejorar la apariencia de los modales de empleados */
.employee-modal-content {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  border: 1px solid rgba(229, 231, 235, 0.5) !important;
}

/* Asegurar que los botones tengan el espaciado correcto */
.employee-modal-content .flex.space-x-3 > * + * {
  margin-left: 0.75rem !important;
}

/* Mejorar la apariencia de los campos de formulario */
.employee-modal-content input,
.employee-modal-content textarea {
  border-radius: 0.5rem !important;
  border: 1px solid #d1d5db !important;
  transition: all 0.2s ease !important;
}

.employee-modal-content input:focus,
.employee-modal-content textarea:focus {
  border-color: #7c3aed !important;
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1) !important;
}