/**
 * Skin Institucional H. Ayuntamiento de Escárcega 2024 - 2027
 * Basado en Roundcube Elastic
 */

:root {
    --esc-vino: #70152f;
    --esc-vino-dark: #4a0e1c;
    --esc-vino-hover: #581024;
    --esc-oro: #c5a567;
    --esc-oro-light: #e6d3ad;
    --esc-rosa-light: #fdf2f4;
    --esc-bg-soft: #f8fafc;
    --esc-border: #cbd5e1;
    --esc-text-main: #0d1b2a;
    --esc-text-muted: #64748b;
}

/* ====================================================================
   1. PANTALLA DE ACCESO / LOGIN (home.png)
   ==================================================================== */

body.task-login {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    background: #ffffff;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

body.task-login #layout {
    height: 100vh;
    width: 100vw;
    display: flex;
    overflow: hidden;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
}

.escarcega-login-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}

/* Panel Izquierdo: Hero Palacio Municipal */
.escarcega-hero-panel {
    flex: 1 1 50%;
    position: relative;
    background: #4a0e1c;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.escarcega-hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('../images/branding/palacio-escarcega.jpg');
    background-size: cover;
    background-position: center;
    transform: scale(1.02);
}

.escarcega-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, 
        rgba(84, 18, 36, 0.05) 0%, 
        rgba(84, 18, 36, 0.15) 35%, 
        rgba(84, 18, 36, 0.78) 75%, 
        rgba(74, 14, 28, 0.98) 100%);
}

.escarcega-hero-text {
    position: relative;
    z-index: 2;
    padding: 3.5rem 3.5rem;
    color: #ffffff;
}

.muni-tag {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.9);
    display: block;
    margin-bottom: 0.2rem;
}

.muni-name {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: #ffffff;
    margin: 0 0 0.2rem 0;
    line-height: 1.1;
}

.muni-state {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    display: block;
}

.muni-gold-line {
    width: 48px;
    height: 2.5px;
    background: var(--esc-oro);
    margin: 1.4rem 0 1.2rem 0;
}

.muni-slogan {
    font-family: 'Montserrat', sans-serif;
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
}

/* Panel Derecho: Formulario Institucional */
.escarcega-auth-panel {
    flex: 1 1 50%;
    background: #ffffff;
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
}

.auth-scroll-container {
    width: 100%;
    max-width: 530px;
    margin: 0 auto;
    padding: 36px 28px 45px 28px;
    box-sizing: border-box;
}

.auth-card {
    text-align: center;
    width: 100%;
    max-width: 474px;
    margin: 0 auto;
}

/* Logotipo Grande y Prominente exacto a home.png (200px) */
.auth-logo-box {
    margin-bottom: 20px;
    text-align: center;
}

.auth-logo-img {
    height: 200px !important;
    max-height: 205px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.auth-gold-divider {
    width: 86%;
    max-width: 410px;
    height: 1.5px;
    background: #ba8a4b;
    opacity: 0.9;
    margin: 20px auto 24px auto;
}

.auth-header {
    margin-bottom: 1.6rem;
}

.auth-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 2.3rem;
    font-weight: 700;
    color: var(--esc-text-main);
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
    line-height: 1.2;
}

.auth-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.05rem;
    font-weight: 500;
    color: #475569;
    margin: 0 0 28px 0;
}

/* Formulario: Anular top: 20vh de Elastic y eliminar traslapes */
body.task-login #login-form,
#login-form,
form#login-form,
.escarcega-login-form {
    position: static !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
}

/* Desactivación total de tablas y bloques flotantes */
#login-form table,
#login-form tbody,
#login-form tr,
#login-form td,
.escarcega-login-form table,
.escarcega-login-form tbody,
.escarcega-login-form tr,
.escarcega-login-form td {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    position: static !important;
    top: 0 !important;
    float: none !important;
}

#login-form table {
    order: 1 !important;
    margin-bottom: 0 !important;
}

#login-form td.title,
.escarcega-login-form td.title {
    display: none !important;
}

/* Ocultar ABSOLUTAMENTE el bloque .input-group-prepend flotante */
#login-form .input-group-prepend,
.escarcega-login-form .input-group-prepend,
#login-form .input-group-text,
.escarcega-login-form .input-group-text {
    display: none !important;
}

#login-form tr {
    margin-bottom: 14px !important;
    position: relative !important;
}

#login-form td.input,
#login-form .input-group {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Inputs exactos a home.png */
#rcmloginuser,
#rcmloginpwd,
.escarcega-login-form input[type="text"],
.escarcega-login-form input[type="password"] {
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 0 14px 0 44px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    position: static !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

#rcmloginpwd {
    padding-right: 44px !important;
}

#rcmloginuser:focus,
#rcmloginpwd:focus {
    border-color: var(--esc-vino) !important;
    box-shadow: 0 0 0 3px rgba(112, 21, 47, 0.12) !important;
    outline: none !important;
}

#rcmloginuser::placeholder,
#rcmloginpwd::placeholder {
    color: #64748b !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

/* Iconos vectoriales de sobre y candado idénticos a home.png */
#rcmloginuser {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z'%3E%3C/path%3E%3Cpolyline points='22,6 12,13 2,6'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 18px 18px !important;
}

#rcmloginpwd {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23334155' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'%3E%3C/path%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 18px 18px !important;
}

/* Botón interactivo de ojo */
.pwd-eye-toggle {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    padding: 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 10 !important;
}

.pwd-eye-toggle svg {
    stroke: #475569;
    transition: stroke 0.2s;
}

.pwd-eye-toggle:hover svg,
.pwd-eye-toggle.active svg {
    stroke: var(--esc-vino);
}

/* Fila de Mantener sesión iniciada: ANTES DEL BOTÓN (order: 2) */
.auth-session-row {
    order: 2 !important;
    margin: 6px 0 18px 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    position: static !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.auth-session-row .session-label,
.auth-session-row label,
.auth-session-row .custom-control-label {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    color: #334155 !important;
    font-weight: 400 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    user-select: none !important;
    position: static !important;
}

.auth-session-row .session-label span,
.auth-session-row label span,
.auth-session-row span {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    color: #334155 !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: inline !important;
    vertical-align: middle !important;
}

/* Checkbox cuadrado idéntico a home.png */
.auth-session-row input[type="checkbox"],
.auth-session-row .form-check-input,
.auth-session-row .custom-control-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    min-height: 18px !important;
    max-height: 18px !important;
    border: 1.5px solid #94a3b8 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    cursor: pointer !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease-in-out !important;
    opacity: 1 !important;
    z-index: 1 !important;
}

.auth-session-row input[type="checkbox"]:checked,
.auth-session-row .form-check-input:checked,
.auth-session-row .custom-control-input:checked {
    background-color: var(--esc-vino) !important;
    border-color: var(--esc-vino) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23ffffff'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") !important;
    background-size: 14px 14px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Neutralizar cualquier remanente de Bootstrap custom-switch */
.auth-session-row .custom-switch,
.auth-session-row .custom-control {
    padding-left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    min-height: 0 !important;
}

.auth-session-row .custom-switch .custom-control-label::before,
.auth-session-row .custom-switch .custom-control-label::after,
.auth-session-row .custom-control .custom-control-label::before,
.auth-session-row .custom-control .custom-control-label::after {
    display: none !important;
}

/* Botón INICIAR SESIÓN (order: 3) */
.formbuttons {
    order: 3 !important;
    display: block !important;
    position: static !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
}

#rcmloginsubmit {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 52px !important;
    margin: 0 !important;
    padding: 0 !important;
    background-color: var(--esc-vino) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    box-shadow: 0 4px 10px rgba(112, 21, 47, 0.22) !important;
    position: static !important;
    transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s !important;
}

#rcmloginsubmit:hover {
    background-color: var(--esc-vino-hover) !important;
    box-shadow: 0 4px 14px rgba(112, 21, 47, 0.35) !important;
}

#rcmloginsubmit:active {
    transform: scale(0.995) !important;
}

#rcmloginsubmit:before {
    display: none !important;
}

/* Enlace Olvidaste tu contraseña (order: 4) */
.auth-forgot-link {
    order: 4 !important;
    display: block !important;
    position: static !important;
    text-align: center !important;
    margin: 20px 0 0 0 !important;
}

.forgot-pass {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    color: var(--esc-vino) !important;
    text-decoration: none !important;
    transition: color 0.2s !important;
}

.forgot-pass:hover {
    color: var(--esc-vino-dark) !important;
    text-decoration: underline !important;
}

#login-footer {
    order: 5 !important;
    position: static !important;
    margin: 0 !important;
}

/* Pie Institucional: Flujo estático natural debajo de todo el formulario */
.auth-footer {
    display: block !important;
    position: static !important;
    clear: both !important;
    width: 100% !important;
    border-top: 1.5px solid var(--esc-oro) !important;
    opacity: 0.9;
    padding-top: 24px !important;
    margin-top: 28px !important;
    box-sizing: border-box !important;
}

.auth-legal-nav {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #475569 !important;
    margin-bottom: 22px !important;
    text-align: center !important;
}

.auth-legal-nav a {
    color: #475569 !important;
    text-decoration: none !important;
    margin: 0 4px !important;
    transition: color 0.2s !important;
}

.auth-legal-nav a:hover {
    color: var(--esc-vino) !important;
}

.auth-legal-nav .bullet {
    color: #94a3b8 !important;
    margin: 0 6px !important;
}

/* Escudo Histórico Grande y Prominente exacto a home.png */
.auth-escudo-box {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
}

.auth-escudo-img {
    height: 195px !important;
    max-height: 195px !important;
    width: auto !important;
    max-width: 260px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.auth-ayuntamiento-label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 2.5px !important;
    color: var(--esc-text-main) !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin-top: 10px !important;
}

.auth-ayuntamiento-label strong {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 3px !important;
    color: #334155 !important;
    display: block !important;
    margin-top: 3px !important;
}

/* ====================================================================
   NOTIFICACIONES Y ALERTAS (#messagestack) - Modal flotante abajo a la izquierda
   ==================================================================== */
#messagestack {
    position: fixed !important;
    bottom: 24px !important;
    left: 24px !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    min-width: 280px !important;
    max-width: 380px !important;
    height: auto !important;
    max-height: 80vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    z-index: 99999 !important;
    pointer-events: none !important;
    display: none !important;
}

/* Solo se muestra cuando contiene elementos y no está vacío */
#messagestack:not(:empty) {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

#messagestack:empty {
    display: none !important;
}

/* Modal pequeño / tarjeta flotante de mensaje */
#messagestack div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    text-align: left !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.08) !important;
    transition: transform 0.2s ease, opacity 0.2s ease !important;
    box-sizing: border-box !important;
    animation: escarcegaMsgSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

#messagestack div:hover {
    transform: translateY(-2px) !important;
}

#messagestack div.voice {
    display: none !important;
}

/* Variantes de color institucionales */
#messagestack div.warning,
#messagestack div.alert-warning {
    background-color: #fffbeb !important;
    color: #92400e !important;
    border: 1.5px solid #fbbf24 !important;
}

#messagestack div.error,
#messagestack div.alert-danger {
    background-color: #fef2f2 !important;
    color: #991b1b !important;
    border: 1.5px solid #f87171 !important;
}

#messagestack div.notice,
#messagestack div.alert-success,
#messagestack div.information,
#messagestack div.alert-info {
    background-color: #f0fdf4 !important;
    color: #166534 !important;
    border: 1.5px solid #4ade80 !important;
}

#messagestack div.loading {
    background-color: #ffffff !important;
    color: #1e293b !important;
    border: 1.5px solid #ba8a4b !important;
}

@keyframes escarcegaMsgSlideIn {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* ====================================================================
   2. INTERFAZ INTERIOR INSTITUCIONAL (correo.png)
   ==================================================================== */

/* Contenedor principal de la aplicación */
body.skin-escarcega:not(.task-login) {
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    width: 100vw !important;
    overflow: hidden !important;
    background-color: #f8fafc !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

body.skin-escarcega:not(.task-login) #layout {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: calc(100vh - 173px) !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    position: relative !important;
}

/* --------------------------------------------------------------------
   2.1 ENCABEZADO GLOBAL SUPERIOR (#escarcega-global-header)
   -------------------------------------------------------------------- */
#escarcega-global-header {
    flex: 0 0 83px !important;
    height: 83px !important;
    min-height: 83px !important;
    max-height: 83px !important;
    width: 100% !important;
    z-index: 100 !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Barra superior vino/borgoña institucional (#7A1F2B) - 83px sólido uniforme */
.header-top-bar {
    height: 83px !important;
    min-height: 83px !important;
    max-height: 83px !important;
    background: #7A1F2B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 24px 0 0 !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
}

/* Tarjeta Blanca con el Logotipo Oficial y Borde Dorado - Comienza en x=0, 302px ancho, 96px alto, sobresale 13px */
.header-brand-box {
    display: flex !important;
    align-items: center !important;
    height: 100% !important;
    position: relative !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-logo-card {
    background: #ffffff !important;
    height: 96px !important;
    min-height: 96px !important;
    max-height: 96px !important;
    width: 302px !important;
    min-width: 302px !important;
    max-width: 302px !important;
    padding: 4px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 0 !important;
    border-bottom: 2.5px solid #ba8a4b !important;
    border-right: 1px solid rgba(186, 138, 75, 0.4) !important;
    margin-left: 0 !important;
    margin-bottom: -13px !important;
    position: relative !important;
    z-index: 120 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
}

.header-logo-card:hover {
    background: #ffffff !important;
}

.header-logo-img {
    max-height: 82px !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}

/* Divisor vertical institucional entre logo y títulos (2.5px sólido blanco) */
.header-divider-v {
    width: 2.5px !important;
    height: 50px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    border-radius: 1px !important;
    margin: 0 24px !important;
    flex-shrink: 0 !important;
}

/* Bloque de Identidad Institucional */
.header-titles {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
    flex-shrink: 0 !important;
}

.header-title-muni {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.header-title-ayto {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.25 !important;
    margin-top: 3px !important;
}

/* Espaciadores Flexibles para equilibrar la barra superior */
.header-spacer-left {
    flex: 1.2 1 0 !important;
    min-width: 20px !important;
}

.header-spacer-right {
    flex: 0.8 1 0 !important;
    min-width: 20px !important;
}

/* Buscador Central / Derecha - 308px x 38px */
.header-search-wrap {
    width: 308px !important;
    min-width: 308px !important;
    max-width: 308px !important;
    flex: 0 0 308px !important;
    margin: 0 !important;
}

.header-search-box {
    position: relative !important;
    width: 100% !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
}

.header-search-icon {
    position: absolute !important;
    left: 14px !important;
    width: 16px !important;
    height: 16px !important;
    color: rgba(255, 255, 255, 0.65) !important;
    pointer-events: none !important;
}

#escarcega-global-search-input {
    width: 100% !important;
    height: 38px !important;
    background: rgba(0, 0, 0, 0.16) !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 4px !important;
    padding: 0 14px 0 40px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    color: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

#escarcega-global-search-input::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}

#escarcega-global-search-input:focus {
    background: rgba(0, 0, 0, 0.25) !important;
    border-color: #ba8a4b !important;
    box-shadow: 0 0 0 1px #ba8a4b !important;
}

/* Divisor sutil antes del bloque de usuario */
.header-divider-user {
    width: 1px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.3) !important;
    margin: 0 24px 0 0 !important;
    flex-shrink: 0 !important;
}

/* Perfil de Usuario Superior Derecho - Ancho aprox 285px */
.header-user-wrap {
    width: 285px !important;
    min-width: 285px !important;
    max-width: 285px !important;
    flex: 0 0 285px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

.header-user-chip {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    border-radius: 6px !important;
    user-select: none !important;
    transition: background-color 0.15s ease !important;
}

.header-user-chip:hover {
    background: rgba(255, 255, 255, 0.1) !important;
}

.header-user-avatar {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    color: #7A1F2B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    flex-shrink: 0 !important;
}

.header-user-info {
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    justify-content: center !important;
}

.header-user-name {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.25 !important;
}

.header-user-email {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.25 !important;
}

.header-chevron-icon {
    color: rgba(255, 255, 255, 0.8) !important;
    margin-left: 6px !important;
    flex-shrink: 0 !important;
}

/* Subbarra Blanca de Utilidades Eliminada */
.header-subnav-bar {
    display: none !important;
}

/* Dropdown de usuario */
.escarcega-user-dropdown {
    display: none;
    position: fixed;
    top: 76px;
    right: 28px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
    min-width: 230px;
    z-index: 1050;
    padding: 8px 0;
}

.escarcega-user-dropdown.show {
    display: block;
}

.escarcega-user-dropdown .dropdown-header {
    padding: 10px 16px;
    font-family: 'Montserrat', sans-serif;
}

.escarcega-user-dropdown .dropdown-header strong {
    display: block;
    font-size: 14px;
    color: #1e293b;
    font-weight: 600;
}

.escarcega-user-dropdown .dropdown-header .dropdown-email {
    display: block;
    font-size: 12px;
    color: #64748b;
    margin-top: 2px;
}

.escarcega-user-dropdown .dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 6px 0;
}

.escarcega-user-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #334155;
    text-decoration: none;
    transition: background 0.15s ease, color 0.15s ease;
}

.escarcega-user-dropdown .dropdown-item svg {
    flex-shrink: 0;
}

.escarcega-user-dropdown .dropdown-item:hover {
    background: #f8fafc;
    color: #0f172a;
    text-decoration: none;
}

.escarcega-user-dropdown .dropdown-item.logout {
    color: #b91c1c;
}

.escarcega-user-dropdown .dropdown-item.logout:hover {
    background: #fef2f2;
    color: #991b1b;
}

/* --------------------------------------------------------------------
   2.2 ELIMINACIÓN DE LA BARRA LATERAL IZQUIERDA EN ESCRITORIO
   (Unificación en una sola barra lateral #layout-sidebar)
   -------------------------------------------------------------------- */
#layout-menu {
    display: none !important;
}

/* --------------------------------------------------------------------
   2.3 BARRA LATERAL ÚNICA UNIFICADA (#layout-sidebar)
   -------------------------------------------------------------------- */
#layout-sidebar.unified-sidebar,
body:not(.action-compose) #layout-sidebar {
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    background: #ffffff !important;
    border-right: 1px solid #e2e8f0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 10 !important;
}

#layout-sidebar.unified-sidebar > .header,
#layout-sidebar.unified-sidebar > .footer,
body:not(.action-compose) #layout-sidebar > .header,
body:not(.action-compose) #layout-sidebar > .footer,
.footer.small {
    display: none !important;
}

/* 1. Botón Redactar (ancho completo) */
.escarcega-compose-action {
    padding: 22px 18px 10px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

.escarcega-compose-action .compose-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    height: 44px !important;
    background-color: #7A1F2B !important; /* Burdeos institucional */
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(122, 31, 43, 0.22) !important;
    transition: background-color 0.2s, box-shadow 0.2s !important;
}

.escarcega-compose-action .compose-btn:hover {
    background-color: #631822 !important;
    box-shadow: 0 4px 10px rgba(122, 31, 43, 0.32) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.escarcega-compose-action .compose-btn::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'%3E%3C/path%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'%3E%3C/path%3E%3C/svg%3E") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
}

/* Contenedor con scroll vertical para las secciones */
#sidebar-scrollable-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding: 0 4px 14px 4px !important;
}

/* Encabezados de Sección (Carpetas / Carpetas personales / Opciones) */
.sidebar-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 14px 6px 14px !important;
    user-select: none !important;
}

.sidebar-section-header .section-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #17243A !important; /* Texto oscuro azul/gris */
    letter-spacing: 0.3px !important;
}

.sidebar-section-header .section-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: transform 0.2s ease !important;
}

.sidebar-section-header .section-toggle.collapsed {
    transform: rotate(180deg) !important;
}

.sidebar-section-header .section-add-btn {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-decoration: none !important;
    line-height: 1 !important;
    padding: 0 4px !important;
    transition: color 0.15s !important;
}

.sidebar-section-header .section-add-btn:hover {
    color: #7A1F2B !important;
    text-decoration: none !important;
}

/* Listas de Carpetas IMAP */
#folderlist-content,
#personal-folderlist-content {
    padding: 0 !important;
}

#mailboxlist,
.personal-ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

#mailboxlist li a,
.personal-ul li a {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    margin: 2px 4px !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #17243A !important;
    text-decoration: none !important;
    transition: background-color 0.15s, color 0.15s !important;
}

#mailboxlist li a:hover,
.personal-ul li a:hover {
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
    text-decoration: none !important;
}

#mailboxlist li.selected > a,
.personal-ul li.selected > a {
    background-color: #fdf6ed !important;
    color: #7A1F2B !important;
    font-weight: 600 !important;
    border-left: 3px solid #C99520 !important; /* Dorado */
    border-radius: 0 6px 6px 0 !important;
}

/* --------------------------------------------------------------------
   ALIAS DE FUENTES DE ICONOS ELASTIC
   -------------------------------------------------------------------- */
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 900;
    src: url('../../elastic/fonts/fa-solid-900.woff2') format('woff2'),
         url('../../elastic/fonts/fa-solid-900.woff') format('woff');
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: 400;
    src: url('../../elastic/fonts/fa-regular-400.woff2') format('woff2'),
         url('../../elastic/fonts/fa-regular-400.woff') format('woff');
}

/* Iconos de Carpetas Lineales */
#mailboxlist li a::before,
.personal-ul li a::before {
    font-family: Icons, 'Font Awesome 5 Free', sans-serif !important;
    font-size: 14px !important;
    width: 20px !important;
    margin-right: 10px !important;
    text-align: center !important;
    color: #64748b !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
}

/* Bandeja de entrada */
#mailboxlist li.inbox > a::before {
    font-family: Icons, 'Font Awesome 5 Free', sans-serif !important;
    content: "\f01c" !important; /* Inbox tray */
    font-weight: 900 !important;
}

/* Destacados */
#mailboxlist li.special-flagged > a::before {
    font-family: Icons, 'Font Awesome 5 Free', sans-serif !important;
    content: "\f005" !important; /* Star outline */
    font-weight: 400 !important;
    color: #C99520 !important;
}

/* Borradores */
#mailboxlist li.drafts > a::before {
    font-family: Icons, 'Font Awesome 5 Free', sans-serif !important;
    content: "\f044" !important; /* Edit / Document */
    font-weight: 400 !important;
}

/* Enviados */
#mailboxlist li.sent > a::before {
    font-family: Icons, 'Font Awesome 5 Free', sans-serif !important;
    content: "\f1d8" !important; /* Paper plane */
    font-weight: 900 !important;
}

/* Spam */
#mailboxlist li.junk > a::before {
    font-family: Icons, 'Font Awesome 5 Free', sans-serif !important;
    content: "\f06d" !important; /* Flame */
    font-weight: 900 !important;
}

/* Papelera */
#mailboxlist li.trash > a::before {
    font-family: Icons, 'Font Awesome 5 Free', sans-serif !important;
    content: "\f2ed" !important; /* Trash alt */
    font-weight: 400 !important;
}

/* Carpetas personales genéricas */
.personal-ul li a::before,
#mailboxlist li:not(.inbox):not(.special-flagged):not(.drafts):not(.sent):not(.junk):not(.trash) > a::before {
    font-family: Icons, 'Font Awesome 5 Free', sans-serif !important;
    content: "\f07b" !important; /* Folder */
    font-weight: 400 !important;
}

#mailboxlist li a:hover::before,
.personal-ul li a:hover::before,
#mailboxlist li.selected > a::before,
.personal-ul li.selected > a::before {
    color: #7A1F2B !important;
}

#mailboxlist li.special-flagged > a:not(:hover)::before {
    color: #C99520 !important;
}

/* Insignias de Conteo No Leído */
#mailboxlist .badge.unreadcount,
#mailboxlist span.unreadcount,
.personal-ul .badge.unreadcount,
.personal-ul span.unreadcount {
    background: #7A1F2B !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    margin-left: auto !important;
    line-height: 1.4 !important;
}

/* 4. Divisor Horizontal Sutil */
.sidebar-horizontal-divider {
    height: 1px !important;
    background-color: #e2e8f0 !important;
    margin: 16px 14px 10px 14px !important;
}

/* 5. Sección Opciones */
.sidebar-section-header.options-header {
    padding: 6px 14px 6px 14px !important;
}

.sidebar-options-nav {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    padding-bottom: 16px !important;
}

.sidebar-option-link {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    height: 38px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    margin: 2px 4px !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #17243A !important;
    text-decoration: none !important;
    transition: background-color 0.15s, color 0.15s !important;
}

.sidebar-option-link .option-icon {
    color: #64748b !important;
    stroke: #64748b !important;
    flex-shrink: 0 !important;
    transition: color 0.15s, stroke 0.15s !important;
}

.sidebar-option-link:hover {
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
    text-decoration: none !important;
}

.sidebar-option-link:hover .option-icon {
    color: #7A1F2B !important;
    stroke: #7A1F2B !important;
}

.sidebar-option-link.active {
    background-color: #fdf6ed !important;
    color: #7A1F2B !important;
    font-weight: 600 !important;
    border-left: 3px solid #C99520 !important; /* Dorado */
    border-radius: 0 6px 6px 0 !important;
}

.sidebar-option-link.active .option-icon {
    color: #7A1F2B !important;
    stroke: #7A1F2B !important;
}

/* --------------------------------------------------------------------
   2.4 LISTA DE MENSAJES Y TABLA ANCHO COMPLETO (#layout-list)
   -------------------------------------------------------------------- */
#layout-list {
    flex: 1 1 auto !important;
    max-width: none !important;
    width: 100% !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    border-right: none !important;
}

/* Ocultar panel de previsualización vacío para dar todo el ancho a la tabla en correo */
body.task-mail #layout-content:not(.selected) {
    display: none !important;
}

/* Ocultar buscador duplicado debajo del header */
#layout-list #mailsearchform,
.searchbar.menu,
div[role="search"][aria-labelledby="aria-label-mailquicksearchbox"] {
    display: none !important;
}


/* --------------------------------------------------------------------
   BARRA DE HERRAMIENTAS SUPERIOR (#messagelist-header)
   -------------------------------------------------------------------- */
/* Suprimir botón "Seleccionar" inyectado por Elastic en el extremo derecho */
#messagelist-header a.button.selection,
#messagelist-header .button.selection,
#messagelist-header a.selection,
#messagelist-header .selection {
    display: none !important;
}

#messagelist-header.escarcega-messagelist-toolbar {
    height: 46px !important;
    min-height: 46px !important;
    background: #ffffff !important;
    border-top: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    user-select: none !important;
    flex: 0 0 46px !important;
    width: 100% !important;
}

.toolbar-left-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
}

.toolbar-master-select {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

.toolbar-master-select input.master-checkbox,
.escarcega-table-columns-header .col-sel input.master-checkbox,
#messagelist tbody tr td.selection input[type="checkbox"] {
    cursor: pointer !important;
    accent-color: #7A1F2B !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 3px !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

.toolbar-master-select .caret-select-btn {
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    text-decoration: none !important;
    padding: 2px !important;
    cursor: pointer !important;
}

.toolbar-master-select .caret-select-btn:hover {
    color: #7A1F2B !important;
}

.toolbar-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    text-decoration: none !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    transition: background 0.15s, color 0.15s !important;
    cursor: pointer !important;
    border: none !important;
    background: transparent !important;
}

.toolbar-btn:hover {
    background: #f1f5f9 !important;
    color: #7A1F2B !important;
    text-decoration: none !important;
}

.toolbar-btn.refresh::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    content: "\f021" !important;
    font-size: 13.5px !important;
    font-weight: 900 !important;
    color: #64748b !important;
    transition: transform 0.3s ease, color 0.15s !important;
}

.toolbar-btn.refresh:hover::before {
    color: #7A1F2B !important;
}

.toolbar-btn .btn-icon {
    color: #64748b !important;
    flex-shrink: 0 !important;
    transition: color 0.15s !important;
}

.toolbar-btn:hover .btn-icon {
    color: #7A1F2B !important;
}

.toolbar-right-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
}

.toolbar-v-divider {
    height: 18px !important;
    width: 1px !important;
    background: #e2e8f0 !important;
    margin: 0 2px !important;
}

.escarcega-pagenav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #64748b !important;
}

.escarcega-pagenav .pagenav-text {
    font-weight: 400 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    font-size: 13px !important;
    margin-right: 4px !important;
}

.escarcega-pagenav .pagenav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 4px !important;
    background: #ffffff !important;
    color: #475569 !important;
    text-decoration: none !important;
    transition: all 0.15s !important;
    padding: 0 !important;
}

.escarcega-pagenav .pagenav-btn .inner {
    display: none !important;
}

.escarcega-pagenav .pagenav-btn.prevpage::before {
    font-family: Icons !important;
    content: "\f104" !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.escarcega-pagenav .pagenav-btn.nextpage::before {
    font-family: Icons !important;
    content: "\f105" !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.escarcega-pagenav .pagenav-btn:hover:not(.disabled) {
    border-color: #cbd5e1 !important;
    background: #f8fafc !important;
    color: #7A1F2B !important;
}

.escarcega-pagenav .pagenav-btn:hover:not(.disabled)::before {
    color: #7A1F2B !important;
}

.escarcega-pagenav .pagenav-btn.disabled {
    opacity: 0.35 !important;
    pointer-events: none !important;
    border-color: #f1f5f9 !important;
}

/* --------------------------------------------------------------------
   TABLA DEL LISTADO DE MENSAJES (.escarcega-table-card & #messagelist)
   -------------------------------------------------------------------- */
.escarcega-table-card {
    margin: 0 !important;
    border: none !important;
    border-top: 1px solid #EDE5DB !important;
    border-radius: 0 !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    width: 100% !important;
}

/* Cabecera de Columnas Institucional (como en resultado.png) */
.escarcega-table-columns-header {
    display: flex !important;
    align-items: center !important;
    height: 38px !important;
    min-height: 38px !important;
    background: #FAF6F1 !important; /* Beige crema institucional suave */
    border-bottom: 1px solid #EDE5DB !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #17243A !important;
    user-select: none !important;
    flex: 0 0 38px !important;
}

.escarcega-table-columns-header .col-sel {
    flex: 0 0 40px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.escarcega-table-columns-header .col-star {
    flex: 0 0 40px !important;
    width: 40px !important;
}

.escarcega-table-columns-header .col-dot {
    flex: 0 0 30px !important;
    width: 30px !important;
}

.escarcega-table-columns-header .col-from {
    flex: 0 0 26% !important;
    width: 26% !important;
    min-width: 180px !important;
    max-width: 280px !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    font-weight: 600 !important;
}

.escarcega-table-columns-header .col-subject {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    font-weight: 600 !important;
}

.escarcega-table-columns-header .col-attach {
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #64748b !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    text-align: center !important;
}

.escarcega-table-columns-header .col-attach .attachment-header-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.escarcega-table-columns-header .col-attach .attachment-header-icon::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    content: "\f0c6" !important;
    font-weight: 900 !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    color: #64748b !important;
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

.escarcega-table-columns-header .col-attach svg {
    display: none !important;
}

.escarcega-table-columns-header .col-date {
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    height: 38px !important;
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-weight: 600 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

#messagelist-content {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    scrollbar-gutter: stable !important;
}

/* Formato tabular en fila única como resultado.png */
#messagelist {
    width: 100% !important;
    border-collapse: collapse !important;
}

#messagelist thead {
    display: none !important;
}

#messagelist tbody tr {
    display: flex !important;
    align-items: center !important;
    height: 44px !important;
    min-height: 44px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    transition: background-color 0.12s ease !important;
    cursor: pointer !important;
    background: #ffffff !important;
}

#messagelist tbody tr:hover {
    background-color: #f8fafc !important; /* Hover sutil */
}

#messagelist tbody tr.selected {
    background-color: #fcf6ef !important; /* Selección clara con tono cálido */
    border-left: 3px solid #ba8a4b !important;
}

/* Col 1: Checkbox individual */
#messagelist td.selection,
#messagelist:not(.withselection) td.selection,
#messagelist tbody tr td.selection {
    display: flex !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    text-align: center !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: default !important;
}

#messagelist tbody tr td.selection input[type="checkbox"] {
    cursor: pointer !important;
    accent-color: #7A1F2B !important;
    width: 15px !important;
    height: 15px !important;
    border-radius: 3px !important;
    margin: 0 !important;
    display: inline-block !important;
    vertical-align: middle !important;
}

/* Col 2: Estrella / Destacado */
#messagelist tbody tr td.flags {
    display: flex !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    text-align: center !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Suprimir por completo el glifo de bandera (\f024), clip de adjunto legado (\f0c6) y cualquier elemento residual de Elastic en td.flags */
#messagelist span.flagged::before,
#messagelist span.unflagged::before,
#messagelist tr:hover span.unflagged::before,
#messagelist tr.flaggedroot:not(:hover) span.unflagged::before,
#messagelist tbody tr td.flags span.flagged::before,
#messagelist tbody tr td.flags span.unflagged::before,
#messagelist tbody tr td.flags span.flagged,
#messagelist tbody tr td.flags span.unflagged,
#messagelist tbody tr td.flags span.attachment,
#messagelist tbody tr td.flags span.attachment::before,
#messagelist tbody tr td.flags span.attachment span::before,
#messagelist tbody tr td:not(.attachment) span.attachment,
#messagelist tbody tr td:not(.attachment) span.attachment::before,
#messagelist tbody tr td:not(.attachment) span.attachment span::before {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Renderizar ÚNICAMENTE la estrella en span.flag */
#messagelist tbody tr td.flags span.flag,
#messagelist tbody tr td.flags a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    text-decoration: none !important;
    width: 22px !important;
    height: 22px !important;
}

#messagelist tbody tr td.flags span.flag::before,
#messagelist tbody tr td.flags a::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    content: "\f005" !important;
    font-weight: 400 !important;
    color: #cbd5e1 !important;
    font-size: 15px !important;
    transition: color 0.15s ease !important;
    cursor: pointer !important;
}

#messagelist tbody tr td.flags span.flag:hover::before,
#messagelist tbody tr td.flags a:hover::before {
    color: #C99520 !important;
}

#messagelist tbody tr.flagged td.flags span.flag::before,
#messagelist tbody tr.flagged td.flags a::before,
#messagelist tbody tr td.flags span.flag.flagged::before,
#messagelist tbody tr td.flags a.flagged::before {
    font-weight: 900 !important;
    color: #C99520 !important;
}

/* Col 3: Indicador de no leído (punto vino #7A1F2B) */
#messagelist tbody tr td.status {
    display: flex !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    text-align: center !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
}

#messagelist tbody tr.unread td.status::before {
    content: "●" !important;
    color: #7A1F2B !important;
    font-size: 9px !important;
    line-height: 1 !important;
    display: inline-block !important;
}

#messagelist tbody tr:not(.unread) td.status::before {
    content: "" !important;
}

/* Col 4: Remitente */
#messagelist tbody tr td.fromto {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 26% !important;
    width: 26% !important;
    min-width: 180px !important;
    max-width: 280px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #475569 !important;
}

#messagelist tbody tr td.fromto span.fromto {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
    padding: 0 !important;
}

#messagelist tbody tr.unread td.fromto {
    font-weight: 700 !important;
    color: #17243A !important;
}

/* Col 5: Asunto */
#messagelist tbody tr td.subject {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400 !important;
    color: #475569 !important;
}

#messagelist tbody tr td.subject span.subject {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    width: 100% !important;
}

#messagelist tbody tr td.subject a {
    color: inherit !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

#messagelist tbody tr.unread td.subject,
#messagelist tbody tr.unread td.subject a {
    font-weight: 600 !important;
    color: #17243A !important;
}

#messagelist tbody tr td.subject span.msgicon {
    display: none !important;
}

/* Col 6: Adjunto */
#messagelist tbody tr td.attachment {
    display: flex !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 44px !important;
    text-align: center !important;
    color: #64748b !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

#messagelist tbody tr td.attachment span.attachment {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    text-align: center !important;
}

#messagelist tbody tr td.attachment span.attachment::before {
    content: none !important;
    display: none !important;
}

#messagelist tbody tr td.attachment span.attachment span.attachment,
#messagelist tbody tr td.attachment span.attachment > span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    line-height: 1 !important;
    margin: 0 auto !important;
    padding: 0 !important;
    float: none !important;
    text-align: center !important;
}

#messagelist tbody tr td.attachment span.attachment span.attachment::before,
#messagelist tbody tr td.attachment span.attachment > span::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    content: "\f0c6" !important;
    font-weight: 900 !important;
    font-size: 13.5px !important;
    line-height: 1 !important;
    color: #64748b !important;
    display: inline-block !important;
    margin: 0 auto !important;
    text-align: center !important;
}

/* Col 7: Fecha */
#messagelist tbody tr td.date {
    display: flex !important;
    flex: 0 0 100px !important;
    width: 100px !important;
    min-width: 100px !important;
    max-width: 100px !important;
    text-align: right !important;
    align-items: center !important;
    justify-content: flex-end !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    white-space: nowrap !important;
    padding: 0 !important;
}

#messagelist tbody tr.unread td.date {
    color: #17243A !important;
    font-weight: 500 !important;
}

/* Garantizar visibilidad permanente de la fecha en todos los estados (evitar que Elastic la oculte al hacer hover) */
#messagelist tr:hover span.date,
#messagelist tbody tr:hover td.date,
#messagelist tbody tr:hover td.date span.date,
#messagelist tbody tr td.date span.date,
.messagelist tr:hover span.date,
.messagelist tbody tr:hover td.date span.date {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

#messagelist tr:hover span.size,
#messagelist tbody tr:hover td.size,
#messagelist tbody tr:hover td.date span.size,
.messagelist tr:hover span.size,
#messagelist tbody tr td.threads,
#messagelist tbody tr td.size {
    display: none !important;
    visibility: hidden !important;
}

/* --------------------------------------------------------------------
   2.5 BANNER INSTITUCIONAL INFERIOR (#escarcega-footer-banner)
   -------------------------------------------------------------------- */
#escarcega-footer-banner,
.escarcega-institutional-banner {
    height: 90px !important;
    min-height: 90px !important;
    max-height: 90px !important;
    width: 100% !important;
    background: #ffffff !important;
    border-top: 2px solid #C99520 !important;
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 90 !important;
    flex: 0 0 90px !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Bloque Izquierdo: Escudo Oficial y Ayuntamiento */
.banner-left-shield {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    padding-left: 32px !important;
    width: auto !important;
    min-width: 260px !important;
    max-width: 440px !important;
    flex: 0 0 auto !important;
    height: 100% !important;
    position: relative !important;
    z-index: 3 !important;
    box-sizing: border-box !important;
}

.banner-shield-img {
    height: 60px !important;
    max-height: 60px !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.08)) !important;
}

.banner-ayto-meta {
    font-family: 'Montserrat', sans-serif !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    text-align: left !important;
}

.banner-ayto-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    letter-spacing: 1.2px !important;
    color: #691c32 !important;
    line-height: 1.2 !important;
}

.banner-ayto-state {
    font-size: 10.5px !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

.banner-ayto-period {
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    color: #C99520 !important;
    margin-top: 2px !important;
}

/* Bloque Central: Oculto según especificación */
.banner-center-identity {
    display: none !important;
}

/* Bloque Derecho: Fotografía del Palacio Municipal (Zona Derecha 33%, posición absoluta e independiente) */
.banner-right-palacio {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    height: 100% !important;
    width: 13% !important;
    overflow: hidden !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

.banner-palacio-img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    object-position: 50% 20% !important;
}

.banner-palacio-fade {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0.92) 12%,
        rgba(255, 255, 255, 0.55) 30%,
        rgba(255, 255, 255, 0.15) 48%,
        rgba(255, 255, 255, 0) 65%
    ) !important;
}

@media (max-width: 1200px) {
    .banner-left-shield {
        padding-left: 20px !important;
    }
    .banner-right-palacio {
        width: 13% !important;
    }
}

@media (max-width: 1024px) {
    #escarcega-footer-banner,
    .escarcega-institutional-banner {
        height: 75px !important;
        min-height: 75px !important;
        max-height: 75px !important;
        flex: 0 0 75px !important;
    }
    body.skin-escarcega:not(.task-login) #layout {
        height: calc(100vh - 158px) !important;
    }
    .banner-shield-img {
        height: 50px !important;
        max-height: 50px !important;
    }
    .banner-left-shield {
        padding-left: 14px !important;
        gap: 10px !important;
    }
    .banner-right-palacio {
        width: 38% !important;
    }
}

/* ====================================================================
   3. RESPONSIVIDAD (Móvil / Tablet)
   ==================================================================== */
@media screen and (max-width: 991px) {
    .escarcega-hero-panel {
        display: none !important;
    }
    
    .escarcega-auth-panel {
        flex: 1 1 100% !important;
    }

    .header-titles {
        display: none !important;
    }

    .header-divider-v {
        display: none !important;
    }

    .header-search-wrap {
        margin: 0 10px !important;
    }

    .footer-right-hero {
        display: none !important;
    }
}

/* ====================================================================
   4. VISTA REDACTAR CORREO (body.action-compose)
   ==================================================================== */

/* Contenedor principal de composición con margen institucional */
body.action-compose {
    background-color: #FAF6F1 !important;
}

body.action-compose #layout {
    display: flex !important;
    flex-direction: row !important;
    height: calc(100vh - 173px) !important;
    min-height: calc(100vh - 173px) !important;
    max-height: calc(100vh - 173px) !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

body.action-compose #layout-main,
body.action-compose .escarcega-compose-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    background: #FAF6F1 !important;
    padding: 16px 20px !important;
    gap: 18px !important;
    box-sizing: border-box !important;
}

/* Card Principal Blanco de Redacción */
body.action-compose #layout-content {
    order: 1 !important;
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

/* 4.1 Encabezado del Formulario de Redacción */
body.action-compose #layout-content > .header.escarcega-compose-header {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0 24px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #EDE5DB !important;
    box-sizing: border-box !important;
    flex: 0 0 72px !important;
    position: relative !important;
    z-index: 5 !important;
    overflow: visible !important;
}

body.action-compose .escarcega-compose-header-left {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    gap: 2px !important;
    flex: 0 0 auto !important;
}

body.action-compose .compose-title-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.action-compose .compose-title-icon {
    font-size: 22px !important;
    color: #7A1F2B !important;
    line-height: 1 !important;
}

body.action-compose .compose-title-text {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important; /* Vino institucional con presencia protagónica */
    margin: 0 !important;
    line-height: 1.2 !important;
    letter-spacing: -0.2px !important;
}

body.action-compose .compose-subtitle-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

/* Barra de acciones superior (Guardar, Adjuntar, Firma, Respuestas, Ortografía) integrada en el encabezado */
body.action-compose #messagetoolbar,
body.action-compose .escarcega-compose-actions,
body.action-compose .escarcega-compose-toolbar,
body.action-compose #layout-content > .header #toolbar-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    width: auto !important;
    float: none !important;
}

body.action-compose #layout-content > .header #toolbar-menu > li {
    display: inline-flex !important;
    align-items: center !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

body.action-compose .escarcega-compose-actions .spacer,
body.action-compose .escarcega-compose-toolbar .spacer {
    display: none !important;
}

body.action-compose .escarcega-compose-actions .btn-escarcega-action,
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action,
body.action-compose .btn-escarcega-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    min-width: auto !important;
    max-width: none !important;
    width: auto !important;
    padding: 0 13px !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important; /* Borde gris muy claro */
    border-radius: 4px !important; /* Radio pequeño */
    color: #334155 !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important; /* Sin sombras fuertes */
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
    box-sizing: border-box !important;
    float: none !important;
    text-align: center !important;
    vertical-align: middle !important;
}

body.action-compose .escarcega-compose-toolbar .btn-escarcega-action .inner {
    display: inline !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: inherit !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

body.action-compose .escarcega-compose-toolbar .btn-escarcega-action::before,
body.action-compose .btn-escarcega-action::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    display: inline-block !important;
    height: auto !important;
    width: auto !important;
    margin: 0 !important;
    color: #64748b !important; /* Icono gris discreto en reposo */
    vertical-align: middle !important;
    transition: color 0.15s ease !important;
}

body.action-compose .btn-escarcega-action.save::before {
    content: "\f0c7" !important; /* fa-save */
}

body.action-compose .btn-escarcega-action.attach::before {
    content: "\f0c6" !important; /* fa-paperclip */
}

body.action-compose .btn-escarcega-action.signature::before {
    content: "\f5ad" !important; /* fa-signature */
}

body.action-compose .btn-escarcega-action.responses::before {
    content: "\f086" !important; /* fa-comments */
}

body.action-compose .btn-escarcega-action.spellcheck::before {
    content: "\f891" !important; /* fa-spell-check */
}

/* Hover sutil con acento institucional vino sin convertirlo en botón primario */
body.action-compose .escarcega-compose-actions .btn-escarcega-action:hover:not(.disabled),
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action:hover:not(.disabled),
body.action-compose .btn-escarcega-action:hover:not(.disabled) {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #7A1F2B !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

body.action-compose .escarcega-compose-actions .btn-escarcega-action:hover:not(.disabled)::before,
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action:hover:not(.disabled)::before,
body.action-compose .btn-escarcega-action:hover:not(.disabled)::before {
    color: #7A1F2B !important;
}

/* Estado activo / seleccionado */
body.action-compose .escarcega-compose-actions .btn-escarcega-action:active:not(.disabled),
body.action-compose .escarcega-compose-actions .btn-escarcega-action.active:not(.disabled),
body.action-compose .escarcega-compose-actions .btn-escarcega-action.selected:not(.disabled),
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action:active:not(.disabled),
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action.active:not(.disabled),
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action.selected:not(.disabled) {
    background-color: #FAF6F1 !important;
    border-color: #C99520 !important;
    color: #7A1F2B !important;
}

/* Estado disabled respetando la lógica de Roundcube */
body.action-compose .escarcega-compose-actions .btn-escarcega-action.disabled,
body.action-compose .escarcega-compose-actions .btn-escarcega-action[disabled],
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action.disabled,
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action[disabled],
body.action-compose .btn-escarcega-action.disabled,
body.action-compose .btn-escarcega-action[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    background-color: #ffffff !important;
    border-color: #f1f5f9 !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}

body.action-compose .escarcega-compose-actions .btn-escarcega-action.disabled::before,
body.action-compose .escarcega-compose-actions .btn-escarcega-action[disabled]::before,
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action.disabled::before,
body.action-compose .escarcega-compose-toolbar .btn-escarcega-action[disabled]::before,
body.action-compose .btn-escarcega-action.disabled::before,
body.action-compose .btn-escarcega-action[disabled]::before {
    color: #94a3b8 !important;
}

/* 4.2 Formulario y Campos de Redacción (Solo 3 filas iniciales) */
body.action-compose #compose-content {
    flex: 1 1 auto !important;
    overflow: hidden !important;
    padding: 16px 24px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
}

body.action-compose #compose-content > form {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.action-compose #compose-headers {
    flex: 0 0 auto !important;
    margin-bottom: 6px !important;
}

body.action-compose .compose-headers .form-group.row {
    display: flex !important;
    align-items: center !important;
    margin-bottom: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Regla clave: campos secundarios ocultos por defecto */
body.action-compose .compose-headers .form-group.row.hidden {
    display: none !important;
}

body.action-compose .compose-header-label {
    flex: 0 0 90px !important;
    max-width: 90px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #17243A !important;
    text-align: right !important;
    padding-right: 14px !important;
    box-sizing: border-box !important;
    margin-bottom: 0 !important;
}

body.action-compose .compose-header-field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

body.action-compose .compose-header-field .input-group {
    display: flex !important;
    width: 100% !important;
}

body.action-compose .compose-header-field .form-control,
body.action-compose .compose-header-field select.form-control,
body.action-compose .compose-header-field .recipient-input {
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    color: #17243A !important;
    padding: 4px 12px !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

body.action-compose .compose-header-field .input-group > .form-control:not(:last-child),
body.action-compose .compose-header-field .input-group > .recipient-input {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

body.action-compose .compose-header-field .input-group-append .input-group-text {
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid #EDE5DB !important;
    border-left: none !important;
    background-color: #FAF6F1 !important;
    color: #64748b !important;
    padding: 0 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
}

body.action-compose .compose-header-field .input-group-append:last-child .input-group-text {
    border-top-right-radius: 6px !important;
    border-bottom-right-radius: 6px !important;
}

body.action-compose .compose-header-field .input-group-append .input-group-text:hover {
    background-color: #7A1F2B !important;
    color: #ffffff !important;
}

body.action-compose .compose-header-field .form-control:focus,
body.action-compose .compose-header-field .recipient-input.focus {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.12) !important;
    outline: none !important;
}

/* Atajos rápidos para campos secundarios (+ CC, + CCO, + Responder a) */
body.action-compose .compose-quick-toggles {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
    padding-left: 2px !important;
}

body.action-compose .quick-toggle-link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #8C2635 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    padding: 2px 7px !important;
    border-radius: 4px !important;
    background: #FAF6F1 !important;
    border: 1px solid #EDE5DB !important;
    transition: all 0.15s ease !important;
}

body.action-compose .quick-toggle-link:hover {
    background: #7A1F2B !important;
    border-color: #7A1F2B !important;
    color: #ffffff !important;
}

/* Chips de destinatarios */
body.action-compose .recipient-input li.recipient {
    background: #FAF6F1 !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 4px !important;
    color: #7A1F2B !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    padding: 2px 8px !important;
    margin: 2px 4px 2px 0 !important;
    display: inline-flex !important;
    align-items: center !important;
}

body.action-compose .recipient-input li.recipient a.button.icon.remove {
    color: #ba8a4b !important;
    margin-left: 6px !important;
    cursor: pointer !important;
}

body.action-compose .recipient-input li.recipient a.button.icon.remove:hover {
    color: #7A1F2B !important;
}

/* 4.3 Editor de Mensaje (Protagónico, expansión vertical total) */
body.action-compose #composebodycontainer {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
    position: relative !important;
    overflow: hidden !important;
}

body.action-compose #composebody.form-control {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 14px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #17243A !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
    resize: none !important;
}

body.action-compose #composebody.form-control:focus {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.12) !important;
    outline: none !important;
}

/* TinyMCE Institucional */
body.action-compose div.tox.tox-tinymce {
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.action-compose div.tox.tox-tinymce .tox-sidebar-wrap {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.action-compose div.tox.tox-tinymce .tox-edit-area {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}

body.action-compose div.tox.tox-tinymce .tox-edit-area > iframe {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
}

body.action-compose div.tox.tox-tinymce.focused {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.12) !important;
}

body.action-compose div.tox .tox-toolbar-overlord,
body.action-compose div.tox .tox-toolbar__primary,
body.action-compose div.tox .tox-toolbar {
    background-color: #FAF6F1 !important;
    border-bottom: 1px solid #EDE5DB !important;
}

body.action-compose div.tox .tox-tbtn {
    border-radius: 4px !important;
    transition: all 0.12s ease !important;
}

body.action-compose div.tox .tox-tbtn:hover {
    background-color: rgba(122, 31, 43, 0.08) !important;
    color: #7A1F2B !important;
}

body.action-compose div.tox .tox-tbtn--enabled,
body.action-compose div.tox .tox-tbtn--enabled:hover {
    background-color: rgba(122, 31, 43, 0.15) !important;
    color: #7A1F2B !important;
}

/* 4.4 Barra de Botones Inferior (Enviar / Descartar / Abrir en ventana) */
body.action-compose .escarcega-formbuttons {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 12px 0 0 0 !important;
    background: #ffffff !important;
    border-top: 1px solid #EDE5DB !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    margin-top: 10px !important;
}

body.action-compose .escarcega-send-btn {
    background-color: #7A1F2B !important; /* Burdeos/vino institucional */
    border: 1px solid #7A1F2B !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    height: 40px !important;
    padding: 0 26px !important;
    box-shadow: 0 2px 4px rgba(122, 31, 43, 0.25) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

body.action-compose .escarcega-send-btn:hover {
    background-color: #5a161f !important;
    border-color: #5a161f !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 8px rgba(122, 31, 43, 0.3) !important;
}

body.action-compose .escarcega-discard-btn {
    background-color: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    color: #64748b !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    border-radius: 6px !important;
    height: 40px !important;
    padding: 0 20px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.action-compose .escarcega-discard-btn:hover {
    background-color: #FAF6F1 !important;
    border-color: #94a3b8 !important;
    color: #17243A !important;
}

body.action-compose .escarcega-extwin-btn {
    margin-left: auto !important;
    color: #64748b !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    transition: all 0.15s ease !important;
}

body.action-compose .escarcega-extwin-btn:hover {
    color: #7A1F2B !important;
    background-color: #FAF6F1 !important;
}

/* 4.5 Panel Lateral Derecho: 2 Cards Institucionales (#compose-sidebar-right / .sidebar-right) */
body.action-compose #compose-sidebar-right,
body.action-compose #layout-sidebar.sidebar-right,
body.action-compose .sidebar-right {
    order: 2 !important;
    width: 320px !important;
    min-width: 320px !important;
    max-width: 320px !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.action-compose #compose-sidebar-right > .header,
body.action-compose #layout-sidebar.sidebar-right > .header,
body.action-compose .sidebar-right > .header {
    display: none !important;
}

body.action-compose #compose-sidebar-right > .scroller,
body.action-compose #layout-sidebar.sidebar-right > .scroller,
body.action-compose .sidebar-right > .scroller {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    height: 100% !important;
    overflow-y: auto !important;
    padding: 0 !important;
}

body.action-compose .escarcega-compose-card {
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    margin-bottom: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    box-sizing: border-box !important;
}

body.action-compose .card-header-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
    margin-bottom: 12px !important;
    border-bottom: 1px solid #EDE5DB !important;
}

body.action-compose .card-icon {
    font-size: 16px !important;
    color: #7A1F2B !important;
}

body.action-compose .card-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important; /* Títulos en vino institucional */
    margin: 0 !important;
}

/* Card 1: Área drag & drop de adjuntos */
body.action-compose .escarcega-compose-card .upload-form {
    border: 1.5px dashed #cbd5e1 !important;
    border-radius: 8px !important;
    background: #fafbfc !important;
    padding: 14px 10px !important;
    text-align: center !important;
    margin-bottom: 8px !important;
    transition: border-color 0.15s ease !important;
}

body.action-compose .escarcega-compose-card .upload-form:hover {
    border-color: #C99520 !important;
}

body.action-compose .escarcega-attach-btn {
    background: #ffffff !important;
    border: 1px solid #C99520 !important;
    color: #7A1F2B !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

body.action-compose .escarcega-attach-btn:hover {
    background: #7A1F2B !important;
    border-color: #7A1F2B !important;
    color: #ffffff !important;
}

body.action-compose .upload-limit-hint {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-top: 6px !important;
}

body.action-compose #attachment-list {
    margin-top: 8px !important;
}

/* Card 2: Opciones de envío */
body.action-compose .escarcega-option-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 8px !important;
    padding: 4px 0 !important;
}

body.action-compose .escarcega-option-row label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

body.action-compose .escarcega-option-row input[type="checkbox"] {
    accent-color: #7A1F2B !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
}

body.action-compose .escarcega-select-row {
    margin-top: 10px !important;
    margin-bottom: 8px !important;
    align-items: center !important;
}

body.action-compose .escarcega-select-row label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #17243A !important;
    margin: 0 !important;
}

body.action-compose .escarcega-select-row select.form-control,
body.action-compose .escarcega-select-row select.custom-select {
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    color: #17243A !important;
    height: 34px !important;
    padding: 4px 8px !important;
    background-color: #ffffff !important;
}

body.action-compose .escarcega-select-row select:focus {
    border-color: #7A1F2B !important;
    outline: none !important;
}

/* ====================================================================
   5. VISTA CONTACTOS (body.task-addressbook)
   ==================================================================== */

body.task-addressbook {
    background-color: #FAF6F1 !important;
}

body.task-addressbook #layout {
    display: flex !important;
    flex-direction: row !important;
    height: calc(100vh - 173px) !important;
    min-height: calc(100vh - 173px) !important;
    max-height: calc(100vh - 173px) !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

/* Contenedor principal de contactos (Clasificación + Lista + Detalle) */
body.task-addressbook #layout-main,
body.task-addressbook .escarcega-addressbook-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    overflow: hidden !important;
    background: #FAF6F1 !important;
    padding: 16px 20px !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

/* 5.1 COLUMNA SECUNDARIA: CLASIFICACIÓN DE CONTACTOS (#contacts-categories-sidebar) */
body.task-addressbook #contacts-categories-sidebar,
body.task-addressbook .contacts-categories-sidebar {
    flex: 0 0 240px !important;
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #EDE5DB !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.task-addressbook .categories-header-row {
    height: 52px !important;
    min-height: 52px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #EDE5DB !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

body.task-addressbook .categories-header-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #17243A !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

body.task-addressbook .group-options-trigger {
    color: #64748b !important;
    padding: 4px 6px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

body.task-addressbook .group-options-trigger:hover {
    color: #7A1F2B !important;
    background-color: #f8fafc !important;
}

body.task-addressbook .categories-scroller {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 8px 6px !important;
}

body.task-addressbook .categories-scroller ul.treelist {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.task-addressbook .categories-scroller ul.treelist li {
    position: relative !important;
    margin: 2px 0 !important;
    list-style: none !important;
}

/* Reubicar control de despliegue (treetoggle) al extremo derecho para no alterar eje izquierdo de iconos */
body.task-addressbook .categories-scroller ul.treelist li > div.treetoggle {
    position: absolute !important;
    right: 8px !important;
    left: auto !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 24px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    z-index: 2 !important;
    background: transparent !important;
}

body.task-addressbook .categories-scroller ul.treelist li a {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    height: 38px !important;
    min-height: 38px !important;
    line-height: 38px !important;
    padding: 0 12px !important;
    border-left: 3px solid transparent !important; /* Mantiene la misma posición X en reposo */
    border-radius: 0 6px 6px 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #17243A !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
}

body.task-addressbook .categories-scroller ul.treelist li a:hover {
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
}

/* Estado activo: fondo crema institucional, texto vino e indicador vertical dorado */
body.task-addressbook .categories-scroller ul.treelist li.selected > a {
    background-color: #fdf6ed !important;
    color: #7A1F2B !important;
    font-weight: 600 !important;
    border-left-color: #C99520 !important; /* Indicador dorado institucional sin salto horizontal */
    border-radius: 0 6px 6px 0 !important;
}

/* Icono coaxial: caja fija de 20px centrada geométricamente */
body.task-addressbook .categories-scroller ul.treelist li a::before {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    margin: 0 10px 0 0 !important;
    text-align: center !important;
    color: #64748b !important;
    font-size: 14px !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
}

body.task-addressbook .categories-scroller ul.treelist li a:hover:before,
body.task-addressbook .categories-scroller ul.treelist li.selected > a:before {
    color: #7A1F2B !important;
}

/* Sublistas de grupos con indentación */
body.task-addressbook .categories-scroller ul.treelist li ul {
    list-style: none !important;
    padding-left: 14px !important;
    margin: 0 !important;
}

/* 5.2 COLUMNA CENTRAL: LISTA DE CONTACTOS (#layout-list) */
body.task-addressbook #layout-list.escarcega-contacts-card {
    flex: 1 1 auto !important;
    min-width: 380px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #EDE5DB !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Encabezado del Card de Contactos */
body.task-addressbook .escarcega-contacts-header {
    height: 64px !important;
    min-height: 64px !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    padding: 16px 20px 14px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    border-bottom: 1px solid #EDE5DB !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
}

/* Suprimir cualquier botón de selección inyectado por scripts de Elastic en el encabezado de Contactos */
body.task-addressbook #layout-list .button.selection,
body.task-addressbook #layout-list a.selection.icon,
body.task-addressbook #layout-list a.selection.button,
body.task-addressbook .escarcega-contacts-header a.selection,
body.task-addressbook .escarcega-contacts-header .button.selection {
    display: none !important;
}

body.task-addressbook .escarcega-contacts-identity {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
}

body.task-addressbook .contacts-title-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.task-addressbook .contacts-title-icon {
    font-size: 20px !important;
    line-height: 1 !important;
}

body.task-addressbook .contacts-title-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

body.task-addressbook .contacts-subtitle-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin-left: 28px !important;
    margin-top: 1px !important;
}

/* Botones de acción del encabezado de Contactos (alineados a la izquierda bajo el título) */
body.task-addressbook .escarcega-contacts-primary-actions {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    margin-left: 28px !important;
}

body.task-addressbook .btn-escarcega-contact-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 36px !important;
    padding: 0 14px !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
}

body.task-addressbook .btn-escarcega-contact-action.primary {
    background-color: #7A1F2B !important; /* Vino institucional */
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(122, 31, 43, 0.22) !important;
}

body.task-addressbook .btn-escarcega-contact-action.primary:hover {
    background-color: #5c1720 !important;
    color: #ffffff !important;
    box-shadow: 0 3px 6px rgba(122, 31, 43, 0.3) !important;
}

body.task-addressbook .btn-escarcega-contact-action.primary:before {
    content: '+' !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    margin-right: 2px !important;
}

body.task-addressbook .btn-escarcega-contact-action.add-group {
    background-color: #ffffff !important;
    color: #17243A !important;
    border: 1px solid #EDE5DB !important;
}

body.task-addressbook .btn-escarcega-contact-action.add-group:hover {
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
    border-color: #cbd5e1 !important;
}

body.task-addressbook .btn-escarcega-contact-action.more {
    background-color: #ffffff !important;
    color: #64748b !important;
    border: 1px solid #EDE5DB !important;
    padding: 0 10px !important;
}

body.task-addressbook .btn-escarcega-contact-action.more:hover {
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
    border-color: #cbd5e1 !important;
}

/* Nivel 2 — Barra de herramientas secundarias de Contactos */
body.task-addressbook .escarcega-contacts-secondary-toolbar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 8px 16px !important;
    background-color: #ffffff !important;
    border-bottom: 1px solid #EDE5DB !important;
    box-sizing: border-box !important;
    min-height: 48px !important;
    flex-wrap: nowrap !important;
}

body.task-addressbook .secondary-select-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
}

body.task-addressbook .secondary-actions-group {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
    flex-wrap: nowrap !important;
}

body.task-addressbook .secondary-tool-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 12px !important;
    border-radius: 6px !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    color: #475569 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

body.task-addressbook .secondary-tool-btn:hover:not(.disabled) {
    background-color: #FAF6F1 !important;
    border-color: #CBD5E1 !important;
    color: #17243A !important;
}

body.task-addressbook .secondary-tool-btn.disabled,
body.task-addressbook .secondary-tool-btn[disabled] {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: default !important;
}

/* Iconos de botones secundarios */
body.task-addressbook .secondary-tool-btn.print:before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'%3E%3C/polyline%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'%3E%3C/path%3E%3Crect x='6' y='14' width='12' height='8'%3E%3C/rect%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 6 2 18 2 18 9'%3E%3C/polyline%3E%3Cpath d='M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2'%3E%3C/path%3E%3Crect x='6' y='14' width='12' height='8'%3E%3C/rect%3E%3C/svg%3E") no-repeat center / contain !important;
    vertical-align: middle !important;
}

/* Botón Eliminar: sutil, no rojo chillón */
body.task-addressbook .secondary-tool-btn.delete {
    color: #64748B !important;
    border-color: #EDE5DB !important;
}

body.task-addressbook .secondary-tool-btn.delete:before {
    content: '' !important;
    display: inline-block !important;
    width: 14px !important;
    height: 14px !important;
    background: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain !important;
    vertical-align: middle !important;
}

body.task-addressbook .secondary-tool-btn.delete:hover:not(.disabled) {
    background-color: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #B91C1C !important;
}

/* Botón Más / Opciones secundarias */
body.task-addressbook .secondary-tool-btn.more {
    padding: 0 10px !important;
    gap: 5px !important;
}

body.task-addressbook .secondary-tool-btn.select-dropdown {
    padding: 0 10px !important;
    gap: 5px !important;
}

body.task-addressbook .contacts-table-header-checkbox {
    accent-color: #7A1F2B !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    border-radius: 3px !important;
}

/* Nivel 3 — Buscador institucional de Contactos */
body.task-addressbook .escarcega-contacts-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 18px !important;
    background-color: #FAFAF9 !important;
    border-bottom: 1px solid #EDE5DB !important;
    box-sizing: border-box !important;
}

body.task-addressbook .escarcega-contacts-search-box {
    flex: 1 1 auto !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

body.task-addressbook .search-box-icon {
    position: absolute !important;
    left: 12px !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    width: 15px !important;
    height: 15px !important;
}

body.task-addressbook .search-box-input {
    width: 100% !important;
    height: 38px !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 0 32px 0 36px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    color: #17243A !important;
    outline: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    box-sizing: border-box !important;
}

body.task-addressbook .search-box-input:focus {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.1) !important;
}

body.task-addressbook .search-box-clear {
    position: absolute !important;
    right: 10px !important;
    background: transparent !important;
    border: none !important;
    color: #94a3b8 !important;
    cursor: pointer !important;
    font-size: 12px !important;
    padding: 4px !important;
    line-height: 1 !important;
}

body.task-addressbook .escarcega-contacts-filter-box {
    flex: 0 0 auto !important;
}

body.task-addressbook .escarcega-source-select {
    height: 38px !important;
    min-width: 160px !important;
    border-radius: 8px !important;
    border: 1px solid #EDE5DB !important;
    background: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    padding: 0 26px 0 12px !important;
    outline: none !important;
    cursor: pointer !important;
}

body.task-addressbook .escarcega-source-select:focus {
    border-color: #7A1F2B !important;
}

/* Nivel 4 — Cabecera de columnas de la lista de contactos */
body.task-addressbook .escarcega-contacts-table-header {
    height: 38px !important;
    min-height: 38px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-sizing: border-box !important;
    user-select: none !important;
}

body.task-addressbook .th-col.th-check {
    width: 44px !important;
    flex: 0 0 44px !important;
    display: flex !important;
    align-items: center !important;
}

body.task-addressbook .th-col.th-name {
    flex: 1 1 35% !important;
    min-width: 120px !important;
}

body.task-addressbook .th-col.th-email {
    flex: 1 1 40% !important;
    min-width: 150px !important;
}

body.task-addressbook .th-col.th-phone {
    flex: 0 0 110px !important;
}

body.task-addressbook .th-col.th-actions {
    width: 30px !important;
    flex: 0 0 30px !important;
}

/* Contenedor y Filas de la Tabla de Contactos */
body.task-addressbook .escarcega-contacts-scroller {
    position: relative !important;
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 220px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Estado vacío limpio y reubicado dentro del scroller (sin position: absolute) */
body.task-addressbook .escarcega-contacts-scroller .listing-info {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 460px !important;
    margin: 48px auto !important;
    padding: 24px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    box-sizing: border-box !important;
}

body.task-addressbook .escarcega-contacts-scroller .listing-info:before {
    content: '👥' !important;
    font-size: 32px !important;
    display: block !important;
    margin-bottom: 12px !important;
    opacity: 0.7 !important;
}

body.task-addressbook .escarcega-contacts-scroller .listing-info.hidden {
    display: none !important;
}

body.task-addressbook .escarcega-contactlist {
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

body.task-addressbook .escarcega-contactlist tr {
    height: 48px !important;
    min-height: 48px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 16px !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

body.task-addressbook .escarcega-contactlist tr:hover {
    background-color: #FAF6F1 !important; /* Crema institucional suave */
}

body.task-addressbook .escarcega-contactlist tr.selected {
    background-color: #fdf6ed !important; /* Fondo crema seleccionado */
    border-left: 3px solid #C99520 !important; /* Indicador dorado institucional */
}

body.task-addressbook .escarcega-contactlist tr td {
    border: none !important;
    padding: 0 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

body.task-addressbook .escarcega-contactlist tr td.selection {
    width: 44px !important;
    flex: 0 0 44px !important;
    display: flex !important;
    align-items: center !important;
}

body.task-addressbook .escarcega-contactlist tr td.selection input[type="checkbox"],
body.task-addressbook .contacts-master-checkbox {
    accent-color: #7A1F2B !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    border-radius: 3px !important;
}

body.task-addressbook .escarcega-contactlist tr td.name {
    flex: 1 1 auto !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #1e293b !important;
    padding-left: 8px !important;
}

body.task-addressbook .escarcega-contactlist tr.selected td.name {
    color: #7A1F2B !important; /* Texto vino al seleccionar */
}

body.task-addressbook .escarcega-contactlist tr td.name span.email {
    font-weight: 400 !important;
    color: #64748b !important;
    font-style: normal !important;
    margin-left: 10px !important;
    font-size: 13px !important;
}

body.task-addressbook .escarcega-contactlist tr td.action {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}

/* Paginación de Contactos */
body.task-addressbook .escarcega-contacts-pagination {
    height: 44px !important;
    min-height: 44px !important;
    border-top: 1px solid #EDE5DB !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding: 0 16px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

body.task-addressbook .escarcega-contacts-pagination .pagenav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.task-addressbook .escarcega-contacts-pagination .pagenav a.button {
    color: #7A1F2B !important;
}

/* 5.3 COLUMNA DERECHA: PANEL DE DETALLE DEL CONTACTO (#layout-content) */
body.task-addressbook #layout-content.escarcega-contact-details-card {
    flex: 0 0 380px !important;
    width: 380px !important;
    min-width: 340px !important;
    max-width: 440px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #EDE5DB !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.task-addressbook .escarcega-details-header {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-bottom: 1px solid #EDE5DB !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

body.task-addressbook .escarcega-details-header .header-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    margin: 0 !important;
    text-align: left !important;
}

body.task-addressbook .escarcega-details-actions {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

body.task-addressbook .btn-details-tool {
    color: #64748b !important;
    padding: 6px 8px !important;
    border-radius: 4px !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    transition: all 0.15s ease !important;
}

body.task-addressbook .btn-details-tool:hover:not(.disabled) {
    color: #7A1F2B !important;
    background-color: #f8fafc !important;
}

body.task-addressbook .escarcega-details-iframe-wrap {
    flex: 1 1 auto !important;
    height: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Estado vacío institucional del panel de detalle */
body.task-addressbook .escarcega-contact-empty-state {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px 24px !important;
    text-align: center !important;
    background: #ffffff !important;
    z-index: 5 !important;
}

body.task-addressbook .escarcega-contact-empty-state.hidden {
    display: none !important;
}

body.task-addressbook #contact-frame {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}

body.task-addressbook #contact-frame.hidden {
    display: none !important;
}

body.task-addressbook .empty-state-icon {
    font-size: 44px !important;
    margin-bottom: 14px !important;
    opacity: 0.75 !important;
}

body.task-addressbook .empty-state-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #17243A !important;
    margin-bottom: 8px !important;
}

body.task-addressbook .empty-state-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
    max-width: 260px !important;
    margin-bottom: 20px !important;
}

body.task-addressbook .empty-state-btn {
    background-color: #7A1F2B !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 4px rgba(122, 31, 43, 0.2) !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

body.task-addressbook .empty-state-btn:hover {
    background-color: #5c1720 !important;
}

/* ====================================================================
   5.4 FICHA DE DETALLE DE CONTACTO DENTRO DEL IFRAME (contact.html)
   ==================================================================== */
html.iframe body.task-addressbook {
    background-color: #ffffff !important;
    padding: 0 !important;
    margin: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
}

html.iframe body.task-addressbook {
    background-color: transparent !important;
    padding: 14px 16px !important;
    margin: 0 !important;
    height: 100% !important;
    overflow-y: auto !important;
    box-sizing: border-box !important;
}

html.iframe body.task-addressbook .escarcega-contact-view-card {
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 12px !important;
    padding: 20px 24px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

/* Encabezado horizontal institucional del Card */
html.iframe body.task-addressbook .escarcega-contact-profile-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
    width: 100% !important;
    text-align: left !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #EDE5DB !important;
    margin-bottom: 16px !important;
    box-sizing: border-box !important;
}

html.iframe body.task-addressbook .escarcega-contact-header-main {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

/* Badge de icono institucional */
html.iframe body.task-addressbook .escarcega-contact-icon-badge {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 10px !important;
    background: #FAF6F1 !important;
    border: 1px solid #EDE5DB !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    color: #7A1F2B !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

html.iframe body.task-addressbook .escarcega-contact-title-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

/* Título de contacto / grupo: Sans-serif Montserrat, vino institucional, normal case */
html.iframe body.task-addressbook .escarcega-contact-head {
    font-family: 'Montserrat', sans-serif !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    width: 100% !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

html.iframe body.task-addressbook .escarcega-contact-head legend {
    display: none !important;
}

html.iframe body.task-addressbook .escarcega-contact-head .names,
html.iframe body.task-addressbook .escarcega-contact-head .displayname,
html.iframe body.task-addressbook .escarcega-contact-head .namefield.name,
html.iframe body.task-addressbook .escarcega-contact-head .namefield.firstname,
html.iframe body.task-addressbook .escarcega-contact-head .namefield.surname {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    text-transform: none !important;
    line-height: 1.25 !important;
    letter-spacing: normal !important;
}

/* Si no hay nombre personal y el título principal es la fuente/grupo */
html.iframe body.task-addressbook .escarcega-contact-head .source .namefield.source {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    text-transform: none !important;
    line-height: 1.25 !important;
}

/* Cuando sí hay nombre personal, la fuente actúa como subtítulo */
html.iframe body.task-addressbook .escarcega-contact-head:has(.names) .source .namefield.source,
html.iframe body.task-addressbook .escarcega-contact-head:has(.displayname) .source .namefield.source {
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-top: 2px !important;
}

html.iframe body.task-addressbook .escarcega-contact-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    margin-top: 2px !important;
    line-height: 1.3 !important;
}

/* Botón Editar contacto / grupo */
html.iframe body.task-addressbook .escarcega-contact-action-bar {
    margin: 0 !important;
    flex-shrink: 0 !important;
}

html.iframe body.task-addressbook .escarcega-contact-edit-btn {
    background-color: #7A1F2B !important;
    border: none !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    height: 34px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(122, 31, 43, 0.18) !important;
    transition: background-color 0.15s ease !important;
    white-space: nowrap !important;
}

html.iframe body.task-addressbook .escarcega-contact-edit-btn:hover {
    background-color: #5c1720 !important;
    color: #ffffff !important;
}

/* Pestañas institucionales */
html.iframe body.task-addressbook .escarcega-contact-tabs {
    width: 100% !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    border-top: none !important;
}

html.iframe body.task-addressbook .nav-tabs {
    border-bottom: 1px solid #EDE5DB !important;
    margin-bottom: 16px !important;
    display: flex !important;
    gap: 12px !important;
}

html.iframe body.task-addressbook .nav-tabs .nav-link {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    border: none !important;
    padding: 6px 14px 10px !important;
    position: relative !important;
    background: transparent !important;
    text-transform: none !important;
}

html.iframe body.task-addressbook .nav-tabs .nav-link.active {
    color: #7A1F2B !important;
    font-weight: 700 !important;
    background: transparent !important;
}

html.iframe body.task-addressbook .nav-tabs .nav-link.active:after {
    content: '' !important;
    position: absolute !important;
    bottom: -1px !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background-color: #C99520 !important;
}

/* Bloques de Información estructurados en cards */
html.iframe body.task-addressbook fieldset.propform {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

html.iframe body.task-addressbook fieldset.propform legend {
    display: none !important;
}

html.iframe body.task-addressbook fieldset.propform .row,
html.iframe body.task-addressbook .form-group.row {
    margin-bottom: 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

html.iframe body.task-addressbook .contactfieldlabel.label,
html.iframe body.task-addressbook .form-group.row > label {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

html.iframe body.task-addressbook .contactfieldcontent,
html.iframe body.task-addressbook .form-control-plaintext {
    width: 100% !important;
    max-width: 100% !important;
    background: #FAF8F5 !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #17243A !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
}

html.iframe body.task-addressbook .contactfieldcontent a.email,
html.iframe body.task-addressbook .contactfieldcontent a.phone,
html.iframe body.task-addressbook .contactfieldcontent a.url {
    color: #7A1F2B !important;
    text-decoration: none !important;
    font-weight: 600 !important;
    transition: color 0.15s ease !important;
}

html.iframe body.task-addressbook .contactfieldcontent a.email:hover,
html.iframe body.task-addressbook .contactfieldcontent a.phone:hover,
html.iframe body.task-addressbook .contactfieldcontent a.url:hover {
    color: #5c1720 !important;
    text-decoration: underline !important;
}

/* ====================================================================
   5.5 FORMULARIO DE NUEVO/EDITAR CONTACTO (contactedit.html)
   ==================================================================== */

/* Contenedor tipo Card institucional */
html.iframe body.task-addressbook .escarcega-contact-edit-card {
    padding: 24px 28px !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    max-width: 680px !important;
    width: 100% !important;
    margin: 16px auto !important;
    border: 1px solid #EDE5DB !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
}

/* Encabezado del Card */
html.iframe body.task-addressbook .escarcega-contact-edit-header-bar {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #EDE5DB !important;
    padding-bottom: 16px !important;
}

html.iframe body.task-addressbook .edit-title-badge {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

html.iframe body.task-addressbook .edit-title-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    background: rgba(122, 31, 43, 0.08) !important;
    color: #7A1F2B !important;
    font-size: 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

html.iframe body.task-addressbook .edit-title-texts {
    display: flex !important;
    flex-direction: column !important;
}

html.iframe body.task-addressbook .edit-title-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    margin: 0 !important;
    line-height: 1.25 !important;
}

html.iframe body.task-addressbook .edit-subtitle-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin: 3px 0 0 0 !important;
    line-height: 1.3 !important;
}

/* Cabecera de perfil (Avatar a la izquierda + Campos personales a la derecha) */
html.iframe body.task-addressbook .contact-header.escarcega-contact-edit-profile-header {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    border: none !important;
    padding: 0 !important;
}

/* Avatar / Subida de foto */
html.iframe body.task-addressbook .escarcega-contact-photo-upload {
    flex: 0 0 100px !important;
    width: 100px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

html.iframe body.task-addressbook .escarcega-contact-photo-upload #contactpic,
html.iframe body.task-addressbook .escarcega-contact-photo-upload .image-upload {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
    min-height: 96px !important;
    max-width: 96px !important;
    max-height: 96px !important;
    border-radius: 12px !important;
    border: 1px solid #EDE5DB !important;
    background: #f8fafc !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    position: relative !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html.iframe body.task-addressbook .escarcega-contact-photo-upload #contactpic:hover,
html.iframe body.task-addressbook .escarcega-contact-photo-upload .image-upload:hover {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.1) !important;
}

html.iframe body.task-addressbook .escarcega-contact-photo-upload #contactpic img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

html.iframe body.task-addressbook .escarcega-change-photo-btn {
    margin-top: 10px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    padding: 5px 10px !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.iframe body.task-addressbook .escarcega-change-photo-btn:hover {
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
    border-color: #cbd5e1 !important;
}

/* Ocultar selector nativo de subida de archivo pero preservando funcionamiento */
html.iframe body.task-addressbook form.smart-upload,
html.iframe body.task-addressbook #upload-formFrm,
html.iframe body.task-addressbook .smart-upload,
html.iframe body.task-addressbook input.smart-upload,
html.iframe body.task-addressbook form.smart-upload .custom-file {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Columna de datos personales (contacthead) */
html.iframe body.task-addressbook .contact-head.escarcega-edit-head {
    flex: 1 1 auto !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

html.iframe body.task-addressbook .contact-head.escarcega-edit-head legend {
    display: none !important;
}

/* Selector de Libreta de direcciones */
html.iframe body.task-addressbook .contact-head .source.row {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 0 4px 0 !important;
}

html.iframe body.task-addressbook .contact-head .source select,
html.iframe body.task-addressbook select#_source {
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 6px 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

/* Grid de 2 columnas para Nombre y Apellidos */
html.iframe body.task-addressbook .contact-head .names {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    margin: 0 !important;
}

html.iframe body.task-addressbook .contact-head .names > .row {
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

/* Filas individuales en contact-head */
html.iframe body.task-addressbook .contact-head .row {
    display: flex !important;
    flex-direction: column !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Labels institucionales unificados */
html.iframe body.task-addressbook label {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 5px !important;
    text-transform: none !important;
}

/* Inputs y selects generales */
html.iframe body.task-addressbook input.form-control,
html.iframe body.task-addressbook select.form-control,
html.iframe body.task-addressbook select.custom-select {
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    height: 38px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html.iframe body.task-addressbook textarea.form-control {
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    padding: 10px 12px !important;
    background-color: #ffffff !important;
    box-sizing: border-box !important;
    min-height: 110px !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}

html.iframe body.task-addressbook input.form-control:focus,
html.iframe body.task-addressbook select.form-control:focus,
html.iframe body.task-addressbook select.custom-select:focus,
html.iframe body.task-addressbook select#_source:focus,
html.iframe body.task-addressbook textarea.form-control:focus {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 3px rgba(122, 31, 43, 0.1) !important;
    outline: none !important;
}

/* Pestañas institucionales (Propiedades / Personal / Notas) */
html.iframe body.task-addressbook .escarcega-contact-edit-card .nav-tabs {
    display: flex !important;
    border-bottom: 2px solid #EDE5DB !important;
    margin: 20px 0 18px 0 !important;
    padding: 0 !important;
    gap: 8px !important;
    list-style: none !important;
}

html.iframe body.task-addressbook .escarcega-contact-edit-card .nav-tabs .nav-item {
    margin-bottom: -2px !important;
}

html.iframe body.task-addressbook .escarcega-contact-edit-card .nav-tabs .nav-link {
    display: inline-block !important;
    padding: 8px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    background: transparent !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    cursor: pointer !important;
}

html.iframe body.task-addressbook .escarcega-contact-edit-card .nav-tabs .nav-link:hover {
    color: #7A1F2B !important;
}

html.iframe body.task-addressbook .escarcega-contact-edit-card .nav-tabs .nav-link.active {
    color: #7A1F2B !important;
    border-bottom: 2px solid #C99520 !important;
    background: transparent !important;
    font-weight: 700 !important;
}

/* Grupos de campos en las pestañas */
html.iframe body.task-addressbook .contactfieldgroup {
    border: none !important;
    padding: 0 !important;
    margin: 0 0 16px 0 !important;
}

html.iframe body.task-addressbook .contactfieldgroup > legend {
    display: block !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    margin-bottom: 8px !important;
    padding: 0 !important;
    border: none !important;
    text-transform: none !important;
}

/* Filas de entrada agrupada (Correo, Teléfono, etc.) */
html.iframe body.task-addressbook .propform.grouped .row.input-group {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    flex-wrap: nowrap !important;
}

/* Selector de subtipo (Casa / Trabajo / etc.) */
html.iframe body.task-addressbook .propform.grouped .row.input-group select.contactselectsubtype,
html.iframe body.task-addressbook .contactselectsubtype {
    flex: 0 0 115px !important;
    min-width: 100px !important;
    max-width: 125px !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    background-color: #f8fafc !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
}

/* Botón de eliminar fila con icono de papelera moderno */
html.iframe body.task-addressbook .contactfieldbutton.deletebutton {
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    background-color: #ffffff !important;
    color: #94a3b8 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

html.iframe body.task-addressbook .contactfieldbutton.deletebutton:hover {
    border-color: #fecaca !important;
    background-color: #fef2f2 !important;
    color: #dc2626 !important;
}

html.iframe body.task-addressbook .contactfieldbutton.deletebutton .inner {
    display: none !important;
}

html.iframe body.task-addressbook .contactfieldbutton.deletebutton::before {
    content: '' !important;
    width: 15px !important;
    height: 15px !important;
    background-color: currentColor !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2'%3E%3C/path%3E%3Cline x1='10' y1='11' x2='10' y2='17'%3E%3C/line%3E%3Cline x1='14' y1='11' x2='14' y2='17'%3E%3C/line%3E%3C/svg%3E") no-repeat center !important;
    display: inline-block !important;
}

/* Campo compuesto de Dirección en Grid estructurado de 2 columnas */
html.iframe body.task-addressbook .propform.grouped .row.input-group.composite {
    align-items: flex-start !important;
}

html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content {
    flex: 1 1 auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
}

html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_street {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
}

html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_locality {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
}

html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_zipcode {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
}

html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_region {
    grid-column: 1 / 2 !important;
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
}

html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_country {
    grid-column: 2 / 3 !important;
    width: 100% !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 8px 12px !important;
    background-color: #ffffff !important;
}

/* Selector "+ Añadir campo" institucional */
html.iframe body.task-addressbook p.addfield {
    margin: 14px 0 0 0 !important;
}

html.iframe body.task-addressbook select.addfieldmenu {
    width: auto !important;
    height: 36px !important;
    padding: 0 32px 0 14px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    background-color: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    transition: all 0.15s ease !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}

html.iframe body.task-addressbook select.addfieldmenu:hover {
    border-color: #cbd5e1 !important;
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
}

/* Botones inferiores de acción (Cancelar / Guardar contacto) */
html.iframe body.task-addressbook .escarcega-edit-formbuttons {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 24px !important;
    padding-top: 18px !important;
    border-top: 1px solid #EDE5DB !important;
}

html.iframe body.task-addressbook .escarcega-cancel-btn {
    background-color: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    height: 40px !important;
    padding: 0 20px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

html.iframe body.task-addressbook .escarcega-cancel-btn:hover {
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
    border-color: #cbd5e1 !important;
}

html.iframe body.task-addressbook .escarcega-save-contact-btn {
    background-color: #7A1F2B !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    height: 40px !important;
    padding: 0 24px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(122, 31, 43, 0.2) !important;
    transition: background-color 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
}

html.iframe body.task-addressbook .escarcega-save-contact-btn:hover {
    background-color: #5c1720 !important;
}

html.iframe body.task-addressbook .escarcega-save-contact-btn::before {
    content: '✓ ' !important;
    font-weight: 700 !important;
    margin-right: 4px !important;
}

/* Ajustes responsivos para pantallas estrechas */
@media (max-width: 620px) {
    html.iframe body.task-addressbook .contact-header.escarcega-contact-edit-profile-header {
        flex-direction: column !important;
        align-items: center !important;
    }

    html.iframe body.task-addressbook .contact-head .names {
        grid-template-columns: 1fr !important;
    }

    html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content {
        grid-template-columns: 1fr !important;
    }

    html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_street,
    html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_locality,
    html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_zipcode,
    html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_region,
    html.iframe body.task-addressbook .propform.grouped .row.input-group.composite .content .ff_country {
        grid-column: 1 / -1 !important;
    }
}

/* ====================================================================
   6. MODALES Y DIÁLOGOS INSTITUCIONALES (jQuery UI .ui-dialog)
   ==================================================================== */

/* Overlay limpio y oscurecido */
.ui-widget-overlay {
    background-color: rgba(15, 23, 42, 0.45) !important;
    backdrop-filter: blur(2px) !important;
    opacity: 1 !important;
    z-index: 1040 !important;
}

/* Forzar box-sizing en todo el árbol del diálogo */
.ui-dialog,
.ui-dialog *,
.ui-dialog *::before,
.ui-dialog *::after {
    box-sizing: border-box !important;
}

/* Contenedor principal del modal institucional */
.ui-dialog {
    background-color: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.05) !important;
    padding: 0 !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    overflow: hidden !important;
    z-index: 1050 !important;
}

/* Modales estándar (no iframe): proporciones compactas y fluidas */
.ui-dialog:not(:has(iframe)),
.ui-dialog.ui-dialog-buttons:not(:has(iframe)) {
    height: auto !important;
    max-width: 440px !important;
    min-width: 320px !important;
    width: 92% !important;
}

/* Ocultar definitivamente el resize handle nativo */
.ui-dialog .ui-resizable-handle,
.ui-dialog .ui-resizable-se,
.ui-dialog .ui-icon-gripsmall-diagonal-se {
    display: none !important;
}

/* Encabezado del modal con padding simétrico */
.ui-dialog .ui-dialog-titlebar {
    background-color: #ffffff !important;
    border-bottom: 1px solid #EDE5DB !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    padding: 16px 24px !important;
    height: auto !important;
    min-height: auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin: 0 !important;
}

.ui-dialog .ui-dialog-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    line-height: 1.3 !important;
    padding: 0 !important;
    margin: 0 !important;
    float: none !important;
    text-transform: none !important;
}

/* Botón de cierre (×) discreto, centrado y con área de clic cómoda */
.ui-dialog .ui-dialog-titlebar-close {
    position: static !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 6px !important;
    color: #94a3b8 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    float: none !important;
    outline: none !important;
}

.ui-dialog .ui-dialog-titlebar-close:hover {
    background-color: #f1f5f9 !important;
    color: #7A1F2B !important;
}

.ui-dialog .ui-dialog-titlebar-close::before {
    content: '×' !important;
    font-size: 20px !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    margin: 0 !important;
}

.ui-dialog .ui-dialog-titlebar-close .ui-button-icon,
.ui-dialog .ui-dialog-titlebar-close .ui-button-icon-space {
    display: none !important;
}

/* Contenido del modal (modal-body institucional con padding simétrico) */
.ui-dialog .ui-dialog-content,
.ui-dialog .ui-dialog-content.formcontent,
.ui-dialog.ui-dialog-buttons .ui-dialog-content {
    background-color: #ffffff !important;
    padding: 20px 24px 20px 24px !important;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    color: #1e293b !important;
    font-size: 13.5px !important;
    overflow-y: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.ui-dialog:not(:has(iframe)) .ui-dialog-content {
    height: auto !important;
    min-height: auto !important;
    max-height: 70vh !important;
}

/* Excepciones para modales especiales: iframes y selector de destinatarios ocupan el área completa */
.ui-dialog .ui-dialog-content.iframe,
.ui-dialog .ui-dialog-content:has(iframe),
.ui-dialog .ui-dialog-content.p-0 {
    padding: 0 !important;
    overflow: hidden !important;
}

/* Modal específico para Encabezados del Mensaje (iframe#headersframe) */
.ui-dialog:has(#headersframe) {
    display: flex !important;
    flex-direction: column !important;
    max-height: 85vh !important;
    height: 560px !important;
    max-width: 780px !important;
    width: 90% !important;
    overflow: hidden !important;
}

.ui-dialog:has(#headersframe) .ui-dialog-titlebar {
    flex: 0 0 auto !important;
}

.ui-dialog:has(#headersframe) .ui-dialog-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.ui-dialog:has(#headersframe) iframe#headersframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
    display: block !important;
}

.ui-dialog:has(#headersframe) .ui-dialog-buttonpane {
    flex: 0 0 auto !important;
    margin: 0 !important;
    border-top: 1px solid #EDE5DB !important;
}

/* Scroll interno y tipografía para el contenido del iframe de encabezados */
html.iframe body.action-headers {
    margin: 0 !important;
    padding: 18px 24px !important;
    height: 100vh !important;
    box-sizing: border-box !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    background: #ffffff !important;
    font-family: 'Consolas', 'Monaco', 'Courier New', Courier, monospace !important;
    font-size: 12.5px !important;
    line-height: 1.6 !important;
    color: #1e293b !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
}

html.iframe body.action-headers .frame-content {
    padding: 0 !important;
    margin: 0 !important;
    height: auto !important;
}

html.iframe body.action-headers font.bold {
    color: #7A1F2B !important;
    font-weight: 700 !important;
}

/* Contenedores hijos directos de formulario dentro de ui-dialog-content */
.ui-dialog .ui-dialog-content > .formcontent,
.ui-dialog .ui-dialog-content > form,
.ui-dialog .ui-dialog-content > .propform {
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Anular márgenes negativos de Bootstrap .row en el modal */
.ui-dialog .form-group,
.ui-dialog .form-group.row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Label alineado al margen y con separación vertical de 8px */
.ui-dialog .form-group.row > label,
.ui-dialog .form-group.row > label.col-sm-4,
.ui-dialog .form-group.row > label.col-form-label {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    text-align: left !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #475569 !important;
    padding: 0 !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.4 !important;
}

/* Contenedor del input alineado al 100% sin sobresalir */
.ui-dialog .form-group.row > div,
.ui-dialog .form-group.row > div.col-sm-8 {
    flex: 0 0 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Inputs con foco institucional sutil y sin azul brillante */
.ui-dialog input.form-control,
.ui-dialog .form-control {
    width: 100% !important;
    max-width: 100% !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    background-color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    color: #1e293b !important;
    padding: 8px 12px !important;
    margin: 0 !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    outline: none !important;
}

.ui-dialog input.form-control:focus,
.ui-dialog .form-control:focus {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 2.5px rgba(122, 31, 43, 0.08) !important;
    outline: none !important;
}

/* Barra inferior de botones con padding simétrico */
.ui-dialog .ui-dialog-buttonpane {
    background-color: #ffffff !important;
    border-top: 1px solid #EDE5DB !important;
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
    padding: 14px 24px !important;
    margin: 0 !important;
    height: auto !important;
    width: 100% !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Reordenamiento: [✕ Cancelar] a la izquierda, [✓ Guardar] a la derecha */
.ui-dialog .ui-dialog-buttonset button.cancel,
.ui-dialog .ui-dialog-buttonset button.btn-secondary {
    order: 1 !important;
    background-color: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    color: #64748b !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    height: 38px !important;
    padding: 0 18px !important;
    cursor: pointer !important;
    box-shadow: none !important;
    margin: 0 !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    text-decoration: none !important;
}

.ui-dialog .ui-dialog-buttonset button.cancel:hover,
.ui-dialog .ui-dialog-buttonset button.btn-secondary:hover {
    background-color: #f8fafc !important;
    color: #7A1F2B !important;
    border-color: #cbd5e1 !important;
}

.ui-dialog .ui-dialog-buttonset button.cancel::before {
    content: '✕ ' !important;
    font-size: 11px !important;
    margin-right: 2px !important;
    opacity: 0.8 !important;
}

.ui-dialog .ui-dialog-buttonset button.mainaction,
.ui-dialog .ui-dialog-buttonset button.save,
.ui-dialog .ui-dialog-buttonset button.btn-primary:not(.btn-danger) {
    order: 2 !important;
    background-color: #7A1F2B !important;
    border: 1px solid #7A1F2B !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 38px !important;
    padding: 0 20px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 4px rgba(122, 31, 43, 0.2) !important;
    margin: 0 !important;
    transition: all 0.15s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    text-decoration: none !important;
}

.ui-dialog .ui-dialog-buttonset button.mainaction:hover,
.ui-dialog .ui-dialog-buttonset button.save:hover,
.ui-dialog .ui-dialog-buttonset button.btn-primary:not(.btn-danger):hover {
    background-color: #5a161f !important;
    border-color: #5a161f !important;
    box-shadow: 0 4px 6px rgba(122, 31, 43, 0.25) !important;
}

.ui-dialog .ui-dialog-buttonset button.mainaction.save::before,
.ui-dialog .ui-dialog-buttonset button.save::before {
    content: '✓ ' !important;
    font-weight: 700 !important;
}

/* Soporte para diálogos de confirmación destructiva */
.ui-dialog .ui-dialog-buttonset button.btn-danger {
    order: 2 !important;
    background-color: #dc2626 !important;
    border: 1px solid #dc2626 !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    height: 38px !important;
    padding: 0 20px !important;
    cursor: pointer !important;
    margin: 0 !important;
    transition: all 0.15s ease !important;
}

.ui-dialog .ui-dialog-buttonset button.btn-danger:hover {
    background-color: #b91c1c !important;
    border-color: #b91c1c !important;
}

/* ====================================================================
   6. REDISEÑO INSTITUCIONAL DE CONFIGURACIÓN (body.task-settings)
   ==================================================================== */

/* Contenedor principal de Configuración */
body.task-settings {
    background: #FAF6F1 !important;
}

body.task-settings .escarcega-settings-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #FAF6F1 !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
}

/* Estado A (por defecto): Índice de Configuración activo, Detalle OCULTO (solo en index de configuración) */
body.task-settings #layout-main:not(.escarcega-subpage-main):not(.section-active) #layout-list.escarcega-settings-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #EDE5DB !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

body.task-settings #layout-main:not(.escarcega-subpage-main):not(.section-active) #layout-content.escarcega-settings-detail-card {
    display: none !important;
}

/* Estado B: Sección de Configuración activa, Índice OCULTO (solo en index de configuración) */
body.task-settings #layout-main:not(.escarcega-subpage-main).section-active #layout-list.escarcega-settings-card {
    display: none !important;
}

body.task-settings #layout-main:not(.escarcega-subpage-main).section-active #layout-content.escarcega-settings-detail-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #EDE5DB !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Encabezado institucional de Configuración */
body.task-settings .escarcega-settings-header {
    padding: 24px 28px 20px 28px !important;
    border-bottom: 1px solid #EDE5DB !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

body.task-settings .settings-title-badge {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

body.task-settings .settings-title-icon {
    font-size: 22px !important;
    line-height: 1 !important;
}

body.task-settings .settings-title-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

body.task-settings .settings-subtitle-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin-left: 32px !important;
}

/* Tabs de navegación secundarias (Preferencias, Carpetas, Identidades, Respuestas, Contraseña) */
body.task-settings .settings-nav-tabs {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 14px !important;
    margin-left: 32px !important;
    flex-wrap: wrap !important;
}

body.task-settings .settings-nav-tabs a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    background: #f8fafc !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 6px !important;
    padding: 6px 14px !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

body.task-settings .settings-nav-tabs a:hover {
    color: #7A1F2B !important;
    border-color: #ba8a4b !important;
    background: #fdf6ed !important;
}

body.task-settings .settings-nav-tabs span.selected a,
body.task-settings .settings-nav-tabs a.selected {
    color: #7A1F2B !important;
    border-color: #ba8a4b !important;
    background: #fdf6ed !important;
}

/* Scroller y Cuadrícula de Cards */
body.task-settings .escarcega-settings-scroller {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    background: #FAF6F1 !important;
}

body.task-settings .escarcega-settings-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    max-width: 1200px !important;
    padding-bottom: 20px !important;
}

/* Card Individual de Configuración */
body.task-settings .escarcega-settings-item {
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
    box-sizing: border-box !important;
    outline: none !important;
}

body.task-settings .escarcega-settings-item:hover,
body.task-settings .escarcega-settings-item:focus-visible {
    border-color: #7A1F2B !important;
    box-shadow: 0 6px 18px rgba(122, 31, 43, 0.08) !important;
    transform: translateY(-2px) !important;
}

body.task-settings .settings-item-icon {
    font-size: 26px !important;
    line-height: 1 !important;
    width: 46px !important;
    height: 46px !important;
    border-radius: 10px !important;
    background: #fdf6ed !important;
    color: #7A1F2B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
}

body.task-settings .escarcega-settings-item:hover .settings-item-icon {
    background: #7A1F2B !important;
    color: #ffffff !important;
}

body.task-settings .settings-item-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: 100% !important;
}

body.task-settings .settings-item-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #17243A !important;
    margin: 0 !important;
    transition: color 0.15s ease !important;
}

body.task-settings .escarcega-settings-item:hover .settings-item-title {
    color: #7A1F2B !important;
}

body.task-settings .settings-item-desc {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* Vista Detalle: Formulario de la Sección Seleccionada */
body.task-settings .escarcega-settings-detail-header {
    padding: 20px 28px !important;
    border-bottom: 1px solid #EDE5DB !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

body.task-settings .btn-back-settings {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 36px !important;
    padding: 0 16px !important;
    background: #f8fafc !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    color: #475569 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
}

body.task-settings .btn-back-settings:hover {
    background: #fdf6ed !important;
    color: #7A1F2B !important;
    border-color: #ba8a4b !important;
}

body.task-settings .settings-detail-identity {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body.task-settings .settings-detail-title-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.task-settings .settings-detail-icon {
    font-size: 20px !important;
    line-height: 1 !important;
}

body.task-settings .settings-detail-title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    margin: 0 !important;
}

body.task-settings .settings-detail-subtitle {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin: 0 !important;
    margin-left: 28px !important;
}

body.task-settings .escarcega-settings-iframe-wrap {
    flex: 1 1 auto !important;
    height: 100% !important;
    width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
}

body.task-settings .escarcega-settings-iframe-wrap iframe {
    width: 100% !important;
    height: 100% !important;
    border: none !important;
}

/* ====================================================================
   6.1 FORMULARIOS INTERNOS DE CONFIGURACIÓN (iframe / settingsedit / subpáginas)
   ==================================================================== */
body.action-edit-prefs,
body.action-edit-identity,
html.iframe body.task-settings,
body.task-settings.iframe,
body.action-edit-prefs,
body.action-edit-identity,
body.action-add-identity,
body.action-edit-folder,
body.action-add-folder,
body.action-edit-response,
body.action-add-response,
body.action-plugin-password {
    background: #FAF6F1 !important;
    padding: 24px 28px 60px 28px !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* Card principal único por sección / grupo de opciones */
body.task-settings .formcontent,
body.task-settings.iframe .formcontent,
body.action-edit-prefs .formcontent,
body.action-edit-identity .formcontent,
body.action-add-identity .formcontent,
body.action-edit-folder .formcontent,
body.action-edit-response .formcontent {
    max-width: 960px !important;
    width: 100% !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.task-settings fieldset,
body.task-settings.iframe fieldset,
body.action-edit-prefs fieldset,
body.action-edit-identity fieldset,
body.action-add-identity fieldset,
body.action-edit-folder fieldset,
body.action-edit-response fieldset,
body.action-plugin-password fieldset,
.formcontent fieldset {
    display: flow-root !important;
    max-width: 960px !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 12px !important;
    padding: 24px 32px 28px 32px !important;
    margin: 0 auto 24px auto !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

body.task-settings fieldset::after,
body.action-plugin-password fieldset::after,
.formcontent fieldset::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

body.task-settings legend,
body.task-settings fieldset > legend,
body.task-settings.iframe legend,
body.action-edit-prefs legend,
body.action-edit-identity legend,
body.action-add-identity legend,
body.action-edit-folder legend,
body.action-edit-response legend,
body.action-plugin-password legend,
.formcontent legend,
.formcontent fieldset > legend {
    float: left !important;
    display: table !important;
    width: auto !important;
    max-width: 100% !important;
    border: none !important;
    border-bottom: 2px solid #C99520 !important;
    background: transparent !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    padding: 0 0 4px 0 !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.4 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

body.task-settings legend + *,
body.task-settings fieldset > legend + *,
.formcontent legend + *,
.formcontent fieldset > legend + *,
table.propform,
.formcontent table.propform {
    clear: both !important;
}

/* ====================================================================
   SECCIÓN DE OPCIONES AVANZADAS (fieldset.advanced)
   Colapsable institucional: altura justa al estar contraída,
   crecimiento dinámico al expandirse, sin reservar espacio oculto.
   ==================================================================== */
fieldset.advanced,
body.task-settings fieldset.advanced,
body.task-settings.iframe fieldset.advanced,
body.action-edit-prefs fieldset.advanced,
.formcontent fieldset.advanced {
    display: flow-root !important;
    max-width: 960px !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
    margin: 0 auto 24px auto !important;
    padding: 14px 32px !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    transition: padding 0.22s ease, box-shadow 0.2s ease !important;
}

/* Encabezado interactivo con cursor pointer */
fieldset.advanced > legend,
body.task-settings fieldset.advanced > legend,
.formcontent fieldset.advanced > legend {
    cursor: pointer !important;
    user-select: none !important;
    float: left !important;
    display: table !important;
    width: auto !important;
    max-width: 100% !important;
    border: none !important;
    border-bottom: 2px solid #C99520 !important;
    background: transparent !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    padding: 0 0 4px 0 !important;
    margin: 0 !important;
    line-height: 1.4 !important;
    transition: margin-bottom 0.22s ease, opacity 0.15s ease !important;
}

fieldset.advanced > legend:hover,
body.task-settings fieldset.advanced > legend:hover {
    opacity: 0.82 !important;
}

/* Chevron indicador de estado contraído / desplegado */
fieldset.advanced > legend::after,
body.task-settings fieldset.advanced > legend::after,
.formcontent fieldset.advanced > legend::after {
    display: inline-block !important;
    float: none !important;
    margin-left: 10px !important;
    font-family: 'Icons', 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    color: #7A1F2B !important;
    vertical-align: baseline !important;
    content: "\f107" !important;
    transition: transform 0.2s ease !important;
}

/* Estado contraído: eliminar cualquier altura o reserva de espacio */
fieldset.advanced .collapse:not(.show),
fieldset.advanced > legend.closed + .collapse:not(.show),
fieldset.advanced:not(.is-expanded) .collapse:not(.show) {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* Estado EXPANDIDO: crece dinámicamente con margen institucional */
fieldset.advanced:has(.collapse.show),
fieldset.advanced:has(> legend:not(.closed)),
fieldset.advanced.is-expanded {
    padding: 24px 32px 28px 32px !important;
    overflow: visible !important;
}

fieldset.advanced:has(.collapse.show) > legend,
fieldset.advanced:has(> legend:not(.closed)) > legend,
fieldset.advanced.is-expanded > legend,
fieldset.advanced > legend:not(.closed) {
    margin-bottom: 16px !important;
}

fieldset.advanced:has(.collapse.show) > legend::after,
fieldset.advanced:has(> legend:not(.closed)) > legend::after,
fieldset.advanced.is-expanded > legend::after,
fieldset.advanced > legend:not(.closed)::after {
    content: "\f106" !important;
}

fieldset.advanced .collapse.show,
fieldset.advanced.is-expanded .collapse.show {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
    clear: both !important;
}

/* ====================================================================
   ESTRUCTURA Y DISTRIBUCIÓN COMPACTA PARA FORMULARIOS (table.propform)
   Basado en el modelo Flexbox nativo de Roundcube Elastic / Bootstrap
   ==================================================================== */

/* Contenedor de la tabla */
table.propform,
.formcontent table.propform,
body.task-settings table.propform,
body.action-plugin-password table.propform {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
}

table.propform > tbody,
.formcontent table.propform > tbody {
    display: block !important;
    width: 100% !important;
}

/* Fila del formulario: Contenedor Flexbox horizontal */
table.propform tr,
table.propform tr.form-group.row,
.formcontent table.propform tr,
body.task-settings table.propform tr,
body.action-plugin-password table.propform tr {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 14px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: none !important;
    background: transparent !important;
}

/* Fila con textarea: alinear etiqueta en la parte superior */
table.propform tr:has(textarea),
.formcontent table.propform tr:has(textarea) {
    align-items: flex-start !important;
}

table.propform tr:has(textarea) td.title,
.formcontent table.propform tr:has(textarea) td.title {
    padding-top: 8px !important;
}

/* Columna 1 (Etiqueta): Fija en 280px, eliminando la división del 50% */
table.propform td.title,
table.propform td.title.col-sm-6,
table.propform td.title[class*="col-"],
.formcontent table.propform td.title,
body.task-settings table.propform td.title,
body.action-plugin-password table.propform td.title {
    -ms-flex: 0 0 280px !important;
    flex: 0 0 280px !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 280px !important;
    padding: 0 16px 0 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #17243A !important;
    vertical-align: middle !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    text-align: left !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    box-sizing: border-box !important;
}

table.propform td.title label,
.formcontent table.propform td.title label {
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-align: left !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Columna 2 (Control): Inicia inmediatamente pegada a la Columna 1 (a 280px) */
table.propform td:not(.title),
table.propform td:not(.title).col-sm-6,
table.propform td:not(.title)[class*="col-"],
.formcontent table.propform td:not(.title),
body.task-settings table.propform td:not(.title),
body.action-plugin-password table.propform td:not(.title) {
    -ms-flex: 0 1 520px !important;
    flex: 0 1 520px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 520px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

/* Filas de ancho completo (colspan="2" o bloques descriptivos) */
table.propform tr td[colspan="2"],
table.propform tr td[colspan="2"][class*="col-"],
.formcontent table.propform tr td[colspan="2"] {
    -ms-flex: 0 0 100% !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
}

/* Estandarización de inputs, selects y controles */
table.propform td:not(.title) input[type="text"],
table.propform td:not(.title) input[type="password"],
table.propform td:not(.title) input[type="email"],
table.propform td:not(.title) input[type="number"],
table.propform td:not(.title) select,
table.propform td:not(.title) .form-control,
table.propform td:not(.title) .custom-select,
body.action-plugin-password input[type="password"] {
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #17243A !important;
    padding: 7px 12px !important;
    height: 38px !important;
    min-height: 38px !important;
    max-width: 480px !important;
    width: 100% !important;
    min-width: 0 !important;
    display: inline-block !important;
    text-align: left !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Textareas (ej: firmas en identidades, respuestas rápidas) */
table.propform td:not(.title) textarea,
body.task-settings textarea,
body.action-edit-identity textarea,
body.action-add-identity textarea,
body.action-edit-response textarea,
body.action-add-response textarea {
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #17243A !important;
    padding: 10px 12px !important;
    max-width: 520px !important;
    width: 100% !important;
    min-width: 0 !important;
    display: inline-block !important;
    text-align: left !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

/* Foco en controles */
table.propform input:focus,
table.propform select:focus,
table.propform textarea:focus,
body.action-plugin-password input:focus {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 2.5px rgba(122, 31, 43, 0.08) !important;
    outline: none !important;
}

/* Checkboxes y switches dentro de la celda de control */
table.propform td:not(.title) input[type="checkbox"]:not(.custom-control-input) {
    accent-color: #7A1F2B !important;
    width: 17px !important;
    height: 17px !important;
    cursor: pointer !important;
    vertical-align: middle !important;
    margin: 0 8px 0 0 !important;
    flex: 0 0 auto !important;
}

table.propform td:not(.title) .custom-switch {
    margin: 0 !important;
    flex: 0 0 auto !important;
}

/* Responsive para pantallas estrechas / móviles */
@media (max-width: 768px) {
    table.propform tr,
    table.propform tr.form-group.row,
    .formcontent table.propform tr,
    body.task-settings table.propform tr,
    body.action-plugin-password table.propform tr {
        flex-wrap: wrap !important;
        margin-bottom: 18px !important;
    }

    table.propform td.title,
    table.propform td.title[class*="col-"],
    table.propform td:not(.title),
    table.propform td:not(.title)[class*="col-"],
    body.task-settings table.propform td.title,
    body.task-settings table.propform td:not(.title) {
        -ms-flex: 0 0 100% !important;
        flex: 0 0 100% !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    table.propform td.title {
        margin-bottom: 6px !important;
    }

    table.propform td:not(.title) input[type="text"],
    table.propform td:not(.title) input[type="password"],
    table.propform td:not(.title) input[type="email"],
    table.propform td:not(.title) select,
    table.propform td:not(.title) textarea,
    body.action-plugin-password input[type="password"] {
        max-width: 100% !important;
    }
}

body.action-edit-prefs .formbuttons,
body.action-edit-identity .formbuttons,
body.action-add-identity .formbuttons,
body.action-edit-folder .formbuttons,
body.action-edit-response .formbuttons,
body.task-settings.iframe .formbuttons,
.escarcega-settings-formbuttons {
    max-width: 960px !important;
    width: 100% !important;
    margin: 28px auto 48px auto !important;
    padding: 20px 0 40px 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 12px !important;
    position: static !important;
    bottom: auto !important;
    background: transparent !important;
    z-index: 1 !important;
    border-top: 1px solid #EDE5DB !important;
    box-sizing: border-box !important;
    clear: both !important;
}

body.action-edit-prefs .formbuttons .btn.btn-primary,
body.action-edit-prefs .formbuttons button.submit,
body.action-edit-identity .formbuttons .btn.btn-primary,
body.action-edit-identity .formbuttons button.submit,
body.action-add-identity .formbuttons .btn.btn-primary,
body.action-add-identity .formbuttons button.submit,
body.action-edit-folder .formbuttons .btn.btn-primary,
body.action-edit-folder .formbuttons button.submit,
body.action-edit-response .formbuttons .btn.btn-primary,
body.action-edit-response .formbuttons button.submit,
body.task-settings.iframe .formbuttons .btn.btn-primary,
body.task-settings.iframe .formbuttons button.submit,
.escarcega-btn-save {
    background-color: #7A1F2B !important;
    border: 1px solid #7A1F2B !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    height: 38px !important;
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(122, 31, 43, 0.22) !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    position: static !important;
}

body.action-edit-prefs .formbuttons .btn.btn-primary:hover,
body.action-edit-prefs .formbuttons button.submit:hover,
body.action-edit-identity .formbuttons .btn.btn-primary:hover,
body.action-edit-identity .formbuttons button.submit:hover,
body.action-edit-folder .formbuttons .btn.btn-primary:hover,
body.action-edit-folder .formbuttons button.submit:hover,
body.action-edit-response .formbuttons .btn.btn-primary:hover,
body.action-edit-response .formbuttons button.submit:hover,
body.task-settings.iframe .formbuttons .btn.btn-primary:hover,
body.task-settings.iframe .formbuttons button.submit:hover,
.escarcega-btn-save:hover {
    background-color: #5a161f !important;
    border-color: #5a161f !important;
    box-shadow: 0 4px 8px rgba(122, 31, 43, 0.3) !important;
    transform: translateY(-1px) !important;
}

body.action-edit-prefs .formbuttons .btn.btn-primary::before,
body.action-edit-prefs .formbuttons button.submit::before,
body.action-edit-identity .formbuttons .btn.btn-primary::before,
body.action-edit-identity .formbuttons button.submit::before,
body.action-edit-folder .formbuttons .btn.btn-primary::before,
body.action-edit-folder .formbuttons button.submit::before,
body.action-edit-response .formbuttons .btn.btn-primary::before,
body.action-edit-response .formbuttons button.submit::before,
body.task-settings.iframe .formbuttons .btn.btn-primary::before,
body.task-settings.iframe .formbuttons button.submit::before,
.escarcega-btn-save::before {
    content: '✓ ' !important;
    font-weight: 700 !important;
}

/* ====================================================================
   6.2 SUBPANTALLAS DE CONFIGURACIÓN (Carpetas, Identidades, Respuestas, Contraseña)
   ==================================================================== */

/* Contenedor principal de subpantallas */
body.task-settings .escarcega-subpage-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #FAF6F1 !important;
    padding: 20px 24px !important;
    box-sizing: border-box !important;
}

body.task-settings .escarcega-subpage-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #EDE5DB !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

/* Navegación Single Page Universal para Subpantallas (Identidades, Respuestas, Carpetas) */
/* Estado 1 (por defecto): LISTA a ancho completo (100%), DETALLE OCULTO */
body.task-settings .escarcega-subpage-main:not(.subpage-editing) #layout-list.escarcega-subpage-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

body.task-settings .escarcega-subpage-main:not(.subpage-editing) #layout-content.escarcega-subpage-detail-card {
    display: none !important;
}

/* Estado 2: Al editar o crear: LISTA OCULTA, DETALLE a ancho completo (100%) */
body.task-settings .escarcega-subpage-main.subpage-editing #layout-list.escarcega-subpage-card {
    display: none !important;
}

body.task-settings .escarcega-subpage-main.subpage-editing #layout-content.escarcega-subpage-detail-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
}

/* Contraseña (plugin.password): siempre detalle a 100% */
body.action-plugin-password .escarcega-subpage-main #layout-content {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
}

/* Encabezado unificado de subpantallas: compacto y agrupado */
body.task-settings .escarcega-subpage-header {
    padding: 18px 24px 14px 24px !important;
    border-bottom: 1px solid #EDE5DB !important;
    background: #ffffff !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
}

body.task-settings .subpage-identity {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}

body.task-settings .subpage-title-badge {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

body.task-settings .subpage-title-icon,
body.task-settings .settings-title-icon,
body.task-settings .settings-detail-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #7A1F2B !important;
}

body.task-settings .subpage-title-icon svg,
body.task-settings .settings-title-icon svg,
body.task-settings .settings-detail-icon svg {
    width: 20px !important;
    height: 20px !important;
    stroke: currentColor !important;
}

body.task-settings .subpage-title-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    margin: 0 !important;
    line-height: 1.2 !important;
}

body.task-settings .subpage-subtitle-text {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin: 0 0 0 28px !important;
}

/* Barra de acciones de subpantalla (Crear, Eliminar, etc.) */
body.task-settings .subpage-actions-row {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 4px 0 0 28px !important;
}

body.task-settings .btn-escarcega-subpage-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 34px !important;
    padding: 0 16px !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    white-space: nowrap !important;
    border: 1px solid #EDE5DB !important;
    background: #f8fafc !important;
    color: #475569 !important;
}

body.task-settings .btn-escarcega-subpage-action:hover {
    background: #fdf6ed !important;
    color: #7A1F2B !important;
    border-color: #ba8a4b !important;
}

body.task-settings .btn-escarcega-subpage-action.primary {
    background: #7A1F2B !important;
    color: #ffffff !important;
    border-color: #7A1F2B !important;
    box-shadow: 0 2px 4px rgba(122, 31, 43, 0.2) !important;
}

body.task-settings .btn-escarcega-subpage-action.primary:hover {
    background: #5a161f !important;
    border-color: #5a161f !important;
    color: #ffffff !important;
}

body.task-settings .btn-escarcega-subpage-action.disabled {
    opacity: 0.4 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

/* ====================================================================
   6.3 SWITCHES INSTITUCIONALES UNIVERSALES
   ==================================================================== */
.custom-switch {
    padding-left: 2.75rem !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 24px !important;
    cursor: pointer !important;
}

.custom-switch .custom-control-input {
    position: absolute !important;
    left: 0 !important;
    z-index: -1 !important;
    width: 1rem !important;
    height: 1.25rem !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.custom-switch .custom-control-label {
    cursor: pointer !important;
    margin: 0 !important;
    user-select: none !important;
}

.custom-switch .custom-control-label::before {
    background-color: #CBD5E1 !important;
    border-color: #94A3B8 !important;
    box-shadow: none !important;
    height: 20px !important;
    width: 36px !important;
    border-radius: 10px !important;
    top: 2px !important;
    left: -2.75rem !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.custom-switch .custom-control-label::after {
    background-color: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    height: 16px !important;
    width: 16px !important;
    border-radius: 50% !important;
    top: 4px !important;
    left: calc(-2.75rem + 2px) !important;
    transition: transform 0.15s ease !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #7A1F2B !important;
    border-color: #7A1F2B !important;
}

.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #ffffff !important;
    transform: translateX(16px) !important;
}

.custom-switch .custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 2.5px rgba(122, 31, 43, 0.12) !important;
    border-color: #7A1F2B !important;
}

/* ====================================================================
   6.4 CARPETAS: LISTADO INSTITUCIONAL (#subscription-table)
   ==================================================================== */
body.task-settings .escarcega-folders-scroller {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 24px 28px !important;
    background: #FAF6F1 !important;
}

body.task-settings #subscription-table {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
    max-width: 960px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

/* Erradicar tarjeta vacía (elemento técnico root de Roundcube o elementos vacíos) */
body.task-settings #subscription-table li.root,
body.task-settings #subscription-table li:empty {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

body.task-settings #subscription-table li {
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 10px !important;
    padding: 12px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    min-height: 56px !important;
}

body.task-settings #subscription-table li:hover {
    border-color: #ba8a4b !important;
    background: #fdf6ed !important;
    box-shadow: 0 3px 8px rgba(122, 31, 43, 0.05) !important;
}

body.task-settings #subscription-table li a {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #17243A !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 1 auto !important;
}

body.task-settings #subscription-table li .custom-switch {
    flex: 0 0 auto !important;
    margin: 0 !important;
    cursor: pointer !important;
}

/* ====================================================================
   6.5 IDENTIDADES Y RESPUESTAS: LISTADO TIPO CARD
   ==================================================================== */
body.task-settings .escarcega-identities-scroller,
body.task-settings .escarcega-responses-scroller {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 24px 28px !important;
    background: #FAF6F1 !important;
}

body.task-settings table.escarcega-identities-listing,
body.task-settings table.escarcega-responses-listing {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    border: none !important;
    background: transparent !important;
}

body.task-settings table.escarcega-identities-listing tbody,
body.task-settings table.escarcega-responses-listing tbody {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
}

body.task-settings table.escarcega-identities-listing tr,
body.task-settings table.escarcega-responses-listing tr {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 10px !important;
    padding: 16px 22px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.task-settings table.escarcega-identities-listing tr:hover,
body.task-settings table.escarcega-responses-listing tr:hover {
    border-color: #7A1F2B !important;
    background: #fdf6ed !important;
    box-shadow: 0 4px 12px rgba(122, 31, 43, 0.06) !important;
}

body.task-settings table.escarcega-identities-listing tr.selected,
body.task-settings table.escarcega-responses-listing tr.selected {
    border-color: #7A1F2B !important;
    background: #fdf6ed !important;
}

body.task-settings table.escarcega-identities-listing td,
body.task-settings table.escarcega-responses-listing td {
    border: none !important;
    padding: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #17243A !important;
    background: transparent !important;
}

/* ====================================================================
   6.6 CONTRASEÑA: FORMULARIO INSTITUCIONAL
   ==================================================================== */
body.action-plugin-password .escarcega-password-scroller {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 32px 36px 48px 36px !important;
    background: #FAF6F1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    box-sizing: border-box !important;
}

/* Card principal único */
body.action-plugin-password .formcontainer {
    max-width: 960px !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 12px !important;
    padding: 32px 40px 32px 40px !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 auto 32px auto !important;
}

/* Suprimir título duplicado redundante */
body.action-plugin-password #prefs-title.boxtitle {
    display: none !important;
}

/* Contenedor del formulario interno sin bordes ni cajas anidadas */
body.action-plugin-password .formcontainer .formcontent,
body.action-plugin-password .formcontent {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

body.action-plugin-password #password-form {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.action-plugin-password table.propform {
    display: block !important;
    width: 100% !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.action-plugin-password table.propform > tbody {
    display: block !important;
    width: 100% !important;
}

body.action-plugin-password input[type="password"] {
    max-width: 480px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    color: #17243A !important;
    padding: 7px 12px !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    display: inline-block !important;
    text-align: left !important;
    margin: 0 !important;
}

body.action-plugin-password input[type="password"]:focus {
    border-color: #7A1F2B !important;
    box-shadow: 0 0 0 2.5px rgba(122, 31, 43, 0.08) !important;
    outline: none !important;
}

body.action-plugin-password #ruleslist,
body.action-plugin-password .hint {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 400 !important;
    color: #64748b !important;
    margin: 20px 0 0 0 !important;
    padding-left: 20px !important;
    line-height: 1.5 !important;
}

/* Barra inferior del botón: separador superior, alineado a la derecha, dentro del card */
body.action-plugin-password .formbuttons {
    margin: 28px 0 0 0 !important;
    padding: 20px 0 0 0 !important;
    border-top: 1px solid #EDE5DB !important;
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    width: 100% !important;
    box-sizing: border-box !important;
    position: static !important;
    height: auto !important;
}

body.action-plugin-password .formbuttons .button.mainaction.submit,
body.action-plugin-password .formbuttons input[type="submit"],
body.action-plugin-password .formbuttons button.submit {
    background-color: #7A1F2B !important;
    border: 1px solid #7A1F2B !important;
    border-radius: 6px !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    height: 38px !important;
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    box-shadow: 0 2px 5px rgba(122, 31, 43, 0.22) !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    position: static !important;
    margin: 0 !important;
}

body.action-plugin-password .formbuttons .button.mainaction.submit:hover {
    background-color: #5a161f !important;
    border-color: #5a161f !important;
    box-shadow: 0 4px 8px rgba(122, 31, 43, 0.3) !important;
}

body.action-plugin-password .formbuttons .button.mainaction.submit::before {
    content: '✓ ' !important;
    font-weight: 700 !important;
}

/* Botón secundario Cancelar */
.btn.btn-secondary.escarcega-btn-cancel,
body.task-settings .btn-secondary,
body.task-settings.iframe .btn-secondary {
    background-color: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    color: #475569 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    height: 38px !important;
    padding: 0 20px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

.btn.btn-secondary.escarcega-btn-cancel:hover,
body.task-settings .btn-secondary:hover,
body.task-settings.iframe .btn-secondary:hover {
    background-color: #f8fafc !important;
    border-color: #cbd5e1 !important;
    color: #17243A !important;
}

/* Botón Eliminar deshabilitado / habilitado en listas */
body.task-settings .btn-escarcega-subpage-action.delete.disabled,
body.task-settings .btn-escarcega-subpage-action.disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    border-color: #EDE5DB !important;
}

body.task-settings .btn-escarcega-subpage-action.delete:not(.disabled) {
    opacity: 1 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    color: #b91c1c !important;
    border-color: #fca5a5 !important;
    background: #ffffff !important;
}

body.task-settings .btn-escarcega-subpage-action.delete:not(.disabled):hover {
    background: #fef2f2 !important;
    border-color: #b91c1c !important;
}

/* ====================================================================
   6.7 ESTADOS VACÍOS INSTITUCIONALES (.listing-info)
   ==================================================================== */
.listing-info.hidden,
body.task-settings .listing-info.hidden,
body.task-settings .escarcega-empty-state.hidden {
    display: none !important;
}

body.task-settings .escarcega-responses-scroller,
body.task-settings .escarcega-identities-scroller {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 24px 28px !important;
    background: #FAF6F1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

body.task-settings .listing-info:not(.hidden),
body.task-settings .escarcega-empty-state:not(.hidden) {
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 12px !important;
    padding: 48px 40px !important;
    margin: 40px auto !important;
    max-width: 520px !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
    box-sizing: border-box !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    color: #64748b !important;
    line-height: 1.5 !important;
}

/* ====================================================================
   6.8 ALERTA INSTITUCIONAL DE CIFRADO (Mailvelope / boxwarning)
   ==================================================================== */
#mailvelope-warning,
.boxwarning {
    background: #fdf6ed !important;
    border: 1px solid #fed7aa !important;
    border-left: 4px solid #C99520 !important;
    border-radius: 8px !important;
    padding: 16px 20px !important;
    margin: 14px 0 22px 0 !important;
    color: #92400e !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-sizing: border-box !important;
}

#mailvelope-warning::before,
.boxwarning::before {
    content: '⚠' !important;
    font-size: 20px !important;
    color: #C99520 !important;
    flex: 0 0 auto !important;
}

#mailvelope-warning a,
.boxwarning a {
    color: #7A1F2B !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    transition: color 0.15s ease !important;
}

#mailvelope-warning a:hover,
.boxwarning a:hover {
    color: #5a161f !important;
}

/* ====================================================================
   7. VISTA DE LECTURA DE MENSAJES (task-mail.action-show, task-mail.action-preview)
   ==================================================================== */

/* 7.1 Layout y Contenedor Principal */
body.task-mail.action-show,
body.task-mail.action-preview {
    background-color: #FAF6F1 !important;
}

body.task-mail.action-show #layout,
body.task-mail.action-preview #layout {
    display: flex !important;
    flex-direction: row !important;
    height: calc(100vh - 173px) !important;
    min-height: calc(100vh - 173px) !important;
    max-height: calc(100vh - 173px) !important;
    width: 100% !important;
    overflow: hidden !important;
    background: #ffffff !important;
    padding: 0 !important;
    gap: 0 !important;
    box-sizing: border-box !important;
}

body.task-mail.action-show.extwin #layout,
body.task-mail.action-preview.extwin #layout,
body.task-mail.action-show.iframe #layout,
body.task-mail.action-preview.iframe #layout,
body.extwin #layout {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
}

body.task-mail.action-show .escarcega-message-main,
body.task-mail.action-preview .escarcega-message-main {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    background: #FAF6F1 !important;
    padding: 16px 20px !important;
    box-sizing: border-box !important;
}

html.iframe body.task-mail.action-show .escarcega-message-main,
html.iframe body.task-mail.action-preview .escarcega-message-main {
    padding: 0 !important;
    height: 100vh !important;
}

/* Tarjeta Blanca Institucional */
body.task-mail.action-show .escarcega-message-card,
body.task-mail.action-preview .escarcega-message-card {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    min-width: 0 !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(23, 36, 58, 0.05) !important;
    overflow: hidden !important;
    position: relative !important;
}

html.iframe body.task-mail.action-show .escarcega-message-card,
html.iframe body.task-mail.action-preview .escarcega-message-card {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

/* 7.2 Barra de Acciones Superior (Toolbar) */
body.task-mail.action-show .escarcega-message-toolbar-header,
body.task-mail.action-preview .escarcega-message-toolbar-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 10px 18px !important;
    background: #ffffff !important;
    border-bottom: 1px solid #EDE5DB !important;
    min-height: 54px !important;
    box-sizing: border-box !important;
    gap: 12px !important;
    flex: 0 0 auto !important;
}

.escarcega-message-toolbar-header .message-toolbar-left {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
}

/* Botón Volver */
.escarcega-message-toolbar-header a.escarcega-btn-back,
.escarcega-message-toolbar-header a.back-list-button.escarcega-btn-back {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 34px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    background: #FAF6F1 !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 4px !important;
    color: #7A1F2B !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
}

.escarcega-message-toolbar-header a.escarcega-btn-back::before,
.escarcega-message-toolbar-header a.back-list-button.escarcega-btn-back::before {
    display: none !important;
    content: none !important;
}

.escarcega-message-toolbar-header a.escarcega-btn-back:hover,
.escarcega-message-toolbar-header a.back-list-button.escarcega-btn-back:hover {
    background: #7A1F2B !important;
    border-color: #7A1F2B !important;
    color: #ffffff !important;
}

.escarcega-message-toolbar-header a.escarcega-btn-back svg,
.escarcega-message-toolbar-header a.back-list-button.escarcega-btn-back svg {
    stroke: currentColor !important;
    transition: stroke 0.15s ease !important;
}

.escarcega-message-toolbar-header .message-toolbar-right {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    overflow-x: auto !important;
}

/* Toolbar de Acciones */
.escarcega-message-toolbar-header #mailtoolbar,
.escarcega-message-toolbar-header #toolbar-menu {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    float: none !important;
}

.escarcega-message-toolbar-header #toolbar-menu > li {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
}

.escarcega-message-toolbar-header a.toolbar-menu-button {
    display: none !important;
}

/* Botones Pastilla de la Toolbar (Excluyendo los dropdowns internos de dropbutton) */
.escarcega-message-toolbar-header #mailtoolbar > a.button,
.escarcega-message-toolbar-header #toolbar-menu > li > a.button,
.escarcega-message-toolbar-header #toolbar-menu a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    padding: 0 12px !important;
    background-color: #FAF6F1 !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 4px !important;
    color: #17243A !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    float: none !important;
}

/* Dropbutton Integrado como Pastilla Única Armoniosa (Responder a todos / Reenviar) */
.escarcega-message-toolbar-header #mailtoolbar .dropbutton,
.escarcega-message-toolbar-header #toolbar-menu .dropbutton {
    display: inline-flex !important;
    align-items: stretch !important;
    vertical-align: middle !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    background-color: #FAF6F1 !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.button,
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 8px 0 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    color: #17243A !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.dropdown,
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.dropdown {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: 100% !important;
    padding: 0 8px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    background: transparent !important;
    border: none !important;
    border-left: 1px solid #EDE5DB !important;
    border-radius: 0 !important;
    color: #64748b !important;
    text-decoration: none !important;
    cursor: pointer !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: all 0.15s ease !important;
}

.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.dropdown .inner,
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.dropdown .inner {
    display: none !important;
}

/* Iconos de la Toolbar en Vino Institucional */
.escarcega-message-toolbar-header #mailtoolbar a.button::before,
.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.button::before,
.escarcega-message-toolbar-header #toolbar-menu a.button::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 13px !important;
    line-height: 1 !important;
    color: #7A1F2B !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease !important;
}

.escarcega-message-toolbar-header #mailtoolbar a.dropdown::before,
.escarcega-message-toolbar-header #toolbar-menu a.dropdown::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    content: "\f0d7" !important;
    font-size: 10px !important;
    font-weight: 900 !important;
    color: #64748b !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease !important;
}

/* Definición explícita de iconos para asegurar consistencia */
.escarcega-message-toolbar-header a.button.reply::before { content: "\f3e5" !important; }
.escarcega-message-toolbar-header a.button.reply-all::before { content: "\f122" !important; }
.escarcega-message-toolbar-header a.button.forward::before { content: "\f064" !important; }
.escarcega-message-toolbar-header a.button.delete::before { content: "\f2ed" !important; }
.escarcega-message-toolbar-header a.button.print::before { content: "\f02f" !important; }
.escarcega-message-toolbar-header a.button.markmessage::before { content: "\f02e" !important; }
.escarcega-message-toolbar-header a.button.more::before { content: "\f142" !important; }
.escarcega-message-toolbar-header a.button.prev::before { content: "\f053" !important; }

/* Botón Siguiente: Flecha a la derecha con ::after */
.escarcega-message-toolbar-header a.button.next::before {
    display: none !important;
    content: none !important;
}
.escarcega-message-toolbar-header a.button.next::after {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    content: "\f054" !important;
    font-weight: 900 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    color: #7A1F2B !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: color 0.15s ease !important;
}

/* Hover de Botones de Toolbar (Acento Dorado y Vino) */
.escarcega-message-toolbar-header #mailtoolbar > a.button:hover:not(.disabled),
.escarcega-message-toolbar-header #toolbar-menu a.button:hover:not(.disabled) {
    background-color: #FAF6F1 !important;
    border-color: #C99520 !important;
    color: #7A1F2B !important;
    box-shadow: 0 1px 4px rgba(201, 149, 32, 0.15) !important;
}

.escarcega-message-toolbar-header #mailtoolbar > a.button:hover:not(.disabled)::before,
.escarcega-message-toolbar-header #toolbar-menu a.button:hover:not(.disabled)::before {
    color: #C99520 !important;
}

.escarcega-message-toolbar-header a.button.next:hover:not(.disabled)::after {
    color: #C99520 !important;
}

/* Hover de Dropbuttons integrados */
.escarcega-message-toolbar-header #mailtoolbar .dropbutton:hover:not(.disabled),
.escarcega-message-toolbar-header #toolbar-menu .dropbutton:hover:not(.disabled) {
    border-color: #C99520 !important;
    box-shadow: 0 1px 4px rgba(201, 149, 32, 0.15) !important;
}

.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.button:hover:not(.disabled),
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.button:hover:not(.disabled) {
    background-color: rgba(201, 149, 32, 0.08) !important;
    color: #7A1F2B !important;
}

.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.button:hover:not(.disabled)::before,
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.button:hover:not(.disabled)::before {
    color: #C99520 !important;
}

.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.dropdown:hover:not(.disabled),
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.dropdown:hover:not(.disabled) {
    background-color: rgba(201, 149, 32, 0.12) !important;
}

.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.dropdown:hover:not(.disabled)::before,
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.dropdown:hover:not(.disabled)::before {
    color: #7A1F2B !important;
}

/* Botones Deshabilitados */
.escarcega-message-toolbar-header #mailtoolbar a.button.disabled,
.escarcega-message-toolbar-header #mailtoolbar a.button[disabled],
.escarcega-message-toolbar-header #mailtoolbar .dropbutton.disabled,
.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.button.disabled,
.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.dropdown.disabled,
.escarcega-message-toolbar-header #toolbar-menu a.button.disabled,
.escarcega-message-toolbar-header #toolbar-menu a.button[disabled],
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.button.disabled,
.escarcega-message-toolbar-header #toolbar-menu a.dropdown.disabled {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    color: #94a3b8 !important;
    box-shadow: none !important;
}

.escarcega-message-toolbar-header #mailtoolbar > a.button.disabled,
.escarcega-message-toolbar-header #mailtoolbar .dropbutton.disabled {
    background-color: #FAF6F1 !important;
    border-color: #EDE5DB !important;
}

.escarcega-message-toolbar-header #mailtoolbar a.button.disabled::before,
.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.button.disabled::before,
.escarcega-message-toolbar-header #mailtoolbar a.dropdown.disabled::before,
.escarcega-message-toolbar-header #toolbar-menu a.button.disabled::before,
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.button.disabled::before,
.escarcega-message-toolbar-header #toolbar-menu a.dropdown.disabled::before {
    color: #94a3b8 !important;
}

.escarcega-message-toolbar-header a.button.next.disabled::after {
    color: #94a3b8 !important;
}

/* Separadores Verticales */
.escarcega-message-toolbar-header #mailtoolbar span.spacer,
.escarcega-message-toolbar-header #toolbar-menu span.spacer {
    display: inline-block !important;
    width: 1px !important;
    height: 22px !important;
    background-color: #EDE5DB !important;
    margin: 0 4px !important;
    vertical-align: middle !important;
}

/* Separación distintiva para el bloque de navegación (Anterior / Siguiente) */
.escarcega-message-toolbar-header #mailtoolbar span.spacer:last-of-type {
    margin-left: 10px !important;
    margin-right: 10px !important;
    height: 24px !important;
    background-color: #C99520 !important;
    opacity: 0.6 !important;
}

/* Texto dentro del botón */
.escarcega-message-toolbar-header #mailtoolbar a.button .inner,
.escarcega-message-toolbar-header #mailtoolbar .dropbutton > a.button .inner,
.escarcega-message-toolbar-header #toolbar-menu a.button .inner,
.escarcega-message-toolbar-header #toolbar-menu .dropbutton > a.button .inner {
    display: inline-flex !important;
    align-items: center !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    color: inherit !important;
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* 7.3 Área de Contenido y Scroll */
.escarcega-message-scroller {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    padding: 24px 28px !important;
    background: #ffffff !important;
    box-sizing: border-box !important;
}

/* 7.4 Encabezado del Mensaje (#message-header) */
.escarcega-message-header-box {
    margin-bottom: 22px !important;
}

/* Asunto */
.escarcega-message-header-box .escarcega-message-subject {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 21px !important;
    font-weight: 700 !important;
    color: #7A1F2B !important;
    margin: 0 0 16px 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid #EDE5DB !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    word-break: break-word !important;
    line-height: 1.35 !important;
}

/* Botón Ventana Externa */
.escarcega-message-header-box .escarcega-extwin-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    height: 30px !important;
    border-radius: 4px !important;
    border: 1px solid #EDE5DB !important;
    background: #FAF6F1 !important;
    color: #64748b !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

.escarcega-message-header-box .escarcega-extwin-btn:hover {
    color: #7A1F2B !important;
    border-color: #C99520 !important;
    background: #FAF6F1 !important;
}

.escarcega-message-header-box .escarcega-extwin-btn::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    content: "\f360" !important;
    font-size: 13px !important;
    color: inherit !important;
}

/* Fila de Metadatos y Remitente */
.escarcega-message-meta-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 14px !important;
}

/* Avatar / Foto de Contacto */
.escarcega-contactphoto {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    border: 2px solid #EDE5DB !important;
    object-fit: cover !important;
    background: #FAF6F1 !important;
    flex-shrink: 0 !important;
}

.escarcega-header-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

/* Resumen del Encabezado (Remitente, Destinatario, Fecha) */
.escarcega-message-summary {
    display: flex !important;
    align-items: baseline !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    color: #17243A !important;
}

.escarcega-message-summary .from {
    font-weight: 700 !important;
    color: #17243A !important;
}

.escarcega-message-summary .from a {
    color: #17243A !important;
    text-decoration: none !important;
}

.escarcega-message-summary .adr,
.escarcega-message-summary .to {
    color: #64748b !important;
    font-weight: 400 !important;
    font-size: 13px !important;
}

.escarcega-message-summary .date {
    margin-left: auto !important;
    color: #64748b !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    white-space: nowrap !important;
}

/* Tabla de Encabezados Expandida */
.escarcega-message-headers-table {
    margin: 8px 0 !important;
    border-collapse: collapse !important;
    width: 100% !important;
}

.escarcega-message-headers-table td.header-title {
    color: #7A1F2B !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    padding: 3px 12px 3px 0 !important;
    white-space: nowrap !important;
    vertical-align: top !important;
    width: 90px !important;
}

.escarcega-message-headers-table td.header-value {
    color: #17243A !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    padding: 3px 0 !important;
}

/* Enlaces de Cabecera ("Detalles", "Cabeceras", "Solo texto") */
.escarcega-message-header-links {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.escarcega-message-header-links a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    padding: 3px 10px !important;
    background: #FAF6F1 !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 4px !important;
    color: #17243A !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.escarcega-message-header-links a:hover {
    background: #FAF6F1 !important;
    border-color: #C99520 !important;
    color: #7A1F2B !important;
    box-shadow: 0 1px 3px rgba(201, 149, 32, 0.12) !important;
}

.escarcega-message-header-links a::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    color: #7A1F2B !important;
    font-size: 11.5px !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* 7.5 Alerta Institucional de Recursos Remotos */
#message-objects .ui.alert,
#message-objects .remote-objects,
#message-objects .boxwarning,
.ui.alert.remote-objects {
    background-color: #FAF6F1 !important;
    border: 1px solid #fed7aa !important;
    border-left: 4px solid #C99520 !important;
    border-radius: 8px !important;
    padding: 12px 18px !important;
    margin: 10px 0 18px 0 !important;
    color: #17243A !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    box-sizing: border-box !important;
}

#message-objects .ui.alert > i.icon,
#message-objects .remote-objects > i.icon,
.ui.alert.remote-objects > i.icon {
    color: #C99520 !important;
    font-size: 18px !important;
    margin-right: 10px !important;
    flex-shrink: 0 !important;
}

#message-objects .ui.alert > i.icon::before,
#message-objects .remote-objects > i.icon::before,
.ui.alert.remote-objects > i.icon::before {
    color: #C99520 !important;
}

/* Botón "Permitir" de la Alerta Remota */
#message-objects .boxbuttons .btn,
#message-objects .btn,
.ui.alert.remote-objects .btn {
    background-color: #7A1F2B !important;
    border: 1px solid #7A1F2B !important;
    color: #ffffff !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    box-shadow: 0 1px 4px rgba(122, 31, 43, 0.2) !important;
    transition: all 0.15s ease !important;
    margin-left: 12px !important;
}

#message-objects .boxbuttons .btn:hover,
#message-objects .btn:hover,
.ui.alert.remote-objects .btn:hover {
    background-color: #5a161f !important;
    border-color: #5a161f !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(122, 31, 43, 0.3) !important;
}

/* 7.6 Lista de Archivos Adjuntos */
.escarcega-attachments-container {
    width: 100% !important;
}

.attachmentslist.escarcega-attachments-list {
    background: #FAF6F1 !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    margin: 0 0 18px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    list-style: none !important;
}

.attachmentslist.escarcega-attachments-list:empty {
    display: none !important;
    padding: 0 !important;
    border: none !important;
    margin: 0 !important;
}

.attachmentslist.escarcega-attachments-list li {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.15s ease !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.attachmentslist.escarcega-attachments-list li:hover {
    border-color: #C99520 !important;
    box-shadow: 0 2px 6px rgba(201, 149, 32, 0.12) !important;
}

.attachmentslist.escarcega-attachments-list li::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    font-size: 15px !important;
    color: #7A1F2B !important;
    margin-right: 2px !important;
    flex-shrink: 0 !important;
}

.attachmentslist.escarcega-attachments-list li a.filename {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.attachmentslist.escarcega-attachments-list li .attachment-name {
    color: #17243A !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
}

.attachmentslist.escarcega-attachments-list li:hover .attachment-name {
    color: #7A1F2B !important;
}

.attachmentslist.escarcega-attachments-list li .attachment-size {
    color: #64748b !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

.attachmentslist.escarcega-attachments-list li a.dropdown {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 22px !important;
    height: 22px !important;
    border-radius: 4px !important;
    background: #FAF6F1 !important;
    color: #7A1F2B !important;
    text-decoration: none !important;
    margin-left: 4px !important;
    transition: all 0.15s ease !important;
}

.attachmentslist.escarcega-attachments-list li a.dropdown:hover {
    background: #7A1F2B !important;
    color: #ffffff !important;
}

.attachmentslist.escarcega-attachments-list li a.dropdown::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    content: "\f0d7" !important;
    font-size: 10px !important;
    color: inherit !important;
}

/* Miniaturas de Imágenes Adjuntas (p.image-attachment) */
p.image-attachment {
    position: relative !important;
    background: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    padding: 10px 10px 54px 10px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
}

p.image-attachment:hover {
    border-color: #C99520 !important;
    box-shadow: 0 4px 12px rgba(201, 149, 32, 0.12) !important;
}

p.image-attachment .image-filename {
    color: #17243A !important;
    font-weight: 600 !important;
    font-family: 'Montserrat', sans-serif !important;
}

p.image-attachment .image-filesize {
    color: #64748b !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* Enlaces de acciones de adjuntos: fila centrada, altura uniforme 30px */
p.image-attachment .attachment-links {
    position: absolute !important;
    bottom: 12px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    text-align: center !important;
    font-size: 0 !important;
}

p.image-attachment .attachment-links a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: 30px !important;
    min-height: 30px !important;
    max-height: 30px !important;
    padding: 0 14px !important;
    border-radius: 4px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11.5px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
}

p.image-attachment .attachment-links a::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    font-weight: 900 !important;
    font-size: 11px !important;
    line-height: 1 !important;
    margin: 0 !important;
    display: inline-block !important;
}

/* Botón secundario: Mostrar (fondo crema, borde sutil, acento vino) */
p.image-attachment .attachment-links a.open {
    background: #FAF6F1 !important;
    color: #7A1F2B !important;
    border: 1px solid #EDE5DB !important;
}

p.image-attachment .attachment-links a.open::before {
    content: "\f360" !important;
    color: #7A1F2B !important;
}

p.image-attachment .attachment-links a.open:hover {
    background: #FAF6F1 !important;
    border-color: #C99520 !important;
    color: #C99520 !important;
}

p.image-attachment .attachment-links a.open:hover::before {
    color: #C99520 !important;
}

/* Botón principal: Descargar (fondo vino, texto blanco, icono blanco) */
p.image-attachment .attachment-links a.download {
    background: #7A1F2B !important;
    color: #ffffff !important;
    border: 1px solid #7A1F2B !important;
}

p.image-attachment .attachment-links a.download::before {
    content: "\f019" !important;
    color: #ffffff !important;
}

p.image-attachment .attachment-links a.download:hover {
    background: #5a161f !important;
    border-color: #5a161f !important;
    color: #ffffff !important;
}

/* 7.7 Cuerpo del Mensaje (#messagebody) */
.escarcega-message-body-container {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
}

.escarcega-body-wrapper {
    width: 100% !important;
}

#messagebody {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    color: #17243A !important;
    word-break: break-word !important;
}

#messagebody a {
    color: #7A1F2B !important;
    text-decoration: underline !important;
    transition: color 0.15s ease !important;
}

#messagebody a:hover {
    color: #C99520 !important;
}

#messagebody blockquote {
    border-left: 3px solid #C99520 !important;
    border-right: none !important;
    background: #FAF6F1 !important;
    padding: 8px 14px !important;
    margin: 10px 0 !important;
    border-radius: 0 4px 4px 0 !important;
    color: #475569 !important;
}

/* 7.8 Menús Desplegables Institucionales (Popovers) */
.popover.popupmenu,
.popover {
    background-color: #ffffff !important;
    border: 1px solid #EDE5DB !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 20px rgba(23, 36, 58, 0.12) !important;
    padding: 6px 0 !important;
}

.popover .popover-body {
    padding: 0 !important;
}

.popover .menu.listing,
.popupmenu .menu.listing {
    list-style: none !important;
    padding: 4px 0 !important;
    margin: 0 !important;
}

.popover .menu.listing li,
.popupmenu .menu.listing li {
    padding: 0 !important;
    margin: 0 !important;
}

.popover .menu.listing li a,
.popupmenu .menu.listing li a {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 8px 16px !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12.5px !important;
    color: #17243A !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

.popover .menu.listing li a:hover,
.popupmenu .menu.listing li a:hover,
.popover .menu.listing li a.active:hover,
.popupmenu .menu.listing li a.active:hover {
    background-color: #FAF6F1 !important;
    color: #7A1F2B !important;
}

.popover .menu.listing li a::before,
.popupmenu .menu.listing li a::before {
    font-family: Icons, 'Font Awesome 5 Free' !important;
    color: #7A1F2B !important;
    font-size: 13px !important;
    width: 16px !important;
    text-align: center !important;
}

.popover .menu.listing li a.disabled,
.popupmenu .menu.listing li a.disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
    color: #94a3b8 !important;
}

.popover .menu.listing li a.disabled::before,
.popupmenu .menu.listing li a.disabled::before {
    color: #94a3b8 !important;
}

.popover .popover-header {
    display: none !important;
}

/* 7.9 Responsive */
@media (max-width: 992px) {
    body.task-mail.action-show #layout-sidebar,
    body.task-mail.action-preview #layout-sidebar {
        display: none !important;
    }

    body.task-mail.action-show .escarcega-message-main,
    body.task-mail.action-preview .escarcega-message-main {
        padding: 10px !important;
    }

    .escarcega-message-toolbar-header {
        flex-wrap: wrap !important;
        padding: 8px 12px !important;
    }

    .escarcega-message-scroller {
        padding: 16px 14px !important;
    }
}