/* Conserva la composición del HTML de referencia. Ajustes institucionales y accesibles. */
:root {
  --green: #076b30;
  --green2: #076b30;
  --brand-reference: #0a8d3f;
  --greenlight: #dceee2;
  --ink: #20362e;
  --muted: #53645b;
  --line: #e1e8e2;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
button, input, textarea { font-family: inherit; }
button:disabled { cursor: wait; opacity: .65; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid #225eae;
  outline-offset: 3px;
}
.skip-link { position: fixed; top: -80px; left: 12px; z-index: 150; padding: 12px; background: white; border: 2px solid var(--green); border-radius: 8px; }
.skip-link:focus { top: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.brand img { width: 43px; height: 48px; object-fit: contain; mix-blend-mode: normal; }
.brand-name b { font-size: 18px; letter-spacing: -.55px; }
.brand-name span { font-size: 9px; letter-spacing: .65px; }
.header { padding-right: 20px; }
.brand-area { flex-basis: 284px; }
.header-actions { flex-shrink: 0; }
.icon-btn, .star-btn { min-width: 44px; min-height: 44px; }
.star-btn { color: #61756a; width: 31px; min-width: 31px; }
.star-btn.starred { color: #8a6700; }
.star-btn.starred svg { fill: #ffdc6c; }
.search-box { min-width: 100px; }
.search-box input::placeholder { color: #53645b; }
.search-box .icon-btn[aria-pressed="true"], .mobile-search .icon-btn[aria-pressed="true"] { background: #cde6d4; color: var(--green); }
.nav-link { min-height: 42px; }
.nav-link.active { color: #076b30; background: #dceee2; }
.compose-main { margin-bottom: 20px; color: #185236; }
.sidebar-foot { color: #53645b; }
.sidebar-exit { margin: 10px 14px; }
.label-0 { background: #4a8065; }
.label-1 { background: #a95d3e; }
.label-2 { background: #947318; }
.label-3 { background: #47729c; }
.drawer-heading { display: none; }
.toolbar-title { font-size: 16px; margin: 0 0 0 8px; line-height: 1.25; }
.toolbar { padding-right: 15px; }
.toolbar .pagecount { padding: 0 2px; color: #53645b; }
.toolbar > [data-action="select-mode"] { display: none; }
.selection-count { font-size: 12px; color: var(--muted); }
.filter-note { font-weight: 400; font-size: 12px; }
.mail-row { grid-template-columns: 27px 31px minmax(0, 1fr); padding: 0 17px; cursor: default; }
.mail-open { display: grid; grid-template-columns: minmax(135px, 200px) minmax(0, 1fr) 76px; align-items: center; gap: 4px; min-width: 0; min-height: 49px; padding: 0 2px; text-align: left; font-size: 13px; }
.mail-open .from, .mail-open .subject { font-weight: inherit; }
.mail-open:focus-visible { outline-offset: -3px; border-radius: 3px; }
.mail-row.selected { background: #deebfa; }
.mail-row .summary, .mail-row .date, .mail-row .snippet { color: #53645b; }
.mail-row .subject { color: var(--ink); font-weight: 550; }
.mail-row.unread .subject, .mail-row.unread .from { font-weight: 750; }
.checkbox { flex-shrink: 0; }
.mail-row .sender-avatar { display: none; }
.avatar-0 { background: #d9e9db; }
.avatar-1 { background: #e4e5f2; }
.avatar-2 { background: #f1e5c9; }
.avatar-3 { background: #deebf6; }
.avatar-4 { background: #e2ecd9; }
.message-title { font-size: 26px; overflow-wrap: anywhere; }
.message-head { align-items: flex-start; }
.message-copy { color: #334a3d; overflow-wrap: anywhere; }
.message-id, .message-id small { color: #53645b; }
.message-date { color: #53645b; line-height: 1.7; }
.message-banner { display: flex; gap: 8px; align-items: flex-start; color: #425f4d; }
.reply-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0 54px; }
.reply-actions .reply { margin: 0; min-height: 44px; }
.attachments { margin: 0 0 24px 55px; }
.attachments h2 { font-size: 13px; font-weight: 650; color: var(--muted); }
.attachment { display: inline-flex; gap: 10px; align-items: center; padding: 14px 18px; border: 1px solid #cbd9cd; border-radius: 12px; background: #fbfdfb; text-align: left; max-width: 100%; }
.attachment:hover { background: #eff6f0; }
.attachment strong, .attachment small { display: block; overflow-wrap: anywhere; }
.attachment strong { font-size: 13px; }
.attachment small { margin-top: 5px; color: var(--muted); font-size: 12px; }
.login-brand img { width: 78px; height: 86px; object-fit: contain; }
.institution-name { font-size: 12px; color: var(--green); font-weight: 700; margin-top: 16px; }
.login-brand h1 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -1.2px; margin-top: 16px; font-size: 34px; }
.login-brand h1 span { color: var(--green); }
.login-brand p { color: #53645b; }
.login-brand .login-domain { font-size: 12px; font-weight: 600; overflow-wrap: anywhere; }
.login-form input[readonly] { background: #f6f9f6; color: #435e4e; }
.login-form .notice { color: #71540a; font-size: 12px; }
.login-form .demo-label { width: fit-content; }
.login-form button { display: flex; align-items: center; justify-content: center; gap: 10px; }
.login-foot { font-size: 11px; line-height: 1.5; color: #53645b; margin: 0; text-align: center; }
.text-button { color: var(--green); text-decoration: underline; padding: 12px; font-size: 13px; }
.compose-window { padding: 0; border: none; margin: 0; inset: auto 75px 0 auto; max-width: none; max-height: 100dvh; }
.compose-window::backdrop { background: rgb(22 44 30 / .16); }
.compose-window > form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.compose-window .icon-btn { flex-shrink: 0; }
.compose-fields label { height: auto; min-height: 44px; }
.compose-fields label:focus-within { box-shadow: 0 2px #225eae; }
.compose-text { width: 100%; flex: 1; }
.compose-text:focus-visible { outline-offset: -4px; }
.compose-fields input[aria-invalid="true"], .compose-text[aria-invalid="true"] { background: #fff1f0; }
.field-error { display: block; font-size: 12px; line-height: 1.4; color: #9b2935; padding: 5px 8px; }
.compose-notice { color: #53645b; font-size: 11px; line-height: 1.45; padding: 0 18px; margin: 8px 0; }
.compose-attachments { list-style: none; padding: 0 18px; margin: 0; max-height: 110px; overflow: auto; }
.compose-attachments li { display: flex; gap: 6px; align-items: center; background: #eef4ef; border-radius: 6px; padding: 4px 8px; margin: 4px 0; font-size: 12px; }
.compose-attachments li > span { overflow-wrap: anywhere; min-width: 0; }
.compose-attachments li > button { margin-left: auto; min-width: 44px; min-height: 44px; }
.loading-line { padding: 5px 20px; font-size: 12px; color: var(--green); background: #eaf5ee; animation: loading-pulse .5s alternate infinite; }
.toast { max-width: min(620px, calc(100vw - 24px)); width: max-content; line-height: 1.5; }
@keyframes loading-pulse { to { opacity: .65; } }
@media (min-width: 681px) { .menu-toggle { display: none; } }
@media (max-width: 1160px) {
  .brand-area { flex-basis: 262px; }
  .sidebar { width: 244px; flex-basis: 244px; }
  .right-rail { width: 50px; }
  .header-actions .login-toggle, .header-actions .desktop-only { display: none; }
  .mail-open { grid-template-columns: minmax(125px, 165px) minmax(0, 1fr) 65px; }
}
@media (max-width: 800px) {
  .brand-area { flex-basis: 251px; }
  .sidebar { width: 207px; flex-basis: 207px; }
  .brand-name b { font-size: 16px; }
  .brand-name span { font-size: 8px; letter-spacing: .45px; }
  .header { gap: 10px; padding-left: 13px; padding-right: 13px; }
  .header-actions .demo-label { font-size: 9px; padding: 6px; }
  .mail-open { grid-template-columns: 1fr 62px; grid-template-rows: 23px 25px; gap: 0 4px; }
  .mail-open .from { grid-column: 1; grid-row: 1; }
  .mail-open .summary { grid-column: 1; grid-row: 2; }
  .mail-open .date { grid-column: 2; grid-row: 1; }
  .mail-row { padding: 0 11px; }
  .cat-tab { min-width: 0; flex: 1; justify-content: center; padding: 0 5px; gap: 5px; font-size: 12px; }
}
@media (max-width: 680px) {
  .header { padding: 0 8px 0 4px; gap: 2px; }
  .brand-area { flex: 1; gap: 0; }
  .brand img { height: 39px; width: 35px; }
  .brand-name b { font-size: 15px; letter-spacing: -.5px; }
  .brand-name span { font-size: 7px; letter-spacing: .4px; }
  .brand { gap: 5px; }
  .header-actions .demo-label { font-size: 8px; padding: 5px; margin-right: 4px; }
  .header-actions > .avatar-btn { width: 34px; height: 34px; }
  .mobile-search { padding-right: 3px; }
  .app-area { height: calc(100dvh - 114px - 62px); }
  .sidebar { width: min(300px, calc(100vw - 25px)); }
  .sidebar:not(.open) { visibility: hidden; }
  .drawer-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 0 10px 15px; }
  .sidebar .nav-link { min-height: 44px; }
  .sidebar .compose-main { margin-bottom: 16px; }
  .toolbar { padding: 0 6px; gap: 1px; }
  .toolbar > [data-action="select-mode"] { display: grid; }
  .toolbar-title { font-size: 15px; margin-left: 3px; }
  .filter-note { font-size: 10px; }
  .toolbar .pagecount { font-size: 10px; }
  .toolbar .selection-count { display: none; }
  .mail-row, .mail-row.unread { grid-template-columns: 42px minmax(0, 1fr) 52px; padding: 10px 12px; gap: 0 8px; min-height: 88px; }
  .mail-open { grid-column: 2 / -1; grid-row: 1 / 4; grid-template-columns: minmax(0, 1fr) 52px; grid-template-rows: 22px 21px 23px; min-height: 66px; padding: 0; }
  .mail-open .from { grid-column: 1; grid-row: 1; font-size: 13px; }
  .mail-open .summary { display: contents; }
  .mail-open .subject { grid-column: 1; grid-row: 2; font-size: 13px; }
  .mail-open .snippet { grid-column: 1; grid-row: 3; font-size: 12px; }
  .mail-open .date { grid-column: 2; grid-row: 1; font-size: 10px; }
  .mail-row .sender-avatar { grid-column: 1; grid-row: 1 / 4; display: grid; width: 38px; height: 38px; font-size: 16px; }
  .mail-row .star-btn { grid-column: 3; grid-row: 2 / 4; align-self: end; min-width: 44px; width: 44px; min-height: 44px; z-index: 1; }
  .selection-mode .row-checkbox { display: block; grid-column: 1; grid-row: 1 / 4; width: 24px; height: 24px; margin: 0 8px; }
  .selection-mode .sender-avatar { display: none; }
  .message-head { gap: 8px; flex-wrap: wrap; }
  .message-head .message-id { flex: 1 1 160px; }
  .message-id small { font-size: 11px; }
  .message-head .message-date { margin-left: 45px; }
  .message-title { font-size: 22px; }
  .message-copy { margin: 25px 2px; }
  .attachments { margin-left: 0; }
  .attachment { width: 100%; }
  .reply-actions { margin-left: 0; gap: 8px; }
  .reply-actions .reply { padding: 9px 12px; font-size: 12px; }
  .compose-window { width: 100%; height: 100dvh; inset: 0; max-height: 100dvh; border-radius: 0; }
  .compose-head { height: 58px; }
  .compose-fields input { font-size: 16px; }
  .compose-text { font-size: 16px; }
  .compose-bottom { padding: 10px 12px max(12px, env(safe-area-inset-bottom)); }
  .compose-notice { font-size: 10px; }
  .toast { bottom: 77px; font-size: 12px; }
  .login-brand img { width: 58px; height: 65px; }
  .login-brand h1 { font-size: 28px; margin-top: 10px; }
  .login-card { max-width: 440px; padding: 22px; gap: 22px; }
  .login-screen { padding: 16px; }
  .login-form input { font-size: 13px; padding: 12px; }
}
@media (max-width: 350px) {
  .header-actions .demo-label { display: none; }
  .brand-name b { font-size: 14px; }
  .cat-tab { font-size: 11px; gap: 4px; }
  .cat-tab svg { width: 14px; height: 14px; }
  .popover { min-width: 0; width: calc(100vw - 20px); right: 10px; }
  .popover p { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}
/* Controles productivos y direcciones extensas. */
.toolbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.message-id { min-width: 0; overflow-wrap: anywhere; }
.login-form input { min-width: 0; }
@media (max-width: 680px) {
  .login-form input { font-size: 16px; }
  .toolbar .icon-btn { flex-shrink: 0; }
  .toolbar .toolbar-spacer { min-width: 0; }
}