/* Tabla con encabezado fijo y scroll vertical en tbody */
.table-fixed {
    width: 100%;
    min-width: 900px;
    table-layout: fixed;
}
.table-fixed thead,
.table-fixed tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.table-fixed tbody {
    display: block;
    max-height: 135px;
    overflow-y: auto;
}
@media (max-width: 768px) {
    .table-fixed tbody {
        max-height: 105px;
    }
}
/* Tailwind CSS Components y Tema Médico */

/* Paleta sector salud moderna */
:root {
    --color-primary: #3b82f6; /* Azul salud */
    --color-primary-dark: #2563eb;
    --color-primary-light: #e0f2fe;
    --color-accent: #22c55e; /* Verde menta */
    --color-accent-light: #bbf7d0;
    --color-danger: #ef4444; /* Rojo suave */
    --color-danger-light: #fee2e2;
    --color-warning: #facc15;
    --color-warning-light: #fef9c3;
    --color-bg-light: #f0f6fb;
    --color-bg-card: #f8fafc;
    --color-bg-blue: #e8f4f8;
    --color-bg-green: #e6f9f0;
    --color-bg-gray: #f3f4f6;
    --color-text-primary: #222c36;
    --color-text-secondary: #64748b;
    --color-border: #cbd5e1;
}

/* Componentes personalizados */
@layer components {

    .btn-primary {
        @apply bg-gradient-to-r from-blue-400 to-blue-600 text-white font-semibold py-2 px-6 rounded-lg hover:shadow-lg hover:-translate-y-0.5 transition;
    }

    .btn-secondary {
        @apply bg-gray-200 text-blue-700 font-semibold py-2 px-6 rounded-lg hover:bg-gray-300 transition;
    }

    .btn-success {
        @apply bg-gradient-to-r from-green-400 to-green-600 text-white font-semibold py-2 px-6 rounded-lg hover:shadow-lg hover:-translate-y-0.5 transition;
    }

    .btn-danger {
        @apply bg-red-400 text-white font-semibold py-2 px-6 rounded-lg hover:bg-red-500 transition;
    }


    .card {
        @apply bg-white rounded-lg shadow-md border border-gray-200 overflow-hidden;
        background: var(--color-bg-card);
    }

    .card-header {
        @apply bg-gradient-to-r from-blue-400 to-blue-600 text-white px-6 py-4;
    }

    .card-body {
        @apply p-6;
    }

    .form-input {
        @apply w-full px-4 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 bg-white transition text-black;
        min-height: 44px !important;
        padding: 10px 16px !important;
        box-sizing: border-box;
        font-size: 16px !important;
        line-height: 1.5 !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        border: 1px solid #e5e7eb !important;
        color: #111827 !important;
    }

    .form-label {
        @apply block text-black font-semibold mb-2;
    }

    .table {
        @apply w-full border-collapse;
    }


    .table thead {
        @apply bg-gradient-to-r from-blue-200 to-blue-50;
    }

    .table thead th {
        @apply px-4 py-3 text-left font-bold text-blue-700 border-b-2 border-blue-200;
    }


    .table tbody td {
        @apply px-4 py-3 border-b border-gray-100 text-black;
    }

    .table tbody tr:hover {
        @apply bg-blue-50;
    }

    .badge {
        @apply inline-block px-3 py-1 rounded-full text-sm font-semibold;
    }


    .badge-primary {
        @apply bg-blue-100 text-blue-700 border border-blue-200;
    }
    .badge-success {
        @apply bg-green-100 text-green-700 border border-green-200;
    }
    .badge-warning {
        @apply bg-yellow-100 text-yellow-700 border border-yellow-200;
    }
    .badge-danger {
        @apply bg-red-100 text-red-700 border border-red-200;
    }

    .dropdown-item {
        @apply block w-full text-left px-4 py-2 hover:bg-blue-50 transition;
    }

    .modal {
        @apply fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50;
    }

    .modal-content {
        @apply bg-white rounded-lg shadow-2xl max-w-md w-full mx-4;
    }


    .modal-header {
        @apply bg-gradient-to-r from-blue-400 to-blue-600 text-white px-6 py-4 flex justify-between items-center;
    }

    .modal-body {
        @apply p-6;
    }

    .modal-footer {
        @apply px-6 py-4 border-t border-gray-200 flex justify-end gap-2;
    }

    /* Responsive table wrapper - horizontal scroll on mobile */
    .table-responsive {
        @apply overflow-x-auto -mx-4 sm:mx-0;
    }

    /* Stack buttons on mobile */
    .btn-group-responsive {
        @apply flex flex-col gap-2 sm:flex-row sm:gap-2;
    }

    .btn-group-responsive > * {
        @apply flex-1 sm:flex-initial;
    }

    /* Responsive form grid */
    .form-grid {
        @apply grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3;
    }

    .form-grid-2 {
        @apply grid grid-cols-1 gap-4 sm:grid-cols-2;
    }

    /* Responsive padding */
    .px-responsive {
        @apply px-4 sm:px-6 lg:px-8;
    }

    .py-responsive {
        @apply py-4 sm:py-6 lg:py-8;
    }

    /* Mobile-first text sizing */
    .text-responsive {
        @apply text-sm sm:text-base lg:text-lg;
    }

    /* Responsive table for mobile (cards layout) */
    @media (max-width: 640px) {
        .table {
            @apply block;
        }

        .table thead {
            @apply hidden;
        }

        .table tbody {
            @apply block;
        }

        .table tbody tr {
            @apply block mb-4 border border-gray-200 rounded-lg p-4;
        }

        .table tbody td {
            @apply block pb-2 border-b border-gray-100;
        }

        .table tbody td:last-child {
            @apply border-b-0;
        }

        .table tbody td::before {
            content: attr(data-label);
            @apply font-bold text-black block mb-1;
        }
    }
}

/* Animaciones y efectos */
@layer utilities {
    .glass {
        @apply bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg border border-white border-opacity-20;
    }

    .shadow-glow {
        @apply shadow-lg;
        box-shadow: 0 20px 60px rgba(59, 130, 246, 0.15);
    }

    .gradient-blue {
        @apply bg-gradient-to-r from-blue-500 to-blue-700;
    }

    .text-gradient {
        @apply bg-clip-text text-transparent bg-gradient-to-r from-blue-500 to-blue-700;
    }

    .transition-smooth {
        @apply transition duration-300 ease-in-out;
    }

    /* Utility for better mobile touch targets */
    .touch-target {
        @apply min-h-12 min-w-12;
    }

    /* Safe area support */
    .safe-area {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
        padding-top: max(1rem, env(safe-area-inset-top));
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }
}

/* Estilos globales adicionales */
html {
    scroll-behavior: smooth;
}

/* Mobile-first responsive tweaks */
@media (max-width: 640px) {
    body {
        font-size: 16px; /* Prevent zoom on iOS */
    }

    input, select, textarea {
        font-size: 16px !important; /* Prevent iOS zoom on focus */
    }
}

    @apply text-black bg-[var(--color-bg-light)];
}

/* Asegurar que los inputs sean siempre visibles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea,
select {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background-color: #ffffff !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    box-sizing: border-box !important;
}

textarea {
    min-height: 120px !important;
}

select {
    cursor: pointer !important;
    padding: 8px 12px !important;
}

/* Estilos para tablas de históricos */

a {
    @apply text-blue-500 hover:text-blue-700 transition;
}

/* Alert styles */
.alert {
    @apply p-4 rounded-lg border-l-4 transition;
}

.alert-success {
    @apply bg-green-50 border-green-400 text-green-800;
}

.alert-danger {
    @apply bg-red-50 border-red-400 text-red-800;
}

.alert-warning {
    @apply bg-yellow-50 border-yellow-400 text-yellow-800;
}

.alert-info {
    @apply bg-blue-50 border-blue-400 text-blue-800;
}