@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Outfit:wght@400;600;700&display=swap');

/* Forzar que el HTML y el BODY nunca sobrepasen el ancho de la pantalla */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Modificar la tipografía de encabezados y elementos principales de Unfold */
h1, h2, h3, h4, h5, .sidebar-title, #site-name {
    font-family: 'Outfit', sans-serif !important;
}

/* Ajustar el fondo del body para coincidir con la estética lucid */
body {
    background-color: #f4f7f5 !important;
}

/* Las tablas deben tener su propio scroll, bloqueando que estiren la página */
table {
    display: block !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* Dashboard Cards (Custom) */
.premium-card {
    box-shadow: 0 4px 12px rgba(27, 67, 50, 0.08), 0 2px 4px rgba(27, 67, 50, 0.05) !important;
    border: 1px solid #e0ebe5 !important;
}

/* Ocultar los botones de CRUD en campos relacionados cuando se usa un móvil */
@media (max-width: 768px) {
    .related-widget-wrapper-link {
        display: none !important;
    }
}

/* Regla general: Desactivar enlaces en campos de solo lectura (readonly) */
.readonly a:not(.popup-link) {
    pointer-events: none !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: default !important;
}


/* Color personalizado para encabezados de Fieldsets */
fieldset h2, .module h2 {
    color: #40916c !important;
}

/* Responsividad para la Matriz de Permisos en dispositivos móviles */
@media (max-width: 768px) {
    .matriz-permisos-table {
        display: block !important;
    }
    .matriz-permisos-table thead {
        display: none !important;
    }
    .matriz-permisos-table tbody {
        display: block !important;
    }
    .matriz-permisos-table tr.seccion-header {
        display: block !important;
        text-align: center;
        padding: 8px !important;
    }
    .matriz-permisos-table tr.matriz-row {
        display: flex !important;
        flex-wrap: wrap !important;
        margin-bottom: 15px;
        border: 1px solid #e5e7eb;
        border-radius: 8px;
        background-color: #fff;
    }
    .matriz-permisos-table td.matriz-title {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
        font-weight: bold;
        background-color: #f9fafb;
        border-bottom: 1px solid #e5e7eb;
        border-radius: 8px 8px 0 0;
        padding: 8px !important;
    }
    .matriz-permisos-table td.matriz-check {
        width: 25% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 5px !important;
        border: none !important;
    }
    .matriz-permisos-table td.matriz-check::before {
        content: attr(data-label);
        font-size: 10px;
        text-transform: uppercase;
        color: #6b7280;
        margin-bottom: 4px;
        font-weight: 600;
    }
}

/* ============================================================
   PERSONALIZACIÓN DEL LOGO PRINCIPAL (UNFOLD)
   ============================================================ */
/* Aumentar el tamaño y centrar mejor el logo en el menú lateral */
a[href*="/admin/"] img, #site-name img {
    height: 48px !important; 
    width: 48px !important;
    object-fit: contain !important;
    margin: auto 0 !important;
}

/* Modo Claro: Fondo color primary y bordes redondeados para que resalte el logo blanco */
html:not(.dark) a[href*="/admin/"] img, 
html:not(.dark) #site-name img {
    background-color: #1b4332 !important;
    padding: 6px !important;
    border-radius: 8px !important;
}




#site-name {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    text-decoration: none !important;
    width: 100%;
}

#site-name::after {
    content: "Gestión Quintas";
    font-family: 'Outfit', sans-serif;
    font-size: 1.25rem;
    font-weight: 800;
    color: #081c15;
    white-space: nowrap;
}

html.dark #site-name::after {
    color: #ffffff;
}