/*
 * Document Flow - Estilos Consolidados (Versión Final Optimizada)
 *
 * Este archivo contiene todos los estilos para las páginas de gestión,
 * listado de grupos y textos dinámicos, aplicando el diseño Material 3 Expressive.
 */

/* ==========================================================================
   1. Variables y Estilos Globales
   ========================================================================== */
:root {
    --df-primary: #8b0000;
    --df-primary-dark: #6e0000;
    --df-accent: #333333;
    --df-bg-main: #f8fafc;
    --df-bg-card: #ffffff;
    --df-border: #e2e8f0;
    --df-shadow: rgba(149, 157, 165, 0.1);
    --df-success: #16a34a;
    --df-warning: #f59e0b;
    --df-danger: #dc2626;
    --df-info: #3b82f6;
    --df-text-primary: #1e293b;
    --df-text-secondary: #64748b;
    --df-text-light: #ffffff;
    --md-radius: 12px;
    --md-radius-sm: 8px;
    --md-shadow-1: 0 1px 3px rgba(0, 0, 0, 0.08);
    --md-shadow-2: 0 4px 8px -2px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.06);
    --md-shadow-3: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
    --md-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --md-input-border: #cbd5e1;
}


/* Estilo para el body cuando un modal está activo */
body.df-modal-is-active {
    overflow: hidden; /* Evita el scroll del fondo */
}
/* --- FIN DE LA CORRECCIÓN --- */


body {
    background-color: var(--df-bg-main);
    font-family: var(--df-font-sans);
    line-height: 1.6;
    color: var(--df-text-primary);
}

}

.custom-app-container {
    max-width: 1300px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.app-title,
.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin-top: 0;
    margin-bottom: 1.5rem;
}

/* ==========================================================================
   2. Contenedores y Tarjetas
   ========================================================================== */
/* Estilos base para todas las tarjetas (card-wrapper, user-list-section, df-tab-content-wrapper) */
.card-wrapper,
.user-list-section,
.df-tab-content-wrapper,
.notifications-card {
    background: var(--df-bg-card);
    border-radius: var(--md-radius);
    padding: 2rem;
    box-shadow: var(--md-shadow-1);
    transition: var(--md-transition);
}

.card-wrapper:hover,
.group-card:hover,
.member-item:hover,
.df-tab-link:hover,
.pagination .page-numbers a:hover {
    box-shadow: var(--md-shadow-2);
    transform: translateY(-2px);
}

/* Estilos para la sección de gestión de grupos */
.card-section {
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--df-border);
}

.card-section:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.section-header .section-title {
    margin-bottom: 0;
}

/* Estilos para el listado de grupos */
.group-cards-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.group-card {
    background-color: var(--df-bg-main);
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius);
    padding: 1.5rem;
    box-shadow: var(--md-shadow-1);
    transition: var(--md-transition);
    display: flex;
    flex-direction: column;
}

.group-card-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.group-card-description {
    font-size: 0.95rem;
    color: var(--df-text-secondary);
    margin-bottom: 1rem;
    flex-grow: 1;
}

.group-card-owner {
    border-top: 1px solid var(--df-border);
    padding-top: 1rem;
    margin-top: auto;
    font-size: 0.9rem;
}

.group-card-owner strong {
    color: var(--df-text-primary);
    font-weight: 600;
}

.group-card-apoyos {
    margin-top: 1rem;
}

.group-card-apoyos p {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin-bottom: 0.5rem;
}

.group-card-apoyos ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.group-card-apoyos li {
    font-size: 0.9rem;
    color: var(--df-text-secondary);
    margin-bottom: 0.25rem;
}

.group-card-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--df-border);
}


/* --- Estilos para la página de descarga pública --- */
.df-public-download-container {
    max-width: 600px;
    margin: 3rem auto;
}

.public-download-logo {
    text-align: center;
    margin-bottom: 2rem;
}

.public-download-logo img {
    max-width: 200px;
    height: auto;
}

.file-info-box {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--df-bg-main);
    border: 1px solid var(--df-border);
    border-left: 4px solid var(--df-info);
    border-radius: var(--md-radius);
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.file-info-box .fas {
    font-size: 2rem;
    color: var(--df-primary);
}

.file-info-box .file-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--df-text-primary);
}

.file-info-box .file-size {
    font-size: 0.9rem;
    color: var(--df-text-secondary);
}

.expiration-info {
    font-size: 0.95rem;
    color: var(--df-text-secondary);
    text-align: right;
}

/* Estilos para el panel de notificaciones */
.notifications-panel {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.notifications-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 20px;
}

.notifications-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notification-item {
    border-bottom: 1px solid #eee;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-link {
    display: flex;
    align-items: center;
    padding: 15px 0;
    text-decoration: none;
    color: #333;
    transition: background-color 0.2s ease-in-out;
}

.notification-link:hover {
    background-color: #f9f9f9;
}

.notification-item.read .notification-link {
    color: #888;
}

.notification-icon {
    font-size: 20px;
    color: #900;
    min-width: 40px;
    text-align: center;
}

.notification-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.notification-content span {
    font-weight: 500;
    line-height: 1.4;
}

.notification-date {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px;
}

.notification-status {
    min-width: 20px;
    text-align: right;
}

.unread-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: #900;
    border-radius: 50%;
}

/* ==========================================================================
   3. Formularios y Campos
   ========================================================================== */
.form-field {
    margin-bottom: 1rem;
}

.form-field label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--df-text-secondary);
    font-size: 0.95rem;
}

.form-input,
.form-textarea,
.form-select,
#file-types-tagify {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--md-input-border);
    border-radius: var(--md-radius-sm);
    background-color: var(--df-bg-main);
    color: var(--df-text-primary);
    font-size: 1rem;
    transition: var(--md-transition);
}


/* ===============================
   Estilos Pro para Formulario de Login (Corregido)
   =============================== */
.custom-login-wrapper {
    max-width: 400px;
    width: 100%;
    margin: auto;
    padding: var(--df-spacing-xl, 32px);
    background-color: var(--df-bg-card, #ffffff);
    border-radius: var(--md-radius, 12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); /* Estilo de caja que solicitaste */
    position: relative;
    top: calc(30vh - 250px);
}

.custom-login-logo {
    text-align: center;
    margin-bottom: 2rem; /* Espacio debajo del logo */
}

/* --- Límite de Tamaño para Logos en Formularios --- */
.custom-login-logo img {
    max-width: 260px !important;  /* Ancho máximo permitido */
    max-height: 180px !important; /* Altura máxima permitida */
    width: auto;                 /* Mantiene la proporción */
    height: auto;                /* Mantiene la proporción */
}

/* Corrección de la duplicación: el .form-input del login ya tiene sus propios estilos */
.custom-login-wrapper .form-input {
    background-color: #fff;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus,
#file-types-tagify:focus {
    outline: none;
    border-color: var(--df-primary);
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.15);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
}

.custom-login-wrapper .form-field--checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
}

.custom-login-wrapper .form-field--checkbox input[type="checkbox"] {
    display: inline-block;
    width: 16px;
    height: 16px;
}

.custom-login-wrapper .login-lost-password {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.9rem;
}

.custom-login-wrapper .login-lost-password a {
    color: var(--df-primary, #8b0000);
    text-decoration: none;
    transition: color 0.3s ease;
}

.custom-login-wrapper .login-lost-password a:hover {
    color: var(--df-primary-dark, #6e0000);
    text-decoration: underline;
}

.custom-login-wrapper input[type="submit"],
.login-submit input.button {
    width: 100%;
    padding: 12px;
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--df-primary, #8b0000);
    color: var(--df-text-light, #ffffff);
    border: none;
    border-radius: var(--df-radius, 12px);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.custom-login-wrapper input[type="submit"]:hover,
.login-submit input.button:hover {
    background-color: var(--df-primary-dark, #6e0000);
}

/* Separación entre la lista de apoyos y el botón "Añadir" */
.apoyos-list-container {
    margin-bottom: 1.5rem;
}

.form-footer-actions {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--df-border);
}

/* Estilos para pestañas desactivadas */
.df-tab-link.disabled {
    color: #94a3b8;
    background-color: var(--df-bg-main);
    pointer-events: none;
    cursor: not-allowed;
}

/* Estilos para el recuadro de instrucciones */
.form-instructions {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--df-bg-main);
    border: 1px solid var(--df-border);
    border-left: 4px solid var(--df-info);
    border-radius: var(--md-radius-sm);
    padding: 1rem 1.5rem;
    margin: 1.5rem 0;
}

.form-instructions i {
    font-size: 1.5rem;
    color: var(--df-info);
}

.form-instructions p {
    margin: 0;
    font-size: 0.95rem;
    color: var(--df-text-secondary);
}

/* --- Estilos para Píldoras de Tipos de Archivo --- */
.pills-container {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.pill {
    display: inline-block;
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 9999px;
    background-color: var(--df-pill-bg-color, #e2e8f0);
    color: var(--df-pill-text-color, #334155);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* --- INICIO DE LA CORRECCIÓN: Estilo para el nombre del grupo en modal de destrucción --- */
.df-modal-body strong.group-name-to-confirm {
    background-color: #dc3545;
    color: #ffffff;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: bold;
    display: inline-block;
    margin: 0 5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    font-size: 0.9em;
}

.df-modal-body .form-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 1.25rem;
}

.df-modal-body .form-field-full {
    grid-column: 1 / -1;
}

.form-field--floating {
    position: relative;
}

.form-field--floating label {
    position: absolute;
    top: 1rem;
    left: 1rem;
    color: var(--df-text-secondary);
    pointer-events: none;
    transition: all 0.2s ease-out;
    background-color: var(--df-bg-card);
    padding: 0 0.25rem;
}

.password-input-wrapper .form-field--floating label {
    background-color: transparent;
}

.form-field--floating .form-input,
.form-field--floating .form-textarea {
    padding: 1.5rem 1rem 0.5rem 1rem;
    width: 100%;
    box-sizing: border-box;
}

.form-field--floating.field-active label {
    top: -0.5rem;
    left: 0.75rem;
    font-size: 0.75rem;
    color: var(--df-primary);
}

.form-field--floating .form-input:focus,
.form-field--floating .form-textarea:focus {
    border-color: var(--df-primary);
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.15);
}

.form-field-hint {
    display: block;
    margin-top: 0.4rem;
    font-size: 0.8rem;
    color: var(--df-text-secondary);
    padding-left: 0.25rem;
    margin-bottom: 0.4rem;
}

.df-modal-overlay {
    position: fixed;
    inset: 0;
    background-color: rgba(17, 24, 39, 0.6);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: all 0.3s ease;
}

.df-modal-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

.df-modal-content {
    background-color: #ffffff;
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 560px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
    transform: translateY(20px);
    transition: transform 0.3s ease;
}

.df-modal-overlay.is-visible .df-modal-content {
    transform: translateY(0);
}

.df-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 0.75rem;
}

.df-modal-title {
    font-size: 1.4rem;
    font-weight: 600;
    margin: 0;
    color: #1e293b;
}

.df-modal-close-btn {
    background: none;
    border: none;
    font-size: 1.6rem;
    color: #64748b;
    cursor: pointer;
    line-height: 1;
    transition: color 0.2s ease;
}

.df-modal-close-btn:hover {
    color: #ef4444;
}

.df-modal-body {
    font-size: 0.95rem;
    color: #334155;
    line-height: 1.65;
}

.df-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
    .df-modal-overlay {
        align-items: flex-end;
    }

    .df-modal-content {
        border-radius: 16px 16px 0 0;
        width: 100%;
        max-width: 100%;
        transform: translateY(100%);
    }

    .df-modal-overlay.is-visible .df-modal-content {
        transform: translateY(0);
    }
}

/* ==========================================================================
   4. Botones
   ========================================================================== */
.button,
.btn {
    padding: 12px 24px;
    border-radius: var(--md-radius);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--md-transition);
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: var(--md-shadow-1);
    transform: translateY(0);
}

.button:hover,
.btn:hover {
    box-shadow: var(--md-shadow-2);
    transform: translateY(-2px);
}

.button-primary,
.btn--primary,
.button.button-primary {
    background-color: var(--df-primary);
    color: var(--df-text-light);
}

.button-primary:hover,
.btn--primary:hover,
.button.button-primary:hover {
    background-color: var(--df-primary-dark);
}

.button-secondary,
.btn--secondary {
    background-color: #f3f4f6;
    color: var(--df-text-primary);
    border-color: #e5e7eb;
}

.button-secondary:hover,
.btn--secondary:hover {
    background-color: #e5e7eb;
}

.btn--danger {
    background-color: var(--df-danger);
    color: var(--df-text-light);
}

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

.btn--small {
    padding: 8px 16px;
    font-size: 0.9rem;
}

.btn i {
    margin-right: 5px;
}

/* ==========================================================================
   5. Estilos de Apoyo (Usuarios Miembros)
   ========================================================================== */
.apoyos-list-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.apoyo-summary-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f8fafc;
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius-sm);
    padding: 1rem;
    box-shadow: var(--md-shadow-1);
}

.apoyo-summary-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.apoyo-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: var(--df-primary);
    color: var(--df-text-light);
    display: flex;
    justify-content: center;
    align-items: center;
}

.apoyo-avatar .fa-user-circle {
    font-size: 1.5rem;
}

.apoyo-name {
    margin: 0;
    font-weight: 600;
}

.apoyo-email {
    margin: 0;
    font-size: 0.9rem;
    color: var(--df-text-secondary);
}

.apoyo-summary-actions {
    display: flex;
    gap: 0.5rem;
}

/* Estilos para el spinner de carga */
.df-spinner {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    display: none;
    animation: spin 1s ease-in-out infinite;
}

.df-spinner.active {
    display: block;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.btn.is-loading span,
.button.is-loading span {
    display: none;
}

.btn.is-loading .df-spinner,
.button.is-loading .df-spinner {
    display: block;
}

/* ==========================================================================
   6. Gestión de Textos Dinámicos
   ========================================================================== */
.df-context-section {
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--df-border);
}

.df-context-section:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.df-context-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin-top: 0;
    margin-bottom: 1rem;
}

.df-tab-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.df-tab-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 2rem;
    margin-bottom: 0.5rem;
}

.df-tab-link {
    display: block;
    padding: 0.75rem 1.25rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--df-text-secondary);
    background-color: var(--df-bg-main);
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius);
    transition: var(--md-transition);
}

.df-tab-link:hover {
    background-color: var(--df-border);
    color: var(--df-text-primary);
}

.df-tab-link.active {
    background-color: var(--df-primary);
    color: var(--df-text-light);
    border-color: var(--df-primary);
    box-shadow: var(--md-shadow-1);
}

.df-tab-content {
    display: none;
}

.df-tab-content.active {
    display: block;
}

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

.wp-list-table th,
.wp-list-table td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--df-border);
    text-align: left;
}

.wp-list-table thead th {
    font-weight: 600;
    background-color: #f3f4f6;
    color: var(--df-text-primary);
}

.wp-list-table tbody tr:last-child td {
    border-bottom: none;
}

.wp-list-table textarea {
    border: 1px solid var(--md-input-border);
    border-radius: var(--md-radius-sm);
    padding: 8px;
    resize: vertical;
    font-size: 0.95rem;
    background-color: #fff;
    transition: var(--md-transition);
}

.wp-list-table textarea:focus {
    border-color: var(--df-primary);
    box-shadow: 0 0 0 2px rgba(139, 0, 0, 0.15);
    outline: none;
}

.submit {
    margin-top: 2rem;
    text-align: right;
}

/* ==========================================================================
   7. Reglas de Responsividad
   ========================================================================== */

/* Reglas del 90% para el contenedor principal */
@media (max-width: 768px) {
    .custom-app-container {
        width: 90%;
        padding: 0;
        margin: 1.5rem auto;
    }

    /* Reducir padding en tarjetas para ganar espacio */
    .card-wrapper,
    .df-tab-content-wrapper,
    .user-list-section {
        padding: 1.5rem;
    }

    /* Títulos más compactos en móvil */
    .app-title,
    .section-title,
    .df-modal-title {
        font-size: 1.25rem;
    }

    /* Convertir pestañas en carrusel horizontal */
    .df-tab-nav,
    .df-tabs--modern,
    .filter-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .df-tab-nav::-webkit-scrollbar,
    .df-tabs--modern::-webkit-scrollbar {
        display: none;
    }

    .df-tab-nav .df-tab-link,
    .df-tabs--modern .df-tab-link {
        flex-shrink: 0;
    }

    /* Ajustar el layout del panel de apoyo */
    .panel-apoyo-dashboard .row {
        flex-direction: column;
    }
}

/* ==========================================================================
   8. Sobrescritura de Estilos de Librerías y Utilidades
   ========================================================================== */

/* Flatpickr Date Picker */
.flatpickr-calendar .flatpickr-day.selected,
.flatpickr-calendar .flatpickr-day.startRange,
.flatpickr-calendar .flatpickr-day.endRange {
    background: var(--df-primary);
    border-color: var(--df-primary);
}

.flatpickr-calendar .flatpickr-day.today {
    border-color: var(--df-primary-dark);
}

.flatpickr-calendar .flatpickr-day.today:hover,
.flatpickr-calendar .flatpickr-day.today:focus {
    background: var(--df-primary-dark);
    border-color: var(--df-primary-dark);
    color: #fff;
}

/* Estilos para el Toast */
#df-toast.df-toast {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: white;
    padding: 16px 24px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    display: none;
    z-index: 9999;
    font-size: 16px;
    min-width: 280px;
    max-width: 90%;
    text-align: center;
}

#df-toast .toast-icon {
    margin-right: 10px;
    font-size: 20px;
    vertical-align: middle;
}

#df-toast.success {
    background-color: #4CAF50;
}

#df-toast.error {
    background-color: #F44336;
}

#df-toast.info {
    background-color: #2196F3;
}

/* Estilo para el input Tagify */
.tagify__dropdown {
    background: white;
    border: 1px solid #ddd;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
}

.tagify__tag {
    background-color: #0073aa;
    color: white;
    padding: 4px 8px;
    border-radius: 3px;
    font-weight: 600;
}

.tagify__tag__removeBtn {
    margin-left: 6px;
    cursor: pointer;
}

.tagify__input {
    min-width: 100px;
    outline: none;
}

/* Estilos para las pestañas de píldora */
.df-tabs--modern,
.filter-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.df-tabs--modern .df-tab-link {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 9999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 500;
    color: #666;
    text-decoration: none;
    transition: all 0.3s ease;
    cursor: pointer;
}

.df-tabs--modern .df-tab-link.active {
    background-color: #900;
    border-color: #900;
    color: #fff;
    font-weight: bold;
}

.df-tabs--modern .df-tab-link:hover {
    background-color: #eee;
}

.df-tabs--modern .df-tab-link.active:hover {
    background-color: #900;
}

/* Estilos para la cuadrícula y las tarjetas de usuario */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

.df-button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-items: center;
}

.df-button-group .btn {
    flex-grow: 1;
    max-width: 48%;
}

.user-info p {
    margin-top: 0;
    margin-bottom: 0.5em;
}

.user-info .user-role {
    padding-bottom: 1em;
}

.user-card-actions {
    padding-top: 1em;
}

/* Correcciones para el input de contraseña */
.password-input-wrapper {
    position: relative;
    width: 100%;
}

.password-input-wrapper .form-input {
    padding-right: 60px;
}

.password-input-wrapper .toggle-password-vis {
    position: absolute;
    top: 50%;
    right: 30px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    z-index: 10;
}

.password-policies-info {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    cursor: pointer;
    color: #666;
    z-index: 10;
}

.password-policies-info:hover .password-tooltip {
    display: block;
}

.password-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    width: 300px;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    border-radius: 8px;
    padding: 15px;
    z-index: 20;
    text-align: left;
    display: none;
}

.password-tooltip p,
.password-tooltip ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.password-tooltip ul li {
    padding-left: 1.5em;
    position: relative;
}

.password-tooltip ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: #28a745;
    position: absolute;
    left: 0;
}

/* Estilos para el paginador */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5em;
}

.pagination .page-numbers {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 0.5rem;
}

.pagination .page-numbers a,
.pagination .page-numbers span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 1rem;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--df-text-secondary);
    background-color: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius-sm);
    transition: var(--md-transition);
    cursor: pointer;
}

.pagination .page-numbers .current {
    background-color: var(--df-primary);
    border-color: var(--df-primary);
    color: var(--df-text-light);
    font-weight: 700;
    cursor: default;
    box-shadow: var(--md-shadow-2);
}

/* ==========================================================================
   16. ESTILOS PARA PAGINADOR (VERSIÓN DE ALTA ESPECIFICIDAD)
   ========================================================================== */

/* Contenedor principal del paginador */
div#df-activity-log-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 2.5em;
    width: 100%;
}

/* Estilos base para CADA elemento del paginador (enlaces y spans) */
div#df-activity-log-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0.5rem 1rem;
    margin: 0 4px; /* Pequeño margen horizontal */
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none !important; /* Forzamos que no haya subrayado */
    color: var(--df-text-secondary);
    background: var(--df-bg-card); /* Forzamos un fondo */
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius-sm);
    transition: var(--md-transition);
    cursor: pointer;
    box-shadow: none; /* Reseteamos cualquier sombra heredada */
}

/* Estilo para los enlaces al pasar el mouse */
div#df-activity-log-pagination a.page-numbers:hover {
    border-color: var(--df-primary);
    color: var(--df-primary);
    transform: translateY(-2px);
    box-shadow: var(--md-shadow-2);
}

/* Estilo para el número de la página actual */
div#df-activity-log-pagination .page-numbers.current {
    background: var(--df-primary);
    border-color: var(--df-primary);
    color: var(--df-text-light);
    font-weight: 700;
    cursor: default;
    box-shadow: var(--md-shadow-2);
}

/* Estilos para el panel de apoyo */
.panel-apoyo-dashboard .row {
    display: flex;
    gap: 20px;
    margin-bottom: 2em;
    align-items: stretch;
}

.column--1-of-2 {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.card-wrapper.card-section {
    flex: 1;
    padding: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.apoyo-summary-card p {
    margin: 0;
    padding: 0.5em 0;
    display: flex;
    align-items: center;
}

.apoyo-summary-card .fas {
    margin-right: 10px;
    color: #900;
}

.group-members-section {
    padding: 20px 0 0 0;
    flex: 1;
    overflow-y: auto;
    max-height: 300px;
}

.group-members-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 15px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.member-item {
    background-color: #f9f9f9;
    border: 1px solid var(--df-border, #e2e8f0);
    border-radius: var(--md-radius-sm, 8px);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: var(--md-transition);
    box-shadow: var(--md-shadow-1);
}

.member-item i {
    color: #900;
    margin-right: 5px;
}

.member-item .member-name,
.member-item .member-email {
    display: block;
    padding: 2px 0;
}

.member-email {
    color: #555;
    font-size: 14px;
}

/* Nuevos estilos de espaciado entre secciones */
.user-list-section,
.user-management-card {
    margin-bottom: 2em;
}

/* ==========================================================================
   Estilos Específicos para el Formulario de Entrega Rápida
   ========================================================================== */

.app-description {
    font-size: 1rem;
    color: var(--df-text-secondary);
    margin-top: -1rem; /* Acercar el párrafo al título */
    margin-bottom: 2rem;
}

/* Contenedor de la vista previa del archivo (oculto por defecto) */
.file-preview-container {
    margin-top: 1rem;
    padding: 1rem;
    background-color: var(--df-bg-main);
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius-sm);
    display: none; /* Se muestra con JS */
}

.file-preview-container.active {
    display: block;
}

/* Estilos para el input de tipo file para que luzca como los demás */
input[type="file"] {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--md-input-border);
    border-radius: var(--md-radius-sm);
    background-color: var(--df-bg-main);
    color: var(--df-text-primary);
    font-size: 1rem;
    transition: var(--md-transition);
    box-sizing: border-box; /* Crucial para que el padding no desborde */
    line-height: 1; /* Para alinear el texto dentro del input */
}

/* Contenedor del enlace generado */
.generated-link-wrapper {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}

.generated-link-wrapper .form-input {
    flex-grow: 1; /* El input de enlace ocupa el espacio restante */
}

/* Estilos para los botones de la sección de enlace generado */
.generated-link-wrapper .button,
.generated-link-wrapper .btn {
    padding: 12px; /* Relleno uniforme para botones con ícono */
}

/* Estilo para el botón de WhatsApp */
.button-whatsapp,
.btn--whatsapp {
    background-color: #25D366; /* Color de fondo de WhatsApp */
    color: var(--df-text-light);
}

.button-whatsapp:hover,
.btn--whatsapp:hover {
    background-color: #128C7E;
}

/* Estilos para el QR Code */
#qr-code-container img {
    max-width: 150px; /* Tamaño del QR para que no sea demasiado grande */
    height: auto;
}

/* ==========================================================================
   Estilos Específicos para el Formulario de Recuperación de Contraseña
   ========================================================================== */

/* Contenedor principal del formulario de recuperación */
.df-password-reset-form-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 80vh; /* Centra el formulario verticalmente en la pantalla */
}

/* Estilo de la tarjeta para el formulario */
.df-form {
    max-width: 450px;
    width: 100%;
    padding: 2.5rem;
    background-color: var(--df-bg-card);
    border-radius: var(--md-radius);
    box-shadow: var(--md-shadow-2);
    box-sizing: border-box;
}

.df-form-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--df-text-primary);
    text-align: center;
    margin-bottom: 1.5rem;
}

.df-form-description {
    font-size: 0.95rem;
    color: var(--df-text-secondary);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Contenedor para los mensajes de éxito/error */
.df-notice {
    padding: 1rem;
    border-radius: var(--md-radius-sm);
    margin-bottom: 1.5rem;
    text-align: center;
    font-weight: 600;
}

.df-notice-error {
    background-color: #fee2e2;
    color: var(--df-danger);
    border: 1px solid var(--df-danger);
}

.df-notice-success {
    background-color: #dcfce7;
    color: var(--df-success);
    border: 1px solid var(--df-success);
}

/* Campo de formulario (un poco más compacto) */
.df-form-field {
    margin-bottom: 1rem;
}

.df-form-field label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--df-text-primary);
}

.df-form-field .input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--md-input-border);
    border-radius: var(--md-radius-sm);
    background-color: var(--df-bg-main);
    color: var(--df-text-primary);
    font-size: 1rem;
    transition: var(--md-transition);
    box-sizing: border-box;
}

.df-form-field .input:focus {
    outline: none;
    border-color: var(--df-primary);
    box-shadow: 0 0 0 3px rgba(139, 0, 0, 0.15);
}

/* Contenedor del botón de envío */
.df-form-submit {
    margin-top: 1.5rem;
}

.df-button {
    width: 100%;
    padding: 12px 24px;
    border-radius: var(--md-radius);
    text-decoration: none;
    font-weight: 600;
    cursor: pointer;
    transition: var(--md-transition);
    border: 1px solid transparent;
    display: block; /* Hacemos que el botón ocupe todo el ancho */
    background-color: var(--df-primary);
    color: var(--df-text-light);
    box-shadow: var(--md-shadow-1);
}

.df-button:hover {
    background-color: var(--df-primary-dark);
    box-shadow: var(--md-shadow-2);
    transform: translateY(-2px);
}

/* Enlace de pie de página */
.df-form-footer-links {
    text-align: center;
    margin-top: 2rem;
    font-size: 0.95rem;
}

.df-form-footer-links a {
    color: var(--df-primary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.df-form-footer-links a:hover {
    color: var(--df-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   Estilos Específicos para el Historial de Entregas Públicas
   ========================================================================== */

/* Secciones de la tabla */
.wp-list-table thead th {
    background-color: var(--df-bg-main);
    color: var(--df-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9em;
    letter-spacing: 0.5px;
}

.wp-list-table tbody tr {
    transition: background-color 0.2s ease;
}

.wp-list-table tbody tr:hover {
    background-color: #f3f4f6;
}

/* Estilos para las filas con diferentes estados */
.wp-list-table .status-active {
    /* No se requiere un estilo especial, pero la clase está disponible */
}

.wp-list-table .status-inactive td {
    color: var(--df-text-secondary);
    opacity: 0.7;
}

/* Acciones en la fila */
.wp-list-table .row-actions {
    font-size: 0.9em;
    margin-top: 5px;
    color: var(--df-text-secondary);
}

.wp-list-table .row-actions .notes {
    font-size: 0.85em;
    font-style: italic;
    color: #94a3b8;
}

/* Estilos para las píldoras de estado */
.df-status-pill {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.df-status-pill.status-active {
    background-color: #dcfce7; /* Verde claro */
    color: var(--df-success);
}

.df-status-pill.status-expired {
    background-color: #fee2e2; /* Rojo claro */
    color: var(--df-danger);
}

.df-status-pill.status-limit {
    background-color: #fffbeb; /* Amarillo claro */
    color: var(--df-warning);
}

/* Contenedor para los botones de acción */
.df-button-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem; /* 8px */
    justify-content: flex-end;
}

.df-button-grid .button,
.df-button-grid .btn {
    flex-grow: 1;
    min-width: 40px;
    padding: 10px; /* Reducimos el padding para que quepan más */
    font-size: 0.9em;
}

.df-button-grid .button i,
.df-button-grid .btn i {
    margin: 0;
}

/* Estilos para el modal de gestión de contraseña */
#password-manager-modal .df-modal-content {
    max-width: 480px;
}

#password-manager-modal .df-modal-body strong {
    color: var(--df-primary);
    font-weight: 600;
}

#password-manager-modal .df-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 1rem;
    padding-top: 1.5rem;
}

#password-manager-modal #remove-password-btn {
    display: none; /* Se muestra con JS si el archivo tiene contraseña */
}

/* Responsividad para la tabla en móviles */
@media (max-width: 768px) {
    /* Las tablas de WordPress no son muy responsive, pero podemos mejorar la legibilidad */
    .wp-list-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wp-list-table thead,
    .wp-list-table tbody {
        display: table;
        width: 100%;
    }

    /* Opcional: Ocultar columnas menos importantes para ganar espacio */
    .wp-list-table thead tr th:nth-child(4), /* 'Expira en' */
    .wp-list-table tbody tr td:nth-child(4) {
        display: none;
    }
}

/* --- Estilos para el texto al pie del formulario de login --- */
.login-footer-text {
    text-align: center;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--df-border, #e2e8f0);
    font-size: 0.85rem;
    color: var(--df-text-secondary, #64748b);
    line-height: 1.5;
}


/* ==========================================================================
   9. Estilos para Indicador de Notificaciones
   ========================================================================== */
.menu-item-notifications {
    position: relative; /* Contexto de posicionamiento para el contador */
}

.menu-item-notifications.has-unread .fa-bell {
    color: var(--df-danger, #dc2626);
    animation: df-bell-shake 0.8s cubic-bezier(.36,.07,.19,.97) both;
}

/* El punto rojo que reemplaza al número */
.menu-item-notifications .notification-count {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    font-size: 11px;
    font-weight: bold;
    line-height: 18px;
    color: white;
    background-color: var(--df-danger, #dc2626);
    border-radius: 9px; /* Mitad de la altura para hacerlo circular */
    text-align: center;
    box-shadow: 0 0 0 2px var(--df-bg-card); /* Borde del color del fondo del menú */
}

/* Animación de vibración para la campana */
@keyframes df-bell-shake {
  0%, 100% { transform: rotate(0); }
  10%, 30%, 50%, 70%, 90% { transform: rotate(-10deg); }
  20%, 40%, 60%, 80% { transform: rotate(10deg); }
}

/* ==========================================================================
   Mejoras de Estilo para Tarjetas de Grupo
   ========================================================================== */

/* Contenedor principal de los miembros */
.group-card-members .member-item {
    display: flex;          /* Activa el modelo de caja flexible */
    align-items: center;    /* Centra los elementos verticalmente */
    justify-content: flex-start; /* <-- Alinea todo a la izquierda */
    gap: 0.75rem;           /* Espacio entre el icono y el nombre */

    background-color: transparent !important; /* Elimina el fondo */
    border: none !important;                  /* Elimina el borde */
    box-shadow: none !important;              /* Elimina la sombra */
    padding: 0.25rem 0 !important;            /* Ajusta el padding vertical */
}

/* Estilo para cada miembro (dueño o apoyo) */
.member-item {
    background-color: transparent !important; /* Elimina el fondo */
    border: none !important; /* Elimina el borde */
    box-shadow: none !important; /* Elimina la sombra */
    padding: 0.5rem 0 !important; /* Ajusta el padding vertical y quita el horizontal */
    display: flex;
    justify-content: space-between; /* Alinea los iconos a los extremos */
    align-items: center;
}

/* 3. Asegura que el icono de la corona del dueño sea visible y tenga color */
.member-item.owner i.fa-user-crown {
    color: var(--df-warning); /* Color dorado/amarillo para la corona */
    font-size: 1.1em;         /* Un poco más grande para que destaque */
}

/* 4. Estilo para el título "Apoyo" */
.group-card-apoyos .apoyos-title {
    margin-top: 1rem;
    font-weight: 600;
}

.member-item i {
    font-size: 1rem;
    color: var(--df-text-secondary);
}

.member-item span {
    flex-grow: 1;
    text-align: center;
}

/* Estilos específicos para el Dueño (Cliente Principal) */
.member-item.owner {
    background-color: #f0fdf4; /* Un verde muy claro */
    border: 1px solid #bbf7d0;
}

.member-item.owner i {
    color: var(--df-success); /* Icono en color de éxito (verde) */
}

.member-item.owner strong {
    color: var(--df-text-primary);
}

/* Estilos para la sección de Apoyos */
.apoyos-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text-primary);
    margin: 1rem 0 0.5rem 0;
}

.group-card-apoyos ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Estilo para cada Apoyo */
.member-item.support i {
    color: var(--df-info); /* Icono en color de información (azul) */
}

/* ==========================================================================
   Estilos para Píldoras de Estadísticas en Tarjetas de Grupo
   ========================================================================== */

   /* 1. Añade espacio superior a las estadísticas */
   .group-card-stats {
       padding-top: 1rem;
       margin-top: 1rem;
       border-top: 1px solid var(--df-border);
   }

/* Estilo base para cada píldora */
.stat-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem; /* Espacio entre el icono y el texto */
    padding: 0.5rem 1rem; /* Relleno interno */
    border-radius: 999px; /* Bordes completamente redondeados */
    font-weight: 600;
    font-size: 0.9rem;
    line-height: 1;
}

.stat-pill .stat-value {
    font-size: 1.1rem;
}

.stat-pill .stat-label {
    font-weight: 500;
}

/* Color para la píldora de "Pendientes" (tono de advertencia) */
.stat-pill.stat-pending {
    background-color: #fffbeb; /* Amarillo muy claro */
    color: #b45309; /* Naranja oscuro para el texto */
}

.stat-pill.stat-pending i {
    color: #f59e0b; /* Naranja para el icono */
}

/* Color para la píldora de "Archivos" (tono de información) */
.stat-pill.stat-files {
    background-color: #eff6ff; /* Azul muy claro */
    color: #1d4ed8; /* Azul oscuro para el texto */
}

.stat-pill.stat-files i {
    color: #3b82f6; /* Azul para el icono */
}

/* Color para la píldora de "Expirados" (tono de peligro/inactivo) */
.stat-pill.stat-expired {
    background-color: #fee2e2; /* Rojo muy claro */
    color: #991b1b; /* Rojo oscuro para el texto */
}
.stat-pill.stat-expired i {
    color: var(--df-danger); /* Rojo para el icono */
}

/* Color para la píldora de "Eliminados" (tono neutro/oscuro) */
.stat-pill.stat-deleted {
    background-color: #e2e8f0; /* Gris claro */
    color: #475569; /* Gris oscuro para el texto */
}
.stat-pill.stat-deleted i {
    color: #64748b; /* Gris para el icono */
}

/* Color para la píldora de "Entregas Directas" (tono azul/info) */
.stat-pill.stat-delivery {
    background-color: #e0f2fe; /* Azul muy claro para el fondo */
    color: #1e40af; /* Azul oscuro para el texto */
}

.stat-pill.stat-delivery i {
    color: #3b82f6; /* Azul vibrante para el icono del camión */
}
/* ==========================================================================
   Estilos para Pestañas con Contador (Badge/Pill)
   ========================================================================== */

.df-tabs--modern .df-tab-link {
    display: flex; /* Usamos flexbox para alinear el texto y el contador */
    align-items: center;
    gap: 8px; /* Espacio entre el texto y el contador */
}

.df-tab-link .df-count {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75em; /* Un poco más pequeño que el texto del tab */
    font-weight: 700;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 9999px; /* Bordes completamente redondeados */
    background-color: #e2e8f0; /* Color de fondo gris claro para el contador */
    color: #475569; /* Color de texto más oscuro */
    transition: all 0.2s ease-in-out;
}

/* Estilo del contador cuando la pestaña está activa */
.df-tab-link.active .df-count {
    background-color: #ffffff; /* Fondo blanco */
    color: var(--df-primary, #8b0000); /* Color primario del plugin */
}

.status-safe {
    font-weight: bold;
    color: #059669; /* Verde */
}
.status-expiring-soon {
    font-weight: bold;
    color: #D97706; /* Amarillo/Naranja */
}
.status-expired {
    font-weight: bold;
    color: #DC2626; /* Rojo */
    text-decoration: line-through;
}

/* ==========================================================================
   10. Estilos para el Timeline Histórico
   ========================================================================== */

.history-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.history-section .section-title {
    margin-bottom: 0;
}

.df-timeline {
    position: relative;
    padding-left: 30px; /* Space for the timeline line */
    border-left: 2px solid var(--df-border, #e2e8f0);
}

.timeline-item {
    position: relative;
    margin-bottom: 2rem;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

.timeline-item__marker {
    position: absolute;
    left: -42px; /* Adjust to center on the line */
    top: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--df-bg-card, #fff);
    border: 2px solid var(--df-border, #e2e8f0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.timeline-item__content {
    background: var(--df-bg-main, #f8fafc);
    border-radius: var(--md-radius-sm, 8px);
    padding: 1rem 1.5rem;
    border: 1px solid var(--df-border, #e2e8f0);
}

.timeline-item__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--df-border, #e2e8f0);
}

.timeline-item__title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--df-text-primary, #1e293b);
}

.timeline-item__timestamp {
    font-size: 0.85rem;
    color: var(--df-text-secondary, #64748b);
}

.timeline-item__body p {
    margin: 0.5rem 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.timeline-item__body p strong {
    font-weight: 600;
    color: var(--df-text-primary, #1e293b);
}

/* Color Variants */
.timeline-item--blue .timeline-item__marker {
    border-color: #3b82f6;
    color: #3b82f6;
}
.timeline-item--blue .timeline-item__title { color: #3b82f6; }

.timeline-item--green .timeline-item__marker {
    border-color: #16a34a;
    color: #16a34a;
}
.timeline-item--green .timeline-item__title { color: #16a34a; }

.timeline-item--red .timeline-item__marker {
    border-color: #dc2626;
    color: #dc2626;
}
.timeline-item--red .timeline-item__title { color: #dc2626; }

.timeline-item--yellow .timeline-item__marker {
    border-color: #f59e0b;
    color: #f59e0b;
}
.timeline-item--yellow .timeline-item__title { color: #f59e0b; }

.timeline-item--gray .timeline-item__marker {
    border-color: #64748b;
    color: #64748b;
}
.timeline-item--gray .timeline-item__title { color: #64748b; }

.timeline-item--purple .timeline-item__marker {
    border-color: #9333ea;
    color: #9333ea;
}
.timeline-item--purple .timeline-item__title { color: #9333ea; }

.timeline-item--default .timeline-item__marker {
    border-color: var(--df-text-secondary, #64748b);
    color: var(--df-text-secondary, #64748b);
}


/* ==========================================================================
   11. Estilos para Jerarquía en Tarjetas de Grupo
   ========================================================================== */

/* Contenedor principal para la jerarquía de miembros */
.group-card-members-hierarchy {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--df-border);
    display: flex;
    flex-direction: column;
    gap: 1.25rem; /* Espacio entre cada categoría de miembro */
}

/* Estilo para cada categoría (Dueño, Apoyo, Supervisor, etc.) */
.member-category {
    width: 100%;
}

/* Títulos para las secciones ("Apoyo(s)", "Supervisor(es)", etc.) */
.members-heading {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--df-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.25rem;
    border-bottom: 1px dotted var(--df-border);
}

/* Lista que contiene a los miembros */
.members-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Estilo para cada item de miembro (una línea con icono y nombre) */
.member-item-new {
    display: flex;
    align-items: center;
    gap: 0.75rem; /* Espacio entre el icono y el texto */
    font-size: 0.95rem;
}

.member-item-new i {
    font-size: 1.1em;
    width: 20px; /* Ancho fijo para alinear los iconos */
    text-align: center;
}

/* Colores y estilos específicos por rol */
.member-item-new.owner {
    font-weight: 700;
    color: var(--df-text-primary);
}
.member-item-new.owner i {
    color: var(--df-warning); /* Dorado para la corona */
}

.member-item-new.support i {
    color: var(--df-info); /* Azul para apoyos */
}

.member-item-new.supervisor i {
    color: var(--df-success); /* Verde para supervisores */
}

.member-item-new.cc-email i {
    color: var(--df-text-secondary); /* Gris para correos */
}

.member-item-new.cc-email span {
    font-style: italic;
}

/* Fichero: public/css/frontend.css */

/* --- CÓDIGO AÑADIDO --- */
/* Color para la píldora de "En Progreso" (tono de información) */
.stat-pill.stat-in-progress {
    background-color: #eff6ff; /* Azul muy claro */
    color: #1d4ed8; /* Azul oscuro para el texto */
}
.stat-pill.stat-in-progress i {
    color: #3b82f6; /* Azul para el icono */
}

/* Color para la píldora de "Completados" (tono de éxito) */
.stat-pill.stat-completed {
    background-color: #f0fdf4; /* Verde muy claro */
    color: #15803d; /* Verde oscuro para el texto */
}
.stat-pill.stat-completed i {
    color: var(--df-success); /* Verde para el icono */
}

/* Nuevo estilo para el texto desenfocado */
.df-blurred-text {
    filter: blur(4px); /* Aplica el desenfoque */
    cursor: pointer;
    position: relative;
    transition: filter 0.3s ease-in-out;
}

/* Efecto al pasar el cursor: quita el desenfoque */
.df-blurred-text:hover {
    filter: blur(0px);
}

/* El "blurb" que aparece al pasar el cursor */
.df-blurred-text::after {
    content: 'Información confidencial';
    position: absolute;
    bottom: calc(100% + 5px); /* Posición encima del texto */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    font-size: 0.8em;
    padding: 5px 10px;
    border-radius: 4px;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.df-blurred-text:hover::after {
    opacity: 1;
    visibility: visible;
}

/* Estilo para el contenedor del grupo, asegurando que se alinee bien */
.solicitud-meta .group-name-container {
    display: inline-block;
}

@media print {
    /* Oculta el encabezado de tu página si existe */
    .df-page-header {
        display: none;
    }
    /* Oculta los botones que no son relevantes para la impresión */
    .btn, button, .section-header button {
        display: none !important;
    }
    /* Oculta el aviso de confidencialidad para que no se imprima */
    .custom-app-container > div:first-child {
        display: none;
    }
}

@media print {
    /* Oculta los botones que no son relevantes para la impresión */
    .print-button {
        display: none !important;
    }
}

/* Estilo para resaltar la tarjeta cuyo modal está abierto */
.solicitud-card-v2.card--modal-open {
    box-shadow: 0 0 0 3px var(--df-primary-light, rgba(139, 0, 0, 0.4));
    border-color: var(--df-primary, #8B0000);
    transform: translateY(-2px); /* Un ligero realce extra */
}

/* ==========================================================================
   12. NUEVOS ESTILOS PARA LA VISTA DE DETALLE DEL EXPEDIENTE (V2)
   ========================================================================== */

/* --- Banner Confidencial --- */
.confidential-banner {
    background: var(--df-danger, #dc2626);
    color: var(--df-text-light, #fff);
    padding: 10px 15px;
    font-weight: 600;
    text-align: center;
    border-radius: var(--md-radius-sm);
    margin-bottom: 2rem;
    font-size: 1rem;
}

/* --- Cuadrícula del Encabezado --- */
.expediente-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* --- Tarjeta Principal (Izquierda) --- */
.expediente-main-card {
    background: var(--df-bg-card);
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
}
.expediente-main-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--df-text-secondary);
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
}
.expediente-subject {
    font-size: 2rem;
    font-weight: 700;
    color: var(--df-text-primary);
    margin: 0;
    line-height: 1.2;
    flex-grow: 1;
}
.expediente-status-badge {
    align-self: flex-start;
    margin-top: 1rem;
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    color: var(--df-text-light);
    background-color: #64748b;
}
.expediente-status-badge.status-completado { background-color: var(--df-success); }
.expediente-status-badge.status-pendiente_revision, .expediente-status-badge.status-en_revision { background-color: var(--df-warning); }
.expediente-status-badge.status-expirado, .expediente-status-badge.status-expirado_recuperable { background-color: var(--df-danger); }

/* --- Tarjeta de Metadatos (Derecha) --- */
.expediente-meta-card {
    background: var(--df-bg-main);
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius);
    padding: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 1.5rem;
}
.meta-item {
    text-align: right;
}
.meta-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--df-text-secondary);
    text-transform: uppercase;
    display: block;
}
.meta-value {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--df-text-primary);
}
.meta-value.folio {
    font-weight: 700;
    color: var(--df-primary);
}

/* --- Cuerpo del Expediente --- */
.expediente-body {
    padding-top: 1rem; /* Menos padding porque ya hay una tarjeta */
}
.details-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}
.detail-card {
    background-color: var(--df-bg-main);
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius-sm);
    padding: 1rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.detail-icon {
    font-size: 1.5rem;
    color: var(--df-primary);
}
.detail-content {
    display: flex;
    flex-direction: column;
}
.detail-label {
    font-size: 0.8rem;
    color: var(--df-text-secondary);
    font-weight: 500;
}
.detail-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--df-text-primary);
}
.last-access-log {
    margin-top: 1.5rem;
    font-size: 0.85rem;
    color: var(--df-text-secondary);
    border-top: 1px dotted var(--df-border);
    padding-top: 1rem;
}
.card-wrapper hr {
    border: none;
    border-top: 1px solid var(--df-border);
    margin: 2rem 0;
}

/* --- Sección 'Compartido Con' --- */
.sharing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.sharing-column h4 {
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.sharing-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: var(--df-bg-main);
    border: 1px solid var(--df-border);
    border-radius: var(--md-radius-sm);
    padding: 1rem;
    margin-bottom: 0.75rem;
}
.sharing-icon {
    font-size: 1.5rem;
    color: var(--df-text-secondary);
}
.sharing-details {
    display: flex;
    flex-direction: column;
}
.sharing-name {
    font-weight: 600;
    color: var(--df-text-primary);
}
.sharing-email {
    font-size: 0.9rem;
    color: var(--df-text-secondary);
}

.df-expediente-footer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--df-border);
    font-size: 0.8rem;
    color: var(--df-text-secondary);
    text-align: center;
}
/* ==========================================================================
   13. ESTILOS PARA TARJETAS DE ARCHIVO EN EXPEDIENTE (VERSIÓN MEJORADA)
   ========================================================================== */

.expediente-file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}

/* Encabezado de sección con botón de acción (para el ZIP) */
.section-header.with-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.file-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background-color: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 0.75rem 1rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.file-card:hover {
    border-color: #cbd5e1;
    box-shadow: 0 4px 8px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.file-card__info {
    flex-grow: 1;
    overflow: hidden; /* Mantenemos esto para seguridad */
}

.file-card__name {
    display: block;
    font-weight: 600;
    color: #111827;
    margin-bottom: 0.25rem;
    font-size: 0.95rem;
    /* Quitamos la elipsis para mostrar el nombre completo */
    white-space: normal;
    word-break: break-all;
}

.file-card__meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.file-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    color: #fff;
    text-transform: uppercase;
}
/* Colores de los badges (VERSIÓN CORREGIDA Y AMPLIADA) */
.file-badge--pdf { background-color: #9b59b6; } /* Morado */
.file-badge--doc, .file-badge--docx { background-color: #3498db; } /* Azul */
.file-badge--xls, .file-badge--xlsx { background-color: #2ecc71; } /* Verde */
.file-badge--zip, .file-badge--rar { background-color: #f39c12; } /* Naranja */
.file-badge--ppt, .file-badge--pptx { background-color: #e74c3c; } /* Rojo/Salmón */
.file-badge--jpg, .file-badge--jpeg, .file-badge--png { background-color: #34495e; } /* Azul oscuro/Gris */
.file-badge--default { background-color: #7f8c8d; } /* Gris por defecto */


.file-size {
    font-size: 0.8rem;
    color: #6b7280;
}

.file-card__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-shrink: 0;
}

.file-card__stat {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.9em;
    color: #6b7280;
    background-color: #f1f5f9;
    padding: 4px 8px;
    border-radius: 8px;
}

/* ==========================================================================
   14. ESTILOS PARA EXPEDIENTE (ADICIONALES)
   ========================================================================== */

/* Fondo para destacar la sección de archivos del cliente */
.client-files-section {
    background-color: #f8fafc; /* Un gris muy sutil */
    padding: 1.5rem;
    border-radius: var(--md-radius);
    border: 1px solid var(--df-border);
    margin-bottom: 2rem; /* Añadimos un margen inferior para separar */
}


/* Estilo para mostrar la causa de eliminación en el log de actividad */
.activity-log-item .log-detail-reason {
    display: block;
    font-size: 0.9em;
    color: var(--df-text-secondary, #64748b);
    font-style: italic;
    margin-top: 5px;
    padding-left: 10px;
    border-left: 2px solid var(--df-border, #e2e8f0);
}


/* ==========================================================================
   Estilos para la Fila de Documentos en Nueva Solicitud
   ========================================================================== */

.formato-item-row {
    display: grid;
    grid-template-columns: 2fr 1fr auto; /* 2 columnas para inputs, 1 para acciones */
    gap: 1rem;
    align-items: center; /* Centra verticalmente los elementos */
    margin-bottom: 1rem;
}

.formato-actions {
    display: flex;
    gap: 0.5rem; /* Espacio entre los botones + y - */
}

.formato-actions .icon-button {
    padding: 5px;
    height: 40px; /* Misma altura que los inputs */
    width: 40px;
    line-height: 1;
    border-radius: 50%; /* Hacer los botones redondos */
}

/* Estilos para mostrar nombre y correo en dos líneas en las tarjetas de grupo */
.member-item-new .member-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.3;
}

.member-item-new .user-email-tag {
    font-size: 0.85em;
    color: var(--df-text-secondary);
    font-weight: 400;
}

/* Ajuste del ícono para que se alinee con el nombre */
.member-item-new i {
    align-self: flex-start;
    padding-top: 3px;
}

/* ==========================================================================
   16. ESTILOS PARA AVISOS EN FORMULARIOS (NOTICE BOXES)
   ========================================================================== */

.df-notice {
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
    border-radius: var(--md-radius-sm);
    border: 1px solid transparent;
    font-weight: 600; /* Letra remarcada en bold */
    text-align: center;
}

.df-notice p {
    margin: 0;
}

/* Estilo para el error de contraseña incorrecta */
.df-notice.notice-error {
    background-color: #fee2e2; /* Fondo de color rojo claro */
    border-color: var(--df-danger);
    color: #b91c1c; /* Texto rojo oscuro */
}

/* Estilo para mensajes de éxito (ej. contraseña cambiada) */
.df-notice.notice-success {
    background-color: #dcfce7;
    border-color: var(--df-success);
    color: #166534;
}

/* Estilo para mensajes informativos */
.df-notice.notice-info {
    background-color: #eff6ff;
    border-color: var(--df-info);
    color: #1e40af;
}

/* ==========================================================================
   17. ESTILOS PARA SOLICITUD DE INFORMACIÓN SEGURA (SECURESHARE)
   ========================================================================== */

/* --- Formulario de Creación (Admin) --- */
#secure-request-form .form-field-hint {
    font-size: 0.85rem;
    color: var(--df-text-secondary);
    margin-top: 0.5rem;
}

#generated-link-container .generated-link-wrapper {
    display: flex;
    gap: 0.75rem;
    align-items: center;
    margin-top: 1rem;
}

#generated-link-container .form-input {
    flex-grow: 1;
    background-color: var(--df-bg-main);
    color: var(--df-primary);
    font-weight: 600;
}

#generated-link-container .button {
    padding: 12px;
}

/* --- Historial de Solicitudes (Admin) --- */
.df-button-grid .button {
    min-width: 40px;
    padding: 10px;
    font-size: 0.9em;
}

.df-button-grid .button i {
    margin: 0;
}

.df-status-pill.status-inactive {
    background-color: #f1f5f9;
    color: #64748b;
    text-transform: capitalize;
}

/* --- Formulario Público de Envío (Cliente Externo) --- */
.df-public-download-container .form-footer-actions {
    justify-content: center; /* Centra el botón de envío */
}

.df-public-download-container .button i {
    margin-right: 0.5rem;
}

/* --- Estilos para Etiqueta de Entrega Directa en Página de Detalle --- */
.direct-delivery-badge-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--md-radius-sm);
    background-color: #e0f2fe; /* Fondo azul claro */
    color: #0c4a6e; /* Texto azul oscuro */
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-top: 1rem; /* Espacio para separarlo del estado */
    align-self: flex-start; /* Asegura que se alinee a la izquierda */
}

.direct-delivery-badge-detail .fas {
    font-size: 1rem;
}


.user-assigned-groups {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dotted #e2e8f0;
}
.assigned-groups-title {
    font-weight: 600;
    font-size: 0.9em;
    color: var(--df-text-secondary);
    margin-bottom: 0.5rem;
}
.assigned-groups-title i {
    margin-right: 5px;
}
.assigned-groups-list {
    list-style: none;
    padding-left: 0;
    margin: 0;
    font-size: 0.9em;
    max-height: 100px; /* Evita que la lista sea demasiado larga */
    overflow-y: auto; /* Añade scroll si es necesario */
}
.assigned-groups-list li {
    background-color: #f8fafc;
    padding: 4px 8px;
    border-radius: 4px;
    margin-bottom: 4px;
    border: 1px solid #e2e8f0;
}

/* ==========================================================================
   Estilos para Píldoras de Origen en Reportes
   ========================================================================== */

.origin-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.85rem;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    border-radius: 999px; /* Bordes completamente redondeados */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid transparent;
}

.origin-badge i {
    font-size: 0.9em;
}

/* Estilo para "Entrega Directa" */
.origin-badge.origin-admin {
    background-color: #e0f2fe; /* Azul claro */
    color: #0c4a6e; /* Azul oscuro */
    border-color: #7dd3fc;
}

/* Estilo para "Solicitud Cliente" */
.origin-badge.origin-client {
    background-color: #f0fdf4; /* Verde claro */
    color: #166534; /* Verde oscuro */
    border-color: #86efac;
}

/* ==========================================================================
   Estilos para Celda de IP / User Agent en Reportes
   ========================================================================== */

.user-agent-cell .ip-address {
    display: block;
    font-weight: 600;
    color: var(--df-text-primary);
}

.user-agent-cell .user-agent-details {
    display: -webkit-box;
    -webkit-line-clamp: 2; /* Limita el texto a 2 líneas */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    font-size: 0.85em;
    color: var(--df-text-secondary);
}


/* ==========================================================================
   Estilos para Indicador Visual de Novedad en Tablas
   ========================================================================== */

.table-row-recency tr {
    transition: background-color 0.4s ease-in-out; /* Transición suave */
}

/* Las 3 filas más recientes tendrán un color azul claro más notorio */
.table-row-recency tr:nth-child(-n+3) {
    background-color: rgba(59, 130, 246, 0.1);
}

/* Las filas 4 a 6 tendrán un color un poco más sutil */
.table-row-recency tr:nth-child(n+4):nth-child(-n+6) {
    background-color: rgba(59, 130, 246, 0.05);
}

/* Las filas 7 a 10 tendrán el color más tenue */
.table-row-recency tr:nth-child(n+7):nth-child(-n+10) {
    background-color: rgba(59, 130, 246, 0.02);
}

/* Al pasar el cursor, se mantiene un color de hover estándar */
.table-row-recency tr:hover {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

/* Estilos para filtros de grupo con tarjetas */
.filter-by-group {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.group-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    border-radius: var(--md-radius);
    transition: var(--md-transition);
    border: 3px solid transparent;
}
.group-card-link .group-card {
    height: 100%;
}
.group-card-link.active {
    border-color: var(--df-primary);
    box-shadow: var(--md-shadow-2);
}
.group-card-link:not(.active):hover {
    transform: translateY(-4px);
    box-shadow: var(--md-shadow-2);
}
.all-groups-card {
    background-color: #f8fafc;
    text-align: center;
    justify-content: center;
}


/* --- Estilos para mejorar el aviso de reutilización de contraseña --- */

.df-notice.df-notice-warning {
    background-color: #fffbeb; /* Fondo amarillo pálido */
    border-left: 4px solid #f59e0b; /* Borde izquierdo más grueso y oscuro */
    padding: 1rem 1.5rem; /* Más espacio interno */
    margin-bottom: 1.5rem !important; /* Asegurar espacio debajo */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Sombra sutil */
}

.df-notice.df-notice-warning p {
    font-size: 1.05em;  /* Texto ligeramente más grande */
    font-weight: 700;
    margin: 0;
    padding: 0;
}