/* =====================================================
   CIAE Mensajes Pro — CSS v3.2.0 GLASS AESTHETIC
   Armonizado con CIAE Menú de Usuario v4.6
===================================================== */

:root{
    --cmp-blue:#13233a;
    --cmp-blue-soft:#23405f;
    --cmp-gold:#c8a97e;
    --cmp-gold-d:#b48d5d;
    --cmp-text:#13233a;
    --cmp-soft:#475569;
    --cmp-muted:#64748b;
    --cmp-line:rgba(15,23,42,.07);
    --cmp-line-strong:rgba(15,23,42,.13);
    --cmp-glass:rgba(255,255,255,.52);
    --cmp-glass-strong:rgba(255,255,255,.76);
    --cmp-primary:#0f4c81;
    --cmp-primary-2:#1d4ed8;
    --cmp-accent:rgba(200,169,126,.12);
    --cmp-ease:cubic-bezier(.16,1,.3,1);
    --cmp-r-xl:24px;
    --cmp-r-lg:18px;
    --cmp-r-md:13px;
    --cmp-sh:0 8px 28px rgba(15,23,42,.08);
    --cmp-sh-lg:0 18px 48px rgba(15,23,42,.12);
}

#ciae-msg-app.cmp-shell{
    width:100%;
    color:var(--cmp-text);
    font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

/* ── Header ── */
.cmp-header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:16px;
    padding:22px 24px;
    margin-bottom:14px;
    border-radius:var(--cmp-r-xl);
    background:rgba(255,255,255,.54);
    border:1px solid rgba(255,255,255,.74);
    box-shadow:var(--cmp-sh),inset 0 1px 0 rgba(255,255,255,.86);
    backdrop-filter:blur(28px) saturate(170%);
    -webkit-backdrop-filter:blur(28px) saturate(170%);
}

.cmp-header-copy h3{
    margin:0 0 6px;
    font-size:24px;
    line-height:1.1;
    font-weight:900;
    letter-spacing:-.035em;
    color:var(--cmp-blue);
}

.cmp-header-copy p{
    margin:0;
    max-width:600px;
    color:var(--cmp-soft);
    font-size:13px;
    line-height:1.6;
}

.cmp-chip{
    display:inline-flex;
    align-items:center;
    gap:7px;
    margin-bottom:10px;
    padding:6px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.46);
    border:1px solid rgba(255,255,255,.66);
    color:var(--cmp-blue);
    font-size:11px;
    font-weight:800;
    letter-spacing:.04em;
    text-transform:uppercase;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.72);
}

.cmp-action-btn,
.cmp-btn,
.cmp-mobile-back{
    appearance:none;
    border:none;
    cursor:pointer;
    transition:transform .35s var(--cmp-ease),box-shadow .35s var(--cmp-ease),background .35s var(--cmp-ease),opacity .2s ease;
}

.cmp-action-btn,.cmp-btn{
    background:linear-gradient(135deg,var(--cmp-blue) 0%,var(--cmp-primary-2) 100%);
    color:#fff;
    padding:11px 18px;
    border-radius:var(--cmp-r-md);
    font-size:13px;
    font-weight:800;
    letter-spacing:-.01em;
    box-shadow:0 10px 28px rgba(19,35,58,.22);
}

.cmp-action-btn:hover,.cmp-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 14px 36px rgba(19,35,58,.28);
}

.cmp-action-btn:disabled,.cmp-btn:disabled{
    opacity:.6;cursor:not-allowed;transform:none;
}

/* ── Toolbar ── */
.cmp-toolbar{
    display:grid;
    grid-template-columns:minmax(220px,1.2fr) auto auto;
    gap:12px;
    align-items:center;
    padding:14px 16px;
    margin-bottom:14px;
    border-radius:var(--cmp-r-xl);
    background:rgba(255,255,255,.48);
    border:1px solid rgba(255,255,255,.68);
    box-shadow:0 4px 16px rgba(15,23,42,.06),inset 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter:blur(22px) saturate(160%);
    -webkit-backdrop-filter:blur(22px) saturate(160%);
}

.cmp-search{
    position:relative;
    display:flex;
    align-items:center;
    width:100%;
}

.cmp-search .dashicons{
    position:absolute;
    left:13px;
    color:var(--cmp-muted);
    font-size:17px;
    width:17px;
    height:17px;
}

.cmp-search input{
    width:100%;
    min-height:42px;
    padding:0 14px 0 40px;
    border-radius:var(--cmp-r-md);
    border:1px solid rgba(15,23,42,.08);
    background:rgba(255,255,255,.72);
    outline:none;
    font-size:13px;
    color:var(--cmp-text);
    font-family:'Inter',sans-serif;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
    transition:border-color .2s,box-shadow .2s;
}

.cmp-search input:focus{
    border-color:rgba(19,35,58,.22);
    box-shadow:0 0 0 3px rgba(19,35,58,.07);
    background:#fff;
}

.cmp-filters{
    display:flex;
    gap:6px;
    flex-wrap:wrap;
}

.cmp-filter{
    appearance:none;
    border:1px solid rgba(15,23,42,.08);
    background:rgba(255,255,255,.5);
    color:var(--cmp-soft);
    padding:9px 13px;
    border-radius:var(--cmp-r-md);
    font-size:12px;
    font-weight:700;
    cursor:pointer;
    font-family:'Inter',sans-serif;
    transition:all .2s ease;
}

.cmp-filter:hover{
    background:rgba(255,255,255,.78);
    border-color:rgba(15,23,42,.14);
}

.cmp-filter.is-active{
    background:rgba(19,35,58,.08);
    color:var(--cmp-blue);
    border-color:rgba(19,35,58,.2);
    box-shadow:0 4px 12px rgba(19,35,58,.08);
}

.cmp-stats{
    display:flex;
    gap:8px;
    justify-content:flex-end;
    flex-wrap:wrap;
}

.cmp-stat{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:9px 12px;
    background:rgba(255,255,255,.6);
    border:1px solid rgba(255,255,255,.72);
    border-radius:var(--cmp-r-md);
    color:var(--cmp-soft);
    font-size:12px;
    white-space:nowrap;
}

.cmp-stat strong{color:var(--cmp-blue);font-weight:800}
.cmp-stat-unread strong{color:#dc2626}

/* ── Layout ── */
.cmp-container{
    display:grid;
    grid-template-columns:340px minmax(0,1fr);
    gap:16px;
    align-items:start;
}

.cmp-list-wrap,
.cmp-content-wrap{
    min-width:0;
    background:rgba(255,255,255,.46);
    border:1px solid rgba(255,255,255,.72);
    border-radius:var(--cmp-r-xl);
    box-shadow:var(--cmp-sh),inset 0 1px 0 rgba(255,255,255,.82);
    backdrop-filter:blur(24px) saturate(165%);
    -webkit-backdrop-filter:blur(24px) saturate(165%);
}

.cmp-list-wrap{
    position:sticky;
    top:18px;
    padding:12px;
}

.cmp-mobile-list-title{display:none}

.cmp-list{
    display:flex;
    flex-direction:column;
    gap:8px;
    max-height:72vh;
    overflow:auto;
    padding-right:3px;
    scroll-behavior:smooth;
}

.cmp-list::-webkit-scrollbar{width:6px}
.cmp-list::-webkit-scrollbar-thumb{
    background:rgba(15,23,42,.12);
    border-radius:999px;
    border:1px solid transparent;
    background-clip:padding-box;
}

/* ── Items ── */
.cmp-item{
    position:relative;
    display:block;
    width:100%;
    padding:13px 14px 13px 16px;
    border-radius:var(--cmp-r-lg);
    background:rgba(255,255,255,.56);
    border:1px solid rgba(255,255,255,.72);
    border-left:2px solid transparent;
    box-shadow:0 2px 8px rgba(15,23,42,.04);
    cursor:pointer;
    transition:transform .3s var(--cmp-ease),box-shadow .3s var(--cmp-ease),border-color .3s var(--cmp-ease),background .3s var(--cmp-ease);
    outline:none;
}

.cmp-item:hover,.cmp-item:focus-visible{
    transform:translateY(-1px);
    background:rgba(255,255,255,.82);
    border-color:rgba(200,169,126,.3);
    border-left-color:rgba(200,169,126,.4);
    box-shadow:0 8px 22px rgba(15,23,42,.09);
}

.cmp-item.is-active{
    background:rgba(255,255,255,.88);
    border-color:rgba(19,35,58,.18);
    border-left:3px solid var(--cmp-blue);
    padding-left:14px;
    box-shadow:0 10px 28px rgba(19,35,58,.1);
}

/* ── Badge punto — OCULTO, reemplazado por border-left ── */
.cmp-item .badge{
    display:none!important;
    visibility:hidden!important;
}

/* ── No leído: franja izquierda roja ── */
.cmp-item.unread{
    border-left:3px solid #ef4444;
    padding-left:14px;
}

.cmp-item.unread:hover{
    border-left-color:#dc2626;
}

/* ── Chevron derecho ── */
.cmp-item::after{
    content:'›';
    position:absolute;
    right:13px;
    top:50%;
    transform:translateY(-50%);
    font-size:20px;
    line-height:1;
    color:rgba(15,23,42,.25);
    font-weight:700;
}

.cmp-item-inner{
    min-width:0;
    padding-right:22px;
    padding-left:0;
}

.cmp-item-title{
    display:block;
    margin:0 0 4px;
    font-size:13.5px;
    font-weight:800;
    line-height:1.25;
    color:var(--cmp-blue);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    letter-spacing:-.01em;
}

.cmp-item-excerpt{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    margin:0 0 8px;
    color:var(--cmp-muted);
    font-size:11.5px;
    line-height:1.5;
}

.cmp-item-meta{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    color:var(--cmp-muted);
    font-size:11px;
}

.cmp-state{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:3px 9px;
    border-radius:999px;
    background:rgba(248,250,252,.8);
    border:1px solid rgba(15,23,42,.07);
    font-weight:700;
    font-size:10.5px;
    color:var(--cmp-muted);
}

.cmp-item.unread .cmp-state{
    color:#b91c1c;
    background:rgba(254,226,226,.8);
    border-color:rgba(239,68,68,.14);
}

.cmp-empty{
    padding:16px;
    border-radius:var(--cmp-r-lg);
    background:rgba(255,255,255,.5);
    border:1px dashed rgba(15,23,42,.1);
    color:var(--cmp-muted);
    text-align:center;
    margin-top:10px;
    font-size:13px;
}

.cmp-btn{
    width:100%;
    margin-top:10px;
}

/* ── Panel contenido ── */
.cmp-content-wrap{
    padding:16px;
    min-height:640px;
}

.cmp-content{
    background:rgba(255,255,255,.66);
    border:1px solid rgba(255,255,255,.82);
    border-radius:var(--cmp-r-lg);
    min-height:600px;
    padding:24px;
}

.cmp-content-empty{
    min-height:520px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:10px;
    text-align:center;
    color:var(--cmp-muted);
}

.cmp-content-empty-icon{font-size:44px;line-height:1}

.cmp-content-empty h4{
    margin:0;
    color:var(--cmp-blue);
    font-size:22px;
    font-weight:800;
    letter-spacing:-.025em;
}

.cmp-content-empty p{
    margin:0;
    max-width:460px;
    font-size:13px;
    line-height:1.65;
}

.cmp-mobile-back{display:none}

.cmp-message-head{
    padding-bottom:16px;
    border-bottom:1px solid rgba(15,23,42,.07);
    margin-bottom:18px;
}

.cmp-message-head h2{
    margin:0 0 12px;
    font-size:20px;
    line-height:1.15;
    letter-spacing:-.03em;
    font-weight:900;
    color:var(--cmp-blue);
}

.cmp-message-meta{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.cmp-message-meta span{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:7px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.6);
    border:1px solid rgba(15,23,42,.07);
    color:var(--cmp-muted);
    font-size:12px;
    line-height:1;
}

.cmp-message-body{
    color:#334155;
    font-size:14px;
    line-height:1.8;
}

.cmp-message-body > :first-child{margin-top:0}
.cmp-message-body img{max-width:100%;height:auto;border-radius:14px}
.cmp-message-body a{color:var(--cmp-primary-2);word-break:break-word}
.cmp-message-body ul,.cmp-message-body ol{padding-left:1.3em}