/* 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 */
  /* Salen de la escala de arriba para que sigan al acento del estudio.
     Quedan porque todavía hay reglas que las usan. */
  --color-primary: rgb(var(--color-primary-600));
  --color-primary-light: rgb(var(--color-primary-400));
  --color-primary-dark: rgb(var(--color-primary-800));
  --color-primary-focus: rgb(var(--color-primary-600) / 0.1);

  /* La escala que pinta la aplicación, en canales sueltos y no en hexadecimal:
     Tailwind los mete en rgb(... / <alpha-value>) y un hexadecimal ahí produce
     CSS inválido, que rompería los modificadores de opacidad del tipo
     primary-50/50 sin avisar. Y ojo con escribir una clase entera acá: este
     archivo lo escanea Tailwind, así que la generaría de verdad.
     Estos son los valores por omisión, el violeta de siempre. Un estudio con
     acento elegido los pisa con su propia escala desde el encabezado.
     Ojo: no confundir con --color-primary de arriba, que es otra cosa. */
  --color-primary-50: 245 243 255;
  --color-primary-100: 237 233 254;
  --color-primary-200: 221 214 254;
  --color-primary-300: 196 181 253;
  --color-primary-400: 167 139 250;
  --color-primary-500: 139 92 246;
  --color-primary-600: 124 58 237;
  --color-primary-700: 109 40 217;
  --color-primary-800: 91 33 182;
  --color-primary-900: 76 29 149;
  --color-primary-950: 46 16 101;

  /* El paso sólido: el que pintan los botones, y el único que garantiza que el
     blanco se lee encima. Para el violeta es el 600 tal cual. */
  --color-primary-solid: 124 58 237;
  --color-primary-solid-hover: 109 40 217;

  /* 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-solid hover:bg-primary-solid-hover 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-solid hover:bg-primary-solid-hover 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, rgb(var(--color-primary-700)) 0%, rgb(var(--color-primary-600)) 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: rgb(var(--color-primary-500)) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 1px rgb(var(--color-primary-500) / 0.1) !important;
  }

  .form-input.autocompleted:focus,
  .form-textarea.autocompleted:focus,
  .form-select.autocompleted:focus {
    border-color: rgb(var(--color-primary-600)) !important;
    box-shadow: 0 0 0 3px rgb(var(--color-primary-500) / 0.1) !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-solid;
    @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,
      rgb(var(--color-primary-600) / 0.05) 0%,
      rgb(var(--color-primary-500) / 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,
.pagination em {
  @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-solid text-white border-primary-600 not-italic;
}

.pagination .gap {
  @apply border-transparent bg-transparent px-1;
}

.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: rgb(var(--color-primary-600) / 0.1);
  --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 */

/* =====================================================
   Layout de tabs vertical para ficha del cliente
   Mobile: tabs horizontales con scroll
   Desktop (1024px+): tabs verticales a la izquierda
   ===================================================== */

.client-tabs-container {
  display: flex;
  flex-direction: column;
}

.client-tabs-nav {
  display: flex;
  overflow-x: auto;
  flex-shrink: 0;
  border-bottom: 1px solid #e5e7eb;
  scrollbar-width: none;
}
.client-tabs-nav::-webkit-scrollbar { display: none; }

.client-tabs-nav a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
  border-bottom: 2px solid transparent;
  color: #6b7280;
  text-decoration: none;
}
.client-tabs-nav a:hover {
  color: #374151;
  border-bottom-color: #d1d5db;
  background-color: #f9fafb;
}
.client-tabs-nav a.active {
  border-bottom-color: rgb(var(--color-primary-500));
  color: rgb(var(--color-primary-700));
  background-color: rgb(var(--color-primary-50));
}
.client-tabs-nav a i {
  font-size: 0.875rem;
  flex-shrink: 0;
  color: #9ca3af;
}
.client-tabs-nav a.active i { color: rgb(var(--color-primary-500)); }

.client-tabs-content {
  flex: 1;
  min-width: 0;
  padding-top: 1rem;
}

@media (min-width: 1024px) {
  .client-tabs-container {
    flex-direction: row;
  }

  .client-tabs-nav {
    flex-direction: column;
    overflow-x: visible;
    width: 11rem;
    border-bottom: none;
    border-right: 1px solid #e5e7eb;
  }

  .client-tabs-nav a {
    white-space: normal;
    width: 100%;
    flex-shrink: 1;
    border-bottom: none;
    border-left: 2px solid transparent;
    padding: 0.625rem 1rem;
  }
  .client-tabs-nav a:hover {
    border-bottom-color: transparent;
    border-left-color: #d1d5db;
  }
  .client-tabs-nav a.active {
    border-bottom-color: transparent;
    border-left-color: rgb(var(--color-primary-500));
  }

  .client-tabs-content {
    padding-top: 0;
    padding-left: 1.5rem;
  }
}

/* En un teléfono todo lo que se toca tiene que llegar a los 44px que ocupa
   un dedo. Se aplica por ancho de pantalla y por puntero grueso, y deja el
   escritorio con mouse como estaba. Va fuera de @layer components a
   propósito: adentro Tailwind no la emite. */
@media (max-width: 640px), (pointer: coarse) {
  .btn,
  .btn-sm,
  .btn-back {
    min-height: 44px;
  }
}

/* En el teléfono ese ancho mínimo de 200px es más que la pantalla en cuanto
   hay dos campos en la misma fila: el segundo se dibujaba afuera y no había
   forma de verlo. Acá el campo se achica hasta donde haga falta. */
@media (max-width: 640px) {
  .form-input,
  .form-input:focus,
  .form-input:disabled,
  .form-input[readonly] {
    min-width: 0;
  }
}

/* El ícono de ayuda mide 20px, que es un blanco de toque imposible en un
   teléfono. Se agranda la caja que recibe el dedo sin agrandar el dibujo. */
@media (max-width: 640px), (pointer: coarse) {
  .tooltip-icon {
    min-width: 44px;
    min-height: 44px;
  }
}