/**
 * 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 {
        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;
    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;
}
/* ============================================= */
/* 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;
}

.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;
    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;
}