/* Importar estilos de Tailwind CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* 
 * Utilidades personalizadas para la aplicación
 * Este archivo contiene utilidades personalizadas que extienden Tailwind
 */

/* Definir la paleta de colores */
:root {
  /* Colores primarios - Violeta */
  --color-primary: #7c3aed; /* Violeta 600 - Color principal */
  --color-primary-light: #a78bfa; /* Violeta 400 - Versión clara */
  --color-primary-dark: #5b21b6; /* Violeta 800 - Versión oscura */
  --color-primary-focus: rgba(124, 58, 237, 0.1); /* Para efectos de focus */

  /* Colores secundarios */
  --color-secondary: #388e3c; /* Verde */
  --color-secondary-light: #81c784; /* Verde claro */
  --color-secondary-dark: #1b5e20; /* Verde oscuro */

  /* Colores de fondo */
  --color-background: #f5f5f5;
  --color-surface: #ffffff;
  --color-navbar: #ffffff;
  --color-navbar-text: #4a3b76;
  --color-navbar-border: #e6e6e6;
  --color-navbar-accent: #5d4b9c;

  /* Estados y feedback */
  --color-error: #f44336;
  --color-warning: #ff9800;
  --color-success: #10b981;
  --color-info: #2196f3;
  --color-border-hover: #5a67d8;

  /* Variables para espaciado */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
}

/* 
 * Utilidades base para formularios
 */

/* Clase base para todos los inputs */
.form-input,
.form-input:focus,
.form-input:disabled,
.form-input[readonly] {
  @apply block w-full px-3 py-2 border-2 border-gray-300 rounded-md 
         bg-white text-gray-900 placeholder-gray-500 shadow-sm 
         focus:outline-none focus:border-primary-500 focus:ring-2 
         focus:ring-primary-500 focus:ring-opacity-50 focus:ring-offset-1
         disabled:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-75
         disabled:border-gray-200;
  min-height: 2.5rem;
  min-width: 200px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 0 0 3px var(--color-primary-focus);
}

/* Textarea específico */
.form-textarea {
  @apply block w-full px-3 py-2 border-2 border-gray-300 rounded-md 
         bg-white text-gray-900 placeholder-gray-500 shadow-sm 
         focus:outline-none focus:border-primary-500 focus:ring-2 
         focus:ring-primary-500 focus:ring-opacity-50 focus:ring-offset-1
         disabled:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-75
         disabled:border-gray-200 resize-y;
  min-height: 100px;
}

/* Estilos para etiquetas y ayuda */
.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-help {
  @apply mt-1 text-sm text-gray-500;
}

/* Clases para estados */
.status-active {
  @apply bg-green-100 text-green-800;
}

.status-inactive {
  @apply bg-red-100 text-red-800;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

.form-help {
  @apply mt-1 text-sm text-gray-500;
}

/* Utilidades para espaciado */
.section-container {
  @apply px-4 sm:px-6 lg:px-8 py-8;
}

.section-wrapper {
  @apply max-w-7xl mx-auto;
}

/* 
 * Componentes con utilidades de Tailwind 
 */
@layer components {
  /* ===== ESTILOS DE BOTONES ===== */
  .btn {
    @apply inline-flex items-center justify-center px-4 py-2 text-sm font-medium rounded-md 
           focus:outline-none focus:ring-2 focus:ring-offset-2 
           transition-all duration-200 ease-in-out
           border border-transparent
           disabled:opacity-50 disabled:cursor-not-allowed;
  }

  /* Tamaños */
  .btn-sm {
    @apply px-3 py-1.5 text-xs;
    min-height: 32px;
  }

  .btn-md {
    @apply px-4 py-2 text-sm;
  }

  .btn-lg {
    @apply px-6 py-3 text-base;
    min-height: 48px;
  }

  .btn-xl {
    @apply px-8 py-4 text-lg;
  }

  /* Botón de volver */
  .btn-back {
    @apply inline-flex items-center text-gray-600 hover:text-gray-800
           transition-colors duration-200 font-medium text-sm
           focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-300
           hover:bg-gray-50 px-3 py-2 rounded-md;
  }

  .btn-back i {
    @apply mr-1.5 text-gray-500;
  }

  .btn-back:hover i {
    @apply text-gray-700;
  }

  /* Variantes de color */
  .btn-primary {
    @apply bg-primary-600 hover:bg-primary-700 text-white 
           focus:ring-primary-500
           border-primary-700;
  }

  .btn-secondary {
    @apply bg-white border border-gray-300 text-gray-700 
           hover:bg-gray-50 focus:ring-gray-500;
  }

  .btn-success {
    @apply bg-emerald-600 hover:bg-emerald-700 text-white
           focus:ring-emerald-500 border-emerald-700;
  }

  .btn-danger {
    @apply bg-rose-600 hover:bg-rose-700 text-white
           focus:ring-rose-500 border-rose-700;
  }

  .btn-warning {
    @apply bg-amber-500 hover:bg-amber-600 text-white
           focus:ring-amber-400 border-amber-600;
  }

  .btn-info {
    @apply bg-blue-500 text-white hover:bg-blue-600 focus:ring-blue-500;
  }

  /* Botones outline */
  .btn-outline {
    @apply bg-transparent border-2 border-gray-300 text-gray-700 hover:bg-gray-50;
  }

  .btn-outline-primary {
    @apply border border-primary-600 text-primary-700 
           hover:bg-primary-50 hover:text-primary-800 
           focus:ring-primary-500 hover:shadow-sm;
  }

  /* Botones con iconos */
  .btn-icon {
    @apply p-2 rounded-full;
  }

  .btn-icon svg {
    @apply w-4 h-4;
  }

  .btn-icon-text {
    @apply space-x-2;
  }

  /* Grupos de botones */
  .btn-group {
    @apply inline-flex rounded-md shadow-sm;
  }

  .btn-group .btn {
    @apply rounded-none -ml-px;
  }

  .btn-group .btn:first-child {
    @apply rounded-l-md ml-0;
  }

  .btn-group .btn:last-child {
    @apply rounded-r-md;
  }

  /* Contenedor para botones de acción en formularios */
  .form-actions {
    @apply w-full mt-8 flex justify-start space-x-3;
  }

  /* Estilo específico para el botón de guardar en formularios */
  .btn-primary[type="submit"] {
    @apply bg-primary-600 hover:bg-primary-700 text-white;
  }

  .btn-icon-text {
    @apply space-x-2;
  }

  /* Grupos de botones */
  .btn-group {
    @apply inline-flex rounded-md shadow-sm;
  }

  .btn-group .btn {
    @apply rounded-none -ml-px;
  }

  .btn-group .btn:first-child {
    @apply rounded-l-md ml-0;
  }

  .btn-group .btn:last-child {
    @apply rounded-r-md;
  }

  /* Estilos consistentes para campos de formulario */
  select.form-select,
  textarea.form-textarea,
  textarea.form-input,
  input[type="text"].form-input,
  input[type="email"].form-input,
  input[type="password"].form-input,
  input[type="number"].form-input {
    @apply block w-full rounded-md border-2 border-gray-300 shadow-sm sm:text-sm px-3 py-2;
    min-height: 2.5rem;
    transition: all 0.2s ease-in-out;
    background-color: white;
  }

  /* Estilos de focus consistentes para todos los campos */
  input.form-input:focus,
  select.form-select:focus,
  textarea.form-textarea:focus,
  textarea.form-input:focus {
    @apply border-primary-500 ring-2 ring-primary-500 ring-opacity-50 ring-offset-1;
    box-shadow: 0 0 0 3px var(--color-primary-focus);
    outline: 2px solid transparent;
    outline-offset: 2px;
  }

  /* Estilos para selects */
  select.form-select {
    @apply pr-10 bg-white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Estilos específicos para textareas */
  .form-textarea {
    @apply resize-y;
    min-height: 100px;
  }

  /* Clases para tarjetas */
  .card {
    @apply bg-white overflow-hidden shadow rounded-lg;
  }

  .card-header {
    @apply px-4 py-5 sm:px-6 bg-white border-b border-gray-200;
  }

  .card-body {
    @apply px-4 py-5 sm:p-6;
  }

  /* ======================
     ESTILOS DE PESTAÑAS Y SECCIONES
     ====================== */

  /* Contenedor de pestañas */
  .tabs-container {
    @apply mb-8;
  }

  /* Barra de navegación de pestañas */
  .tabs-nav {
    @apply flex space-x-1 border-b border-gray-200 mb-6;
  }

  /* Pestaña individual */
  .tab {
    @apply px-4 py-2.5 text-sm font-medium rounded-t-md transition-colors duration-200 flex items-center space-x-2;
    @apply text-gray-500 hover:text-primary-700 hover:bg-primary-50;
  }

  /* Pestaña activa */
  .tab.active {
    @apply text-primary-700 bg-white border-t-2 border-primary-500 font-semibold;
    @apply shadow-sm -mb-px relative;
  }

  /* Iconos en pestañas */
  .tab i {
    @apply text-lg leading-none;
  }

  /* Contenido de pestaña */
  .tab-content {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 overflow-hidden;
  }

  /* ======================
     ENCABEZADO DE PESTAÑA
     ====================== */
  /* ======================
     ENCABEZADO DE PESTAÑA
     ====================== */
  .tab-header {
    /* NOTE: Altura mínima estandarizada para headers de tabs para consistencia visual entre vistas.
       Ver patrón en context/patterns/tabs.md */
    @apply relative px-8 py-4 bg-gradient-to-r from-white via-primary-50/30 to-purple-50/20 border-b border-gray-200;
    min-height: 64px; /* Compactado un poco más */
  }

  /* NOTE: Flush purple bar for tab headers.
     Aligns the decorative bar with the card's top edge without negative margins.
     Replaces prior -mt-px hacks on headers. See: context/patterns/tabs.md */
  .tab-header-bar {
    position: absolute;
    left: 0;
    top: -1px;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to bottom, #4f46e5 0%, #7c3aed 100%);
    z-index: 10;
    border-radius: 0 4px 4px 0;
    display: block !important;
    height: calc(100% + 1px);
  }

  .tab-title {
    @apply text-xl font-bold text-gray-900 leading-tight tracking-tight;
  }

  .tab-subtitle {
    @apply mt-1 text-sm text-gray-500;
  }

  /* Ensure tab header controls are above in-card overlays (e.g., spinners)
     while keeping the global navbar (z-40) above the tab headers. */
  .tab-header,
  .tab-header .btn {
    position: relative;
    z-index: 30; /* above in-card overlays but below navbar */
  }

  /* Scope spinner overlays inside tab body so they don't cover the header */
  .tab-body .spinner-overlay {
    z-index: 20 !important;
  }

  /* ======================
     CUERPO DE PESTAÑA
     ====================== */
  .tab-body {
    @apply p-6;
  }

  /* ======================
     BARRA DE ACCIONES CARD
     ====================== */
  /* NOTE: Standard action bar spacing for tabs.
     Centralizes padding/margins so buttons don’t sit on the card bottom.
     Use in in-card actions to keep consistent spacing. See: context/patterns/tabs.md */
  .actions-bar {
    @apply border-t border-gray-200 px-6 pt-4 pb-8 mb-6;
  }

  /* ======================
     ESTILOS DE SECCIONES
     ====================== */
  /* ======================
     ESTILOS PARA TÍTULOS DE SECCIÓN
     ====================== */
  .section-title,
  h2.section-title,
  .card h2.section-title,
  .card .section-title {
    font-size: 1.125rem !important;
    font-weight: 600 !important;
    color: var(--color-primary) !important;
    margin: 0 0 1rem 0 !important;
    padding: 0 0 0.5rem 0.75rem !important; /* Añadido padding izquierdo para la viñeta */
    background-image: linear-gradient(
      to right,
      rgba(79, 70, 229, 0.1) 0%,
      rgba(79, 70, 229, 0.3) 50%,
      rgba(79, 70, 229, 0.1) 100%
    );
    background-repeat: no-repeat;
    background-size: 100% 1px;
    background-position: 0 100%;
    padding-bottom: 0.75rem !important;
    letter-spacing: -0.01em !important;
    display: block !important;
    width: 100% !important;
    position: relative;
  }

  /* Viñeta decorativa circular */
  .section-title:before,
  h2.section-title:before,
  .card h2.section-title:before,
  .card .section-title:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.7em; /* Ajuste fino para alinear con la línea base del texto */
    width: 6px;
    height: 6px;
    background-color: var(--color-primary);
    border-radius: 50%;
    display: inline-block;
    opacity: 0.7;
    margin-top: -3px; /* Mitad de la altura para centrar verticalmente */
  }

  /* ===== BADGES ===== */
  .badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
  }

  .badge-success {
    @apply bg-green-100 text-green-800;
  }

  .badge-neutral {
    @apply bg-gray-100 text-gray-800;
  }

  .badge-icon {
    @apply -ml-0.5 mr-1.5 h-2 w-2;
  }

  /* ===== MENSAJES DE ERROR ===== */
  .form-error {
    @apply mt-1 text-sm text-red-600;
  }

  /* ===== VISTA DE SOLO LECTURA ===== */
  .readonly-field {
    @apply mb-4;
  }

  .readonly-label {
    @apply block text-sm font-medium text-gray-500;
  }

  .readonly-value {
    @apply mt-1 text-sm text-gray-900;
  }

  .readonly-link {
    @apply ml-2 text-xs text-primary-600 hover:text-primary-900;
  }

  /* Asegurar que el título tenga suficiente espacio debajo */
  .section-title + *,
  h2.section-title + * {
    margin-top: 1.5rem !important;
  }

  .section-subtitle {
    @apply text-sm text-gray-600 mb-5 font-medium;
  }

  .section-content {
    @apply space-y-6;
  }

  /* Grupos de campos */
  .form-group {
    @apply space-y-2;
  }

  /* Etiquetas de formulario */
  .form-label {
    @apply block text-sm font-medium text-gray-700 mb-1;
  }

  /* Texto de ayuda */
  .form-help {
    @apply mt-1 text-xs text-gray-500;
  }

  /* Secciones con borde superior */
  .bordered-section {
    @apply pt-6 mt-8 border-t border-gray-200;
  }

  /* === Estilos para campos autocompletados === */
  /* Campos que han sido autocompletados por la API fiscal */
  .form-input.autocompleted,
  .form-textarea.autocompleted,
  .form-select.autocompleted,
  /* Estilos para campos autocompletados */
  .form-input.autocompleted,
  .form-textarea.autocompleted,
  .form-select.autocompleted {
    background-color: #f3f4f6 !important; /* bg-gray-100 */
    border-color: #8b5cf6 !important; /* border-violet-500 */
    border-width: 2px !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.1) !important;
  }

  .form-input.autocompleted:focus,
  .form-textarea.autocompleted:focus,
  .form-select.autocompleted:focus {
    border-color: #7c3aed !important; /* border-violet-600 */
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1) !important;
    ring-color: #8b5cf6 !important;
  }

  /* ===== BOTONES MODERNOS ===== */
  /* Sistema de botones moderno y accesible */

  /* Base del botón */
  .btn,
  button.btn,
  a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-image: none !important;
    box-shadow: none !important;
    font-size: 0.875rem;
    font-weight: 600;
    transition: all 0.2s ease-in-out;
    outline: none;
    position: relative;
    overflow: hidden;
    padding: 0.625rem 1.5rem;
    min-height: 42px;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
    cursor: pointer;
  }

  /* Estados del botón */
  .btn:disabled,
  button.btn:disabled,
  a.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
  }

  /* Efecto hover y active */
  .btn:not(:disabled):hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  }

  /* Botón para agregar actividad */
  .btn-add-activity {
    @apply btn btn-primary btn-sm;
  }

  /* Estilos para columnas fijas en tablas */
  .table-sticky-container {
    overflow-x: auto;
    position: relative;
    width: 100%;
  }

  /* Estructura básica de la tabla con columna fija */
  .table-with-sticky-column {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
  }

  /* Estilos para el encabezado de columna fija */
  .sticky-column-header {
    position: -webkit-sticky; /* Safari */
    position: sticky !important;
    right: 0 !important;
    z-index: 2 !important;
    background-color: #f9fafb !important;
    box-shadow: -5px 0 8px -5px rgba(0, 0, 0, 0.15) !important;
  }

  /* Estilos para las celdas de columna fija */
  .sticky-column-cell {
    position: -webkit-sticky; /* Safari */
    position: sticky !important;
    right: 0 !important;
    z-index: 1 !important;
    background-color: #ffffff !important;
    box-shadow: -5px 0 8px -5px rgba(0, 0, 0, 0.15) !important;
  }

  /* Logo */
  .logo {
    width: 55px;
    height: 55px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-weight: normal;
    letter-spacing: 0.1em;
    font-size: 12px;
    font-family: "Roboto", sans-serif;
    border-radius: 50%;
    border: 2px solid;
    background-color: transparent;
    margin: 0 auto;
  }

  /* Estilos del Navbar */
  .custom-nav {
    background: var(--color-navbar);
    color: var(--color-navbar-text);
    padding: 0.75rem 1rem;
    font-family: "Roboto", sans-serif;
    border-bottom: 1px solid var(--color-navbar-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* Media queries para dispositivos móviles */
  @media (max-width: 640px) {
    .custom-nav {
      padding: 0.5rem 0.75rem;
    }
  }

  .custom-nav::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(
      to right,
      transparent,
      var(--color-navbar-accent),
      transparent
    );
    opacity: 0.3;
  }

  /* Estilos del formulario de añadir producto y de inicio de sesión */
  .form-container,
  .login-form {
    max-width: 30rem;
    margin: 0 auto;
    padding: 2rem;
    background-color: var(--color-surface);
    border-radius: 0.5rem;
    box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
  }

  .form-container h1,
  .login-form h1 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 1rem;
  }

  /* Nuevas clases estandarizadas */
  .form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 2px solid #d1d5db;
    border-radius: 0.375rem;
    color: #111827;
    background-color: #ffffff;
    min-height: 40px;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  }

  .form-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
  }

  .form-input::placeholder {
    color: #6b7280;
  }

  /* Estilo especial para campos completados automáticamente */
  .form-input.bg-green-50 {
    border-color: #10b981;
    background-color: #f0fdf4;
  }

  /* Textarea específico - ya cubierto por .form-textarea */

  /* Campo readonly */
  .form-input[readonly] {
    background-color: #f9fafb;
    color: #4b5563;
    cursor: not-allowed;
  }

  .form-button {
    @apply inline-flex items-center justify-center px-4 py-2 border border-transparent;
    @apply text-sm font-medium rounded-md text-white bg-primary-600;
    @apply hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500;
    @apply transition-colors duration-200 ease-in-out;
    background-image: none !important;
    box-shadow: none !important;
    height: 45px;
  }

  .card-container {
    @apply bg-white p-6 rounded-lg border border-gray-200 shadow-sm;
    @apply hover:shadow-md transition-shadow duration-200 ease-in-out;
  }

  /* Se elimina la definición duplicada de .custom-btn porque ahora usamos .btn */

  /* Se elimina la definición duplicada de .primary-btn porque ahora usamos .btn-primary */

  .secondary-btn,
  .btn.btn-secondary,
  a.btn-secondary,
  button.btn-secondary {
    /* Estilo plano, sin brillo */
    background-color: #4b5563 !important; /* gray-600 */
    color: #ffffff !important;
    box-shadow: none !important;
  }

  .secondary-btn:before,
  .btn.btn-secondary:before,
  a.btn-secondary:before,
  button.btn-secondary:before {
    /* Desactivar brillo */
    content: none !important;
  }

  .secondary-btn:hover:before,
  .btn.btn-secondary:hover:before,
  a.btn-secondary:hover:before,
  button.btn-secondary:hover:before {
    /* Sin efecto de barrido */
    content: none !important;
  }

  .secondary-btn:hover,
  .btn.btn-secondary:hover,
  a.btn-secondary:hover,
  button.btn-secondary:hover {
    background-color: #374151 !important; /* gray-700 */
    box-shadow: none !important;
    transform: none !important;
  }

  .warning-btn,
  .btn.btn-warning,
  a.btn-warning,
  button.btn-warning {
    background-color: #f59e0b !important; /* amber-500 */
    color: white !important;
    box-shadow: 0 2px 5px rgba(245, 158, 11, 0.4) !important;
  }

  .warning-btn:before,
  .btn.btn-warning:before,
  a.btn-warning:before,
  button.btn-warning:before {
    content: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.2)
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
    z-index: 1;
  }

  .warning-btn:hover:before,
  .btn.btn-warning:hover:before,
  a.btn-warning:hover:before,
  button.btn-warning:hover:before {
    transform: translateX(100%);
  }

  .warning-btn:hover,
  .btn.btn-warning:hover,
  a.btn-warning:hover,
  button.btn-warning:hover {
    background-color: #d97706 !important; /* amber-600 */
    box-shadow: none !important;
    transform: none !important;
  }

  .danger-btn,
  .btn.btn-danger,
  a.btn-danger,
  button.btn-danger {
    background-color: #ef4444 !important; /* red-500 */
    color: white !important;
    box-shadow: 0 2px 5px rgba(239, 68, 68, 0.4) !important;
  }

  .danger-btn:before,
  .btn.btn-danger:before,
  a.btn-danger:before,
  button.btn-danger:before {
    content: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.2)
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
    z-index: 1;
  }

  .danger-btn:hover:before,
  .btn.btn-danger:hover:before,
  a.btn-danger:hover:before,
  button.btn-danger:hover:before {
    transform: translateX(100%);
  }

  .danger-btn:hover,
  .btn.btn-danger:hover,
  a.btn-danger:hover,
  button.btn-danger:hover {
    background-color: #dc2626 !important; /* red-600 */
    box-shadow: none !important;
    transform: none !important;
  }

  .success-btn,
  .btn.btn-success,
  a.btn-success,
  button.btn-success {
    background-color: #10b981 !important; /* emerald-500 */
    color: white !important;
    box-shadow: 0 2px 5px rgba(16, 185, 129, 0.4) !important;
  }

  .success-btn:before,
  .btn.btn-success:before,
  a.btn-success:before,
  button.btn-success:before {
    content: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.2)
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
    z-index: 1;
  }

  .success-btn:hover:before,
  .btn.btn-success:hover:before,
  a.btn-success:hover:before,
  button.btn-success:hover:before {
    transform: translateX(100%);
  }

  .success-btn:hover,
  .btn.btn-success:hover,
  a.btn-success:hover,
  button.btn-success:hover {
    background-color: #059669 !important; /* emerald-600 */
    box-shadow: none !important;
    transform: none !important;
  }

  .info-btn,
  .btn.btn-info,
  a.btn-info,
  button.btn-info {
    background-color: #3b82f6 !important; /* blue-500 */
    color: white !important;
    box-shadow: none !important;
    background-image: none !important;
  }

  .info-btn:before,
  .btn.btn-info:before,
  a.btn-info:before,
  button.btn-info:before {
    content: none !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
      to right,
      rgba(255, 255, 255, 0.1),
      rgba(255, 255, 255, 0.2)
    );
    transform: translateX(-100%);
    transition: transform 0.6s ease-in-out;
    z-index: 1;
  }

  .info-btn:hover:before,
  .btn.btn-info:hover:before,
  a.btn-info:hover:before,
  button.btn-info:hover:before {
    transform: translateX(100%);
  }

  .info-btn:hover,
  .btn.btn-info:hover,
  a.btn-info:hover,
  button.btn-info:hover {
    background-color: #2563eb !important; /* blue-600 */
    box-shadow: none !important;
    transform: none !important;
  }

  /* ===== Componentes de Tarjeta ===== */
  .card {
    @apply bg-white rounded-xl shadow-sm overflow-hidden border border-gray-100 w-full transition-all duration-300 hover:shadow-md;
  }

  .card-header {
    @apply relative px-8 py-6 bg-gradient-to-r from-white via-primary-50/30 to-purple-50/20;
    background-image: linear-gradient(
      135deg,
      rgba(99, 102, 241, 0.05) 0%,
      rgba(168, 85, 247, 0.03) 100%
    );
    border-bottom: 1px solid #e5e7eb;
  }

  .card-title {
    @apply text-2xl font-semibold text-gray-800 relative;
  }

  .card-subtitle {
    @apply text-gray-600 mt-2 text-sm relative;
  }

  /* ===== ESQUEMA BASE PARA SECCIONES CON TABS ===== */

  /* 1. Contenedor principal de sección */
  .section-container {
    @apply py-8 px-4 sm:px-6 lg:px-8;
  }

  .section-wrapper {
    @apply max-w-7xl mx-auto;
  }

  /* 2. Header de sección (título principal) */
  .section-header {
    @apply mb-6;
  }

  .section-description {
    @apply mt-1 text-sm text-gray-500;
  }

  /* 3. Contenedor de tabs */
  .tabs-container {
    @apply mb-8;
  }

  /* 4. Contenido de tab activa */
  .tab-content {
    @apply space-y-6;
  }

  /* 5. Header de tab (título de la tab activa) */
  .tab-header {
    /* Unificado con la definición superior para evitar overrides por orden */
    @apply relative px-8 py-4 bg-gradient-to-r from-white via-primary-50/30 to-purple-50/20 border-b border-gray-200;
    min-height: 64px;
  }

  /* Barra vertical eliminada - Está definida más arriba */

  .tab-title {
    @apply text-xl font-bold text-gray-900 relative;
  }

  .tab-subtitle {
    @apply text-gray-600 mt-2 text-sm relative;
  }

  /* 6. Contenido interno de tab */
  .tab-body {
    @apply p-6;
  }

  .card-actions {
    @apply px-6 py-4 bg-gradient-to-r from-gray-50 to-white;
  }

  .btn-elevate {
    @apply transform transition-all duration-300 hover:scale-105 hover:shadow-lg;
  }

  /* Botón tipo enlace */
  .link-btn,
  .btn.btn-link,
  a.btn-link,
  button.btn-link {
    background-color: transparent !important;
    color: #4f46e5 !important; /* primary-600 */
    text-decoration: underline !important;
    padding: 0 !important;
    font-weight: normal !important;
    cursor: pointer !important;
    box-shadow: none !important;
  }

  .link-btn:hover,
  .btn.btn-link:hover,
  a.btn-link:hover,
  button.btn-link:hover {
    color: #4338ca !important; /* primary-700 */
  }

  /* Se elimina la definición duplicada de tamaños porque ahora están integrados en .btn */

  /* Botones con ancho fijo */
  .btn-fixed-sm {
    width: 100px;
    box-sizing: border-box;
  }

  .btn-fixed-md {
    width: 120px;
    box-sizing: border-box;
  }

  .btn-fixed-lg {
    width: 140px;
    box-sizing: border-box;
  }

  /* Botones de ancho completo */
  .full-width-btn {
    width: 100%;
  }

  /* Botones con iconos */
  .btn-icon svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.375rem;
  }

  /* Botones de estado (activo/inactivo) */
  .btn-state-active {
    @apply inline-flex items-center px-4 py-2 border border-green-500 text-sm font-medium rounded-md text-green-700 bg-green-50;
  }

  .btn-state-inactive {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50;
  }

  /* Tarjeta de organización activa */
  .org-card-active {
    @apply relative bg-green-50 p-6 rounded border-2 border-green-300 shadow-md;
  }

  .org-card-inactive {
    @apply bg-gray-50 p-6 rounded border border-gray-200;
  }

  .org-active-badge {
    @apply absolute -top-3 -right-3 bg-green-500 text-white text-xs px-2 py-1 rounded-full;
  }

  /* Estilos para el spinner de carga */
  .spinner-container {
    @apply flex items-center justify-center;
    @apply fixed top-0 left-0 right-0 bottom-0;
    @apply bg-black bg-opacity-50 z-50;
  }

  .spinner {
    @apply w-12 h-12 rounded-full;
    @apply border-4 border-primary-200;
    @apply border-t-4 border-t-primary-600;
    animation: spin 1s linear infinite;
  }

  .spinner-overlay {
    @apply absolute inset-0 bg-white bg-opacity-80 flex items-center justify-center z-50;
    @apply rounded-md;
  }

  .spinner-sm {
    width: 30px;
    height: 30px;
    border: 4px solid #bfdbfe; /* Azul claro para borde base */
    border-top: 4px solid #2563eb; /* Azul primario para borde animado */
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    margin-right: 10px;
  }

  .spinner-text {
    @apply ml-3 text-sm font-medium text-primary-700;
    font-weight: bold;
  }

  /* Spinner para botones */
  .btn-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    vertical-align: -0.125em;
    border: 0.15em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    margin-right: 0.5rem;
  }

  /* Ocultar el spinner cuando no está cargando */
  .btn-spinner.hidden {
    display: none;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  /* ===== Paginación (TailAdmin-like) ===== */
  .pagination-container {
    @apply inline-flex rounded-md shadow-sm;
  }

  .pagination-list {
    @apply flex items-center -space-x-px;
  }

  .page-link {
    @apply relative inline-flex items-center px-4 py-2 border text-sm font-medium bg-white text-gray-600 border-gray-300 hover:bg-gray-50;
  }

  .page-link-active {
    @apply z-10 bg-primary-50 border-primary-500 text-primary-600;
  }

  .page-link-disabled {
    @apply text-gray-300 cursor-not-allowed bg-white border-gray-200;
  }

  .page-link-gap {
    @apply bg-white text-gray-700 border-gray-300;
  }

  .nav-link {
    @apply relative inline-flex items-center px-2 py-2 bg-white text-sm font-medium text-gray-500 border border-gray-300 hover:bg-gray-50;
  }

  .nav-prev {
    @apply rounded-l-md;
  }

  .nav-next {
    @apply rounded-r-md;
  }

  /* Estilos para notificaciones flash fijas */
  #flash-container {
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 50;
    width: 100%;
    max-width: 24rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    pointer-events: none;
    padding: 0 1rem;
    box-sizing: border-box;
  }
}

/* Estilos para notificaciones individuales */
#flash-container > div {
  position: relative;
  width: 100%;
  opacity: 0;
  transform: translateY(-1rem);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: auto;
  animation: slideIn 0.3s ease forwards;
}

/* Animación de entrada */
@keyframes slideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación de salida */
#flash-container > div.fade-out {
  animation: fadeOut 0.5s ease forwards;
}

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

/* Estilos para notificaciones toast - Versión minimalista */
#toast-container {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  z-index: 9999;
  pointer-events: none;
  max-height: 100vh;
  overflow: visible;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
}

.toast-notification {
  position: relative;
  padding: 0.75rem 1rem;
  border-radius: 0.375rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  color: white;
  max-width: 24rem;
  word-break: break-word;
  pointer-events: auto;
  margin-bottom: 0.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.toast-notification.show {
  opacity: 1;
  transform: translateY(0);
}

/* Colores para diferentes tipos de notificaciones */
.toast-success {
  background-color: #10b981;
}
.toast-error {
  background-color: #ef4444;
}
.toast-warning {
  background-color: #f59e0b;
}
.toast-info {
  background-color: #3b82f6;
}

/* Estilos para la paginación */
.pagination {
  @apply flex items-center space-x-2;
}

.pagination a,
.pagination span {
  @apply px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50;
  transition: all 0.2s ease-in-out;
}

.pagination .current {
  @apply bg-primary-600 text-white border-primary-600;
}

.pagination .disabled {
  @apply opacity-50 cursor-not-allowed;
}

.pagination a:hover:not(.disabled) {
  @apply bg-primary-50 border-primary-500 text-primary-700;
}

/* Estilos para el sidebar */
.sidebar {
  @apply fixed top-0 left-0 h-screen w-64 shadow-lg z-50 transform transition-transform duration-300 ease-in-out;
  /* Posición inicial: oculto */
  transform: translateX(-100%);
}

/* Estilos para el overlay del sidebar */
#sidebar-overlay {
  @apply fixed inset-0 bg-black bg-opacity-50 z-40 transition-opacity duration-300 opacity-0 md:hidden;
}

/* Clase para cuando el sidebar está abierto */
.sidebar-open .sidebar {
  @apply translate-x-0;
  transform: translateX(0) !important;
}

/* Clase para cuando el sidebar está cerrado */
.sidebar-closed .sidebar {
  @apply -translate-x-full;
  transform: translateX(-100%) !important;
}

/* Estilos para los enlaces del sidebar */
.sidebar-link {
  @apply flex items-center px-6 py-3 text-gray-700 hover:bg-gray-100 transition-colors duration-200;
}

.sidebar-link.active {
  @apply bg-primary-50 text-primary-600 border-r-4 border-primary-600;
}

/* Efectos al pasar el ratón ahora están definidos para cada variante */

/* Media queries para diseño responsivo */
@media (max-width: 640px) {
  .form-container,
  .login-form {
    max-width: 100%;
    padding: 1rem;
  }

  /* Los tamaños de fuente ahora se manejan con las clases .btn .btn-sm|btn-lg */
}

@media (max-width: 768px) {
  .btn-fixed-lg,
  .btn-fixed-md {
    width: 100%;
  }
}

/* Media query para dispositivos muy pequeños */
@media (max-width: 360px) {
  .btn-sm,
  .btn-md,
  .btn-lg {
    min-width: 0;
    width: 100%;
  }
}

/* Los estilos del botón de logout se han eliminado ya que ahora está integrado en el sidebar */

/* === Form Field Styles === */
@layer components {
  /* Eliminada la definición duplicada de form-field-input */
  /* Usar .form-input en su lugar */

  .form-field-input-error {
    @apply border-red-500 bg-red-50 focus:border-red-500 focus:ring-red-200;
  }
  /* Legend for required fields */
  .required-legend-container {
    @apply mb-4 flex justify-end;
  }
  .required-legend {
    @apply inline-flex items-center gap-1.5 px-2 py-0.5 rounded border border-primary-300 bg-white text-xs text-gray-600;
  }
}
/* === Tooltip component === */
@layer components {
  /* Base: any element with data-tooltip acts as trigger */
  [data-tooltip] {
    position: relative;
    --tt-bg: rgba(31, 41, 55, 0.95); /* gray-800 95% */
    --tt-fg: #fff;
    --tt-radius: 0.375rem; /* rounded-md */
    --tt-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
      0 4px 6px -4px rgba(0, 0, 0, 0.1);
  }

  /* Hidden by default */
  [data-tooltip]::before,
  [data-tooltip]::after {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease, transform 0.15s ease;
    z-index: 9999;
  }

  /* Tooltip box */
  [data-tooltip]::after {
    content: attr(data-tooltip);
    background: var(--tt-bg);
    color: var(--tt-fg);
    font-size: 0.75rem; /* text-xs */
    line-height: 1rem;
    padding: 0.375rem 0.5rem; /* px-2 py-1.5 */
    border-radius: var(--tt-radius);
    box-shadow: var(--tt-shadow);
    white-space: nowrap;
  }

  /* Tooltip arrow */
  [data-tooltip]::before {
    content: "";
    width: 0;
    height: 0;
    border: 6px solid transparent;
  }

  /* Show on hover/focus */
  [data-tooltip]:hover::before,
  [data-tooltip]:hover::after,
  [data-tooltip]:focus::before,
  [data-tooltip]:focus::after,
  [data-tooltip]:focus-visible::before,
  [data-tooltip]:focus-visible::after {
    opacity: 1;
  }

  /* Position: top (default) */
  [data-tooltip]:not([data-tooltip-pos]),
  [data-tooltip][data-tooltip-pos="top"] {
  }

  [data-tooltip]:not([data-tooltip-pos])::after,
  [data-tooltip][data-tooltip-pos="top"]::after {
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, -4px);
  }

  [data-tooltip]:not([data-tooltip-pos])::before,
  [data-tooltip][data-tooltip-pos="top"]::before {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top-color: var(--tt-bg);
    border-bottom-width: 0;
  }

  /* Position: right */
  [data-tooltip][data-tooltip-pos="right"]::after {
    left: calc(100% + 8px);
    top: 50%;
    transform: translate(4px, -50%);
  }

  [data-tooltip][data-tooltip-pos="right"]::before {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right-color: var(--tt-bg);
    border-left-width: 0;
  }

  /* Position: bottom */
  [data-tooltip][data-tooltip-pos="bottom"]::after {
    top: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
  }

  [data-tooltip][data-tooltip-pos="bottom"]::before {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-bottom-color: var(--tt-bg);
    border-top-width: 0;
  }

  /* Position: left */
  [data-tooltip][data-tooltip-pos="left"]::after {
    right: calc(100% + 8px);
    top: 50%;
    transform: translate(-4px, -50%);
  }

  [data-tooltip][data-tooltip-pos="left"]::before {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left-color: var(--tt-bg);
    border-right-width: 0;
  }

  /* Max width + wrapping option */
  [data-tooltip][data-tooltip-multiline]::after {
    white-space: normal;
    max-width: 16rem; /* 256px */
  }
  /* Wide tooltip variant */
  [data-tooltip][data-tooltip-wide]::after {
    white-space: normal;
    max-width: 24rem; /* 384px */
  }

  /* Respect reduced motion */
  @media (prefers-reduced-motion: reduce) {
    [data-tooltip]::before,
    [data-tooltip]::after {
      transition: none;
    }
  }
}

/* === New component classes === */
@layer components {
  /* Reusable info icon for tooltips */
  .tooltip-icon {
    @apply inline-flex items-center justify-center w-5 h-5 rounded-full text-black hover:text-black focus:outline-none focus:ring-2 focus:ring-gray-300 align-middle;
    cursor: help;
  }

  /* Allow tooltips to escape card clipping when needed */
  .card--overflow-visible {
    overflow: visible;
  }
}

.form-field-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

/* Input de búsqueda estilo TailAdmin */
.search-input {
  display: block;
  width: 100%;
  max-width: 430px;
  height: 2.75rem; /* h-11 */
  padding: 0.625rem 1rem 0.625rem 2.5rem; /* Ajustado para el ícono del HTML */
  font-size: 0.875rem; /* text-sm */
  line-height: 1.25rem;
  color: #1f2937; /* text-gray-800 */
  background-color: transparent;
  border: 1px solid #e5e7eb; /* border-gray-200 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-theme-xs */
  transition: all 0.2s ease-in-out;
}

.search-input:focus {
  border-color: #93c5fd; /* focus:border-brand-300 */
  outline: none;
  box-shadow: 0 0 0 3px rgba(191, 219, 254, 0.5); /* focus:ring-brand-500/10 */
  --tw-ring-color: rgba(99, 102, 241, 0.1); /* focus:ring-3 */
  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0
    var(--tw-ring-offset-width) var(--tw-ring-offset-color);
  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0
    calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
    var(--tw-shadow, 0 0 #0000);
}

.search-input::placeholder {
  color: #9ca3af; /* placeholder-gray-400 */
  opacity: 1;
}

.search-input:hover {
  border-color: #d1d5db; /* hover:border-gray-300 */
}

/* Estilos para modo oscuro */
.dark .search-input {
  background-color: rgba(255, 255, 255, 0.03); /* dark:bg-white/[0.03] */
  border-color: #374151; /* dark:border-gray-800 */
  color: #f3f4f6; /* dark:text-white/90 */
}

.dark .search-input::placeholder {
  color: #9ca3af; /* dark:placeholder-white/30 */
  opacity: 0.7;
}

/* Eliminadas las variantes de tamaño para simplificar */