/* Tenants Custom CSS - Reemplaza todas las clases Tailwind */

/* Estilos base para la página de tenants */
.content-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem;
}

/* Header */
.page-header {
    margin-bottom: 2rem;
    border-bottom: 1px solid #e9ecef;
    padding-bottom: 1rem;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.header-info {
    flex: 1;
}

.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
}

.page-title svg {
    width: 2rem;
    height: 2rem;
    color: #3b82f6;
    margin-right: 0.75rem;
}

.page-subtitle {
    color: #6b7280;
    margin: 0;
    font-size: 1rem;
}

.header-actions {
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

/* Breadcrumbs */
.breadcrumb-container {
    margin-bottom: 1.5rem;
}

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #6b7280;
    font-size: 0.875rem;
}

.breadcrumb a {
    color: #3b82f6;
    text-decoration: none;
}

.breadcrumb a:hover {
    text-decoration: underline;
}

.breadcrumb-separator {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
}

/* Title Section */
.title-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.title-content h1 {
    font-size: 1.875rem;
    font-weight: 700;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
    display: flex;
    align-items: center;
}

.title-content h1 svg {
    width: 2rem;
    height: 2rem;
    color: #3b82f6;
    margin-right: 0.75rem;
}

.title-content p {
    color: #6b7280;
    margin: 0;
}

/* Stats Cards */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.stat-card {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.stat-card-primary {
    background: #3b82f6;
    color: white;
}

.stat-card-success {
    background: #10b981;
    color: white;
}

.stat-card-info {
    background: #06b6d4;
    color: white;
}

.stat-card-warning {
    background: #f59e0b;
    color: #1f2937;
}

.stat-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.stat-number {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
}

.stat-label {
    font-size: 0.875rem;
    margin: 0;
    opacity: 0.9;
}

.stat-icon {
    width: 2rem;
    height: 2rem;
    opacity: 0.8;
}

/* Actions */
.actions-container {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-primary {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.btn-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

.btn-secondary {
    background-color: #6b7280;
    color: white;
    border-color: #6b7280;
}

.btn-secondary:hover {
    background-color: #4b5563;
    border-color: #4b5563;
}

.btn-outline-secondary {
    background-color: transparent;
    color: #6b7280;
    border-color: #d1d5db;
}

.btn-outline-secondary:hover {
    background-color: #f9fafb;
    color: #374151;
}

/* Estilos mejorados para formularios en tema oscuro */
.form-control {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

.form-control:focus {
    background-color: #495057 !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

.form-control::placeholder {
    color: #adb5bd !important;
}

.form-select {
    background-color: #343a40 !important;
    border-color: #495057 !important;
    color: #ffffff !important;
}

.form-select:focus {
    background-color: #495057 !important;
    border-color: #0d6efd !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 0.2rem rgba(13, 110, 253, 0.25) !important;
}

.form-select option {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

/* Mejoras de contraste para texto en fondos grises */
.bg-secondary .text-muted {
    color: #adb5bd !important;
}

.bg-secondary .small {
    color: #dee2e6 !important;
}

/* Estilos para texto dark-muted según documentación del tema */
.text-dark-muted {
    color: #94a3b8 !important;
}

/* Estilos para texto small en tema oscuro */
[data-bs-theme="dark"] .small {
    color: #adb5bd !important;
}

/* Estilos para botones outline con iconos visibles */
.btn-outline-info {
    background-color: transparent;
    color: #0dcaf0;
    border-color: #0dcaf0;
}

.btn-outline-info:hover {
    background-color: #0dcaf0;
    color: #000;
}

.btn-outline-info i {
    color: #0dcaf0 !important;
    stroke: #0dcaf0 !important;
}

.btn-outline-info:hover i {
    color: #000 !important;
    stroke: #000 !important;
}

.btn-outline-warning {
    background-color: transparent;
    color: #ffc107;
    border-color: #ffc107;
}

.btn-outline-warning:hover {
    background-color: #ffc107;
    color: #000;
}

.btn-outline-warning i {
    color: #ffc107 !important;
    stroke: #ffc107 !important;
}

.btn-outline-warning:hover i {
    color: #000 !important;
    stroke: #000 !important;
}

.btn-outline-danger {
    background-color: transparent;
    color: #dc3545;
    border-color: #dc3545;
}

.btn-outline-danger:hover {
    background-color: #dc3545;
    color: #fff;
}

.btn-outline-danger i {
    color: #dc3545 !important;
    stroke: #dc3545 !important;
}

.btn-outline-danger:hover i {
    color: #fff !important;
    stroke: #fff !important;
}

.btn-success {
    background-color: #10b981;
    color: white;
    border-color: #10b981;
}

.btn-success:hover {
    background-color: #059669;
    border-color: #059669;
}

.btn-danger {
    background-color: #ef4444;
    color: white;
    border-color: #ef4444;
}

.btn-danger:hover {
    background-color: #dc2626;
    border-color: #dc2626;
}

.btn-sm {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

.btn svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.btn-sm svg {
    width: 0.875rem;
    height: 0.875rem;
}

.w-full {
    width: 100%;
}

/* Form Section */
.form-section {
    background: white;
    border-radius: 0.5rem;
    padding: 1.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    margin-bottom: 2rem;
}

.form-section h2 {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0 0 1rem 0;
    display: flex;
    align-items: center;
}

.form-section h2 svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #3b82f6;
    margin-right: 0.5rem;
}

/* List Section */
.list-section {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
}

.list-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.list-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
}

.list-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #3b82f6;
    margin-right: 0.5rem;
}

.list-content {
    padding: 1.5rem;
}

/* Cards */
.card {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.card-header {
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    background-color: #f8fafc;
}

[data-bs-theme="dark"] .card-header {
    background-color: #374151;
    border-bottom-color: #4b5563;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #1f2937;
    margin: 0;
    display: flex;
    align-items: center;
}

[data-bs-theme="dark"] .card-title {
    color: #f9fafb;
}

.card-title svg {
    width: 1.25rem;
    height: 1.25rem;
    color: #3b82f6;
    margin-right: 0.5rem;
}

.card-body {
    padding: 1.5rem;
}

/* Grid Layout */
.main-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    margin-bottom: 2rem;
}

@media (max-width: 1024px) {
    .main-grid {
        grid-template-columns: 1fr;
    }
}

/* Section Content */
.section-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Detail Items */
.detail-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.detail-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    margin: 0;
}

.detail-value {
    font-size: 0.875rem;
    color: #1f2937;
    margin: 0;
}

.detail-value-capitalize {
    text-transform: capitalize;
}

.detail-section {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6b7280;
    display: block;
    margin-bottom: 0.5rem;
}

.detail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Badges */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.badge-success {
    background-color: #dcfce7;
    color: #166534;
}

.badge-danger {
    background-color: #fecaca;
    color: #991b1b;
}

.badge-info {
    background-color: #dbeafe;
    color: #1e40af;
}

.badge-warning {
    background-color: #fef3c7;
    color: #92400e;
}

/* Action Items */
.action-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    justify-content: flex-start;
}

.action-item-primary {
    background-color: #3b82f6;
    color: white;
    border-color: #3b82f6;
}

.action-item-primary:hover {
    background-color: #2563eb;
    border-color: #2563eb;
}

.action-item-secondary {
    background-color: #f3f4f6;
    color: #374151;
    border-color: #d1d5db;
}

.action-item-secondary:hover {
    background-color: #e5e7eb;
    border-color: #9ca3af;
}

.action-item-danger {
    background-color: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.action-item-danger:hover {
    background-color: #fee2e2;
    border-color: #fca5a5;
}

.action-icon {
    width: 1rem;
    height: 1rem;
    margin-right: 0.75rem;
}

/* Empty State */
.empty-state {
    text-align: center;
    padding: 3rem 1rem;
}

.empty-state svg {
    width: 4rem;
    height: 4rem;
    color: #d1d5db;
    margin: 0 auto 1rem;
}

.empty-state h3 {
    font-size: 1.125rem;
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 0.5rem 0;
}

.empty-state p {
    color: #6b7280;
    margin: 0 0 1rem 0;
}

/* Table Styles */
.table-container {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.table th {
    background-color: #f8fafc;
    padding: 0.75rem;
    text-align: left;
    font-weight: 600;
    color: #374151;
    border-bottom: 1px solid #e5e7eb;
}

.table td {
    padding: 0.75rem;
    border-bottom: 1px solid #f3f4f6;
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: #f9fafb;
}

/* User Avatar */
.user-avatar {
    display: flex;
    align-items: center;
}

.avatar-circle {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #dbeafe;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
}

.avatar-initials {
    color: #1e40af;
    font-weight: 600;
    font-size: 0.875rem;
}

.user-info {
    flex: 1;
}

.user-name {
    font-weight: 500;
    color: #1f2937;
    margin: 0 0 0.25rem 0;
}

.user-meta {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}

/* Form Styles */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-select {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    background-color: white;
    color: #1f2937;
}

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

.form-help {
    margin-top: 0.25rem;
}

.form-help small {
    color: #6b7280;
    font-size: 0.75rem;
}

/* Container principal */
.tenants-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.content-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Header */
.tenants-header {
    background-color: #374151;
    border-bottom: 1px solid #4b5563;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tenants-header-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}

/* Breadcrumbs */
.tenants-breadcrumb {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
}

.tenants-breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #9ca3af;
}

.tenants-breadcrumb-item {
    display: flex;
    align-items: center;
}

.tenants-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
    border-radius: 0.375rem;
    color: inherit;
    text-decoration: none;
    transition: all 0.2s;
}

.tenants-breadcrumb-link:hover {
    color: #ffffff;
    background-color: #4b5563;
}

.tenants-breadcrumb-current {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    font-weight: 500;
    color: #ffffff;
    background-color: #4b5563;
    border-radius: 0.375rem;
}

.tenants-breadcrumb-separator {
    color: #6b7280;
}

/* Header principal */
.tenants-main-header {
    padding: 1.5rem 0;
}

.tenants-header-flex {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .tenants-header-flex {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.tenants-title-section {
    flex: 1;
    min-width: 0;
}

.tenants-title-content {
    display: flex;
    align-items: center;
}

.tenants-icon-container {
    flex-shrink: 0;
}

.tenants-main-icon {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tenants-title-text {
    margin-left: 1rem;
}

.tenants-main-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.025em;
    margin: 0;
}

.tenants-subtitle {
    margin-top: 0.25rem;
    font-size: 1.125rem;
    color: #d1d5db;
}

/* Estadísticas */
.tenants-stats-grid {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1rem;
}

@media (min-width: 640px) {
    .tenants-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tenants-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tenants-stat-card {
    background-color: #4b5563;
    border: 1px solid #6b7280;
    border-radius: 0.5rem;
    padding: 1rem;
    color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tenants-stat-content {
    display: flex;
    align-items: center;
}

.tenants-stat-icon-container {
    flex-shrink: 0;
}

.tenants-stat-text {
    margin-left: 1rem;
}

.tenants-stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
    margin: 0;
}

.tenants-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}

/* Botones de acción */
.tenants-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 640px) {
    .tenants-actions {
        flex-direction: row;
    }
}

@media (min-width: 1024px) {
    .tenants-actions {
        margin-top: 0;
        margin-left: 1.5rem;
    }
}

.tenants-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.tenants-btn-secondary {
    color: #374151;
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.tenants-btn-secondary:hover {
    background-color: #f9fafb;
}

.tenants-btn-primary {
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #2563eb 0%, #6366f1 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transform: scale(1);
}

.tenants-btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%);
    transform: scale(1.05);
}

/* Contenido principal */
.tenants-main-content {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

/* Filtros */
.tenants-filters-card {
    background-color: #374151;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #4b5563;
    overflow: hidden;
    margin-bottom: 2rem;
}

.tenants-filters-header {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #6b7280;
}

.tenants-filters-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    margin: 0;
}

.tenants-filters-content {
    padding: 1.5rem;
}

.tenants-filters-grid {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .tenants-filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .tenants-filters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.tenants-form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.tenants-form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
}

.tenants-form-input-container {
    position: relative;
}

.tenants-form-input-icon {
    position: absolute;
    top: 50%;
    left: 0.75rem;
    transform: translateY(-50%);
    pointer-events: none;
}

.tenants-form-input {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background-color: #4b5563;
    border: 1px solid #6b7280;
    color: #ffffff;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

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

.tenants-form-input::placeholder {
    color: #9ca3af;
}

.tenants-form-input-with-icon {
    padding-left: 2.5rem;
}

.tenants-form-select {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background-color: #4b5563;
    border: 1px solid #6b7280;
    color: #ffffff;
    border-radius: 0.5rem;
    transition: all 0.2s;
}

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

.tenants-form-actions {
    display: flex;
    align-items: end;
    gap: 0.75rem;
}

.tenants-btn-filter {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #2563eb;
    color: #ffffff;
    font-weight: 500;
    border-radius: 0.5rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
    border: none;
    cursor: pointer;
}

.tenants-btn-filter:hover {
    background-color: #1d4ed8;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.tenants-btn-reset {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #6b7280;
    color: #e5e7eb;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.2s;
    text-decoration: none;
    border: none;
    cursor: pointer;
}

.tenants-btn-reset:hover {
    background-color: #6b7280;
}

/* Tabla */
.tenants-table-card {
    background-color: #374151;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border: 1px solid #4b5563;
    overflow: hidden;
}

.tenants-table-header {
    background: linear-gradient(135deg, #4b5563 0%, #374151 100%);
    padding: 1.5rem;
    border-bottom: 1px solid #6b7280;
}

.tenants-table-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tenants-table-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: #ffffff;
    display: flex;
    align-items: center;
    margin: 0;
}

.tenants-table-count {
    font-size: 0.875rem;
    color: #9ca3af;
}

.tenants-table-container {
    overflow-x: auto;
}

.tenants-table {
    width: 100%;
    border-collapse: collapse;
}

.tenants-table-head {
    background-color: #1f2937;
}

.tenants-table-th {
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tenants-table-body {
    background-color: #374151;
}

.tenants-table-row {
    border-bottom: 1px solid #4b5563;
    transition: background-color 0.2s;
}

.tenants-table-row:hover {
    background-color: #4b5563;
}

.tenants-table-td {
    padding: 1rem 1.5rem;
    white-space: nowrap;
}

/* Avatar y contenido de celdas */
.tenants-user-info {
    display: flex;
    align-items: center;
}

.tenants-avatar-container {
    flex-shrink: 0;
    height: 3rem;
    width: 3rem;
}

.tenants-avatar {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.tenants-avatar-text {
    font-size: 0.875rem;
    font-weight: 700;
    color: #ffffff;
}

.tenants-user-details {
    margin-left: 1rem;
}

.tenants-user-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
}

.tenants-user-domain {
    font-size: 0.875rem;
    color: #9ca3af;
}

/* Badges de estado */
.tenants-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.tenants-badge-success {
    background-color: #059669;
    color: #ffffff;
    border-color: #10b981;
}

.tenants-badge-danger {
    background-color: #dc2626;
    color: #ffffff;
    border-color: #ef4444;
}

.tenants-badge-info {
    background-color: #2563eb;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Texto de contenido */
.tenants-text-primary {
    color: #ffffff;
}

.tenants-text-secondary {
    color: #d1d5db;
}

.tenants-text-muted {
    color: #9ca3af;
}

/* Botones de acción en tabla */
.tenants-action-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.375rem;
    text-decoration: none;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    margin-right: 0.5rem;
}

.tenants-action-btn:last-child {
    margin-right: 0;
}

.tenants-action-view {
    background-color: #1f2937;
    color: #9ca3af;
}

.tenants-action-view:hover {
    background-color: #374151;
    color: #ffffff;
}

.tenants-action-edit {
    background-color: #1f2937;
    color: #9ca3af;
}

.tenants-action-edit:hover {
    background-color: #374151;
    color: #ffffff;
}

.tenants-action-delete {
    background-color: #1f2937;
    color: #9ca3af;
}

.tenants-action-delete:hover {
    background-color: #374151;
    color: #ffffff;
}

/* Estado vacío */
.tenants-empty-state {
    text-align: center;
    padding: 3rem 0;
}

.tenants-empty-icon {
    margin: 0 auto 1rem;
    color: #6b7280;
}

.tenants-empty-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #ffffff;
    margin-bottom: 1rem;
}

.tenants-empty-text {
    color: #9ca3af;
    margin-bottom: 1rem;
}

/* Iconos */
.tenants-icon-sm {
    width: 1rem;
    height: 1rem;
}

.tenants-icon-md {
    width: 1.25rem;
    height: 1.25rem;
}

.tenants-icon-lg {
    width: 1.5rem;
    height: 1.5rem;
}

.tenants-icon-xl {
    width: 2rem;
    height: 2rem;
}

.tenants-icon-2xl {
    width: 2.5rem;
    height: 2.5rem;
}

/* Utilidades */
.tenants-mr-1 { margin-right: 0.25rem; }
.tenants-mr-2 { margin-right: 0.5rem; }
.tenants-mr-3 { margin-right: 0.75rem; }
.tenants-ml-2 { margin-left: 0.5rem; }
.tenants-ml-4 { margin-left: 1rem; }

/* Responsive */
@media (min-width: 640px) {
    .tenants-header-content {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .tenants-header-content {
        padding: 0 2rem;
    }
}

/* Clases CSS personalizadas para reemplazar Tailwind */

/* Layout y contenedores */
.card {
    background-color: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
}

.card-content {
    padding: 1.5rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .form-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.form-grid-full {
    grid-column: span 2;
}

.form-section {
    margin-bottom: 2rem;
}

.form-section-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #111827;
    margin-bottom: 1.5rem;
}

/* Elementos de formulario */
.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    margin-bottom: 0.5rem;
}

.form-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: #111827;
    background-color: white;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

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

.form-input.border-red-300 {
    border-color: #fca5a5;
}

.form-help-text {
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: #6b7280;
}

.form-error {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: #dc2626;
}

/* Checkboxes */
.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.checkbox-item {
    display: flex;
    align-items: center;
}

.checkbox-input {
    height: 1rem;
    width: 1rem;
    color: #3b82f6;
    border: 1px solid #d1d5db;
    border-radius: 0.25rem;
}

.checkbox-input:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.checkbox-label {
    margin-left: 0.5rem;
    display: block;
    font-size: 0.875rem;
    color: #111827;
}

/* Botones y acciones */
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e5e7eb;
}

.back-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background-color: white;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
}

.back-button:hover {
    background-color: #f9fafb;
}

.back-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.back-button svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

.btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease-in-out;
    cursor: pointer;
    border: 1px solid transparent;
}

.btn-primary {
    color: white;
    background-color: #3b82f6;
    border-color: transparent;
}

.btn-primary:hover {
    background-color: #2563eb;
}

.btn-primary:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.btn svg {
    width: 1rem;
    height: 1rem;
    margin-right: 0.5rem;
}

/* Header */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.page-header-content {
    display: flex;
    align-items: center;
}

.page-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
}

.page-subtitle {
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Logo preview */
.logo-preview {
    margin-top: 0.5rem;
}

.logo-image {
    height: 4rem;
    width: 4rem;
    object-fit: cover;
    border-radius: 0.5rem;
}

.logo-text {
    font-size: 0.875rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* Clases específicas para index.blade.php */
.main-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.header-section {
    background-color: #1f2937;
    border-bottom: 1px solid #374151;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.header-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
}

@media (min-width: 640px) {
    .header-container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .header-container {
        padding: 0 2rem;
    }
}

.breadcrumb-nav {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 0;
}

.breadcrumb-list {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #9ca3af;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
}

.breadcrumb-link {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    gap: 0.375rem;
    border-radius: 0.375rem;
    color: inherit;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.breadcrumb-link:hover {
    color: white;
    background-color: #374151;
}

.breadcrumb-current {
    display: inline-flex;
    align-items: center;
    padding: 0.375rem 0.5rem;
    font-weight: 500;
    color: white;
    background-color: #374151;
    border-radius: 0.375rem;
}

.header-main {
    padding: 1.5rem 0;
}

.header-content {
    display: flex;
    flex-direction: column;
}

@media (min-width: 1024px) {
    .header-content {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.header-info {
    flex: 1;
    min-width: 0;
}

.header-title-section {
    display: flex;
    align-items: center;
}

.header-icon {
    flex-shrink: 0;
}

.header-icon-bg {
    width: 3rem;
    height: 3rem;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.header-text {
    margin-left: 1rem;
}

.header-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.025em;
}

.header-subtitle {
    margin-top: 0.25rem;
    font-size: 1.125rem;
    color: #d1d5db;
}

.stats-grid {
    margin-top: 1.5rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 640px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.stat-card {
    background-color: #374151;
    border: 1px solid #4b5563;
    border-radius: 0.5rem;
    padding: 1rem;
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.stat-content {
    display: flex;
    align-items: center;
}

.stat-icon {
    flex-shrink: 0;
}

.stat-text {
    margin-left: 0.75rem;
}

.stat-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.header-actions {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

@media (min-width: 1024px) {
    .header-actions {
        margin-top: 0;
        margin-left: 1.5rem;
    }
}

@media (min-width: 640px) {
    .header-actions {
        flex-direction: row;
    }
}

.filter-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid #d1d5db;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #374151;
    background-color: white;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.filter-button:hover {
    background-color: #f9fafb;
}

.filter-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.create-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #6366f1 100%);
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    transform: scale(1);
}

.create-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #4f46e5 100%);
    transform: scale(1.05);
}

.create-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.main-content {
    max-width: 80rem;
    margin: 0 auto;
    padding: 2rem 1rem;
}

@media (min-width: 640px) {
    .main-content {
        padding: 2rem 1.5rem;
    }
}

@media (min-width: 1024px) {
    .main-content {
        padding: 2rem 2rem;
    }
}

.filters-section {
    margin-bottom: 2rem;
}

.filters-card {
    background-color: #1f2937;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #374151;
    overflow: hidden;
}

.filters-header {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #4b5563;
}

.filters-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
}

.filters-content {
    padding: 1.5rem;
}

.filters-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .filters-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .filters-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.filter-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: #d1d5db;
}

.filter-input-wrapper {
    position: relative;
}

.filter-input-icon {
    position: absolute;
    top: 0;
    left: 0;
    padding-left: 0.75rem;
    display: flex;
    align-items: center;
    height: 100%;
    pointer-events: none;
}

.filter-input {
    display: block;
    width: 100%;
    padding: 0.75rem;
    background-color: #374151;
    border: 1px solid #4b5563;
    color: white;
    border-radius: 0.5rem;
    transition: all 0.2s ease-in-out;
}

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

.filter-input::placeholder {
    color: #9ca3af;
}

.filter-input-with-icon {
    padding-left: 2.5rem;
}

.filter-actions {
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
}

.filter-submit {
    flex: 1;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #3b82f6;
    color: white;
    font-weight: 500;
    border-radius: 0.5rem;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.filter-submit:hover {
    background-color: #2563eb;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.filter-submit:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.filter-clear {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: #4b5563;
    color: #e5e7eb;
    font-weight: 500;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.filter-clear:hover {
    background-color: #6b7280;
}

.filter-clear:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, 0.1);
}

.table-card {
    background-color: #1f2937;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #374151;
    overflow: hidden;
}

.table-header {
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #4b5563;
}

.table-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.table-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    display: flex;
    align-items: center;
}

.table-count {
    font-size: 0.875rem;
    color: #9ca3af;
}

.table-wrapper {
    overflow-x: auto;
}

.data-table {
    width: 100%;
}

.table-head {
    background-color: #111827;
}

.table-head-row {
    /* No additional styles needed */
}

.table-head-cell {
    padding: 1rem 1.5rem;
    text-align: left;
    font-size: 0.75rem;
    font-weight: 600;
    color: #d1d5db;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.table-body {
    background-color: #1f2937;
}

.table-body-row {
    transition: all 0.2s ease-in-out;
}

.table-body-row:hover {
    background-color: #374151;
}

.table-body-row:not(:last-child) {
    border-bottom: 1px solid #374151;
}

.table-body-cell {
    padding: 1rem 1.5rem;
    white-space: nowrap;
}

.tenant-info {
    display: flex;
    align-items: center;
}

.tenant-avatar {
    flex-shrink: 0;
    height: 3rem;
    width: 3rem;
}

.tenant-avatar-bg {
    height: 3rem;
    width: 3rem;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.tenant-avatar-text {
    font-size: 0.875rem;
    font-weight: 700;
    color: white;
}

.tenant-details {
    margin-left: 1rem;
}

.tenant-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
}

.tenant-domain {
    font-size: 0.875rem;
    color: #9ca3af;
}

.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.status-active {
    background-color: #059669;
    color: white;
    border-color: #10b981;
}

.status-inactive {
    background-color: #dc2626;
    color: white;
    border-color: #ef4444;
}

.iso-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    background-color: #3b82f6;
    color: white;
    border: 1px solid #2563eb;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.count-info {
    font-size: 0.875rem;
    color: #d1d5db;
    display: flex;
    align-items: center;
}

.date-text {
    font-size: 0.875rem;
    color: #9ca3af;
}

.actions-cell {
    text-align: right;
    font-size: 0.875rem;
    font-weight: 500;
}

.actions-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
}

.action-button {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem;
    color: #9ca3af;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

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

.action-view:hover {
    color: #3b82f6;
}

.action-edit:hover {
    color: #f59e0b;
}

.action-delete:hover {
    color: #ef4444;
}

.pagination-section {
    background-color: #111827;
    padding: 1rem 1.5rem;
    border-top: 1px solid #374151;
}

.pagination-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pagination-info {
    font-size: 0.875rem;
    color: #d1d5db;
}

.pagination-links {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.empty-state {
    background-color: #1f2937;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #374151;
    overflow: hidden;
}

.empty-content {
    text-align: center;
    padding: 4rem 1.5rem;
}

.empty-icon {
    width: 6rem;
    height: 6rem;
    background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.5rem;
}

.empty-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.empty-description {
    color: #9ca3af;
    margin-bottom: 2rem;
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}

.empty-actions {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (min-width: 640px) {
    .empty-actions {
        flex-direction: row;
    }
}

.empty-primary-button {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
    font-weight: 600;
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    text-decoration: none;
    transition: all 0.2s ease-in-out;
    transform: scale(1);
}

.empty-primary-button:hover {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    transform: scale(1.05);
}

.empty-secondary-button {
    display: inline-flex;
    align-items: center;
    padding: 0.75rem 1.5rem;
    border: 1px solid #4b5563;
    color: #d1d5db;
    font-weight: 500;
    border-radius: 0.5rem;
    text-decoration: none;
    transition: all 0.2s ease-in-out;
}

.empty-secondary-button:hover {
    background-color: #374151;
}

.features-grid {
    margin-top: 3rem;
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    max-width: 64rem;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 768px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature-item {
    text-align: center;
}

.feature-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.75rem;
}

.feature-icon-blue {
    background-color: #1e3a8a;
}

.feature-icon-green {
    background-color: #14532d;
}

.feature-icon-purple {
    background-color: #581c87;
}

.feature-title {
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.feature-description {
    font-size: 0.875rem;
    color: #9ca3af;
}

/* Utilidades */
.text-red-500 {
    color: #ef4444;
}
.empty-icon {
    width: 4rem;
    height: 4rem;
    color: #d1d5db;
    margin: 0 auto 1rem auto;
}

.empty-title {
    font-size: 1.125rem;
    font-weight: 500;
    color: #111827;
    margin-bottom: 0.5rem;
}

.empty-text {
    color: #6b7280;
    margin-bottom: 1rem;
}

.empty-state-center {
    text-align: center;
    padding: 1.5rem 0;
}

.empty-icon-small {
    width: 3rem;
    height: 3rem;
    color: #d1d5db;
    margin: 0 auto 0.75rem auto;
}

.empty-text-small {
    color: #6b7280;
    font-size: 0.875rem;
}

.help-tooltip {
    margin-left: 0.5rem;
    font-size: 0.875rem;
    font-weight: normal;
}

.help-text {
    color: #6b7280;
}

.btn-full {
    width: 100%;
}

.card-spacing {
    margin-top: 1.5rem;
}

.info-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.info-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563;
}

.info-value {
    color: #111827;
}

/* Show page specific styles */
.tenant-header {
    background: white;
    border-radius: 0.5rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 1.5rem;
    padding: 1.5rem;
}

.tenant-header-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tenant-header-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.tenant-logo {
    width: 4rem;
    height: 4rem;
    border-radius: 0.5rem;
    object-fit: cover;
}

.tenant-logo-placeholder {
    width: 4rem;
    height: 4rem;
    background-color: #E5E7EB;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 600;
    color: #6B7280;
}

.tenant-title {
    font-size: 1.875rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

.tenant-description {
    color: #6B7280;
    margin: 0.25rem 0 0 0;
}

.tenant-actions {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.content-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 1024px) {
    .content-grid {
        grid-template-columns: 2fr 1fr;
    }
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .info-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.info-item {
    display: flex;
    flex-direction: column;
}

.description-box {
    background-color: #F9FAFB;
    border-radius: 0.5rem;
    padding: 1rem;
    font-size: 0.875rem;
    color: #374151;
    line-height: 1.5;
}

.action-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.action-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
}

.action-item-primary {
    background-color: #3B82F6;
    color: white;
}

.action-item-primary:hover {
    background-color: #2563EB;
}

.action-item-secondary {
    background-color: #F3F4F6;
    color: #374151;
}

.action-item-secondary:hover {
    background-color: #E5E7EB;
}

.action-item-danger {
    background-color: #FEF2F2;
    color: #DC2626;
}

.action-item-danger:hover {
    background-color: #FEE2E2;
}

.action-icon {
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
}

.detail-item {
    margin-bottom: 1rem;
}

.detail-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6B7280;
    margin-bottom: 0.25rem;
    display: block;
}

.detail-value {
    font-size: 0.875rem;
    color: #111827;
    margin: 0;
}

.detail-value-capitalize {
    text-transform: capitalize;
}

.detail-section {
    font-size: 0.875rem;
    font-weight: 500;
    color: #6B7280;
    margin-bottom: 0.5rem;
    display: block;
}

.detail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.section-content {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}