/**
 * GestDoc - Estilos públicos (Área de cliente)
 * Versión: 1.0.0
 */


/* ============================================= */
/* ESTILOS GESTDOC - ÁREA DE CLIENTE            */
/* ============================================= */

/* Forzar tipografía moderna, box-sizing y tamaño base 13px */
.gestdoc-area-cliente,
.gestdoc-area-cliente * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    box-sizing: border-box;
}

.gestdoc-area-cliente,
.gestdoc-area-cliente p,
.gestdoc-area-cliente td,
.gestdoc-area-cliente th,
.gestdoc-area-cliente label,
.gestdoc-area-cliente input,
.gestdoc-area-cliente select,
.gestdoc-area-cliente textarea,
.gestdoc-area-cliente button,
.gestdoc-area-cliente a {
    font-size: 13px !important;
}

/* Contenedor principal */
.gestdoc-area-cliente {
    width: 95% !important;
    max-width: 95% !important;
    margin: 20px auto !important;
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    overflow-x: hidden;
}

@media (min-width: 992px) {
    .gestdoc-area-cliente {

    }
}

/* CABECERA */
.gestdoc-area-cliente .gestdoc-header {
    display: flex !important;
    flex-direction: column !important;
    padding: 20px 25px 15px 25px;
    gap: 12px;
    background: #ffffff;
}

.gestdoc-area-cliente .gestdoc-header h2 {
    margin: 0;
    padding: 0;
    border: none;
    color: #2271b1;
    font-size: 24px;
    font-weight: 600;
    text-align: center;
}

/* .gestdoc-user-info, .gestdoc-user-identity, .gestdoc-user-name y
   .gestdoc-user-email quedaron huérfanas: el nombre y el email del cliente
   ahora se muestran dentro del desplegable del avatar
   (ver .gestdoc-avatar-dropdown-info más abajo). */

/* Fila: contador + modo vista (izquierda) · avatar (derecha) */
.gestdoc-area-cliente .gestdoc-header-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}

.gestdoc-area-cliente .gestdoc-header-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.gestdoc-area-cliente .gestdoc-doc-count-badge {
    background: #e9ecef;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: 12px;
    font-weight: 600;
    color: #2271b1;
    white-space: nowrap;
    align-self: flex-start;
}

/* Botones de modo de vista */
.gestdoc-area-cliente .gestdoc-modo-vista {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0f0f1;
    border-radius: 30px;
    padding: 3px;
}

.gestdoc-area-cliente .gestdoc-modo-vista .modo-label {
    font-size: 12px;
    color: #666;
    margin-right: 5px;
    padding: 0 8px;
}

.gestdoc-area-cliente .gestdoc-modo-vista .modo-btn {
    display: inline-block;
    padding: 5px 12px;
    font-size: 12px;
    text-decoration: none;
    border-radius: 20px;
    color: #333;
    transition: all 0.2s;
}

.gestdoc-area-cliente .gestdoc-modo-vista .modo-btn:hover {
    background: #e2e4e7;
}

.gestdoc-area-cliente .gestdoc-modo-vista .modo-btn.activo {
    background: #2271b1;
    color: white;
}

.gestdoc-area-cliente .gestdoc-avatar-menu {
    position: relative;
}

.gestdoc-area-cliente .gestdoc-avatar-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid #e0e0e0;
    background: #f0f2f5;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.gestdoc-area-cliente .gestdoc-avatar-btn:hover {
    border-color: #2271b1;
}

.gestdoc-area-cliente .gestdoc-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gestdoc-area-cliente .gestdoc-avatar-svg {
    width: 22px;
    height: 22px;
    color: #8a8f98;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: max-content;
    min-width: 190px;
    max-width: min(320px, 90vw);
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
    z-index: 100;
    overflow: hidden;
    flex-direction: column;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown.gestdoc-avatar-dropdown-abierto {
    display: flex;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown-info {
    padding: 12px 16px;
    border-bottom: 1px solid #f0f0f1;
    background: #f8f9fa;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown-nombre {
    font-size: 13px;
    font-weight: 500;
    color: #2271b1;
    margin-bottom: 2px;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown-usuario {
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
    word-break: break-all;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown-email {
    font-size: 12px;
    color: #888;
    word-break: break-all;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: transparent;
    border: none;
    text-align: left;
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    color: #1d2327;
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown-item:hover {
    background: #f0f2f5;
}

.gestdoc-area-cliente .gestdoc-avatar-dropdown-item-danger:hover {
    background: #f8d7da;
    color: #721c24;
}

/* MODO TARJETAS - SOLO CATEGORÍAS (GRID) */
.gestdoc-area-cliente .gestdoc-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 20px;
}

.gestdoc-area-cliente .gestdoc-cat-card {
    background: white;
    border: 1px solid #e2e4e7;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    display: block;
}

.gestdoc-area-cliente .gestdoc-cat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
    border-color: #2271b1;
}

.gestdoc-area-cliente .gestdoc-cat-card-icono {
    font-size: 48px;
    margin-bottom: 15px;
}

.gestdoc-area-cliente .gestdoc-cat-card-icono img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

/* Icono de las tarjetas "Comunicaciones" y "Todos los archivos"
   (modo Tarjetas): antes usaban un emoji de texto, que cada sistema
   operativo/navegador renderiza a un tamaño visual distinto (y casi
   siempre más pequeño que un icono de imagen), por lo que nunca
   terminaba de igualar el tamaño real de los iconos de categoría
   (60x60px). Se sustituyen por un SVG propio con el mismo tamaño fijo
   que .gestdoc-cat-card-icono img, así el tamaño queda idéntico en
   cualquier navegador. */
.gestdoc-area-cliente .gestdoc-cat-card-icono-svg svg {
    width: 60px;
    height: 60px;
}

.gestdoc-area-cliente .gestdoc-cat-card-nombre {
    font-size: 18px;
    font-weight: 600;
    color: #2271b1;
    margin-bottom: 8px;
}

.gestdoc-area-cliente .gestdoc-cat-card-descripcion {
    font-size: 13px;
    color: #666;
    margin-bottom: 12px;
}

.gestdoc-area-cliente .gestdoc-cat-card-docs {
    font-size: 12px;
    color: #999;
    background: #f8f9fa;
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
}

/* MODO PESTAÑAS */
.gestdoc-area-cliente .gestdoc-cat-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    padding: 15px 25px 0 25px;
    margin-top: 0;
    border-bottom: 1px solid #e2e4e7;
    background: #ffffff;
}

.gestdoc-area-cliente .gestdoc-cat-tab {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: #50575e;
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
    transition: all 0.2s ease;
}

.gestdoc-area-cliente .gestdoc-cat-tab:hover {
    background: #ffffff;
    color: #2271b1;
}

.gestdoc-area-cliente .gestdoc-cat-tab-activo {
    background: #ffffff;
    color: #2271b1;
    border-bottom-color: #ffffff;
    margin-bottom: -1px;
    font-weight: 600;
}

.gestdoc-area-cliente .gestdoc-cat-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 8px;
}

/* Icono emoji de las pestañas "Comunicaciones" y "Todos los archivos"
   (modo Pestañas): sin esto, el emoji hereda el font-size del texto de
   la pestaña (14px) y se ve mucho más pequeño que el icono de imagen de
   20px que usan las categorías con icono propio. Se iguala el tamaño
   visual al de .gestdoc-cat-icon. */
.gestdoc-area-cliente .gestdoc-cat-tab-icon {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    vertical-align: middle;
    margin-right: 4px;
}

/* Contenido común */
.gestdoc-area-cliente .gestdoc-contenido {
    padding: 25px;
    background: #f8f9fa;
    min-height: 400px;
}

/* Tabla de documentos (común para ambos modos) */
.gestdoc-area-cliente .gestdoc-docs-table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}

.gestdoc-docs-table th,
.gestdoc-area-cliente .gestdoc-docs-table td {
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #e2e4e7;
}

.gestdoc-area-cliente .gestdoc-docs-table th {
    background: #f8f9fa;
    font-weight: 600;
    color: #1d2327;
}

.gestdoc-area-cliente .gestdoc-docs-table tr:hover {
    background: #eef0f2;  /* un poco más oscuro que antes */
}
.gestdoc-area-cliente .gestdoc-docs-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.gestdoc-area-cliente .gestdoc-btn-descargar {
    display: inline-block;
    background: #2271b1;
    color: white;
    padding: 6px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s;
}

.gestdoc-area-cliente .gestdoc-btn-descargar:hover {
    background: #135e96;
    color: white;
}

/* Mensajes */
.gestdoc-area-cliente .gestdoc-sin-documentos {
    text-align: center;
    padding: 60px 20px;
    background: #ffffff;
    border-radius: 8px;
    border: 1px solid #e2e4e7;
}

.gestdoc-area-cliente .gestdoc-sin-documentos h3 {
    color: #2271b1;
    margin-bottom: 15px;
    font-size: 24px;
}

.gestdoc-area-cliente .gestdoc-suplantacion-bar {
    background: #fff3cd !important;
    border-left: 4px solid #ffc107;
    padding: 12px 20px !important;
    margin: 0 0 10px 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 10px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}

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

    /* --- Cabecera general --- */
    .gestdoc-area-cliente .gestdoc-header {
        flex-direction: column;
        text-align: center;
        padding: 15px;
    }

    .gestdoc-area-cliente .gestdoc-header h2 {
        font-size: 20px;
    }

    /* --- Fila botones: header-left (contador + modo vista) + avatar en la misma fila --- */
    .gestdoc-area-cliente .gestdoc-header-actions {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 8px !important;
        justify-content: center !important;
    }

    .gestdoc-area-cliente .gestdoc-header-left {
        align-items: center;
        width: 100%;
    }

    .gestdoc-area-cliente .gestdoc-avatar-menu {
        /* Fuera del flujo: pegado arriba a la derecha, en la misma línea que el
           título "Área Privada del Cliente" (la cabecera es position:relative). */
        position: absolute;
        top: 24px;
        right: 20px;
        margin: 0;
        z-index: 3;
    }

    /* Contador de documentos centrado, igual que el selector de modo de vista */
    .gestdoc-area-cliente .gestdoc-doc-count-badge {
        align-self: center;
    }

    /* --- Modo vista centrado --- */
    .gestdoc-area-cliente .gestdoc-modo-vista {
        align-self: center;
        margin: 0 auto;
    }

    /* --- Grid de categorías --- */
    .gestdoc-area-cliente .gestdoc-cat-grid {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 15px;
    }

    /* --- Pestañas en móvil --- */
    .gestdoc-area-cliente .gestdoc-cat-nav {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px 4px !important;
        padding: 15px !important;
        border-bottom: 1px solid #e2e4e7 !important;
    }

    .gestdoc-area-cliente .gestdoc-cat-tab {
        flex: 1 1 auto !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 10px 12px !important;
        font-size: 13px !important;
        border-radius: 4px !important;
        border: 1px solid #c3c4c7 !important;
        margin: 0 !important;
    }

    .gestdoc-area-cliente .gestdoc-cat-tab-activo {
        background: #ffffff !important;
        color: #2271b1 !important;
        border-color: #2271b1 !important;
    }

    /* --- Contenido --- */
    .gestdoc-area-cliente .gestdoc-contenido {
        padding: 15px;
    }

    /* --- Tabla: convertir a tarjetas, ocultar cabecera --- */
    .gestdoc-docs-table,
    .gestdoc-docs-table thead,
    .gestdoc-docs-table tbody,
    .gestdoc-docs-table th,
    .gestdoc-docs-table td,
    .gestdoc-area-cliente .gestdoc-docs-table tr {
        display: block;
    }

    .gestdoc-area-cliente .gestdoc-docs-table thead {
        display: none !important;
    }

    .gestdoc-area-cliente .gestdoc-docs-table tr {
        border: 1px solid #e2e4e7;
        border-radius: 8px;
        margin-bottom: 15px;
        background: #ffffff;
        padding: 0px;
    }

    /* Ocultar columna Fecha en móvil */
    .gestdoc-area-cliente .gestdoc-docs-table td[data-label="📅 Fecha"] {
        display: none !important;
    }

    .gestdoc-area-cliente .gestdoc-docs-table td {
        display: flex !important;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #f0f0f0;
        text-align: right;
    }

    .gestdoc-area-cliente .gestdoc-docs-table td:last-child {
        border-bottom: none;
    }

    .gestdoc-area-cliente .gestdoc-docs-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #2271b1;
        text-align: left;
        flex: 1;
    }

    /* --- Botones de acción: cuadrados 38x38 --- */
    .gestdoc-area-cliente .gestdoc-btn-icono {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        font-size: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .gestdoc-area-cliente .gestdoc-btn-icono::after,
    .gestdoc-area-cliente .gestdoc-btn-icono::before {
        display: none !important;
    }

    /* --- Barra de suplantación --- */
    .gestdoc-area-cliente .gestdoc-suplantacion-bar {
        margin: 0 15px 15px 15px;
        flex-direction: column;
        text-align: center;
    }
}
.gestdoc-area-cliente .gestdoc-scroll-documentos {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: auto;
    position: relative;
    /* z-index explícito (aunque sea 0): crea su propio contexto de
       apilamiento para que la cabecera "pegajosa" (z-index:20, justo
       abajo) quede confinada dentro de este contenedor y no "se escape"
       por encima de otros bloques con posición, como el desplegable del
       menú de avatar de la cabecera (.gestdoc-header, z-index:1). Antes,
       sin esto, la fila "Acción" de la tabla tapaba la opción
       "Cerrar sesión" del menú. */
    z-index: 0;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.gestdoc-area-cliente .gestdoc-docs-table thead th {
    position: sticky;
    top: 0;
    background: #fff !important;
    z-index: 20;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

@media (max-width: 480px) {
    .gestdoc-area-cliente .gestdoc-header h2 {
        font-size: 18px;
    }

.gestdoc-area-cliente .gestdoc-docs-table td {
        padding: 8px;
        font-size: 12px;
        flex-direction: row;
        align-items: flex-start;
    }

.gestdoc-area-cliente .gestdoc-docs-table td::before {
        margin-bottom: 5px;
    }
}
/* Tarjeta seleccionada en modo tarjetas */
.gestdoc-cat-card.activo,
.gestdoc-cat-card[data-selected="true"],
.gestdoc-area-cliente .gestdoc-cat-card-selected {
    background: #f0f6ff !important;
    border: 2px solid #2271b1 !important;
    box-shadow: 0 2px 8px rgba(34, 113, 177, 0.15) !important;
    position: relative;
}

/* Opcional: un pequeño indicador visual */
.gestdoc-area-cliente .gestdoc-cat-card.activo::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 12px;
    background: #2271b1;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
}

/* La tarjeta activa cambia el color del título */
.gestdoc-area-cliente .gestdoc-cat-card.activo .gestdoc-cat-card-nombre {
    color: #135e96 !important;
}
/* Forzar padding correcto en tablas */
.gestdoc-area-cliente .gestdoc-docs-table th,
.gestdoc-area-cliente .gestdoc-docs-table td {
    padding: 3px 10px !important;
}

/* La cabecera, en cambio, se deja más alta (mismo criterio que la pestaña
   "Documentos" del panel de administración): con el padding compacto de
   arriba quedaba demasiado baja, pegada a la primera fila y tapando el
   tooltip de sus acciones. Afecta tanto al área privada del cliente como
   a la vista "modo cliente" (suplantación desde el panel), que comparten
   esta misma plantilla. */
.gestdoc-area-cliente .gestdoc-docs-table th {
    padding: 12px 15px !important;
}
/* ============================================= */
/* MODAL PARA VER PDF ONLINE - ÁREA CLIENTE      */
/* ============================================= */

.gestdoc-area-cliente .gestdoc-modal-pdf {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.gestdoc-area-cliente .gestdoc-modal-pdf-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    height: 90%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.gestdoc-area-cliente .gestdoc-modal-pdf-header {
    padding: 15px 20px;
    background: #2271b1;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.gestdoc-area-cliente .gestdoc-modal-pdf-header h3 {
    margin: 0;
    color: white;
    font-size: 18px;
}

.gestdoc-area-cliente .gestdoc-modal-pdf-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
}

.gestdoc-area-cliente .gestdoc-modal-pdf-close:hover {
    color: #ffc107;
}

.gestdoc-area-cliente .gestdoc-modal-pdf-body {
    flex: 1;
    padding: 0;
    overflow: hidden;
}

.gestdoc-modal-pdf-body iframe,
.gestdoc-area-cliente .gestdoc-modal-pdf-body embed {
    width: 100%;
    height: 100%;
    border: none;
}

/* Imágenes en el visor: se ajustan al ancho y al alto disponibles, sin
   recortarse ni necesitar scroll, aunque su resolución sea mayor. */
.gestdoc-modal-pdf-body {
    min-height: 0;
}

.gestdoc-modal-pdf-body #gestdoc-img-visor {
    display: none;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f0f0f1;
}

.gestdoc-area-cliente .gestdoc-modal-pdf-footer {
    padding: 12px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e2e4e7;
    text-align: center;
    font-size: 13px;
    color: #666;
    flex-shrink: 0;
}

/* ============================================= */
/* MODAL DE COMUNICACIONES (pendiente + histórico) */
/* ============================================= */

.gestdoc-area-cliente .gestdoc-modal-comunicacion {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.gestdoc-area-cliente .gestdoc-modal-comunicacion-content {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.gestdoc-area-cliente .gestdoc-modal-comunicacion-header {
    padding: 15px 20px;
    background: #2271b1;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-shrink: 0;
}

.gestdoc-area-cliente .gestdoc-modal-comunicacion-header h3 {
    margin: 0;
    color: white;
    font-size: 18px;
}

.gestdoc-area-cliente .gestdoc-modal-comunicacion-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0 10px;
    line-height: 1;
}

.gestdoc-area-cliente .gestdoc-modal-comunicacion-close:hover {
    color: #ffc107;
}

.gestdoc-area-cliente .gestdoc-modal-comunicacion-body {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.6;
}

.gestdoc-area-cliente .gestdoc-modal-comunicacion-caducidad {
    padding: 0 20px 10px;
    font-size: 12px;
    color: #888;
    flex-shrink: 0;
}

.gestdoc-area-cliente .gestdoc-modal-comunicacion-actions {
    padding: 15px 20px;
    background: #f8f9fa;
    border-top: 1px solid #e2e4e7;
    text-align: right;
    flex-shrink: 0;
}

.gestdoc-area-cliente .gestdoc-btn-enterado {
    background: #2271b1;
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s;
}

.gestdoc-area-cliente .gestdoc-btn-enterado:hover {
    background: #135e96;
}

@media (max-width: 768px) {
    .gestdoc-area-cliente .gestdoc-modal-pdf-content {
        width: 95%;
        height: 95%;
    }
.gestdoc-area-cliente .gestdoc-modal-pdf-header h3 {
        font-size: 14px;
    }
.gestdoc-area-cliente .gestdoc-btn-ver-pdf {
        margin-top: 8px;
        margin-left: 0;
    }
}
/* Botón Ver PDF en área cliente - Mismo estilo para ambos modos */
.gestdoc-area-cliente .gestdoc-btn-ver-pdf {
    all: unset;
}

/* Ajuste para móvil */
@media (max-width: 768px) {
    .gestdoc-area-cliente .gestdoc-btn-ver-pdf {
        margin-top: 8px;
        margin-left: 0;
        width: 100%;
        text-align: center;
    }
}
/* ============================================ */
/* MODAL CAMBIAR CONTRASEÑA                     */
/* ============================================ */

.gestdoc-area-cliente .gestdoc-modal-pass {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 100000;
    align-items: center;
    justify-content: center;
}

.gestdoc-area-cliente .gestdoc-modal-pass-content {
    background: #fff;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.gestdoc-area-cliente .gestdoc-modal-pass-header {
    padding: 15px 20px;
    background: #2271b1;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px 12px 0 0;
}

.gestdoc-area-cliente .gestdoc-modal-pass-header h3 {
    margin: 0;
    color: white;
    font-size: 18px;
}

.gestdoc-area-cliente .gestdoc-modal-pass-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 0 10px;
}

.gestdoc-area-cliente .gestdoc-modal-pass-body {
    padding: 20px;
}

.gestdoc-area-cliente .gestdoc-modal-pass-body .gestdoc-form-group {
    margin-bottom: 15px;
}

.gestdoc-area-cliente .gestdoc-modal-pass-body .gestdoc-form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 5px;
    font-size: 13px;
}

.gestdoc-area-cliente .gestdoc-pass-input {
    width: 100%;
    padding: 10px;
    border: 1px solid #c3c4c7;
    border-radius: 5px;
    font-size: 14px;
}

.gestdoc-area-cliente .gestdoc-modal-pass-footer {
    padding: 15px 20px;
    border-top: 1px solid #e2e4e7;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.gestdoc-area-cliente .gestdoc-pass-btn-cancel {
    background: #6c757d;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.gestdoc-area-cliente .gestdoc-pass-btn-save {
    background: #28a745;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.gestdoc-area-cliente .gestdoc-pass-btn-save:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gestdoc-area-cliente .gestdoc-pass-mensaje-success {
    background: #d4edda;
    color: #155724;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    border-left: 4px solid #28a745;
}

.gestdoc-area-cliente .gestdoc-pass-mensaje-error {
    background: #f8d7da;
    color: #721c24;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 15px;
    border-left: 4px solid #dc3545;
}

@media (max-width: 768px) {
    .gestdoc-area-cliente .gestdoc-modal-pass-content {
        width: 95%;
    }
.gestdoc-area-cliente .gestdoc-modal-pass-footer {
        flex-direction: column;
    }
    .gestdoc-pass-btn-cancel,
.gestdoc-area-cliente .gestdoc-pass-btn-save {
        width: 100%;
        text-align: center;
    }
}
.gestdoc-area-cliente .gestdoc-cambiar-pass {
    margin: 0 25px 20px 25px;
    padding: 15px 20px;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #e2e4e7;
}

.gestdoc-area-cliente .gestdoc-cambiar-pass .gestdoc-btn-cambiar {
    background: #2271b1;
    color: white;
    border: none;
    padding: 8px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
}

.gestdoc-area-cliente .gestdoc-cambiar-pass .gestdoc-btn-cambiar:hover {
    background: #135e96;
}
/* .gestdoc-pass-container y .gestdoc-btn-cambiar-pass (botón suelto) quedaron
   huérfanos al sustituir la fecha y los botones sueltos por el menú de avatar
   (ver .gestdoc-avatar-* más arriba). Eliminados por limpieza. */
/* ============================================= */
/* AVISO MAGIC LINK - CUENTA ATRÁS              */
/* ============================================= */

.gestdoc-area-cliente .gestdoc-magic-aviso {
    display: flex;
    align-items: center;
    gap: 15px;
    background: #fff3cd;
    border-left: 4px solid #ffc107;
    border-radius: 8px;
    padding: 15px 20px;
    margin: 0 25px 20px 25px;
    flex-wrap: wrap;
}

.gestdoc-area-cliente .gestdoc-magic-aviso-icono {
    font-size: 28px;
    flex-shrink: 0;
}

.gestdoc-area-cliente .gestdoc-magic-aviso-texto {
    flex: 1;
    font-size: 14px;
    color: #856404;
    line-height: 1.5;
}

.gestdoc-area-cliente .gestdoc-magic-aviso-texto strong {
    display: block;
    margin-bottom: 4px;
    font-size: 15px;
}

.gestdoc-area-cliente #gestdoc-magic-countdown {
    font-weight: 700;
    font-size: 16px;
    color: #856404;
    transition: color 0.3s;
}

.gestdoc-area-cliente .gestdoc-magic-aviso-btn {
    background: #2271b1;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    transition: background 0.2s;
}

.gestdoc-area-cliente .gestdoc-magic-aviso-btn:hover {
    background: #135e96;
}

@media (max-width: 768px) {
    .gestdoc-area-cliente .gestdoc-magic-aviso {
        margin: 0 15px 15px 15px;
        flex-direction: column;
        text-align: center;
    }

.gestdoc-area-cliente .gestdoc-magic-aviso-btn {
        width: 100%;
    }
}
/* ============================================= */
/* BOTONES ICONO CON TOOLTIP                     */
/* ============================================= */

.gestdoc-area-cliente .gestdoc-acciones-grupo {
    display: flow;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.gestdoc-area-cliente .gestdoc-btn-icono {
    position: relative;
    /* El :hover de este botón añade "transform: scale(...)", y eso por sí
       solo crea un nuevo contexto de apilamiento. Sin un z-index explícito
       aquí, ese contexto se trataba como si valiera 0 frente al z-index:20
       de la cabecera "pegajosa" de la tabla, y el tooltip (que internamente
       pedía 100) perdía la comparación y quedaba tapado detrás de la
       cabecera justo al pasar el ratón, que es cuando debía aparecer. Con
       z-index fijado aquí, el botón ya gana esa comparación siempre. */
    z-index: 21;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 6px;
    background: transparent;
    color: #666 !important;
    text-decoration: none !important;
    font-size: 0;
    line-height: 1;
    padding: 0;
    border: 1px solid #e0e0e0;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    flex-shrink: 0;
}

.gestdoc-area-cliente .gestdoc-btn-icono svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.gestdoc-area-cliente .gestdoc-btn-icono:hover {
    background: #2271b1;
    border-color: #2271b1;
    color: white !important;
    transform: scale(1.05);
}

/* Tooltip */
.gestdoc-area-cliente .gestdoc-btn-icono::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1d2327;
    color: white;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100;
}

/* Flecha del tooltip */
.gestdoc-area-cliente .gestdoc-btn-icono::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1d2327;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    z-index: 100;
}

.gestdoc-btn-icono:hover::after,
.gestdoc-area-cliente .gestdoc-btn-icono:hover::before {
    opacity: 1;
}

/* Móvil: mantener botones como iconos cuadrados, ocultar tooltip */
@media (max-width: 768px) {
    .gestdoc-area-cliente .gestdoc-btn-icono {
        width: 38px !important;
        height: 38px !important;
        padding: 0 !important;
        font-size: 0 !important;
        border-radius: 6px;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .gestdoc-area-cliente .gestdoc-btn-icono::after,
    .gestdoc-area-cliente .gestdoc-btn-icono::before {
        display: none !important;
    }
}
/* ============================================= */
/* OCULTAR HEADER/FOOTER GENERATEPRESS EN ÁREA CLIENTE */
/* ============================================= */

.gestdoc-area-page #masthead,
.gestdoc-area-page .site-footer,
.gestdoc-area-page .site-info,
.gestdoc-area-page .generate-back-to-top {
    display: none !important;
}

.gestdoc-area-page #page,
.gestdoc-area-page #content,
.gestdoc-area-page #primary,
.gestdoc-area-page #main,
.gestdoc-area-page .content-area,
.gestdoc-area-page .inside-article,
.gestdoc-area-page .entry-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ============================================= */
/* LOGO CABECERA Y FOOTER ÁREA CLIENTE           */
/* ============================================= */

.gestdoc-area-cliente .gestdoc-area-header-logo {
    width: 100% !important;
    background: #ffffff !important;
    padding: 15px 30px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-bottom: 1px solid #f0f0f0;
}

.gestdoc-area-cliente .gestdoc-cabecera-logo {
    max-height: 75px !important;
    height: auto !important;
    width: auto !important;
    max-width: 220px !important;
    object-fit: contain !important;
    display: block !important;
}

/* Ayuda: "¿Cómo funciona tu portal?" — caja explicativa entre el listado
   de documentos y el pie del portal. Mismo lenguaje visual azul de marca
   que la pestaña Comunicaciones (icono redondo + texto). */
.gestdoc-area-cliente .gestdoc-ayuda-portal {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #eaf3fc;
    border: 1px solid #cfe3f5;
    border-radius: 10px;
    padding: 18px 22px;
    margin: 24px 32px 0 32px;
}

.gestdoc-area-cliente .gestdoc-ayuda-portal-icono {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1d5f96;
}

.gestdoc-area-cliente .gestdoc-ayuda-portal-icono svg {
    width: 20px;
    height: 20px;
}

.gestdoc-area-cliente .gestdoc-ayuda-portal-texto {
    flex: 1;
}

.gestdoc-area-cliente .gestdoc-ayuda-portal-texto strong {
    display: block;
    font-size: 14px;
    color: #1d5f96;
    margin-bottom: 4px;
}

.gestdoc-area-cliente .gestdoc-ayuda-portal-texto p {
    margin: 0;
    font-size: 13px;
    color: #3c5a72;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .gestdoc-area-cliente .gestdoc-ayuda-portal {
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin: 18px 15px 0 15px;
    }
}

.gestdoc-area-cliente .gestdoc-area-footer {
    width: 100%;
    padding: 15px 30px;
    text-align: center;
    border-top: 1px solid #f0f0f0;
    margin-top: 20px;
    opacity: 0.5;
    transition: opacity 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.gestdoc-area-cliente .gestdoc-area-footer:hover {
    opacity: 0.8;
}

.gestdoc-area-cliente .gestdoc-footer-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    text-decoration: none;
    color: inherit;
}

.gestdoc-area-cliente .gestdoc-footer-logo {
    max-height: 28px !important;
    width: auto !important;
    max-width: 120px !important;
    object-fit: contain;
    filter: grayscale(30%);
}

.gestdoc-area-cliente .gestdoc-footer-texto {
    text-align: center;
    line-height: 1.6;
}

.gestdoc-area-cliente .gestdoc-footer-texto a {
    text-decoration: none;
}

.gestdoc-area-cliente .gestdoc-footer-texto a:hover {
    text-decoration: underline;
}

@media (max-width: 480px) {
    .gestdoc-area-cliente .gestdoc-cabecera-logo {
        max-height: 36px;
        max-width: 140px;
    }
.gestdoc-area-cliente .gestdoc-area-header-logo {
        padding: 10px 15px;
    }
}

/* ============================================= */
/* PESTAÑA / TARJETA "TODOS LOS ARCHIVOS"        */
/* ============================================= */

/* Insignia con el nombre de categoría dentro de la columna "Categoría"
   de la tabla "Todos los archivos" */
.gestdoc-area-cliente .gestdoc-todos-cat-badge {
    display: inline-block;
    background: #eef4fb;
    color: #2271b1;
    border-radius: 20px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

/* ============================================= */
/* DISEÑO "BLOQUE DE MARCA" — cabecera con banda  */
/* de color degradado, avatar más grande e        */
/* insignias de categoría con más peso visual.    */
/* ============================================= */

.gestdoc-area-cliente {
    border-radius: 18px !important;
    box-shadow: 0 6px 28px rgba(15, 40, 70, 0.12) !important;
    overflow: hidden;
}

.gestdoc-area-cliente .gestdoc-header {
    background: linear-gradient(135deg, #1d5f96 0%, #2271b1 55%, #3a8fd0 100%);
    padding: 32px 32px 24px 32px;
    border-radius: 18px 18px 0 0;
    position: relative;
    z-index: 1;
    box-shadow: 0 4px 10px rgba(15, 40, 70, 0.15);
}

.gestdoc-area-cliente .gestdoc-header h2 {
    color: #ffffff !important;
    font-size: 27px;
    letter-spacing: -0.3px;
    text-shadow: 0 1px 2px rgba(0,0,0,0.12);
}

.gestdoc-area-cliente .gestdoc-doc-count-badge {
    background: rgba(255,255,255,0.18);
    color: #ffffff !important;
}

.gestdoc-area-cliente .gestdoc-modo-vista {
    background: rgba(255,255,255,0.16);
}

.gestdoc-area-cliente .gestdoc-modo-vista .modo-label {
    color: rgba(255,255,255,0.85) !important;
}

.gestdoc-area-cliente .gestdoc-modo-vista .modo-btn {
    color: #fff !important;
}

.gestdoc-area-cliente .gestdoc-modo-vista .modo-btn.activo {
    background: #ffffff;
    color: #1d5f96 !important;
    font-weight: 600;
}

.gestdoc-area-cliente .gestdoc-avatar-btn {
    width: 46px;
    height: 46px;
    border-color: rgba(255,255,255,0.5);
    background: rgba(255,255,255,0.15);
}

.gestdoc-area-cliente .gestdoc-avatar-svg {
    color: #ffffff;
}

.gestdoc-area-cliente .gestdoc-cat-nav {
    padding: 18px 32px 0 32px;
    margin-top: 34px;
    background: #ffffff;
    gap: 6px;
}

.gestdoc-area-cliente .gestdoc-cat-tab {
    border: 1px solid #e2e4e7;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    padding: 12px 22px;
    font-weight: 600;
    color: #50575e !important;
}

.gestdoc-area-cliente .gestdoc-cat-tab-todos {
    background: #eaf3fc;
    color: #1d5f96 !important;
}

/* El resaltado de "pestaña seleccionada" (fondo blanco, borde superior
   azul y texto en negrita azul) se aplica siempre igual sea cual sea la
   pestaña activa: Comunicaciones, Todos los archivos o cualquier
   categoría. Máxima especificidad para que no lo pise ninguna otra regla
   (como el fondo propio de "Todos los archivos"). */
.gestdoc-area-cliente a.gestdoc-cat-tab.gestdoc-cat-tab-activo {
    background: #ffffff !important;
    border-color: #2271b1 #e2e4e7 #ffffff !important;
    border-top: 3px solid #2271b1 !important;
    color: #1d5f96 !important;
    font-weight: 700 !important;
}

.gestdoc-area-cliente .gestdoc-contenido {
    padding: 30px 32px;
}

.gestdoc-area-cliente .gestdoc-scroll-documentos {
    border-radius: 12px;
}

.gestdoc-area-cliente .gestdoc-docs-table th {
    background: #f4f8fc;
    color: #1d5f96;
    font-size: 12px !important;
}

.gestdoc-area-cliente .gestdoc-todos-cat-badge {
    background: #1d5f96;
    color: #fff;
}

.gestdoc-area-cliente .gestdoc-btn-icono:hover {
    background: #1d5f96;
    border-color: #1d5f96;
}

/* Tarjetas de categoría (modo Tarjetas): la cabecera de color ya aporta
   identidad, así que las tarjetas mantienen fondo blanco y acento azul
   en el título, coherente con el resto de insignias. */
.gestdoc-area-cliente .gestdoc-cat-card-todos .gestdoc-cat-card-nombre {
    color: #1d5f96;
}

/* ============================================= */
/* WIDGET DE SUBIDA DE ARCHIVOS (categoría "de     */
/* subida", solo visible para clientes con permiso */
/* de subida activo en su ficha)                   */
/* ============================================= */

.gestdoc-area-cliente .gestdoc-widget-subida {
    background: #eaf3fc;
    border: 1px solid #cfe3f5;
    border-radius: 12px;
    padding: 20px 22px;
    margin: 0 0 20px 0;
}

.gestdoc-area-cliente .gestdoc-widget-subida-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 16px;
}

.gestdoc-area-cliente .gestdoc-widget-subida-icono {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.gestdoc-area-cliente .gestdoc-widget-subida-texto {
    flex: 1;
}

.gestdoc-area-cliente .gestdoc-widget-subida-texto strong {
    display: block;
    font-size: 15px;
    color: #1d5f96;
    margin-bottom: 4px;
}

.gestdoc-area-cliente .gestdoc-widget-subida-texto p {
    margin: 0;
    font-size: 13px;
    color: #3c5a72;
    line-height: 1.5;
}

.gestdoc-area-cliente .gestdoc-widget-subida-acciones {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.gestdoc-area-cliente .gestdoc-btn-subida-dispositivo,
.gestdoc-area-cliente .gestdoc-btn-subida-camara {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #2271b1;
    color: #ffffff !important;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background 0.2s;
    flex: 1 1 auto;
    min-width: 140px;
}

.gestdoc-area-cliente .gestdoc-btn-subida-dispositivo:hover,
.gestdoc-area-cliente .gestdoc-btn-subida-camara:hover {
    background: #135e96;
}

.gestdoc-area-cliente .gestdoc-btn-subida-camara {
    background: #1d5f96;
}

.gestdoc-area-cliente .gestdoc-btn-subida-dispositivo:disabled,
.gestdoc-area-cliente .gestdoc-btn-subida-camara:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.gestdoc-area-cliente .gestdoc-widget-subida-progreso {
    margin-top: 14px;
}

.gestdoc-area-cliente .gestdoc-widget-subida-progreso-barra {
    width: 100%;
    height: 8px;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #cfe3f5;
}

.gestdoc-area-cliente #gestdoc-widget-subida-progreso-relleno {
    height: 100%;
    width: 0%;
    background: #2271b1;
    border-radius: 20px;
    transition: width 0.2s ease;
}

.gestdoc-area-cliente #gestdoc-widget-subida-progreso-texto {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    color: #3c5a72;
}

.gestdoc-area-cliente #gestdoc-widget-subida-mensaje:not(:empty) {
    margin-top: 14px;
}

/* Indicador 📤 junto al nombre de la categoría de subida, tanto en
   tarjetas como en pestañas: mismo tamaño que el resto del texto, sin
   forzar salto de línea. */
.gestdoc-area-cliente .gestdoc-cat-card-nombre,
.gestdoc-area-cliente .gestdoc-cat-tab {
    white-space: normal;
}

@media (max-width: 768px) {
    .gestdoc-area-cliente .gestdoc-widget-subida {
        margin: 0 0 15px 0;
        padding: 16px 18px;
    }

    .gestdoc-area-cliente .gestdoc-widget-subida-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .gestdoc-area-cliente .gestdoc-btn-subida-dispositivo,
    .gestdoc-area-cliente .gestdoc-btn-subida-camara {
        width: 100%;
    }
}