:root {
    --blue:#003366;
    --blue-accent:rgb(0, 50, 63);
    --grey:#F4F4F4;
    --text:#1C1C1C;
    --white:#FFFFFF;
    --shadow: 0 2px 8px rgba(0,0,0,.08);
    --bs-link-color: rgb(0, 149, 180);
    --bs-link-hover-color: rgb(0, 149, 180);
    --bs-pagination-active-bg: rgb(0, 149, 180);
    --bs-primary-rgb: 0, 149, 180;
    --bs-link-color-rgb: 0, 149, 180;
}
.pagination {
    --bs-pagination-active-bg: rgb(0, 149, 180);
    --bs-pagination-active-border-color: rgb(0, 149, 180);
}
.btn-primary {
    --bs-btn-hover-bg: rgb(0, 50, 63);
    --bs-btn-hover-border-color: rgb(0, 50, 63);
    --bs-btn-bg: rgb(0, 149, 180);
    --bs-btn-border-color: rgb(0, 149, 180);
}
.btn-secondary {
    --bs-btn-hover-bg: rgb(6, 71, 84);
    --bs-btn-hover-border-color: rgb(6, 71, 84);
    --bs-btn-bg: rgb(0, 50, 63);
    --bs-btn-border-color: rgb(0, 50, 63);
}
.btn-transparent {
    --bs-btn-hover-bg: rgb(0, 50, 63);
    --bs-btn-hover-border-color: rgb(0, 50, 63);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    border-color: #003366;
    padding: 7px 14px;
}
.btn-transparent:hover {
    color: #ffff;
    border-color: #ffff;
}

.bg-blue { 
    background-image: linear-gradient(120deg, rgb(0, 50, 63), rgb(2, 133, 160));
}
.bg-blue-accent { 
    background-color: var(--blue-accent); 
}
.bg-grey { background-color: var(--grey); }
.bg-white { background-color: var(--white); }

.text-blue { color: var(--blue); }
.text-blue-accent { color: var(--blue-accent); }
.text-grey { color: var(--grey); }
.text-white { color: var(--white); }
.text-dark { color: var(--text); }

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6, th, td {
    color: var(--blue) !important;
}

table tr td:first-child {
    color: rgb(0, 149, 180) !important;
}

.menu-wrapper .menu-item {
    text-decoration: none;
}

.menu-wrapper .nav-item a.menu-item {
    color: #fff;
}
.menu-wrapper .nav-item a.menu-item:hover, .menu-wrapper .nav-item a.menu-item.active {
    background: #eaf2ff;
    border-color: #cfe0ff;
    color: #0b2b4f;
}

a.user-control-link {
    text-decoration: none;
    color: inherit;
}

#dashboard-wrapper {
    max-height: 100vh;
    overflow: scroll;
}

#dashboard-header {
    position: sticky;
    top: 0;
    z-index: 1000;
}

.response-wrapper {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.response-wrapper > .response {
    width: 90%;
}

.response-wrapper.user {
    align-items: start;
}

.response-wrapper.user > .response,
.response-wrapper.user > .comment-detail {
    background-color: var(--bs-dark-bg-subtle);
}

.response-wrapper.user > .response {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

.response-wrapper.admin {
    align-items: end;
}

.response-wrapper.admin > .response,
.response-wrapper.admin > .comment-detail {
    background-color: var(--blue);
}

.response-wrapper.admin > .response {
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-left-radius: var(--bs-border-radius);
    color: white;
}

.comment-detail {
    display: block;
    height: 30px;
    width: 30px;
    transform: translateY(-50%) translateX(50%) rotate(45deg);
}

.response-wrapper.user .comment-detail {
    transform: translateY(-50%) translateX(-50%) rotate(45deg);
}

.response-wrapper.admin.comment > .response {
    background-color: var(--bs-secondary-bg-subtle);
    color: var(--bs-dark-text-emphasis);
    border-bottom-right-radius: var(--bs-border-radius);
}

.response-wrapper.admin.comment > .comment-detail {
    opacity: 0;
}

.response-wrapper.admin.comment > .response {
    width: 70%;
}

.client-option:hover {
    background-color: var(--bs-secondary);
    color: white;
    cursor: pointer;
}

.user-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: black;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media screen and (min-width: 768px) {
    .user-container {
        flex-direction: column;
    }
}
/* =====================================================================
   EBC Portal Modern UI · v1
   Capa visual compatible con la aplicación PHP existente.
   ===================================================================== */
:root {
    --portal-navy-950: #071827;
    --portal-navy-900: #0b2236;
    --portal-navy-800: #10324d;
    --portal-brand: #0095b4;
    --portal-brand-dark: #007b96;
    --portal-brand-soft: #e6f7fa;
    --portal-bg: #f5f7fa;
    --portal-surface: #ffffff;
    --portal-surface-alt: #f8fafc;
    --portal-border: #e4eaf0;
    --portal-ink: #152536;
    --portal-muted: #66788a;
    --portal-faint: #93a2b1;
    --portal-green: #18885f;
    --portal-green-soft: #e8f7f0;
    --portal-amber: #a86b10;
    --portal-amber-soft: #fff4df;
    --portal-red: #bf3d45;
    --portal-red-soft: #fdecee;
    --portal-purple: #7457b7;
    --portal-purple-soft: #f0ebfb;
    --portal-shadow-sm: 0 1px 3px rgba(14, 34, 52, .06), 0 8px 24px rgba(14, 34, 52, .04);
    --portal-shadow-md: 0 10px 35px rgba(14, 34, 52, .10);
    --portal-radius: 14px;
}

html, body { background: var(--portal-bg); }
body {
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: var(--portal-ink);
}
body, button, input, select, textarea { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { color: var(--portal-ink) !important; letter-spacing: -.02em; }
a { transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease; }

/* Layout */
#dashboard-wrapper {
    background: var(--portal-bg) !important;
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 0;
}
#dashboard-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    margin: 0 !important;
    min-height: 68px;
    padding: 12px 24px !important;
    background: rgba(255,255,255,.96) !important;
    border-bottom: 1px solid var(--portal-border);
    box-shadow: 0 3px 16px rgba(12, 31, 48, .04) !important;
    backdrop-filter: blur(10px);
}
.portal-content { padding: 28px 30px 52px; max-width: 1540px; margin: 0 auto; }
.portal-breadcrumb { color: var(--portal-muted); font-size: 13px; font-weight: 600; }

/* Sidebar */
#dashboard-sidebar {
    background: linear-gradient(180deg, var(--portal-navy-950) 0%, var(--portal-navy-900) 58%, #0c2a42 100%) !important;
    min-height: 100vh;
    padding: 22px 15px !important;
    border-right: 1px solid rgba(255,255,255,.04);
}
#dashboard-sidebar .title-wrapper { padding: 4px 8px 18px !important; margin: 0 0 12px !important; border-bottom: 1px solid rgba(255,255,255,.09); }
#dashboard-sidebar .title-wrapper img { width: 176px; max-width: 100% !important; }
.portal-sidebar-caption { color: #8ca8bd; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; margin: 12px 5px 0; }
.menu-wrapper .nav-item { margin-top: 5px !important; }
.menu-wrapper .nav-item a.menu-item {
    display: flex !important;
    align-items: center;
    gap: 2px;
    color: #b8c9d7;
    border: 1px solid transparent;
    border-radius: 9px !important;
    padding: 10px 11px !important;
    font-size: 13.5px;
    font-weight: 600;
}
.menu-wrapper .nav-item a.menu-item i { width: 22px; text-align: center; color: #8eb0c5; }
.menu-wrapper .nav-item a.menu-item:hover { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.04); }
.menu-wrapper .nav-item a.menu-item:hover i { color: #fff; }
.menu-wrapper .nav-item a.menu-item.active {
    color: #fff;
    background: linear-gradient(90deg, rgba(0,149,180,.26), rgba(0,149,180,.11));
    border-color: rgba(93,213,234,.14);
    box-shadow: inset 3px 0 0 var(--portal-brand);
}
.menu-wrapper .nav-item a.menu-item.active i { color: #6bd5e8; }
.menu-wrapper .nav .nav { margin-top: 4px; }
.menu-wrapper .nav .nav a.menu-item { font-size: 12.5px; padding: 7px 10px !important; color: #8fa8ba; }

/* Topbar user */
.portal-user { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.portal-user__avatar { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--portal-brand); background: var(--portal-brand-soft); font-size: 16px; }
.portal-user__meta { min-width: 0; text-align: left; line-height: 1.2; }
.portal-user__name { display: block; color: var(--portal-ink); font-size: 13px; font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-user__role { display: block; color: var(--portal-muted); font-size: 11px; margin-top: 2px; }
.portal-user__logout { color: var(--portal-faint); font-size: 12px; text-decoration: none; }
.portal-user__logout:hover { color: var(--portal-red); }

/* Global components */
.card, .table-responsive, .alert, .form-control, .form-select { border-color: var(--portal-border); }
.card { border-radius: var(--portal-radius); box-shadow: var(--portal-shadow-sm); }
.form-control, .form-select { border-radius: 9px; min-height: 42px; background-color: var(--portal-surface-alt); color: var(--portal-ink); }
.form-control:focus, .form-select:focus { background: #fff; border-color: rgba(0,149,180,.55); box-shadow: 0 0 0 .2rem rgba(0,149,180,.10); }
.form-floating > label { color: var(--portal-muted); }
.btn { border-radius: 8px; font-weight: 650; font-size: 13px; padding: 8px 13px; }
.btn-sm { padding: 6px 10px; font-size: 12px; }
.btn-primary { --bs-btn-bg: var(--portal-brand); --bs-btn-border-color: var(--portal-brand); --bs-btn-hover-bg: var(--portal-brand-dark); --bs-btn-hover-border-color: var(--portal-brand-dark); }
.btn-secondary { --bs-btn-bg: var(--portal-navy-800); --bs-btn-border-color: var(--portal-navy-800); --bs-btn-hover-bg: var(--portal-navy-950); --bs-btn-hover-border-color: var(--portal-navy-950); }
.btn-transparent { color: var(--portal-brand); border: 1px solid transparent; }
.btn-transparent:hover { color: var(--portal-brand-dark); background: var(--portal-brand-soft); border-color: transparent; }

/* Existing tables modernized */
.table-responsive { background: #fff; border: 1px solid var(--portal-border); border-radius: 12px; box-shadow: var(--portal-shadow-sm); }
.table { margin-bottom: 0; --bs-table-striped-bg: #fbfcfd; --bs-table-hover-bg: #f4f9fb; }
.table thead th { background: #f7f9fb !important; color: var(--portal-muted) !important; border-bottom: 1px solid var(--portal-border); font-size: 11.5px; text-transform: uppercase; letter-spacing: .045em; font-weight: 750; padding: 13px 14px; white-space: nowrap; }
.table tbody td { color: var(--portal-ink) !important; border-color: #edf1f4; padding: 13px 14px; vertical-align: middle; font-size: 13px; }
table tr td:first-child { color: var(--portal-brand) !important; font-weight: 650; }
.table a { text-decoration: none; }
.pagination { --bs-pagination-color: var(--portal-muted); --bs-pagination-hover-color: var(--portal-brand); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(0,149,180,.1); }
.page-link { border-color: var(--portal-border); }

/* Dashboard */
.portal-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.portal-page-head h1 { font-size: 25px; font-weight: 760; margin: 0; }
.portal-page-head p { color: var(--portal-muted); margin: 6px 0 0; font-size: 13.5px; }
.portal-kicker { color: var(--portal-brand); text-transform: uppercase; letter-spacing: .10em; font-size: 10.5px; font-weight: 800; margin-bottom: 7px; }

.portal-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px; }
.portal-stat {
    --stat-accent: var(--portal-brand);
    --stat-soft: var(--portal-brand-soft);
    position: relative;
    overflow: hidden;
    min-height: 132px;
    padding: 17px 18px;
    background: var(--portal-surface);
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow-sm);
    text-decoration: none;
    color: inherit;
}
.portal-stat::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--stat-accent); }
.portal-stat:hover { color: inherit; transform: translateY(-1px); box-shadow: var(--portal-shadow-md); }
.portal-stat__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.portal-stat__label { color: var(--portal-muted); text-transform: uppercase; letter-spacing: .045em; font-size: 11px; font-weight: 750; }
.portal-stat__icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--stat-soft); color: var(--stat-accent); font-size: 13px; }
.portal-stat__value { margin-top: 14px; color: var(--portal-ink); font-size: 28px; line-height: 1; font-weight: 760; letter-spacing: -.025em; }
.portal-stat__sub { margin-top: 7px; color: var(--portal-faint); font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.portal-action-banner { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 20px; padding: 19px 21px; border-radius: var(--portal-radius); background: linear-gradient(115deg, var(--portal-navy-950), var(--portal-navy-800)); color: #fff; box-shadow: var(--portal-shadow-sm); }
.portal-action-banner h2 { color: #fff !important; font-size: 16px; margin: 0 0 5px; font-weight: 720; }
.portal-action-banner p { color: #b9cad7; font-size: 12.5px; margin: 0; max-width: 690px; }
.portal-action-banner .btn { flex-shrink: 0; }

.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.portal-panel { background: var(--portal-surface); border: 1px solid var(--portal-border); border-radius: var(--portal-radius); box-shadow: var(--portal-shadow-sm); overflow: hidden; }
.portal-panel--wide { grid-column: 1 / -1; }
.portal-panel__head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 17px; border-bottom: 1px solid var(--portal-border); }
.portal-panel__head h2 { font-size: 14px; margin: 0; font-weight: 750; }
.portal-panel__link { color: var(--portal-muted); font-size: 11.5px; font-weight: 650; text-decoration: none; }
.portal-panel__link:hover { color: var(--portal-brand); }
.portal-panel__body { padding: 4px 0; }
.portal-empty { padding: 28px 18px; color: var(--portal-muted); text-align: center; font-size: 13px; }
.portal-row { display: flex; align-items: center; gap: 12px; min-height: 62px; padding: 10px 17px; border-bottom: 1px solid #edf1f4; text-decoration: none; color: inherit; }
.portal-row:last-child { border-bottom: 0; }
.portal-row:hover { color: inherit; background: #fafcfd; }
.portal-row__icon { width: 34px; height: 34px; flex: 0 0 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--portal-brand-soft); color: var(--portal-brand); font-size: 13px; }
.portal-row__main { min-width: 0; flex: 1; }
.portal-row__title { color: var(--portal-ink); font-size: 12.8px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-row__meta { color: var(--portal-muted); font-size: 11.5px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-row__aside { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.portal-row__amount { color: var(--portal-ink); font-size: 12.5px; font-weight: 700; white-space: nowrap; }

.portal-status { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 750; text-transform: none; white-space: nowrap; background: #eef2f5; color: #607080; }
.portal-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.portal-status--available, .portal-status--closed { background: var(--portal-green-soft); color: var(--portal-green); }
.portal-status--open { background: var(--portal-amber-soft); color: var(--portal-amber); }
.portal-status--pending_response { background: var(--portal-purple-soft); color: var(--portal-purple); }

.portal-quick-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; padding: 14px 16px 16px; }
.portal-quick-action { display: flex; align-items: center; gap: 10px; min-height: 55px; padding: 10px 12px; border: 1px solid var(--portal-border); border-radius: 10px; text-decoration: none; color: var(--portal-ink); background: var(--portal-surface-alt); font-size: 12px; font-weight: 700; }
.portal-quick-action:hover { color: var(--portal-brand-dark); border-color: rgba(0,149,180,.30); background: var(--portal-brand-soft); }
.portal-quick-action i { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; color: var(--portal-brand); background: #fff; border-radius: 8px; box-shadow: 0 1px 3px rgba(14,34,52,.06); }

/* Mobile / tablet */
.offcanvas.bg-blue { background: var(--portal-navy-950) !important; }
.offcanvas #dashboard-sidebar { min-height: auto; padding: 0 !important; border: 0; background: transparent !important; }
@media (max-width: 1199.98px) { .portal-stats { grid-template-columns: repeat(2, minmax(0,1fr)); } .portal-quick-actions { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 767.98px) {
    #dashboard-header { min-height: 60px; padding: 9px 14px !important; }
    .portal-content { padding: 20px 14px 40px; }
    .portal-page-head { margin-bottom: 16px; }
    .portal-page-head h1 { font-size: 21px; }
    .portal-stats { gap: 10px; }
    .portal-stat { min-height: 120px; padding: 15px; }
    .portal-stat__value { font-size: 24px; }
    .portal-grid { grid-template-columns: 1fr; gap: 12px; }
    .portal-panel--wide { grid-column: auto; }
    .portal-action-banner { align-items: flex-start; flex-direction: column; padding: 18px; }
    .portal-action-banner .btn { width: 100%; }
    .portal-user__meta, .portal-user__logout { display: none; }
}
@media (max-width: 479.98px) {
    .portal-stats { grid-template-columns: 1fr; }
    .portal-quick-actions { grid-template-columns: 1fr; }
    .portal-row__amount { display: none; }
}

/* Authentication */
.portal-auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(360px, 44%) 1fr; background: var(--portal-bg); }
.portal-auth-brand { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; padding: 52px clamp(30px, 5vw, 78px) 28px; color: #fff; background: radial-gradient(circle at 18% 14%, rgba(0,149,180,.36), transparent 36%), linear-gradient(145deg, var(--portal-navy-950), #0c3651); overflow: hidden; }
.portal-auth-brand::after { content:""; position:absolute; width:380px; height:380px; right:-150px; bottom:-120px; border:1px solid rgba(255,255,255,.09); border-radius:50%; box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.018); }
.portal-auth-brand__content { position: relative; z-index: 1; max-width: 540px; margin: auto 0; }
.portal-auth-brand__logo { width: 190px; max-width: 55%; margin-bottom: 48px; }
.portal-auth-brand__eyebrow { color: #74d9e9; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; font-weight: 800; margin-bottom: 12px; }
.portal-auth-brand h1 { color: #fff !important; font-size: clamp(31px, 4vw, 50px); line-height: 1.08; font-weight: 760; max-width: 650px; margin-bottom: 18px; }
.portal-auth-brand p { color: #b9cad7; max-width: 520px; line-height: 1.7; font-size: 14px; }
.portal-auth-brand__features { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.portal-auth-brand__features span { display: inline-flex; align-items:center; gap:8px; padding:8px 11px; border:1px solid rgba(255,255,255,.12); border-radius:999px; background:rgba(255,255,255,.05); color:#dce7ef; font-size:12px; font-weight:650; }
.portal-auth-brand__features i { color:#6bd5e8; }
.portal-auth-brand__footer { position: relative; z-index:1; color:#819cad; font-size:11px; }
.portal-auth-main { display:flex; align-items:center; justify-content:center; padding:32px; }
.portal-auth-card { width:min(100%, 520px); background:#fff; border:1px solid var(--portal-border); border-radius:18px; box-shadow:0 18px 60px rgba(14,34,52,.10); padding:36px; }
.portal-auth-card form, .portal-auth-card > .row > div { width:100% !important; max-width:none !important; flex:0 0 100% !important; }
.portal-auth-card img { max-width:190px !important; margin-bottom:28px !important; }
.portal-auth-card .btn-lg { font-size:13px; padding:10px 16px; }
.portal-auth-card .d-flex.justify-content-between { align-items:center; gap:16px; }
@media (max-width: 899.98px) { .portal-auth-shell { grid-template-columns:1fr; } .portal-auth-brand { min-height:auto; padding:24px 24px 26px; } .portal-auth-brand__content { margin:0; max-width:none; } .portal-auth-brand__logo { width:155px; margin-bottom:22px; } .portal-auth-brand h1 { font-size:27px; max-width:600px; } .portal-auth-brand p { margin-bottom:0; } .portal-auth-brand__features, .portal-auth-brand__footer { display:none; } .portal-auth-main { padding:24px 14px 36px; } .portal-auth-card { padding:26px 20px; } }

/* Interior pages */
#dashboard-wrapper > .container-fluid { padding: 26px 30px 48px; max-width: 1540px; margin: 0 auto; }
#dashboard-wrapper > .container-fluid > .row.mb-3 { align-items: center; margin-bottom: 18px !important; }
#dashboard-wrapper > .container-fluid > .row.mb-3 h3 { font-size: 21px; font-weight: 760; margin: 0; }
#dashboard-wrapper .alert { border-radius: 10px; box-shadow: var(--portal-shadow-sm); }
@media (max-width: 767.98px) { #dashboard-wrapper > .container-fluid { padding: 20px 14px 40px; } }

/* Document workflow backend v2 */
.portal-status--received { background: #eef3f7; color: #5f7181; }
.portal-status--processing { background: var(--portal-amber-soft); color: var(--portal-amber); }
.portal-status--review { background: var(--portal-purple-soft); color: var(--portal-purple); }
.portal-status--published { background: var(--portal-green-soft); color: var(--portal-green); }
.portal-status--incident { background: var(--portal-red-soft); color: var(--portal-red); }

.portal-stats--workflow { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.workflow-overdue > td { background: rgba(191, 61, 69, .045) !important; }
.workflow-overdue > td:first-child { box-shadow: inset 3px 0 0 var(--portal-red); }
.workflow-bulk-bar { background: #fbfcfd; }
.workflow-table .portal-status { font-size: 10px; }

.workflow-dashboard-strip {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
}
.workflow-dashboard-strip__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 64px;
    padding: 14px 18px;
    border-right: 1px solid var(--portal-border);
}
.workflow-dashboard-strip__item:last-child { border-right: 0; }
.workflow-dashboard-strip__item strong { font-size: 20px; color: var(--portal-ink); }

.workflow-document-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    background: #fff;
    border: 1px solid var(--portal-border);
    border-radius: var(--portal-radius);
    box-shadow: var(--portal-shadow-sm);
}
.workflow-document-summary h2 { margin: 0; font-size: 20px; font-weight: 760; }
.workflow-document-summary__meta { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 8px; color: var(--portal-muted); font-size: 12px; }
.workflow-document-summary__actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

.workflow-timeline { padding: 8px 20px 18px; }
.workflow-timeline__item { position: relative; display: flex; gap: 14px; padding: 16px 0 16px 4px; }
.workflow-timeline__item:not(:last-child)::before { content: ''; position: absolute; left: 9px; top: 33px; bottom: -2px; width: 1px; background: var(--portal-border); }
.workflow-timeline__dot { position: relative; z-index: 1; width: 12px; height: 12px; flex: 0 0 12px; margin-top: 5px; border-radius: 50%; background: var(--portal-brand); box-shadow: 0 0 0 4px var(--portal-brand-soft); }
.workflow-timeline__content { min-width: 0; flex: 1; font-size: 12.5px; }
.workflow-timeline__note { padding: 9px 11px; background: var(--portal-surface-alt); border: 1px solid var(--portal-border); border-radius: 8px; color: var(--portal-muted); line-height: 1.5; }

.workflow-setup-state { display: flex; align-items: flex-start; gap: 14px; padding: 16px; border-radius: 12px; }
.workflow-setup-state > i { margin-top: 2px; font-size: 22px; }
.workflow-setup-state strong { display: block; margin-bottom: 4px; }
.workflow-setup-state p { color: var(--portal-muted); font-size: 13px; }
.workflow-setup-state--ok { background: var(--portal-green-soft); color: var(--portal-green); }
.workflow-setup-state--warning { background: var(--portal-amber-soft); color: var(--portal-amber); }
.workflow-setup-state--ok p, .workflow-setup-state--warning p { color: inherit; opacity: .84; }

@media (max-width: 991.98px) {
    .workflow-dashboard-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .workflow-dashboard-strip__item { border-bottom: 1px solid var(--portal-border); }
    .workflow-document-summary { align-items: flex-start; flex-direction: column; }
    .workflow-document-summary__actions { justify-content: flex-start; }
}
@media (max-width: 575.98px) {
    .workflow-dashboard-strip { grid-template-columns: 1fr; }
    .workflow-dashboard-strip__item { border-right: 0; }
}

/* ===== Portal V3 ===== */
.portal-plant-switch{max-width:280px;margin:0 auto}.portal-plant-switch .form-select{border-radius:10px;border-color:#dbe3ec;font-weight:600;background-color:#fff}
.portal-stat__value--money{font-size:clamp(1.35rem,2vw,2rem)!important}.v3-dropzone{display:flex;min-height:190px;border:2px dashed #b9c8d8;border-radius:16px;background:#f8fbfd;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:28px;cursor:pointer;transition:.2s ease}.v3-dropzone:hover{border-color:var(--portal-brand,#006b83);background:#f2f9fb}.v3-dropzone input{position:absolute;opacity:0;pointer-events:none}.v3-dropzone span{display:block;color:#6c7784;margin-top:5px}.v3-check-list{border:1px solid #e2e8ef;border-radius:12px;max-height:360px;overflow:auto}.v3-check-row{display:flex;gap:12px;align-items:center;padding:12px 14px;border-bottom:1px solid #edf1f5;cursor:pointer}.v3-check-row:last-child{border-bottom:0}.v3-check-row:hover{background:#f8fafc}.v3-check-row span{display:flex;flex-direction:column}.v3-check-row small{color:#75808b}.v3-message{padding:14px 16px;border-radius:14px;margin-bottom:12px;max-width:90%}.v3-message-client{background:#f1f5f8;margin-right:auto}.v3-message-staff{background:#eaf7fa;margin-left:auto}.v3-message-head{display:flex;gap:12px;justify-content:space-between;font-size:.85rem;margin-bottom:6px}.v3-message-head span{color:#7b8792}.portal-card{border:1px solid #e4eaf0!important;box-shadow:0 6px 24px rgba(20,45,70,.05)!important;border-radius:16px!important}
@media(max-width:767px){.portal-plant-switch{max-width:100%}.portal-plant-switch .form-select{font-size:.78rem}.v3-message{max-width:100%}}

/* V3.1 · gestión simplificada */
.v31-check-card{display:flex;align-items:flex-start;gap:.35rem;border:1px solid #dfe7ee;border-radius:12px;padding:.8rem .9rem;background:#fff;cursor:pointer;height:100%;transition:.15s ease}
.v31-check-card:hover{border-color:#66bfd3;box-shadow:0 4px 12px rgba(17,52,75,.06)}
.v31-check-card input{margin-top:.18rem}.v31-check-card span{display:flex;flex-direction:column;min-width:0}.v31-check-card small{color:#6c7d8b;margin-top:.12rem}.v31-table thead th{white-space:nowrap;background:#f7f9fb;color:#617487;font-size:.76rem;text-transform:uppercase;letter-spacing:.025em}.v31-table td{padding-top:.85rem;padding-bottom:.85rem}.v31-ellipsis{max-width:420px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* =====================================================================
   Portal V3.2.0 · ajustes de usabilidad
   ===================================================================== */
body > main-content { width: 100%; }
#dashboard-sidebar { padding: 24px 18px !important; }
.menu-wrapper .nav-item { margin-top: 7px !important; }
.menu-wrapper .nav-item a.menu-item {
    gap: 8px;
    padding: 13px 14px !important;
    font-size: 15.5px;
    line-height: 1.25;
    border-radius: 10px !important;
}
.menu-wrapper .nav-item a.menu-item i { width: 24px; font-size: 16px; }
#dashboard-sidebar .title-wrapper img { width: 190px; }
.portal-sidebar-caption { font-size: 12px; }
.portal-plant-switch .form-select { min-height: 44px; font-weight: 650; background-color: #fff; }

.v32-dropzone { min-height: 300px; justify-content: center; font-size: 16px; border-width: 2px; }
.v32-dropzone strong { font-size: 21px; }
.v32-dropzone.is-dragging { border-color: var(--portal-brand); background: var(--portal-brand-soft); transform: translateY(-1px); }
.v32-file-list { max-width: 900px; margin-inline: auto; }
.portal-stats--compact { grid-template-columns: repeat(4,minmax(0,1fr)); }
.portal-stats--compact .portal-stat { min-height: 110px; }

.v32-society-card { border: 1px solid var(--portal-border); border-radius: 12px; padding: 14px 16px; background: var(--portal-surface-alt); display:flex; justify-content:space-between; align-items:center; gap:12px; }
.v32-society-card span { color:var(--portal-muted); font-size:13px; }
.v32-fiscal-list { display:grid; gap:14px; }
.v32-fiscal-card { border:1px solid var(--portal-border); background:var(--portal-surface-alt); border-radius:12px; padding:16px; }
.v32-fiscal-grid { display:grid; grid-template-columns:140px 1fr; gap:7px 12px; margin-bottom:0; font-size:13px; }
.v32-fiscal-grid dt { color:var(--portal-muted); font-weight:600; }
.v32-fiscal-grid dd { margin:0; font-weight:600; color:var(--portal-ink); }
.v32-legal-inline { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; color:var(--portal-faint); font-size:12px; }
.v32-legal-inline a, .v32-dashboard-legal a { color:var(--portal-muted); text-decoration:none; }
.v32-legal-inline a:hover, .v32-dashboard-legal a:hover { color:var(--portal-brand); }
.v32-dashboard-legal { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; font-size:11px; color:var(--portal-faint); }
.v32-public-footer { background:#fff; border-top:1px solid var(--portal-border); color:var(--portal-muted); }
.v32-society-permission { border-left:3px solid var(--portal-brand-soft); padding-left:12px; }

@media (max-width: 991.98px) {
    .portal-stats--compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 575.98px) {
    .portal-stats--compact { grid-template-columns:1fr; }
    .v32-fiscal-grid { grid-template-columns:1fr; gap:2px; }
    .v32-fiscal-grid dd { margin-bottom:7px; }
}

/* V3.2 · sidebar sin franjas laterales */
html, body { margin: 0 !important; padding: 0 !important; }
body > main-content { margin: 0 !important; padding: 0 !important; min-width: 100%; }
.portal-sidebar-col { background: linear-gradient(180deg, var(--portal-navy-950) 0%, var(--portal-navy-900) 58%, #0c2a42 100%); }
.portal-sidebar-col > .row { margin-left: 0 !important; margin-right: 0 !important; }