/* ===== ADMIN-RESPONSIVE.CSS - ESTILOS RESPONSIVE PARA ADMINISTRACIÓN ===== */

/* ===== EXCLUSIÓN DEL HEADER ===== */
/* Todas las reglas de este archivo NO afectan al headerPerfil.php */
/* El header se maneja completamente por separado */

/* ===== VARIABLES CSS ===== */
:root {
    --admin-primary: #1d4ed8;
    --admin-secondary: #6b7280;
    --admin-success: #16a34a;
    --admin-warning: #f59e0b;
    --admin-danger: #ef4444;
    --admin-info: #0ea5e9;
    --admin-light: #f8fafc;
    --admin-dark: #111827;
    --admin-border: #e5e7eb;
    --admin-shadow: rgba(0, 0, 0, 0.05);
    --admin-shadow-hover: rgba(0, 0, 0, 0.1);
}

/* ===== ESTILOS BASE RESPONSIVE ===== */
* {
    box-sizing: border-box;
}

body {
    font-family: 'League Spartan', Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/* ===== CONTAINERS RESPONSIVE ===== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

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

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

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

/* ===== GRIDS RESPONSIVE ===== */
.grid {
    display: grid;
    gap: 1rem;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
    grid-template-columns: repeat(4, 1fr);
}

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

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

    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ===== TARJETAS RESPONSIVE ===== */
.card {
    background: #fff;
    border: 1px solid var(--admin-border);
    border-radius: 0.75rem;
    overflow: hidden;
    box-shadow: 0 1px 2px var(--admin-shadow);
    transition: all 0.3s ease;
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--admin-shadow-hover);
}

.card-header {
    padding: 1rem 1.25rem;
    background: var(--admin-light);
    border-bottom: 1px solid var(--admin-border);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.card-header h2 {
    margin: 0;
    font-weight: 800;
    color: var(--admin-dark);
    font-size: 1.1rem;
}

.card-content {
    padding: 1.25rem;
}

@media (max-width: 768px) {
    .card-header {
        padding: 0.75rem 1rem;
    }

    .card-header h2 {
        font-size: 1rem;
    }

    .card-content {
        padding: 1rem;
    }
}

@media (max-width: 480px) {
    .card-header {
        padding: 0.625rem 0.875rem;
    }

    .card-header h2 {
        font-size: 0.9rem;
    }

    .card-content {
        padding: 0.875rem;
    }
}

/* ===== BOTONES RESPONSIVE ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.6rem 0.9rem;
    border-radius: 0.6rem;
    border: 1px solid transparent;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.3s ease;
    cursor: pointer;
    white-space: nowrap;
}

.btn-primary {
    background: var(--admin-primary);
    color: white;
}

.btn-secondary {
    background: var(--admin-secondary);
    color: white;
}

.btn-success {
    background: var(--admin-success);
    color: white;
}

.btn-warning {
    background: var(--admin-warning);
    color: white;
}

.btn-danger {
    background: var(--admin-danger);
    color: white;
}

.btn-info {
    background: var(--admin-info);
    color: white;
}

.btn:hover {
    filter: brightness(0.95);
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

@media (max-width: 768px) {
    .btn {
        padding: 0.75rem 1rem;
        font-size: 0.875rem;
        width: 100%;
        justify-content: center;
    }

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

@media (max-width: 480px) {
    .btn {
        padding: 0.625rem 0.875rem;
        font-size: 0.8rem;
    }
}

/* ===== FORMULARIOS RESPONSIVE ===== */
.form-group {
    margin-bottom: 1rem;
}

.form-label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--admin-dark);
    font-size: 0.875rem;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--admin-border);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    transition: border-color 0.3s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    outline: none;
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.1);
}

.form-textarea {
    min-height: 100px;
    resize: vertical;
}

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

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

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

/* ===== TABLAS RESPONSIVE ===== */
.table-container {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid var(--admin-border);
}

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

.table th,
.table td {
    padding: 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--admin-border);
}

.table th {
    background: var(--admin-light);
    font-weight: 600;
    color: var(--admin-dark);
    font-size: 0.875rem;
}

.table td {
    font-size: 0.875rem;
    color: var(--admin-dark);
}

.table tr:hover {
    background: rgba(0, 0, 0, 0.02);
}

@media (max-width: 768px) {

    .table th,
    .table td {
        padding: 0.5rem;
        font-size: 0.8rem;
    }

    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ===== ALERTAS RESPONSIVE ===== */
.alert {
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0;
    font-size: 0.875rem;
}

.alert-success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.alert-error {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.alert-warning {
    background: #fffbeb;
    color: #92400e;
    border: 1px solid #fed7aa;
}

.alert-info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

@media (max-width: 768px) {
    .alert {
        padding: 0.625rem 0.875rem;
        margin: 0.75rem 0;
        flex-direction: column;
        text-align: center;
        gap: 0.375rem;
    }

    .alert i {
        font-size: 1.25rem;
    }
}

/* ===== NAVEGACIÓN RESPONSIVE ===== */
.nav-tabs {
    display: flex;
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}

.nav-tab {
    padding: 0.75rem 1rem;
    border: none;
    background: none;
    color: var(--admin-secondary);
    font-weight: 500;
    cursor: pointer;
    border-bottom: 2px solid transparent;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.nav-tab:hover {
    color: var(--admin-primary);
}

.nav-tab.active {
    color: var(--admin-primary);
    border-bottom-color: var(--admin-primary);
}

@media (max-width: 768px) {
    .nav-tabs {
        margin-bottom: 1rem;
    }

    .nav-tab {
        padding: 0.5rem 0.75rem;
        font-size: 0.875rem;
    }
}

/* ===== PAGINACIÓN RESPONSIVE ===== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.pagination-item {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--admin-border);
    background: white;
    color: var(--admin-dark);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
}

.pagination-item:hover {
    background: var(--admin-light);
    border-color: var(--admin-primary);
}

.pagination-item.active {
    background: var(--admin-primary);
    color: white;
    border-color: var(--admin-primary);
}

@media (max-width: 768px) {
    .pagination {
        gap: 0.25rem;
        margin: 1.5rem 0;
    }

    .pagination-item {
        padding: 0.375rem 0.5rem;
        font-size: 0.875rem;
    }
}

/* ===== MODALES RESPONSIVE ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: block;
    opacity: 1;
}

.modal {
    background: white;
    border-radius: 0.75rem;
    max-width: 90vw;
    max-height: 90vh;
    overflow: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-header {
    padding: 1.5rem 1.5rem 0;
    border-bottom: 1px solid var(--admin-border);
    margin-bottom: 1.5rem;
}

.modal-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--admin-dark);
}

.modal-body {
    padding: 0 1.5rem 1.5rem;
}

.modal-footer {
    padding: 1rem 1.5rem;
    border-top: 1px solid var(--admin-border);
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
}

@media (max-width: 768px) {
    .modal {
        max-width: 95vw;
        max-height: 95vh;
    }

    .modal-header {
        padding: 1rem 1rem 0;
    }

    .modal-body {
        padding: 0 1rem 1rem;
    }

    .modal-footer {
        padding: 0.75rem 1rem;
        flex-direction: column;
    }

    .modal-footer .btn {
        width: 100%;
    }
}

/* ===== PREVENCIÓN DE FLASH DE MODAL OSCURO ===== */
/* Asegurar que todos los modales estén completamente ocultos por defecto */
.modal,
[class*="modal"] {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Solo mostrar modal cuando no tenga clase hidden */
.modal:not(.hidden),
[class*="modal"]:not(.hidden) {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* Forzar estado oculto para modales con clase hidden */
.modal.hidden,
[class*="modal"].hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Prevenir cualquier flash de fondo oscuro */
.bg-black.bg-opacity-50 {
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

/* Asegurar que el fondo oscuro esté oculto por defecto */
.bg-black.bg-opacity-50.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* ===== PREVENCIÓN ADICIONAL DE FLASH ===== */
/* Ocultar completamente cualquier modal al cargar la página */
body:not(.modal-open) .modal,
body:not(.modal-open) [class*="modal"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Prevenir cualquier transición durante la carga inicial */
.page-loading .modal,
.page-loading [class*="modal"] {
    transition: none !important;
}

/* ===== UTILIDADES RESPONSIVE ===== */
.text-center {
    text-align: center;
}

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}

@media (max-width: 768px) {
    .text-center-mobile {
        text-align: center;
    }

    .text-left-mobile {
        text-align: left;
    }

    .text-right-mobile {
        text-align: right;
    }
}

.hidden {
    display: none !important;
}

.block {
    display: block !important;
}

.flex {
    display: flex !important;
}

.inline-flex {
    display: inline-flex !important;
}

@media (min-width: 640px) {
    .sm\:hidden {
        display: none !important;
    }

    .sm\:block {
        display: block !important;
    }

    .sm\:flex {
        display: flex !important;
    }
}

@media (min-width: 768px) {
    .md\:hidden {
        display: none !important;
    }

    .md\:block {
        display: block !important;
    }

    .md\:flex {
        display: flex !important;
    }
}

@media (min-width: 1024px) {
    .lg\:hidden {
        display: none !important;
    }

    .lg\:block {
        display: block !important;
    }

    .lg\:flex {
        display: flex !important;
    }
}

/* ===== ESPACIADO RESPONSIVE ===== */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: 0.25rem !important;
}

.m-2 {
    margin: 0.5rem !important;
}

.m-3 {
    margin: 0.75rem !important;
}

.m-4 {
    margin: 1rem !important;
}

.m-5 {
    margin: 1.25rem !important;
}

.m-6 {
    margin: 1.5rem !important;
}

.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: 0.25rem !important;
}

.p-2 {
    padding: 0.5rem !important;
}

.p-3 {
    padding: 0.75rem !important;
}

.p-4 {
    padding: 1rem !important;
}

.p-5 {
    padding: 1.25rem !important;
}

.p-6 {
    padding: 1.5rem !important;
}

@media (max-width: 768px) {
    .mobile-m-0 {
        margin: 0 !important;
    }

    .mobile-m-2 {
        margin: 0.5rem !important;
    }

    .mobile-m-4 {
        margin: 1rem !important;
    }

    .mobile-p-0 {
        padding: 0 !important;
    }

    .mobile-p-2 {
        padding: 0.5rem !important;
    }

    .mobile-p-4 {
        padding: 1rem !important;
    }
}

/* ===== TAMAÑOS DE FUENTE RESPONSIVE ===== */
.text-xs {
    font-size: 0.75rem !important;
}

.text-sm {
    font-size: 0.875rem !important;
}

.text-base {
    font-size: 1rem !important;
}

.text-lg {
    font-size: 1.125rem !important;
}

.text-xl {
    font-size: 1.25rem !important;
}

.text-2xl {
    font-size: 1.5rem !important;
}

.text-3xl {
    font-size: 1.875rem !important;
}

@media (max-width: 768px) {
    .mobile-text-xs {
        font-size: 0.75rem !important;
    }

    .mobile-text-sm {
        font-size: 0.875rem !important;
    }

    .mobile-text-base {
        font-size: 1rem !important;
    }

    .mobile-text-lg {
        font-size: 1.125rem !important;
    }
}

/* ===== FLEXBOX RESPONSIVE ===== */
.flex-col {
    flex-direction: column !important;
}

.flex-row {
    flex-direction: row !important;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-nowrap {
    flex-wrap: nowrap !important;
}

.items-center {
    align-items: center !important;
}

.items-start {
    align-items: flex-start !important;
}

.items-end {
    align-items: flex-end !important;
}

.justify-center {
    justify-content: center !important;
}

.justify-start {
    justify-content: flex-start !important;
}

.justify-end {
    justify-content: flex-end !important;
}

.justify-between {
    justify-content: space-between !important;
}

@media (max-width: 768px) {
    .mobile-flex-col {
        flex-direction: column !important;
    }

    .mobile-flex-row {
        flex-direction: row !important;
    }

    .mobile-items-center {
        align-items: center !important;
    }

    .mobile-justify-center {
        justify-content: center !important;
    }
}

/* ===== GAP RESPONSIVE ===== */
.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 0.75rem !important;
}

.gap-4 {
    gap: 1rem !important;
}

.gap-5 {
    gap: 1.25rem !important;
}

.gap-6 {
    gap: 1.5rem !important;
}

@media (max-width: 768px) {
    .mobile-gap-1 {
        gap: 0.25rem !important;
    }

    .mobile-gap-2 {
        gap: 0.5rem !important;
    }

    .mobile-gap-3 {
        gap: 0.75rem !important;
    }

    .mobile-gap-4 {
        gap: 1rem !important;
    }
}

/* ===== BORDES Y SOMBRAS RESPONSIVE ===== */
.rounded {
    border-radius: 0.25rem !important;
}

.rounded-md {
    border-radius: 0.375rem !important;
}

.rounded-lg {
    border-radius: 0.5rem !important;
}

.rounded-xl {
    border-radius: 0.75rem !important;
}

.rounded-2xl {
    border-radius: 1rem !important;
}

.shadow {
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06) !important;
}

.shadow-md {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important;
}

@media (max-width: 768px) {
    .mobile-rounded {
        border-radius: 0.25rem !important;
    }

    .mobile-shadow {
        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
    }
}

/* ===== ANIMACIONES RESPONSIVE ===== */
.transition {
    transition: all 0.3s ease !important;
}

.transition-fast {
    transition: all 0.15s ease !important;
}

.transition-slow {
    transition: all 0.5s ease !important;
}

.hover\:scale-105:hover {
    transform: scale(1.05) !important;
}

.hover\:scale-110:hover {
    transform: scale(1.1) !important;
}

.hover\:-translate-y-1:hover {
    transform: translateY(-0.25rem) !important;
}

.hover\:-translate-y-2:hover {
    transform: translateY(-0.5rem) !important;
}

@media (max-width: 768px) {
    .mobile-hover\:scale-105:hover {
        transform: scale(1.05) !important;
    }

    .mobile-hover\:-translate-y-1:hover {
        transform: translateY(-0.25rem) !important;
    }
}

/* ===== ESTADÍSTICAS RESPONSIVE ===== */
.stats-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.stats-card {
    background: white;
    border: 1px solid var(--admin-border);
    border-radius: 0.75rem;
    padding: 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 1px 3px var(--admin-shadow);
    transition: all 0.3s ease;
}

.stats-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--admin-shadow-hover);
}

.stats-card i {
    font-size: 2rem;
    color: var(--admin-primary);
}

.stats-card-content h3 {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--admin-secondary);
}

.stats-card-content p {
    margin: 0;
    font-size: 1.875rem;
    font-weight: 700;
    color: var(--admin-dark);
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .stats-card {
        padding: 1rem;
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
    }

    .stats-card i {
        font-size: 2.5rem;
    }

    .stats-card-content h3 {
        font-size: 0.8rem;
        margin-bottom: 0.25rem;
    }

    .stats-card-content p {
        font-size: 1.5rem;
    }
}

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

/* ===== FOOTER RESPONSIVE ===== */
.footer {
    text-align: center;
    padding: 2rem 0;
    color: var(--admin-secondary);
    border-top: 1px solid var(--admin-border);
    margin-top: auto;
}

.footer p {
    margin: 0;
    font-size: 0.875rem;
}

@media (max-width: 768px) {
    .footer {
        padding: 1.5rem 0;
    }

    .footer p {
        font-size: 0.8rem;
        padding: 0 1rem;
    }
}

/* ===== IMPRESIÓN RESPONSIVE ===== */
@media print {
    .no-print {
        display: none !important;
    }

    .print-break {
        page-break-before: always;
    }

    .card {
        border: 1px solid #000;
        box-shadow: none;
    }

    .btn {
        border: 1px solid #000;
        background: white;
        color: #000;
    }
}

/* ===== ESTILOS COMPACTOS PARA MÓVILES ===== */

/* ===== BOTONES COMPACTOS EN MÓVILES ===== */
@media (max-width: 768px) {

    /* Botones principales más compactos */
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 2.5rem !important;
        border-radius: 0.375rem !important;
        margin: 0.25rem !important;
    }

    /* Botones pequeños aún más compactos */
    .btn-sm,
    button.btn-sm {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2rem !important;
        border-radius: 0.25rem !important;
    }

    /* Botones grandes más compactos */
    .btn-lg,
    button.btn-lg {
        padding: 0.625rem 1.25rem !important;
        font-size: 0.875rem !important;
        min-height: 2.75rem !important;
        border-radius: 0.5rem !important;
    }

    /* Botones de acción más compactos */
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 2.5rem !important;
        margin: 0.25rem !important;
    }

    /* Botones de iconos más compactos */
    .btn-icon,
    button[class*="btn-icon"] {
        padding: 0.5rem !important;
        min-width: 2.5rem !important;
        min-height: 2.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Botones de navegación más compactos */
    .nav-btn,
    .pagination-btn,
    .tab-btn {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2.25rem !important;
        margin: 0.125rem !important;
    }
}

/* ===== CUADROS Y TARJETAS COMPACTOS EN MÓVILES ===== */
@media (max-width: 768px) {

    /* Tarjetas principales más compactas */
    .card,
    .card-container,
    [class*="card"] {
        padding: 0.75rem !important;
        margin: 0.5rem 0 !important;
        border-radius: 0.5rem !important;
    }

    /* Headers de tarjetas más compactos */
    .card-header,
    .card-title,
    .card-subtitle {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 1rem !important;
    }

    /* Contenido de tarjetas más compacto */
    .card-content,
    .card-body,
    .card-text {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 0.5rem !important;
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }

    /* Footers de tarjetas más compactos */
    .card-footer,
    .card-actions {
        padding: 0.5rem 0.75rem !important;
        margin-top: 0.5rem !important;
    }

    /* Contenedores de tarjetas más compactos */
    .card-grid,
    .card-list,
    .card-container {
        gap: 0.5rem !important;
        margin: 0.5rem 0 !important;
    }
}

/* ===== FORMULARIOS COMPACTOS EN MÓVILES ===== */
@media (max-width: 768px) {

    /* Grupos de formularios más compactos */
    .form-group,
    .form-row,
    .form-section {
        margin-bottom: 0.75rem !important;
        padding: 0.5rem !important;
    }

    /* Labels más compactos */
    .form-label,
    label,
    .label {
        font-size: 0.875rem !important;
        margin-bottom: 0.25rem !important;
        font-weight: 500 !important;
    }

    /* Inputs más compactos */
    .form-input,
    input,
    textarea,
    select {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        min-height: 2.5rem !important;
        border-radius: 0.375rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Inputs de archivo más compactos */
    input[type="file"] {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 2.25rem !important;
    }

    /* Checkboxes y radios más compactos */
    input[type="checkbox"],
    input[type="radio"] {
        width: 1rem !important;
        height: 1rem !important;
        margin: 0.25rem !important;
    }

    /* Botones de formulario más compactos */
    .form-btn,
    .form-submit,
    .form-reset {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 2.5rem !important;
        margin: 0.25rem !important;
    }
}

/* ===== TABLAS COMPACTAS EN MÓVILES ===== */
@media (max-width: 768px) {

    /* Contenedores de tabla más compactos */
    .table-container,
    .table-wrapper {
        padding: 0.5rem !important;
        margin: 0.5rem 0 !important;
        border-radius: 0.5rem !important;
    }

    /* Tablas más compactas */
    .table,
    table {
        font-size: 0.75rem !important;
        border-spacing: 0.25rem !important;
    }

    /* Headers de tabla más compactos */
    .table-header,
    th,
    thead th {
        padding: 0.5rem 0.25rem !important;
        font-size: 0.75rem !important;
        font-weight: 600 !important;
    }

    /* Celdas de tabla más compactas */
    .table-cell,
    td,
    tbody td {
        padding: 0.375rem 0.25rem !important;
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
    }

    /* Botones de acción en tabla más compactos */
    .table-action,
    .table-btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.625rem !important;
        min-height: 1.75rem !important;
        margin: 0.125rem !important;
    }
}

/* ===== NAVEGACIÓN COMPACTA EN MÓVILES ===== */
@media (max-width: 768px) {

    /* Tabs de navegación más compactos */
    .nav-tabs,
    .nav-pills,
    .nav-menu {
        padding: 0.25rem !important;
        gap: 0.25rem !important;
        margin-bottom: 0.75rem !important;
    }

    /* Items de navegación más compactos */
    .nav-item,
    .nav-link,
    .nav-tab {
        padding: 0.5rem 0.75rem !important;
        font-size: 0.875rem !important;
        min-height: 2.25rem !important;
        margin: 0.125rem !important;
        border-radius: 0.375rem !important;
    }

    /* Breadcrumbs más compactos */
    .breadcrumb,
    .breadcrumb-nav {
        padding: 0.5rem !important;
        font-size: 0.75rem !important;
        margin-bottom: 0.75rem !important;
    }

    .breadcrumb-item,
    .breadcrumb-link {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.75rem !important;
    }
}

/* ===== PAGINACIÓN COMPACTA EN MÓVILES ===== */
@media (max-width: 768px) {

    /* Contenedor de paginación más compacto */
    .pagination,
    .pagination-container {
        padding: 0.5rem !important;
        gap: 0.25rem !important;
        margin: 0.75rem 0 !important;
    }

    /* Botones de paginación más compactos */
    .pagination-btn,
    .page-link,
    .page-item {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 2rem !important;
        min-width: 2rem !important;
        margin: 0.125rem !important;
        border-radius: 0.25rem !important;
    }

    /* Números de página más compactos */
    .page-number,
    .page-info {
        font-size: 0.75rem !important;
        padding: 0.25rem 0.5rem !important;
    }
}

/* ===== ALERTAS Y NOTIFICACIONES COMPACTAS EN MÓVILES ===== */
@media (max-width: 768px) {

    /* Alertas más compactas */
    .alert,
    .notification,
    .message {
        padding: 0.75rem !important;
        margin: 0.5rem 0 !important;
        border-radius: 0.5rem !important;
        font-size: 0.875rem !important;
    }

    /* Headers de alertas más compactos */
    .alert-header,
    .alert-title {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* Contenido de alertas más compacto */
    .alert-content,
    .alert-body {
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
        margin-bottom: 0.5rem !important;
    }

    /* Botones de alerta más compactos */
    .alert-btn,
    .alert-action {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2.25rem !important;
        margin: 0.25rem !important;
    }
}

/* ===== MODALES COMPACTOS EN MÓVILES ===== */
@media (max-width: 768px) {

    /* Modales más compactos */
    .modal,
    .modal-content,
    .modal-dialog {
        margin: 0.5rem !important;
        border-radius: 0.5rem !important;
        max-width: calc(100vw - 1rem) !important;
    }

    /* Headers de modales más compactos */
    .modal-header,
    .modal-title {
        padding: 0.75rem 1rem !important;
        font-size: 1.125rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* Contenido de modales más compacto */
    .modal-body,
    .modal-content {
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
        line-height: 1.4 !important;
    }

    /* Footers de modales más compactos */
    .modal-footer,
    .modal-actions {
        padding: 0.75rem 1rem !important;
        gap: 0.5rem !important;
        margin-top: 0.5rem !important;
    }

    /* Botones de modal más compactos */
    .modal-btn,
    .modal-action {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
        min-height: 2.5rem !important;
    }
}

/* ===== UTILIDADES COMPACTAS PARA MÓVILES ===== */
@media (max-width: 768px) {

    /* Espaciado más compacto */
    .p-1 {
        padding: 0.25rem !important;
    }

    .p-2 {
        padding: 0.5rem !important;
    }

    .p-3 {
        padding: 0.75rem !important;
    }

    .p-4 {
        padding: 1rem !important;
    }

    .m-1 {
        margin: 0.25rem !important;
    }

    .m-2 {
        margin: 0.5rem !important;
    }

    .m-3 {
        margin: 0.75rem !important;
    }

    .m-4 {
        margin: 1rem !important;
    }

    /* Gap más compacto */
    .gap-1 {
        gap: 0.25rem !important;
    }

    .gap-2 {
        gap: 0.5rem !important;
    }

    .gap-3 {
        gap: 0.75rem !important;
    }

    .gap-4 {
        gap: 1rem !important;
    }

    /* Bordes más compactos */
    .border-radius-sm {
        border-radius: 0.25rem !important;
    }

    .border-radius-md {
        border-radius: 0.375rem !important;
    }

    .border-radius-lg {
        border-radius: 0.5rem !important;
    }

    /* Sombras más sutiles */
    .shadow-sm {
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    }

    .shadow-md {
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    }

    .shadow-lg {
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
    }
}

/* ===== MEJORAS ESPECÍFICAS PARA PANTALLAS MUY PEQUEÑAS ===== */
@media (max-width: 480px) {

    /* Botones ultra compactos */
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2.25rem !important;
        margin: 0.125rem !important;
    }

    /* Tarjetas ultra compactas */
    .card,
    .card-container {
        padding: 0.5rem !important;
        margin: 0.25rem 0 !important;
        border-radius: 0.375rem !important;
    }

    /* Formularios ultra compactos */
    .form-group,
    .form-row {
        margin-bottom: 0.5rem !important;
        padding: 0.25rem !important;
    }

    .form-input,
    input,
    textarea,
    select {
        padding: 0.375rem 0.5rem !important;
        font-size: 0.75rem !important;
        min-height: 2rem !important;
    }

    /* Tablas ultra compactas */
    .table,
    table {
        font-size: 0.625rem !important;
        border-spacing: 0.125rem !important;
    }

    .table-header,
    th,
    thead th {
        padding: 0.25rem 0.125rem !important;
        font-size: 0.625rem !important;
    }

    .table-cell,
    td,
    tbody td {
        padding: 0.25rem 0.125rem !important;
        font-size: 0.625rem !important;
    }
}

/* ===== ORIENTACIÓN LANDSCAPE EN MÓVILES ===== */
@media (max-width: 768px) and (orientation: landscape) {

    /* Elementos aún más compactos en landscape */
    .btn,
    button,
    input[type="submit"],
    input[type="button"] {
        padding: 0.25rem 0.75rem !important;
        min-height: 2rem !important;
    }

    .card,
    .card-container {
        padding: 0.5rem !important;
        margin: 0.25rem 0 !important;
    }

    .form-group,
    .form-row {
        margin-bottom: 0.5rem !important;
        padding: 0.25rem !important;
    }

    .table-header,
    th,
    thead th,
    .table-cell,
    td,
    tbody td {
        padding: 0.25rem 0.125rem !important;
    }
}

/* ===== BOTONES ULTRA COMPACTOS PARA MÓVILES ===== */

/* ===== BOTONES PRINCIPALES ULTRA COMPACTOS ===== */
@media (max-width: 768px) {

    /* Botones principales ultra compactos */
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2rem !important;
        border-radius: 0.25rem !important;
        margin: 0.125rem !important;
        line-height: 1.2 !important;
        font-weight: 500 !important;
    }

    /* Botones pequeños ultra compactos */
    .btn-sm,
    button.btn-sm {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.625rem !important;
        min-height: 1.75rem !important;
        border-radius: 0.125rem !important;
        margin: 0.125rem !important;
    }

    /* Botones grandes ultra compactos */
    .btn-lg,
    button.btn-lg {
        padding: 0.5rem 1rem !important;
        font-size: 0.75rem !important;
        min-height: 2.25rem !important;
        border-radius: 0.375rem !important;
        margin: 0.125rem !important;
    }

    /* Botones de iconos ultra compactos */
    .btn-icon,
    button[class*="btn-icon"] {
        padding: 0.375rem !important;
        min-width: 2rem !important;
        min-height: 2rem !important;
        font-size: 0.75rem !important;
        border-radius: 0.25rem !important;
    }

    /* Botones de navegación ultra compactos */
    .nav-btn,
    .pagination-btn,
    .tab-btn {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.625rem !important;
        min-height: 1.75rem !important;
        margin: 0.125rem !important;
        border-radius: 0.125rem !important;
    }

    /* Botones de acción en tablas ultra compactos */
    .table-action,
    .table-btn {
        padding: 0.125rem 0.375rem !important;
        font-size: 0.5rem !important;
        min-height: 1.5rem !important;
        margin: 0.0625rem !important;
        border-radius: 0.125rem !important;
    }

    /* Botones de formulario ultra compactos */
    .form-btn,
    .form-submit,
    .form-reset {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2rem !important;
        margin: 0.125rem !important;
        border-radius: 0.25rem !important;
    }

    /* Botones de alerta ultra compactos */
    .alert-btn,
    .alert-action {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.625rem !important;
        min-height: 1.75rem !important;
        margin: 0.125rem !important;
        border-radius: 0.125rem !important;
    }

    /* Botones de modal ultra compactos */
    .modal-btn,
    .modal-action {
        padding: 0.375rem 0.75rem !important;
        font-size: 0.75rem !important;
        min-height: 2rem !important;
        margin: 0.125rem !important;
        border-radius: 0.25rem !important;
    }
}

/* ===== BOTONES ULTRA COMPACTOS PARA PANTALLAS MUY PEQUEÑAS ===== */
@media (max-width: 480px) {

    /* Botones ultra compactos para móviles pequeños */
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.625rem !important;
        min-height: 1.75rem !important;
        border-radius: 0.125rem !important;
        margin: 0.0625rem !important;
        line-height: 1.1 !important;
    }

    /* Botones pequeños ultra compactos para móviles pequeños */
    .btn-sm,
    button.btn-sm {
        padding: 0.125rem 0.375rem !important;
        font-size: 0.5rem !important;
        min-height: 1.5rem !important;
        border-radius: 0.125rem !important;
        margin: 0.0625rem !important;
    }

    /* Botones de iconos ultra compactos para móviles pequeños */
    .btn-icon,
    button[class*="btn-icon"] {
        padding: 0.25rem !important;
        min-width: 1.75rem !important;
        min-height: 1.75rem !important;
        font-size: 0.625rem !important;
        border-radius: 0.125rem !important;
    }

    /* Botones de acción en tablas ultra compactos para móviles pequeños */
    .table-action,
    .table-btn {
        padding: 0.125rem 0.25rem !important;
        font-size: 0.5rem !important;
        min-height: 1.25rem !important;
        margin: 0.0625rem !important;
        border-radius: 0.125rem !important;
    }
}

/* ===== BOTONES ULTRA COMPACTOS PARA ORIENTACIÓN LANDSCAPE ===== */
@media (max-width: 768px) and (orientation: landscape) {

    /* Botones ultra compactos en landscape */
    .btn,
    button,
    input[type="submit"],
    input[type="button"],
    .btn-primary,
    .btn-secondary,
    .btn-success,
    .btn-danger,
    .btn-warning,
    .btn-info {
        padding: 0.25rem 0.5rem !important;
        font-size: 0.625rem !important;
        min-height: 1.5rem !important;
        border-radius: 0.125rem !important;
        margin: 0.0625rem !important;
    }

    /* Botones de iconos ultra compactos en landscape */
    .btn-icon,
    button[class*="btn-icon"] {
        padding: 0.25rem !important;
        min-width: 1.5rem !important;
        min-height: 1.5rem !important;
        font-size: 0.625rem !important;
    }

    /* Botones de acción en tablas ultra compactos en landscape */


    /* ===== ESTILOS PARA ICONOS EN BOTONES ===== */
    @media (max-width: 768px) {

        /* Asegurar que los iconos sean visibles */
        .btn i,
        button i,
        .btn svg,
        button svg,
        .btn .fas,
        button .fas,
        .btn .far,
        button .far,
        .btn .fab,
        button .fab {
            font-size: 1rem !important;
            width: 1rem !important;
            height: 1rem !important;
            display: block !important;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* Iconos en botones pequeños */
        .btn-sm i,
        button.btn-sm i,
        .btn-sm .fas,
        button.btn-sm .fas {
            font-size: 0.875rem !important;
            width: 0.875rem !important;
            height: 0.875rem !important;
        }

        /* Iconos en botones grandes */
        .btn-lg i,
        button.btn-lg i,
        .btn-lg .fas,
        button.btn-lg .fas {
            font-size: 1.125rem !important;
            width: 1.125rem !important;
            height: 1.125rem !important;
        }

        /* Iconos en botones de tabla */
        .table-action i,
        .table-btn i,
        .table-action .fas,
        .table-btn .fas {
            font-size: 0.75rem !important;
            width: 0.75rem !important;
            height: 0.75rem !important;
        }
    }

    /* ===== ESTILOS RESPONSIVE PARA GESTIÓN DE DETALLES ===== */

    /* ===== TARJETAS DE NOTICIAS RESPONSIVE ===== */
    @media (max-width: 768px) {

        /* Tarjeta principal más compacta */
        .tarjeta-noticia {
            margin-bottom: 1rem !important;
            border-radius: 0.75rem !important;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
        }

        /* Encabezado de noticia más compacto */
        .encabezado-noticia {
            padding: 1rem !important;
        }

        .encabezado-content {
            flex-direction: column !important;
            gap: 0.75rem !important;
            align-items: flex-start !important;
        }

        .encabezado-left {
            flex-direction: row !important;
            align-items: center !important;
            gap: 0.75rem !important;
            width: 100% !important;
        }

        .icono-noticia {
            width: 2.5rem !important;
            height: 2.5rem !important;
            min-width: 2.5rem !important;
            min-height: 2.5rem !important;
            font-size: 1.25rem !important;
        }

        .info-noticia h4 {
            font-size: 1rem !important;
            margin: 0 !important;
        }

        .info-noticia p {
            font-size: 0.875rem !important;
            margin: 0.25rem 0 0 0 !important;
            opacity: 0.9 !important;
        }

        .encabezado-right {
            width: 100% !important;
            justify-content: flex-start !important;
            gap: 0.5rem !important;
        }

        /* Botones del encabezado más compactos */
        .btn-restaurar-todos {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.875rem !important;
            border-radius: 0.5rem !important;
            min-height: 2.5rem !important;
        }

        .btn-restaurar-todos i {
            font-size: 0.875rem !important;
            margin-right: 0.5rem !important;
        }

        /* Espaciado entre tarjetas */
        .espaciado-tarjetas {
            height: 0.5rem !important;
        }
    }

    @media (max-width: 480px) {

        /* Tarjeta ultra compacta en móviles pequeños */
        .tarjeta-noticia {
            margin-bottom: 0.75rem !important;
            border-radius: 0.5rem !important;
        }

        .encabezado-noticia {
            padding: 0.75rem !important;
        }

        .encabezado-content {
            gap: 0.5rem !important;
        }

        .encabezado-left {
            gap: 0.5rem !important;
        }

        .icono-noticia {
            width: 2rem !important;
            height: 2rem !important;
            min-width: 2rem !important;
            min-height: 2rem !important;
            font-size: 1rem !important;
        }

        .info-noticia h4 {
            font-size: 0.875rem !important;
        }

        .info-noticia p {
            font-size: 0.75rem !important;
        }

        .btn-restaurar-todos {
            padding: 0.375rem 0.5rem !important;
            font-size: 0.75rem !important;
            min-height: 2rem !important;
        }

        .btn-restaurar-todos i {
            font-size: 0.75rem !important;
            margin-right: 0.375rem !important;
        }
    }

    /* ===== FILAS DE DETALLES RESPONSIVE ===== */
    @media (max-width: 768px) {

        /* Fila de detalle más compacta */
        .fila-detalle {
            padding: 0.75rem !important;
            border-bottom: 1px solid #f3f4f6 !important;
        }

        .fila-content {
            flex-direction: column !important;
            gap: 0.75rem !important;
            align-items: flex-start !important;
        }

        .fila-left {
            width: 100% !important;
            gap: 0.75rem !important;
            flex-wrap: wrap !important;
        }

        /* Badge de tipo más compacto */
        .badge-tipo {
            padding: 0.25rem 0.5rem !important;
            font-size: 0.75rem !important;
            border-radius: 0.375rem !important;
            min-height: 1.75rem !important;
        }

        .badge-tipo i {
            font-size: 0.75rem !important;
            margin-right: 0.25rem !important;
        }

        /* ID del detalle más compacto */
        .id-detalle {
            padding: 0.25rem 0.5rem !important;
            font-size: 0.75rem !important;
            border-radius: 0.25rem !important;
            min-height: 1.75rem !important;
        }

        /* Contenido del detalle más compacto */
        .contenido-detalle {
            max-width: none !important;
            width: 100% !important;
        }

        .contenido-detalle p {
            font-size: 0.875rem !important;
            line-height: 1.4 !important;
        }

        .contenido-titulo {
            font-size: 0.875rem !important;
        }

        .contenido-texto {
            font-size: 0.8rem !important;
        }

        /* Meta información más compacta */
        .meta-detalle {
            flex-direction: column !important;
            gap: 0.5rem !important;
            align-items: flex-start !important;
            font-size: 0.75rem !important;
        }

        .meta-detalle span {
            gap: 0.25rem !important;
        }

        .meta-detalle i {
            font-size: 0.75rem !important;
        }

        /* Acciones del detalle más compactas */
        .acciones-detalle {
            width: 100% !important;
            justify-content: flex-start !important;
            gap: 0.5rem !important;
            flex-wrap: wrap !important;
        }

        /* Botones de acción más compactos */
        .btn-restaurar,
        .btn-eliminar {
            padding: 0.5rem 0.75rem !important;
            font-size: 0.75rem !important;
            border-radius: 0.375rem !important;
            min-height: 2rem !important;
            min-width: 2.5rem !important;
        }

        .btn-restaurar i,
        .btn-eliminar i {
            font-size: 0.75rem !important;
            margin-right: 0.375rem !important;
        }
    }

    @media (max-width: 480px) {

        /* Fila ultra compacta en móviles pequeños */
        .fila-detalle {
            padding: 0.5rem !important;
        }

        .fila-content {
            gap: 0.5rem !important;
        }

        .fila-left {
            gap: 0.5rem !important;
        }

        .badge-tipo {
            padding: 0.125rem 0.375rem !important;
            font-size: 0.7rem !important;
            min-height: 1.5rem !important;
        }

        .badge-tipo i {
            font-size: 0.7rem !important;
            margin-right: 0.125rem !important;
        }

        .id-detalle {
            padding: 0.125rem 0.375rem !important;
            font-size: 0.7rem !important;
            min-height: 1.5rem !important;
        }

        .contenido-detalle p {
            font-size: 0.8rem !important;
        }

        .contenido-titulo {
            font-size: 0.8rem !important;
        }

        .contenido-texto {
            font-size: 0.75rem !important;
        }

        .meta-detalle {
            font-size: 0.7rem !important;
            gap: 0.375rem !important;
        }

        .meta-detalle i {
            font-size: 0.7rem !important;
        }

        .acciones-detalle {
            gap: 0.375rem !important;
        }

        .btn-restaurar,
        .btn-eliminar {
            padding: 0.375rem 0.5rem !important;
            font-size: 0.7rem !important;
            min-height: 1.75rem !important;
            min-width: 2.25rem !important;
        }

        .btn-restaurar i,
        .btn-eliminar i {
            font-size: 0.7rem !important;
            margin-right: 0.25rem !important;
        }
    }

    /* ===== FILTROS RESPONSIVE ===== */
    @media (max-width: 768px) {

        /* Filtro más compacto */
        .mb-6.p-4.bg-gray-50.rounded-lg.border {
            padding: 0.75rem !important;
            margin-bottom: 1rem !important;
        }

        /* Formulario de filtro más compacto */
        .flex.items-center.space-x-4 {
            flex-direction: column !important;
            gap: 0.75rem !important;
            align-items: stretch !important;
        }

        /* Labels más compactos */
        .form-label {
            font-size: 0.875rem !important;
            margin-bottom: 0.25rem !important;
        }

        .form-label i {
            font-size: 0.875rem !important;
            margin-right: 0.5rem !important;
        }

        /* Selects e inputs más compactos */
        .form-select,
        .form-input {
            padding: 0.5rem !important;
            font-size: 0.875rem !important;
            min-height: 2.5rem !important;
            border-radius: 0.375rem !important;
        }

        /* Botones del filtro más compactos */
        .flex.space-x-2 {
            gap: 0.5rem !important;
            justify-content: stretch !important;
        }

        .flex.space-x-2 .btn {
            flex: 1 !important;
            min-height: 2.5rem !important;
            font-size: 0.875rem !important;
            padding: 0.5rem 0.75rem !important;
        }

        .flex.space-x-2 .btn i {
            font-size: 0.875rem !important;
            margin-right: 0.5rem !important;
        }
    }

    @media (max-width: 480px) {

        /* Filtro ultra compacto en móviles pequeños */
        .mb-6.p-4.bg-gray-50.rounded-lg.border {
            padding: 0.5rem !important;
            margin-bottom: 0.75rem !important;
        }

        .flex.items-center.space-x-4 {
            gap: 0.5rem !important;
        }

        .form-label {
            font-size: 0.8rem !important;
        }

        .form-label i {
            font-size: 0.8rem !important;
            margin-right: 0.375rem !important;
        }

        .form-select,
        .form-input {
            padding: 0.375rem !important;
            font-size: 0.8rem !important;
            min-height: 2.25rem !important;
        }

        .flex.space-x-2 .btn {
            min-height: 2.25rem !important;
            font-size: 0.8rem !important;
            padding: 0.375rem 0.5rem !important;
        }

        .flex.space-x-2 .btn i {
            font-size: 0.8rem !important;
            margin-right: 0.375rem !important;
        }
    }

    /* ===== TÍTULO DE SECCIÓN RESPONSIVE ===== */
    @media (max-width: 768px) {

        /* Título de sección más compacto */
        .flex.justify-between.items-center.mb-4 {
            flex-direction: column !important;
            gap: 0.75rem !important;
            align-items: stretch !important;
            margin-bottom: 1rem !important;
        }

        .text-xl.font-bold.text-gray-900 {
            font-size: 1.125rem !important;
            margin: 0 !important;
            text-align: center !important;
        }

        .text-xl.font-bold.text-gray-900 i {
            font-size: 1.125rem !important;
            margin-right: 0.5rem !important;
        }

        /* Botón de agregar detalle más compacto */
        .btn.btn-success {
            min-height: 2.5rem !important;
            font-size: 0.875rem !important;
            padding: 0.5rem 0.75rem !important;
            justify-content: center !important;
        }

        .btn.btn-success i {
            font-size: 0.875rem !important;
            margin-right: 0.5rem !important;
        }
    }

    @media (max-width: 480px) {

        .flex.justify-between.items-center.mb-4 {
            gap: 0.5rem !important;
            margin-bottom: 0.75rem !important;
        }

        .text-xl.font-bold.text-gray-900 {
            font-size: 1rem !important;
        }

        .text-xl.font-bold.text-gray-900 i {
            font-size: 1rem !important;
            margin-right: 0.375rem !important;
        }

        .btn.btn-success {
            min-height: 2.25rem !important;
            font-size: 0.8rem !important;
            padding: 0.375rem 0.5rem !important;
        }

        .btn.btn-success i {
            font-size: 0.8rem !important;
            margin-right: 0.375rem !important;
        }
    }

    /* ===== ORIENTACIÓN LANDSCAPE PARA GESTIÓN DE DETALLES ===== */
    @media (max-width: 768px) and (orientation: landscape) {

        /* Ajustes específicos para landscape */
        .tarjeta-noticia {
            margin-bottom: 0.5rem !important;
        }

        .encabezado-noticia {
            padding: 0.5rem !important;
        }

        .encabezado-content {
            flex-direction: row !important;
            gap: 0.5rem !important;
            align-items: center !important;
        }

        .fila-detalle {
            padding: 0.5rem !important;
        }

        .fila-content {
            flex-direction: row !important;
            gap: 0.5rem !important;
            align-items: center !important;
        }

        .fila-left {
            flex-direction: row !important;
            gap: 0.5rem !important;
            align-items: center !important;
        }

        .meta-detalle {
            flex-direction: row !important;
            gap: 0.5rem !important;
            align-items: center !important;
        }

        .acciones-detalle {
            flex-direction: row !important;
            gap: 0.5rem !important;
            align-items: center !important;
        }

        /* Botones ultra compactos en landscape */
        .btn-restaurar,
        .btn-eliminar,
        .btn-restaurar-todos {
            min-height: 1.75rem !important;
            padding: 0.25rem 0.5rem !important;
            font-size: 0.7rem !important;
        }

        .btn-restaurar i,
        .btn-eliminar i,
        .btn-restaurar-todos i {
            font-size: 0.7rem !important;
            margin-right: 0.25rem !important;
        }

        /* End of media query or block */
    }
}