:root {
  /* One visual language for every screen (redesign D, 22/10/2026): white cards on a grey ground, Segoe UI, a
     configurable blue accent and green/orange/grey status dots. Screens use these tokens, never fixed colours. */
  color-scheme: light;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  color: #161a22;
  background: #f4f5f7;
  font-synthesis: none;
  --accent: #2f6fde;
  --bg: #f4f5f7;
  --rail: #ffffff;
  --panel: #ffffff;
  --panel-strong: #f1f3f7;
  --panel-soft: #f8f9fb;
  --line: #e1e5ec;
  --line-soft: #eef1f5;
  --line-strong: #d7dce5;
  --text: #161a22;
  --soft: #38404d;
  --muted: #6b7585;
  --blue: var(--accent);
  --blue-strong: #163d8c;
  --blue-wash: #eaf0fb;
  --blue-line: #b9cdf3;
  --link: #2358c4;
  --action-ink: #ffffff;
  --amber: #b4590e;
  --amber-dot: #d9823b;
  --amber-wash: #fdf1e5;
  --amber-line: #f0cfae;
  --danger: #b8382b;
  --danger-dot: #e36b5b;
  --danger-wash: #fcecea;
  --danger-line: #f2c2bc;
  --ok: #2a9d6a;
  --ok-wash: #e7f5ee;
  --ok-line: #b5dfca;
  --idle: #9aa5b8;
  --active-line: var(--blue-line);
  --scrim: #161a2259;
  --shadow: #161a221f;
  --focus: #2f6fde66;
  --radius: 12px;
  --radius-sm: 9px;
  --rail-width: 17rem;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { min-height: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg); }
button, textarea, input, select { font: inherit; }
button, input, textarea, select { color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
.icon-library { position: fixed; width: 0; height: 0; overflow: hidden; }
.shell-icon { width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.app-shell { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
/* PC: one bar on top with Hoy, the agenda, the work screens, the search, the state and the administration. */
.app-rail { position: sticky; top: 0; z-index: 9; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; padding: 12px 28px; border-bottom: 1px solid var(--line); background: var(--rail); }
.brand, .mobile-brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand { margin-right: 8px; }
.brand-mark { display: block; width: 28px; height: 28px; flex: 0 0 auto; border-radius: 8px; background: var(--accent); }
.brand-mark span { display: none; }
.brand strong { font-size: 15px; letter-spacing: -.01em; }
.brand small { margin-left: 10px; max-width: 12rem; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.primary-nav { min-width: 0; display: flex; flex: 0 1 auto; flex-wrap: wrap; align-items: center; gap: 2px; }
.rail-destinations { display: contents; }
.rail-separator { align-self: stretch; width: 1px; margin: 6px 8px; background: var(--line); }
.rail-destination { min-height: 2.4rem; display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: var(--radius-sm); padding: 9px 13px; color: var(--soft); background: transparent; white-space: nowrap; }
.rail-destination:hover { color: var(--text); background: var(--panel-soft); }
.rail-destination[aria-current="page"] { color: var(--blue-strong); background: var(--blue-wash); font-weight: 600; }
.destination-attention-count { margin-left: 4px; color: var(--amber); font-size: 11px; font-weight: 600; }
#nav-operations .destination-attention-count { border-radius: 999px; padding: 1px 7px; color: var(--action-ink); background: var(--accent); }
.service-state { min-width: 0; display: flex; align-items: center; gap: 7px; color: var(--soft); font-size: 13px; }
.service-state span { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--idle); }
.service-state.ready span { background: var(--ok); }
.status-button { min-height: 2.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--panel); }
.status-button:hover { border-color: var(--blue-line); background: var(--blue-wash); }
.status-button strong { font-weight: 400; }
.service-state.attention span { background: var(--amber-dot); }
.service-state.error { color: var(--danger); }
.service-state.error span { background: var(--danger-dot); }
.service-state strong { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.app-stage { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.topbar { display: none; }
.mobile-brand { display: none; }
.view-identity { min-width: 7rem; display: grid; gap: .08rem; }
.view-identity span { color: var(--muted); font-size: 12px; }
.view-identity strong { font-size: 20px; font-weight: 700; }
.command-button { min-width: 240px; margin-left: auto; min-height: 2.4rem; display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; color: var(--muted); background: var(--panel-soft); text-align: left; }
.command-button > span { flex: 1; }
.command-button:hover { border-color: var(--line-strong); color: var(--text); }
kbd { padding: .18rem .42rem; border: 1px solid var(--line-strong); border-radius: .35rem; color: var(--muted); background: var(--panel-soft); font: inherit; font-size: .68rem; }
.icon-button { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--muted); background: transparent; }
.icon-button:hover { border-color: var(--line); color: var(--text); background: var(--panel); }
.login-view { grid-column: 1 / -1; min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 1.25rem; background: var(--bg); }
/* Sign-in and the access screens follow the cards of the D tables (22/10/2026): a white card, the accent mark. */
.login-card { width: min(32rem, 100%); padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.login-symbol, .empty-mark { position: relative; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 50%; }
.login-symbol { width: 36px; height: 36px; margin-bottom: 18px; border: 0; border-radius: 10px; background: var(--accent); }
.login-symbol::before, .login-symbol::after, .login-symbol span { display: none; }
.login-symbol::before, .login-symbol::after, .login-symbol span, .empty-mark::before, .empty-mark::after, .empty-mark span { content: ""; position: absolute; border-radius: 50%; }
.login-symbol::before, .empty-mark::before { width: 1.25rem; height: 1.25rem; border: 1px solid var(--blue); }
.login-symbol::after, .empty-mark::after { width: .35rem; height: .35rem; background: var(--blue); }
.login-symbol span, .empty-mark span { width: 2rem; height: 1px; background: var(--line-strong); transform: rotate(-38deg); }
.login-card h1 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
.lead { max-width: 41rem; margin: 10px 0 18px; color: var(--soft); font-size: 14px; line-height: 1.55; }
code { padding: .15rem .4rem; border: 1px solid var(--line-strong); border-radius: .35rem; color: var(--blue-strong); background: var(--panel-soft); }
.login-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-bottom: 1.3rem; }
.login-steps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line-soft); }
.login-steps li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); align-items: start; gap: .75rem; padding: .85rem 0; border-bottom: 1px solid var(--line-soft); }
.login-steps li > span { width: 1.65rem; height: 1.65rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--blue-strong); font-size: .75rem; }
.login-steps p, .login-alternative, .notice { margin: 0; color: var(--muted); line-height: 1.5; }
.login-alternative { margin-top: 1.2rem; }
.notice { margin-top: .8rem; font-size: .82rem; }
.notice.error, .screen-sub.error, .email-notice.error { color: var(--danger); }
.operations-view, .email-view, .administration-view, .workspace-view { flex: 1; min-height: 0; overflow-y: auto; }
/* Every button of every screen looks like the D tables' (22/10/2026): the accent for the main action, white for the rest. */
.icon-text-button, .secondary-button, .primary-button { min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 7px 12px; font-size: 13px; text-decoration: none; }
/* En un teléfono o con el dedo, un botón sigue siendo un objetivo táctil de 44 px (login a 390 px, 22/10/2026); la altura D es la del PC. */
.icon-text-button, .secondary-button { color: var(--text); background: var(--panel); }
.primary-button { border-color: var(--accent); color: var(--action-ink); background: var(--accent); font-weight: 600; }
.document-next-step { margin: 1rem 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--soft); background: var(--panel-soft); line-height: 1.45; }
.icon-text-button:hover, .secondary-button:hover { border-color: var(--blue-line); background: var(--blue-wash); }
.primary-button:hover { background: var(--blue-strong); }
.icon-text-button:disabled, .secondary-button:disabled, .primary-button:disabled { cursor: wait; opacity: .5; }
.quiet-button { min-height: 2.25rem; border: 0; padding: 7px 10px; color: var(--link); background: transparent; font-size: 13px; }
.quiet-button:hover { color: var(--text); }
.operations-toolbar { display: flex; align-items: center; gap: .4rem; }
.operations-toolbar button, .email-filters button { min-height: 2.25rem; border: 1px solid var(--line-soft); border-radius: 999px; padding: .4rem .75rem; color: var(--muted); background: var(--panel-soft); }
.operations-toolbar button[aria-pressed="true"], .email-filters button[aria-pressed="true"] { border-color: var(--blue-line); color: var(--blue-strong); background: var(--blue-wash); }
.operations-toolbar > span { margin: 0 .3rem; color: var(--muted); font-size: 12px; }
.row-copy { min-width: 0; }
.operations-ask { display: flex; gap: 8px; }
.operations-ask input { flex: 1; min-width: 0; min-height: 2.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 9px 11px; background: var(--panel-soft); font-size: 13px; }
.operations-ask-voice { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); color: var(--action-ink); background: var(--accent); }
.email-notice { min-height: 1.2rem; margin: .6rem 0 1.3rem; color: var(--muted); font-size: .82rem; }
.email-badge { display: inline-block; width: fit-content; border: 1px solid var(--line); border-radius: 999px; padding: .18rem .5rem; color: var(--soft); background: var(--panel-strong); font-size: .68rem; }
.role-attention .email-badge { border-color: var(--amber-line); color: var(--amber); background: var(--amber-wash); }
.email-heading { margin-bottom: 1.1rem; }
.email-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 24rem); align-items: center; gap: .8rem 1rem; margin-bottom: 1rem; }
.email-filters { display: flex; flex-wrap: wrap; gap: .4rem; }
.email-filters span { display: inline-block; min-width: 1.1rem; margin-left: .2rem; padding: .04rem .25rem; border-radius: 999px; color: inherit; background: var(--line-soft); font-size: .68rem; }
.email-search-label, .workspace-search { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .7rem; color: var(--muted); background: var(--panel-soft); }
.email-search-label:focus-within, .workspace-search:focus-within { border-color: var(--blue); box-shadow: 0 .65rem 1.5rem var(--shadow); }
.email-search-label input, .workspace-search input { min-width: 0; border: 0; outline: 0; color: var(--text); background: transparent; }
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
.email-list-result { grid-column: 1 / -1; min-height: 1rem; margin: 0; color: var(--muted); font-size: .74rem; }
.email-list, .rule-list { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.email-card, .rule-card, .email-empty { padding: 1rem 1.1rem; background: transparent; }
.email-card + .email-card, .rule-card + .rule-card { border-top: 1px solid var(--line); }
.email-card-heading, .rule-card { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.email-card-heading div, .rule-card div { min-width: 0; }
.email-card-heading strong, .email-card-heading span, .rule-card strong, .rule-card span { display: block; overflow-wrap: anywhere; }
.email-card-heading span, .rule-card span, .email-card-heading time { color: var(--muted); font-size: .76rem; }
.email-card-heading span, .rule-card span { margin-top: .18rem; }
.email-card-heading time { flex: 0 0 auto; }
.email-card h2 { margin: .85rem 0 .55rem; font-size: 1.05rem; letter-spacing: -.01em; }
.email-badges { display: flex; flex-wrap: wrap; gap: .35rem; }
.email-badge { margin: 0; border-color: var(--line); color: var(--muted); background: var(--panel-soft); }
.email-badge.disposition-action_required { border-color: var(--amber-line); color: var(--amber); background: var(--amber-wash); }
.email-badge.disposition-knowledge { border-color: var(--ok-line); color: var(--ok); }
.email-badge.disposition-uncertain, .email-badge.disposition-pending { border-color: var(--amber-line); color: var(--amber); }
.email-summary { margin: .7rem 0; color: var(--soft); line-height: 1.5; }
.email-card-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .5rem; }
.rule-section { margin-top: 2.5rem; }
.rule-section h2 { margin: 0 0 .8rem; font-size: 1.15rem; }
.rule-card { align-items: center; }
/* Onyx beside every screen (redesign D2): a panel on the right on a PC, a sheet over the page on a phone. */
.onyx-panel { position: fixed; z-index: 12; top: var(--bar-height, 4rem); right: 0; bottom: 0; width: var(--panel-width, 26rem); min-height: 0; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: var(--panel); }
body[data-onyx-panel="open"] .app-stage { padding-right: var(--panel-width, 26rem); }
body[data-onyx-panel="collapsed"] .app-stage { padding-right: 3.25rem; }
.onyx-panel-head { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--line-soft); }
.onyx-panel-mark { width: 26px; height: 26px; flex: 0 0 auto; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ffffff66 0 18%, transparent 19%), var(--accent); }
.onyx-panel-title { flex: 1; min-width: 0; display: grid; }
.onyx-panel-title strong { font-size: 14px; }
.onyx-panel-title small { overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.onyx-panel-grip { display: none; }
.onyx-strip { position: fixed; z-index: 12; top: var(--bar-height, 4rem); right: 0; bottom: 0; width: 3.25rem; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; border-left: 1px solid var(--line); padding: 14px 0; color: var(--soft); background: var(--panel); font-size: 12px; }
.onyx-strip span:last-child { writing-mode: vertical-rl; }
.onyx-scrim { position: fixed; z-index: 34; inset: 0; background: var(--scrim); }
.conversation-wrap { position: relative; flex: 1; min-height: 0; }
.conversation { height: 100%; overflow-y: auto; padding: 16px 14px; overflow-anchor: none; background: var(--panel-soft); }
.chat-scroll-latest { position: absolute; right: 1rem; bottom: .75rem; border-color: var(--line); border-radius: 50%; color: var(--text); background: var(--panel); box-shadow: 0 .3rem .8rem var(--shadow); }
.chat-scroll-latest .shell-icon { transform: rotate(90deg); }
.conversation-inner { display: flex; flex-direction: column; gap: 12px; }
.empty-state { min-height: 100%; display: grid; place-content: center; justify-items: center; padding: 1rem; text-align: center; }
.empty-mark { width: 2.75rem; height: 2.75rem; }
.empty-state h1 { margin: 1rem 0 .4rem; font-size: 20px; }
.empty-state p { margin: 0; color: var(--muted); font-size: 13px; }
.message { display: flex; flex-direction: column; max-width: 90%; }
.message.user { align-self: flex-end; align-items: flex-end; }
.message.assistant { align-self: flex-start; align-items: flex-start; }
.message-context { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 4px; border-radius: 999px; padding: 2px 9px; color: var(--blue-strong); background: var(--blue-wash); font-size: 11px; }
.message-context::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.bubble { padding: 9px 12px; border-radius: var(--radius); white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.45; }
.message.user .bubble { color: var(--action-ink); background: var(--accent); border-bottom-right-radius: 4px; }
.message.assistant .bubble { border: 1px solid var(--line); color: var(--text); background: var(--panel); border-bottom-left-radius: 4px; }
.chat-proposal-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.voice-link-check { display: flex; align-items: flex-start; gap: .65rem; }
.rule-dialog .voice-link-check input { width: 1.25rem; min-height: 1.25rem; flex: 0 0 auto; margin-top: .2rem; padding: 0; }
#voice-link-code { letter-spacing: .15em; font-variant-numeric: tabular-nums; }
.message-meta { display: flex; gap: .45rem; margin-top: .3rem; padding: 0 .2rem; color: var(--muted); font-size: 11px; }
.composer-wrap { position: relative; z-index: 7; flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); border-top: 1px solid var(--line-soft); background: var(--panel); }
.onyx-context-row { display: flex; align-items: center; gap: 4px; }
.onyx-screen-chip { min-width: 0; min-height: 2rem; display: inline-flex; align-items: center; gap: 6px; border: 1px dashed var(--line-strong); border-radius: 999px; padding: 4px 11px; color: var(--muted); background: transparent; font-size: 12px; }
.onyx-screen-chip span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.onyx-screen-chip .shell-icon { width: 15px; height: 15px; flex: 0 0 auto; }
.onyx-screen-chip[aria-pressed="true"] { border-style: solid; border-color: var(--blue-line); color: var(--blue-strong); background: var(--blue-wash); }
.onyx-screen-off { width: 1.75rem; height: 1.75rem; display: grid; place-items: center; border: 0; border-radius: 50%; color: var(--muted); background: transparent; }
.onyx-screen-off .shell-icon { width: 14px; height: 14px; }
.onyx-attach-menu { position: absolute; z-index: 3; left: 14px; bottom: calc(100% - 4px); min-width: 13rem; display: grid; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 .8rem 2rem var(--shadow); }
.onyx-attach-sources { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; }
.onyx-attach-menu button { min-height: 3.6rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: var(--radius-sm); padding: 6px; color: var(--soft); background: var(--panel-soft); font-size: 12px; }
.onyx-attach-menu button:hover { color: var(--blue-strong); background: var(--blue-wash); }
.onyx-attach-choices { display: grid; gap: 4px; border-top: 1px solid var(--line-soft); padding-top: 6px; }
.onyx-attach-choices p { margin: 0; color: var(--muted); font-size: 12px; }
.onyx-attach-choices button { min-height: 2.5rem; flex-direction: row; justify-content: flex-start; }
.onyx-attach-status:empty { display: none; }
.onyx-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.onyx-attachment { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; border: 1px solid var(--line-strong); border-radius: 999px; padding: 3px 4px 3px 10px; background: var(--panel-soft); color: var(--soft); font-size: 12px; overflow-wrap: anywhere; }
.onyx-attachment.pending { padding-right: 10px; color: var(--muted); }
.onyx-attachment button { width: 1.4rem; height: 1.4rem; border: 0; border-radius: 50%; background: transparent; color: var(--muted); }
.onyx-attach-status { margin: 0; color: var(--muted); font-size: 12px; }
.composer { display: flex; align-items: flex-end; gap: 6px; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 4px; background: var(--panel-soft); }
.composer:focus-within { border-color: var(--blue); }
.composer textarea { flex: 1; min-width: 0; min-height: 2.4rem; max-height: 10rem; resize: none; border: 0; outline: 0; padding: .55rem .4rem; background: transparent; line-height: 1.45; }
.composer #chat-stop { min-height: 2.4rem; flex: 0 0 auto; padding: .35rem .6rem; }
.onyx-attach-plus { display: none; }
.send-button { width: 2.4rem; height: 2.4rem; flex: 0 0 auto; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); color: var(--action-ink); background: var(--accent); }
.send-button .shell-icon { transform: rotate(-90deg); }
.send-button:disabled { cursor: wait; opacity: .45; }
.composer-status { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.composer-status.error { color: var(--danger); }
#chat-voice-start { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.chat-secondary-controls { display: none; gap: .5rem; padding: .65rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft); }
.chat-secondary-controls[data-expanded="true"] { display: grid; }
.chat-controls { display: grid; grid-template-columns: minmax(0, 1fr); gap: .5rem; font-size: 12px; }
.chat-controls label { color: var(--muted); font-size: .82rem; }
.chat-controls select { min-width: 0; min-height: 2.4rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .45rem .65rem; color: var(--soft); background: var(--panel); text-overflow: ellipsis; }
.chat-controls button { width: 100%; font-size: .82rem; }
.message.interrupted .message-meta::after { content: 'Respuesta interrumpida'; }
.message.pending .bubble { color: var(--muted); }
.message.pending .message-meta { display: none; }
.workspace-view { position: relative; background: var(--bg); }
#workspace-root { min-height: 100%; }
.workspace-administration-button { position: absolute; z-index: 4; top: 1rem; right: max(1rem, env(safe-area-inset-right)); min-height: 2.4rem; display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .75rem; color: var(--soft); background: var(--panel); }
.workspace-administration-button:hover { color: var(--text); border-color: var(--active-line); background: var(--blue-wash); }
.workspace-load-status { width: min(40rem, calc(100% - 2rem)); margin: 2rem auto; padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); color: var(--muted); background: var(--panel); }
.workspace-load-status.error { border-color: var(--danger-line); color: var(--danger); background: var(--danger-wash); }
.workspace-picker, .rule-dialog, .email-detail-dialog { padding: 0; border: 1px solid var(--line-strong); color: var(--text); background: var(--panel-strong); box-shadow: 0 1.5rem 4rem var(--shadow); }
.workspace-picker { width: min(48rem, calc(100% - 2rem)); max-height: min(48rem, calc(100% - 2rem)); border-radius: var(--radius); }
.workspace-picker:focus { outline: 0; }
.workspace-picker-scrim, .workspace-picker-handle { display: none; }
.workspace-picker[open] { overscroll-behavior: contain; }
html:has(.workspace-picker[open]) { overflow: hidden; }
.workspace-picker::backdrop, .rule-dialog::backdrop, .email-detail-dialog::backdrop { background: var(--scrim); }
.workspace-picker[open] { animation: map-enter 220ms cubic-bezier(.16, 1, .3, 1); }
@keyframes map-enter { from { opacity: .65; transform: translateY(1rem); clip-path: inset(12% 3% 0 round 1rem); } to { opacity: 1; transform: translateY(0); clip-path: inset(0 round 1rem); } }
.workspace-picker-shell { display: grid; gap: 1rem; padding: 1.15rem; }
.workspace-picker-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.workspace-picker-heading h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.workspace-picker-heading p { margin: .35rem 0 0; color: var(--muted); }
.workspace-picker-actions { display: flex; gap: .25rem; }
.workspace-picker-list { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; overflow-y: auto; }
.workspace-picker-summary { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; }
.workspace-attention { grid-row: span 2; }
.workspace-attention header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.workspace-attention h3, .workspace-pinned h3, .workspace-recents h3 { margin: 0 0 .55rem; color: var(--muted); font-size: .72rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; }
.workspace-attention header span { min-width: 1.25rem; color: var(--amber); text-align: right; font-size: .7rem; }
.workspace-attention-list { display: grid; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel-soft); }
.workspace-attention-item { min-width: 0; min-height: 3.25rem; display: grid; grid-template-columns: 1.3rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; border: 0; padding: .55rem .7rem; background: transparent; text-align: left; }
.workspace-attention-item + .workspace-attention-item { border-top: 1px solid var(--line-soft); }
.workspace-attention-copy { min-width: 0; display: grid; gap: .1rem; }
.workspace-attention-copy strong, .workspace-attention-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-attention-copy strong { font-size: .82rem; }
.workspace-attention-copy small { color: var(--muted); font-size: .68rem; }
.workspace-attention-badge { min-width: 1.4rem; border: 1px solid var(--amber-line); border-radius: 999px; padding: .12rem .35rem; color: var(--amber); background: var(--amber-wash); font-size: .66rem; text-align: center; }
.workspace-module-tile { position: relative; min-width: 0; min-height: 5.35rem; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel-soft); }
.workspace-destination-open { width: 100%; min-width: 0; min-height: 5.35rem; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .5rem; border: 0; padding: .7rem; background: transparent; text-align: left; }
.workspace-destination-open:hover, .workspace-destination-open[aria-current="page"] { color: var(--blue-strong); background: var(--blue-wash); }
.workspace-destination-copy { min-width: 0; display: grid; gap: .12rem; }
.workspace-destination-copy strong { max-width: 100%; overflow: hidden; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-destination-copy small { max-width: 100%; overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-pin-toggle { position: absolute; z-index: 1; top: .25rem; right: .25rem; width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border: 0; border-radius: .45rem; color: var(--muted); background: var(--panel-soft); }
.workspace-pin-toggle .shell-icon { width: .95rem; height: .95rem; }
.workspace-pin-toggle:hover, .workspace-pin-toggle[aria-pressed="true"] { color: var(--blue-strong); background: var(--blue-wash); }
.workspace-pinned-list { display: flex; gap: .5rem; overflow-x: auto; }
.workspace-pin-shortcut, .workspace-recent-shortcut { position: relative; min-width: 6.5rem; min-height: 2.8rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .65rem; background: var(--panel-soft); text-align: left; }
.workspace-pin-shortcut span, .workspace-recent-shortcut span { overflow: hidden; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.workspace-recents-list { display: flex; gap: .5rem; overflow-x: auto; }
.workspace-summary-empty { margin: 0; padding: .7rem; color: var(--muted); font-size: .72rem; line-height: 1.4; }
.destination-attention-dot { position: absolute; z-index: 2; top: .35rem; right: .35rem; width: .48rem; height: .48rem; border: 2px solid var(--panel-soft); border-radius: 50%; background: var(--amber); box-shadow: 0 0 0 1px var(--panel-soft); }
.rail-destination, .mobile-pin, .dock-map, .workspace-pin-shortcut, .workspace-recent-shortcut, .workspace-destination-open { position: relative; }
.workspace-picker-empty { margin: 0; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); }
.workspace-picker footer { display: flex; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .68rem; }
.rule-dialog { width: min(32rem, calc(100% - 2rem)); border-radius: var(--radius); }
.rule-dialog form { display: grid; gap: .7rem; padding: 1.25rem; }
.rule-dialog h2 { margin: 0; }
.rule-explanation { margin: 0 0 .35rem; color: var(--muted); line-height: 1.5; }
.rule-dialog label { color: var(--soft); font-size: .8rem; }
.rule-dialog output { display: block; margin-top: .25rem; color: var(--text); overflow-wrap: anywhere; }
.rule-dialog input, .rule-dialog select { width: 100%; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .7rem .75rem; background: var(--panel-soft); }
.dialog-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: .25rem; }
.email-detail-dialog { width: min(46rem, calc(100% - 1.25rem)); max-height: calc(100% - 1.25rem); border-radius: var(--radius); }
.email-detail-dialog > article { display: grid; gap: .85rem; padding: clamp(1rem, 4vw, 1.5rem); }
.email-detail-heading { display: flex; justify-content: space-between; gap: 1rem; }
.email-detail-heading time, .email-detail-status, .email-detail-empty { color: var(--muted); font-size: .76rem; }
.email-detail-sender { margin: 0; color: var(--soft); overflow-wrap: anywhere; }
.email-detail-dialog h2, .email-detail-dialog h3 { margin: 0; }
.email-detail-dialog h2 { font-size: 1.2rem; overflow-wrap: anywhere; }
.email-detail-dialog h3 { margin-bottom: .55rem; color: var(--soft); font-size: .85rem; }
.email-detail-body { max-height: min(45vh, 26rem); margin: 0; padding: .9rem; overflow: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--panel-soft); font: inherit; font-size: .88rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.email-detail-body-options { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.email-detail-attachments { display: grid; gap: .45rem; }
.email-attachment-link { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .65rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--soft); background: var(--panel-soft); text-decoration: none; }
.email-attachment-link:hover { border-color: var(--blue); color: var(--text); }
.email-attachment-link strong { min-width: 0; overflow-wrap: anywhere; }
.email-attachment-link span { flex: 0 0 auto; color: var(--muted); font-size: .72rem; }
.mobile-dock { display: none; }
.mobile-account { display: none; }
/* Shared pieces of the visual language (redesign D, 22/10/2026). Every screen builds on these instead of its own. */
.screen { width: min(1380px, 100%); margin: 0 auto; padding: 24px 28px 32px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; line-height: 1.4; }
.screen-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px; }
.screen-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.screen-head p, .screen-sub { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.screen-columns { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px; }
.screen-main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.screen-side { flex: 1 1 320px; max-width: 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.screen-head > div > p { max-width: 70ch; margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.eyebrow { margin: 8px 0 0; color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.card > h2, .card-head h2 { margin: 0; font-size: 14px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.card-head a, .card-head .link-button, .link-button { border: 0; padding: 0; color: var(--link); background: none; font-size: 12px; text-decoration: none; cursor: pointer; }
.link-button:hover, .card-head a:hover { color: var(--blue-strong); text-decoration: underline; }
.rows { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.row.with-bar { grid-template-columns: 6px minmax(0, 1fr) auto; padding-left: 12px; }
.row-bar { width: 6px; height: 100%; min-height: 40px; border-radius: 3px; background: var(--idle); }
.row-bar.attention { background: var(--amber-dot); }
.row-bar.danger { background: var(--danger-dot); }
.row-bar.info { background: #5b8def; }
.row-title { font-weight: 600; }
.row-source { color: var(--muted); font-weight: 400; }
.row-detail { display: block; color: var(--muted); font-size: 13px; }
/* Quick dismissal in Hoy (23/10/2026): «Descartar» beside the verb, the owner's reasons under the row, an undo bar. */
.row-actions { display: inline-flex; align-items: center; gap: 6px; }
.row-dismiss { grid-column: 1 / -1; display: grid; gap: 8px; padding-top: 6px; border-top: 1px solid var(--line-soft); }
.row.with-bar .row-dismiss { grid-column: 2 / -1; }
.row-dismiss-question { color: var(--soft); font-size: 13px; }
.row-dismiss-question.error { color: var(--danger); }
.row-dismiss-reasons { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.row-dismiss-reason { min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 5px 12px; color: var(--text); background: var(--panel-soft); font-size: 13px; }
.row-dismiss-reason:hover { border-color: var(--blue-line); background: var(--blue-wash); }
.row-dismiss-other { display: inline-flex; align-items: center; gap: 4px; }
.row-dismiss-other input { min-width: 0; width: 12rem; min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: 999px; padding: 4px 12px; background: var(--panel); font-size: 13px; }
.operations-undo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; padding: 8px 12px; border: 1px solid var(--ok-line); border-radius: var(--radius-sm); color: var(--soft); background: var(--ok-wash); font-size: 13px; }
@media (max-width: 32rem) { .row-actions { flex-direction: column-reverse; align-items: stretch; } .row-dismiss-other, .row-dismiss-other input { width: 100%; } }
.lines { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.line { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); font-size: 13px; }
.line > :first-child { color: var(--muted); font-variant-numeric: tabular-nums; }
.dot { display: inline-block; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--idle); }
.dot.ok { background: var(--ok); }
.dot.attention { background: var(--amber-dot); }
.dot.danger { background: var(--danger-dot); }
.status-line { display: flex; flex-wrap: wrap; gap: 6px 12px; color: var(--soft); font-size: 13px; }
.status-line > span { display: inline-flex; align-items: center; gap: 5px; }
.action-button, .action-button-quiet { min-height: 2.25rem; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: var(--radius-sm); padding: 7px 12px; font-size: 13px; text-decoration: none; white-space: nowrap; }
.action-button { border: 1px solid var(--accent); color: var(--action-ink); background: var(--accent); }
.action-button:hover { background: var(--blue-strong); }
.action-button-quiet { border: 1px solid var(--line-strong); color: var(--text); background: var(--panel); }
.action-button-quiet:hover { border-color: var(--blue-line); background: var(--blue-wash); }
.action-button:disabled, .action-button-quiet:disabled { opacity: .5; cursor: not-allowed; pointer-events: none; }
/* On a phone no control is under 44px (touch target); the D height above is the PC's. After every button rule. */
@media (max-width: 767px), (pointer: coarse) { .icon-text-button, .secondary-button, .primary-button, .quiet-button, .action-button, .action-button-quiet, .operations-toolbar button, .email-filters button { min-height: 44px; } }
.figure { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.figure small { color: var(--muted); font-size: 13px; font-weight: 400; }
.meter { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.meter > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.empty-note { margin: 0; padding: 14px 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--muted); font-size: 13px; }
.screen-notice { margin: 0; color: var(--muted); font-size: 13px; }
.screen-notice.error { color: var(--danger); }
@media (max-width: 50rem) {
  .screen { padding: 14px 16px 24px; }
  .screen-head h1 { font-size: 22px; }
  .screen-side { max-width: none; }
  .row { padding: 11px 12px; gap: 10px; }
}
.onyx-update { position: fixed; z-index: 60; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 12px; max-width: calc(100vw - 32px); padding: 10px 12px 10px 16px; border: 1px solid var(--blue-line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 8px 24px var(--shadow); transform: translateX(-50%); font-size: 14px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
noscript { display: block; padding: 2rem; text-align: center; }
button:focus-visible, a:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

@media (max-width: 50rem) {
  .app-rail { display: none; }
  /* The dock is fixed over the page: everything scrolls clear of it (Hoy's buttons stayed under it, 22/10/2026). */
  .app-stage { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .operations-view, .email-view, .administration-view, .workspace-view { flex: 0 0 auto; overflow: visible; }
  .topbar { position: sticky; top: 0; z-index: 8; min-height: 3.6rem; display: flex; align-items: center; gap: 10px; padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); background: var(--panel); }
  .mobile-brand { display: inline-flex; }
  .mobile-brand strong { display: none; }
  /* The service state and «Cerrar sesión» stay reachable from the top bar on a phone (UX audit 18/10/2026). */
  .mobile-account { position: relative; display: block; flex: 0 0 auto; }
  .mobile-account-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); }
  .mobile-account-toggle { border-color: var(--line-strong); }
  .mobile-account-toggle.ready .mobile-account-dot { background: var(--ok); }
  .mobile-account-toggle.attention .mobile-account-dot { background: var(--amber-dot); }
  .mobile-account-toggle { width: auto; min-width: 2.4rem; display: inline-flex; gap: 6px; padding: 0 10px; }
  .mobile-account-count { color: var(--soft); font-size: 13px; white-space: nowrap; }
  .mobile-account-count:empty { display: none; }
  .mobile-account-toggle.error .mobile-account-dot { background: var(--danger-dot); }
  .mobile-account-menu { position: absolute; z-index: 40; top: calc(100% + .4rem); right: 0; width: min(16rem, calc(100vw - 1.6rem)); display: grid; gap: .7rem; padding: .85rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); box-shadow: 0 .8rem 2rem var(--shadow); }
  .mobile-account-menu[hidden] { display: none; }
  .mobile-account-menu .service-state strong { white-space: normal; }
  .mobile-account-menu button { min-height: 2.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); }
  .view-identity { flex: 1; min-width: 0; }
  .view-identity strong { display: block; overflow: hidden; font-size: 20px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-search { border-color: var(--line-strong); color: var(--soft); }
  .mobile-dock { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; min-height: 4.5rem; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; padding: .35rem max(.35rem, env(safe-area-inset-right)) max(.45rem, env(safe-area-inset-bottom)) max(.35rem, env(safe-area-inset-left)); border-top: 1px solid var(--line); background: var(--panel); }
  .mobile-pins { display: contents; }
  .mobile-dock button { position: relative; min-width: 0; min-height: 3.4rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; border-radius: var(--radius-sm); padding: .3rem; color: var(--muted); background: transparent; }
  .mobile-dock button span { max-width: 100%; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-dock button[aria-current="page"] { color: var(--blue-strong); font-weight: 600; }
  /* Hoy, first pin, Onyx in the middle, second pin, Más. */
  .mobile-dock .dock-home { order: 1; }
  .mobile-pins > :nth-child(1) { order: 2; }
  .mobile-dock .dock-onyx { order: 3; }
  .mobile-pins > :nth-child(n + 2) { order: 4; }
  .mobile-dock .dock-map { order: 5; }
  .dock-onyx-mark { width: 3rem; height: 3rem; display: grid; place-items: center; margin-top: -1.1rem; border-radius: 50%; color: var(--action-ink); background: var(--accent); box-shadow: 0 6px 16px var(--shadow); }
  .mobile-dock .dock-onyx span:not(.dock-onyx-mark) { color: var(--soft); }
  .mobile-dock .dock-onyx[aria-expanded="true"] span:not(.dock-onyx-mark) { color: var(--blue-strong); font-weight: 600; }
  .mobile-dock .dock-onyx[aria-expanded="true"] .dock-onyx-mark { box-shadow: 0 0 0 3px var(--blue-wash), 0 6px 16px var(--shadow); }
  .mobile-dock .mobile-pin-empty { color: var(--muted); }
  .mobile-dock .destination-attention-dot { top: .25rem; right: calc(50% - 1.25rem); border-color: var(--panel); }
  .icon-text-button span { display: none; }
  .email-toolbar { grid-template-columns: 1fr; }
  .email-list-result { grid-column: 1; }
  .email-card-heading, .rule-card { gap: .6rem; }
  /* On a phone Onyx is a sheet over what is being looked at, opened from the dock's middle button. */
  .onyx-panel { z-index: 35; top: auto; left: 0; width: auto; height: min(88dvh, calc(100dvh - 2.5rem)); border-left: 0; border-top: 1px solid var(--line); border-radius: 18px 18px 0 0; box-shadow: 0 -1rem 2.5rem var(--shadow); }
  body[data-onyx-panel] .app-stage { padding-right: 0; }
  .onyx-panel-head { padding-top: 20px; }
  /* The grip is a 44px target: a tap closes the sheet, a drag down closes it and a drag up makes it full height. */
  .onyx-panel-grip { position: absolute; z-index: 1; top: 0; left: 50%; display: grid; place-items: center; width: 6rem; height: 44px; border: 0; background: transparent; transform: translateX(-50%); touch-action: none; cursor: grab; }
  .onyx-panel.dragging { transition: none; }
  .onyx-panel.full { height: calc(100dvh - .5rem); }
  .onyx-panel-grip span { width: 2.75rem; height: .25rem; border-radius: 999px; background: var(--line-strong); }
  .onyx-panel-collapse { display: none; }
  .onyx-attach-clip { display: none; }
  .onyx-attach-plus { display: block; }
  .workspace-picker-scrim { position: fixed; z-index: 20; inset: 0; display: block; background: var(--scrim); }
  .workspace-picker { --sheet-summary-height: min(36rem, calc(68dvh - 4.75rem)); --sheet-snap-y: 0px; --sheet-drag-y: 0px; position: fixed; z-index: 25; inset: auto 0 calc(4.75rem + env(safe-area-inset-bottom)) 0; width: 100%; max-width: none; height: calc(100dvh - 5.25rem - env(safe-area-inset-top)); max-height: none; margin: 0; border-width: 1px 0 0; border-radius: var(--radius) 1rem 0 0; transform: translateY(calc(var(--sheet-snap-y) + var(--sheet-drag-y))); transition: transform 180ms cubic-bezier(.16, 1, .3, 1); will-change: transform; }
  .workspace-picker[data-sheet-size="summary"] { --sheet-snap-y: calc(100% - var(--sheet-summary-height)); }
  .workspace-picker.is-dragging { transition: none; }
  .workspace-picker[open] { animation: none; }
  .workspace-picker-handle { width: 100%; height: 2.75rem; display: grid; place-items: center; margin: 0 auto; border: 0; border-radius: 999px; color: var(--muted); background: transparent; cursor: grab; touch-action: none; user-select: none; }
  .workspace-picker.is-dragging .workspace-picker-handle { cursor: grabbing; }
  .workspace-picker-handle span { width: 2.75rem; height: .25rem; border-radius: 999px; background: var(--muted); }
  .workspace-picker-shell { height: calc(100% - 2.75rem); min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); padding: 0 max(.8rem, env(safe-area-inset-right)) .8rem max(.8rem, env(safe-area-inset-left)); }
  .workspace-picker[data-sheet-size="summary"] .workspace-picker-shell { height: calc(var(--sheet-summary-height) - 2.75rem); }
  .workspace-picker-heading { align-items: center; }
  .workspace-picker-heading p { max-width: 27rem; font-size: .75rem; }
  .workspace-picker-summary { min-height: 0; display: grid; grid-template-columns: 1fr; gap: .9rem; overflow-y: auto; }
  .workspace-attention { grid-row: auto; }
  .workspace-picker[data-sheet-size="full"] .workspace-picker-summary { display: none; }
  .workspace-picker[data-sheet-size="summary"] .workspace-picker-list,
  .workspace-picker[data-sheet-size="summary"] .workspace-picker-empty { display: none; }
  .workspace-picker-list { min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: .45rem; }
  .workspace-module-tile, .workspace-destination-open { min-height: 5.2rem; }
  .workspace-destination-open { padding: .55rem; }
  .workspace-destination-copy strong { font-size: .72rem; white-space: normal; line-height: 1.15; }
  .workspace-destination-copy small { font-size: .62rem; }
  .workspace-pin-toggle { top: .16rem; right: .16rem; width: 1.55rem; height: 1.55rem; }
  .workspace-pinned-list, .workspace-recents-list { scrollbar-width: none; }
  .workspace-pin-shortcut, .workspace-recent-shortcut { min-width: 7.2rem; }
  .workspace-picker footer { display: none; }
  .login-card { border-radius: var(--radius); }
  .login-actions { display: grid; }
  .login-actions button { width: 100%; }
  .email-detail-heading { display: grid; gap: .35rem; }
  .email-detail-body-options { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .conversation { scroll-behavior: auto; }
  .workspace-picker[open] { animation: none; }
}


.chat-archive-dialog { color: inherit; background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  width: min(760px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; }
.chat-archive-dialog::backdrop { background: var(--scrim); }
.chat-archive-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.chat-archive-dialog h2 { font-size: 20px; margin: 0; }
.chat-archive-filters { display: flex; flex-wrap: wrap; align-items: end; gap: 12px; margin: 20px 0; }
.chat-archive-filters label { display: grid; gap: 6px; font-size: 13px; flex: 1 1 125px; min-width: 0; }
.chat-archive-filters label:first-child { flex-basis: 220px; }
.chat-archive-dialog input { min-height: 44px; min-width: 0; width: 100%; border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm); background: var(--panel); color: inherit; padding: 8px; }
.chat-archive-dialog button { min-height: 44px; }
.chat-archive-dialog select, .chat-archive-dialog textarea { min-height: 44px; width: 100%; background: var(--bg); color: inherit;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px; }
#chat-compare-rating label { display: grid; gap: 6px; margin: 12px 0; }
#chat-compare-history { display: grid; gap: 8px; margin-top: 12px; }
.chat-archive-entry { border-top: 1px solid var(--line-soft); padding: 16px 0; }
.chat-archive-entry small { color: var(--muted); }
.chat-archive-entry p { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.6; }
.chat-archive-entry footer { display: flex; gap: 12px; flex-wrap: wrap; }
#chat-archive-confirmation { border: 1px solid var(--amber-line); border-radius: var(--radius-sm); padding: 16px; margin-top: 16px; }
#chat-archive-erase { color: var(--danger); border-color: var(--danger-line); }
@media (max-width: 540px) { .chat-archive-dialog { padding: 16px; } }


.chat-voice {width:min(50rem,100%);margin:.55rem auto 0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.4rem .65rem;pointer-events:auto}
.chat-voice-actions,.chat-voice-options {display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.chat-voice button,.chat-voice-options select {min-height:44px}
.chat-voice-options select {min-width:0;max-width:16rem;flex:1 1 9rem;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:.65rem;padding:.5rem}
.chat-voice-route {display:flex;align-items:center;gap:.5rem;flex:1 1 100%;min-width:0;color:var(--muted)}
.chat-voice-route[hidden] {display:none}.chat-voice-route select {max-width:none}
.chat-voice p {min-width:0;margin:0;color:var(--muted);font-size:.68rem;line-height:1.35;white-space:normal;overflow-wrap:anywhere}
.chat-voice p:empty {display:none}.chat-voice[data-running=true] #chat-voice-start {border-color:var(--blue);color:var(--text)}
.chat-voice[data-running=true] #chat-voice-status {color:var(--soft)}
.chat-options-toggle {display:none;align-items:center;justify-content:center;gap:.35rem;border:1px solid transparent;border-radius:.65rem;padding:.45rem .6rem;color:var(--muted);background:transparent}
.chat-options-toggle .shell-icon {width:1rem;height:1rem;transform:rotate(90deg);transition:transform 160ms cubic-bezier(.16,1,.3,1)}
.chat-options-toggle[aria-expanded=true] .shell-icon {transform:rotate(-90deg)}
.chat-voice-options {width:100%}
@media(max-width:50rem){
  .chat-voice {order:2;grid-template-columns:minmax(0,1fr) auto;margin-top:.45rem}
  .chat-voice-actions {min-width:0;flex-wrap:nowrap}
  .chat-voice-actions button {padding:.45rem .65rem;white-space:nowrap}
  .chat-voice p {grid-column:1/-1;grid-row:2}
  .chat-options-toggle {display:inline-flex;grid-column:2;grid-row:1}
  .chat-voice-options {display:grid;gap:.5rem}
  .chat-voice-route {display:grid;grid-template-columns:auto minmax(0,1fr)}
  .chat-voice-route select {max-width:none}
}
@media(prefers-reduced-motion:reduce){.chat-options-toggle .shell-icon{transition:none}}


.administration-toggle { border-color: var(--line-strong); color: var(--soft); }
.administration-toggle[aria-current="page"] { border-color: var(--blue-line); color: var(--blue-strong); background: var(--blue-wash); }
/* Authorized but somewhere else: a green dot on the gear, not the highlight that says «you are here» (23/10/2026). */
.administration-toggle.is-active:not([aria-current="page"]) { position: relative; }
.administration-toggle.is-active:not([aria-current="page"])::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border: 1.5px solid var(--panel); border-radius: 50%; background: var(--ok); }
.administration-toggle .shell-icon { width: 1.05rem; height: 1.05rem; }
.administration-mobile-toggle { display: none; }
.administration-mobile-toggle.is-active { border-color: var(--blue-line); color: var(--blue-strong); background: var(--blue-wash); }
.administration-mobile-toggle span { font-size: .68rem; font-weight: 650; white-space: nowrap; }
.administration-content { width: min(68rem, 100%); margin: 0 auto; padding: 24px max(1rem, env(safe-area-inset-right)) 5rem max(1rem, env(safe-area-inset-left)); }
/* The one header of every Administración screen (lote 4, 22/10/2026): title, a sentence and Volver. */
.administration-head { margin: 0 0 16px; align-items: flex-start; }
.administration-head > div:first-child { min-width: 0; flex: 1 1 22rem; }
.administration-head h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.administration-head h2:focus { outline: none; }
.administration-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.administration-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.administration-heading > div { min-width: 0; }
.administration-heading h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.administration-heading p { max-width: 68ch; margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.administration-state { width: fit-content; display: flex; align-items: center; gap: 7px; margin: 12px 0 8px; color: var(--muted); font-size: 13px; }
.administration-state span { width: 8px; height: 8px; border-radius: 50%; background: var(--idle); }
.administration-state.is-active { color: var(--ok); }
.administration-state.is-active span { background: var(--ok); }
.administration-activation { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.administration-activation h2 { margin: 0; font-size: 16px; }
.administration-activation p { max-width: 68ch; margin: .35rem 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.administration-activation-actions { display: grid; gap: .55rem; }
.administration-notice { grid-column: 1 / -1; min-height: 1.25rem; margin: 0 !important; font-size: 13px; }
.administration-notice.error { color: var(--danger); }
.administration-center { margin-top: 8px; }
.administration-search { max-width: 34rem; display: flex; align-items: center; gap: 8px; margin: 0 0 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 8px 12px; background: var(--panel); color: var(--muted); }
.administration-search:focus-within { border-color: var(--blue); }
.administration-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.administration-search .shell-icon { width: 15px; height: 15px; }
.administration-center-list { display: flex; flex-direction: column; gap: 14px; }
.administration-group { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.administration-group-head { display: grid; gap: 2px; padding: 12px 16px 8px; }
.administration-group h2 { margin: 0; color: var(--text); font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.administration-group-head p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.administration-entry { width: 100%; min-height: 3.5rem; display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 12px; border: 0; border-top: 1px solid var(--line-soft); padding: 10px 16px; background: transparent; color: var(--text); text-align: left; cursor: pointer; }
.administration-group-head + .administration-entry { border-top: 1px solid var(--line-soft); }
.administration-entry:hover { background: var(--panel-soft); }
.administration-entry-copy { min-width: 0; display: grid; gap: 2px; }
.administration-entry-copy strong { font-size: 14px; }
.administration-entry-copy span { color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.administration-entry-action { color: var(--muted); font-size: 13px; white-space: nowrap; }
.administration-entry-action.pending { color: var(--link); font-weight: 600; }
/* A line that opens a screen says so with a chevron; one that unfolds in place says «Editar» without it. */
.administration-entry-action.opens-screen::after { content: '›'; margin-left: 6px; font-size: 15px; line-height: 1; }
.administration-entry.is-error { grid-template-columns: minmax(0, 1fr) auto; cursor: default; }
.administration-entry.is-error .administration-entry-copy strong { color: var(--danger); }
.administration-entry button { min-height: 2.4rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: .45rem .8rem; color: var(--soft); background: var(--panel); }
/* A line edited in place (lote 4, 22/10/2026): the line unfolds its panel just below it. */
.administration-entry[aria-expanded="true"] { background: var(--panel-soft); }
.administration-entry:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.administration-inline { display: flex; flex-direction: column; gap: 12px; padding: 4px 16px 16px 36px; background: var(--panel-soft); }
.administration-inline[hidden] { display: none; }
.administration-inline-body, .administration-inline form { min-width: 0; max-width: 34rem; display: flex; flex-direction: column; gap: 10px; }
.administration-inline p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.administration-inline-field { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 13px; }
.administration-inline-field input { min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); background: var(--panel); font: inherit; font-size: 14px; }
.administration-inline-field input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.administration-inline-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.administration-inline-notice:empty { display: none; }
.administration-inline-notice.is-error { color: var(--danger); }
/* A former screen unfolded in its line (23/10/2026): its blocks move into the panel; their header and «Volver» are
   the line itself, and the other screens stay hidden while one is unfolded. */
html.administration-inline-screen .administration-content > section:not(#administration-center):not(#administration-activation) { display: none !important; }
.administration-inline-body:has(> .administration-in-line) { max-width: none; }
.administration-in-line { margin: 0; }
/* Compact when unfolded (Iván, 23/10/2026: «los desplegables grandes, necesitaríamos compactarlos mejor»): the panel
   is not indented as far, cards keep a thin padding and the blocks sit closer. */
.administration-inline:has(.administration-in-line) { padding: 2px 12px 12px; gap: 8px; }
.administration-in-line, .administration-in-line > div { gap: 8px; }
.administration-in-line .card { padding: 12px 14px; gap: 8px; box-shadow: none; }
.administration-in-line .card + .card { margin-top: 0; }
@media (max-width: 40rem) { .administration-inline:has(.administration-in-line) { padding: 2px 6px 10px; } .administration-in-line .card { padding: 10px; } }
.administration-in-line > .administration-head, .administration-in-line .administration-head { display: none; }
.administration-inline-qr { width: min(16rem, 100%); height: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
@media (max-width: 767px), (pointer: coarse) {
  .administration-inline { padding-left: 16px; }
  .administration-inline-field input { min-height: 44px; font-size: 16px; }
}

@media (max-width: 50rem) {
  .administration-mobile-toggle { width: auto; min-width: 2.4rem; height: 2.4rem; flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; padding: 0 .65rem; }
  .administration-content { padding-top: 14px; padding-bottom: 2rem; }
  .administration-heading { align-items: flex-start; }
  .administration-heading .secondary-button { align-self: flex-start; }
  .administration-activation { grid-template-columns: 1fr; }
  .administration-activation-actions, .administration-activation-actions button { width: 100%; }
}

@media (max-width: 28rem) {
  .administration-heading { display: grid; }
  .administration-heading .secondary-button { width: 100%; }
}

/* Voz (lote 4, 22/10/2026): two cards in the D style; each summary call is a .row of the shared .rows list. */
.administration-voice { display: flex; flex-direction: column; gap: 14px; }
.administration-voice > .administration-head { margin: 0; }
#administration-voice-title:focus { outline: none; }
.administration-voice .card h3 { margin: 0; font-size: 14px; }
.administration-voice .card p { max-width: 70ch; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.voice-notice:empty { display: none; }
#voice-summary-calls-form { display: flex; flex-direction: column; gap: 10px; }
.voice-speaker-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.voice-speaker-form select, .voice-speaker-form input { min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 8px; background: var(--panel); color: var(--text); font: inherit; }
.voice-speaker-form input[hidden] { display: none; }
.voice-summary-call-fields { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.voice-summary-call select, .voice-summary-call input[type="time"] { min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); background: var(--panel-soft); font: inherit; font-size: 14px; }
.voice-summary-call-days { display: flex; gap: 4px; margin: 0; border: 0; padding: 0; }
.voice-day { position: relative; display: inline-flex; }
.voice-day input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.voice-day span { min-width: 2.25rem; min-height: 2.25rem; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--muted); background: var(--panel); font-size: 13px; font-weight: 600; }
.voice-day input:checked + span { border-color: var(--accent); color: var(--action-ink); background: var(--accent); }
.voice-day input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.voice-summary-call-time { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.voice-summary-calls-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.voice-firebase summary { cursor: pointer; padding: 6px 0; color: var(--text); font-size: 14px; }
.voice-firebase form { display: grid; gap: 8px; margin-top: 6px; }
.voice-firebase label { display: grid; gap: 2px; margin-top: 6px; font-size: 14px; }
.voice-firebase label span { color: var(--muted); font-size: 13px; }
.voice-firebase input[type="file"] { width: 100%; min-width: 0; padding: 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel-soft); color: var(--text); }
.voice-firebase input::file-selector-button { margin-right: 10px; padding: 6px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--panel); color: var(--text); cursor: pointer; }
.voice-firebase button { justify-self: start; }
.voice-firebase :is(summary,input,button):focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
@media (max-width: 767px), (pointer: coarse) {
  .voice-summary-call select, .voice-summary-call input[type="time"], .voice-day span, .voice-firebase summary { min-height: 44px; font-size: 16px; }
  .voice-day span { min-width: 44px; }
  .voice-summary-call-days { flex-wrap: wrap; }
}
@media (max-width: 50rem) {
  .voice-summary-call { grid-template-columns: 1fr; }
  .voice-summary-call > .action-button-quiet { justify-self: start; }
}
/* An unfolded line is scrolled into view clear of the phone's dock. */
[id^="administration-inline-"] { scroll-margin-bottom: 96px; }


.administration-modules { margin-top: 2rem; overflow-x: visible; }
.administration-modules-notice { min-height: 1.5rem; margin: 1rem 0 .5rem; color: var(--muted); }
.administration-modules-notice.error { color: var(--danger); }
.administration-modules-list { border: 1px solid var(--line); border-radius: .9rem; overflow: hidden; background: var(--panel); }
.administration-module-row { min-height: 4.5rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem 1rem; }
.administration-module-row + .administration-module-row { border-top: 1px solid var(--line-soft); }
.administration-module-copy { min-width: 0; display: grid; gap: .2rem; }
.administration-module-copy strong { font-size: 1rem; letter-spacing: -.01em; }
.administration-module-copy span { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.administration-module-description { margin: .15rem 0 0; color: var(--soft); line-height: 1.5; }
.administration-module-requires { margin: 0; color: var(--muted); font-size: .9rem; }
.administration-module-copy details summary { min-height: 2.75rem; display: inline-flex; align-items: center; color: var(--blue-strong); cursor: pointer; }
.administration-module-instructions { max-height: 22rem; overflow: auto; margin: .25rem 0 0; padding: .75rem; border: 1px solid var(--line-soft); border-radius: .6rem; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: .9rem; color: var(--soft); background: var(--panel-soft); }
.administration-module-switch { position: relative; width: 3.25rem; min-width: 3.25rem; height: 2.75rem; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.administration-module-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.administration-module-switch span { width: 2.75rem; height: 1.55rem; display: block; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-soft); transition: background-color .16s ease-out, border-color .16s ease-out; }
.administration-module-switch span::after { content: ''; width: 1.1rem; height: 1.1rem; display: block; margin: .17rem; border-radius: 50%; background: var(--muted); transition: transform .16s ease-out, background-color .16s ease-out; }
.administration-module-switch input:checked + span { border-color: var(--blue-line); background: var(--blue-wash); }
.administration-module-switch input:checked + span::after { transform: translateX(1.18rem); background: var(--blue-strong); }
.administration-module-switch input:focus-visible + span { outline: 2px solid var(--blue-strong); outline-offset: 3px; }
.administration-modules-issues { margin-top: 1rem; padding: 1rem; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--line)); border-radius: .9rem; color: var(--text); background: var(--panel); }
.administration-modules-issues p { margin: 0; line-height: 1.5; }
.administration-modules-issues button { min-height: 2.75rem; margin-top: .35rem; border: 0; padding: 0; color: var(--blue-strong); font-weight: 650; background: transparent; }
.administration-modules-actions { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1rem; }
.administration-modules-actions p { margin: 0; color: var(--muted); }
.administration-modules-actions button { min-height: 2.75rem; }
@media (max-width: 50rem) {
  .administration-modules-actions { align-items: stretch; flex-direction: column; }
  .administration-modules-actions button { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .administration-module-switch span, .administration-module-switch span::after { transition: none; }
}


.administration-connection-row { min-height: 4.75rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: .8rem 1rem; }
.administration-connection-row + .administration-connection-row { border-top: 1px solid var(--line-soft); }
.administration-connection-row > div { min-width: 0; display: grid; gap: .2rem; }
.administration-connection-row strong { font-size: 1rem; letter-spacing: -.01em; }
.administration-connection-row span { color: var(--muted); line-height: 1.5; }
.administration-connection-row button { min-width: 4.5rem; min-height: 44px; }
@media (max-width: 32rem) {
  .administration-connection-row { grid-template-columns: 1fr; }
  .administration-connection-row button { width: 100%; }
}


#administration-connection-detail-root { display: grid; gap: 12px; min-width: 0; }
#administration-connection-detail-root > .administration-head { margin-bottom: 4px; }
.connection-owner-form { display: grid; gap: 12px; min-width: 0; }
.card.connection-owner-form { display: grid; gap: 12px; }
.connection-owner-form [hidden] { display: none !important; }
.connection-owner-form p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.connection-owner-form fieldset { display: grid; gap: 12px; min-inline-size: 0; margin: 0; padding: 12px 0 0; border: 0; border-top: 1px solid var(--line); }
.connection-owner-form > fieldset:first-child { padding-top: 0; border-top: 0; }
.connection-owner-form legend { padding: 0 0 4px; color: var(--text); font-size: 14px; font-weight: 700; }
.connection-owner-form > label, .connection-owner-form fieldset > label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 13px; }
.connection-owner-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .connection-owner-form select, .connection-owner-form textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 6px 10px; color: var(--text); background: var(--panel); font: inherit; font-size: 14px; }
.connection-owner-form input[type="file"] { width: 100%; min-width: 0; }
.connection-owner-form textarea { resize: vertical; line-height: 1.5; }
.connection-owner-form input:focus-visible, .connection-owner-form select:focus-visible, .connection-owner-form textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.connection-owner-options { display: flex; flex-wrap: wrap; gap: 1rem; }
.connection-owner-options label { min-height: 2.25rem; display: inline-flex; align-items: center; gap: .5rem; color: var(--text); }
.connection-owner-notice { min-height: 1.5rem; margin: 0; color: var(--muted); }
.connection-owner-notice.error { color: var(--danger); }
.connection-owner-form > .action-button, .connection-owner-form > .action-button-quiet, .connection-owner-form fieldset > .action-button { justify-self: start; }
.connection-owner-form button:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.whatsapp-linking-qr { box-sizing: border-box; width: min(100%, 22rem); height: auto; padding: .75rem; border: 1px solid var(--line); border-radius: .7rem; background: white; }
@media (max-width: 767px), (pointer: coarse) {
  .connection-owner-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), .connection-owner-form select, .connection-owner-form textarea, .connection-owner-form button, .connection-owner-options label { min-height: 44px; }
  .connection-owner-form input[type="checkbox"], .connection-owner-form input[type="radio"] { width: 1.25rem; height: 1.25rem; }
}
@media (max-width: 32rem) {
  .connection-owner-form > .action-button, .connection-owner-form fieldset > .action-button { justify-self: stretch; }
}


.administration-access-passkeys { margin-top: 1.25rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); overflow: hidden; }
.administration-access-passkeys .administration-access-section-heading { padding: 1rem; }
.administration-access-passkeys .administration-access-section-heading h3 { margin: 0; color: var(--text); font-size: .98rem; letter-spacing: -.01em; }
.administration-access-passkeys .administration-access-section-heading p { max-width: 68ch; margin: .3rem 0 0; color: var(--muted); line-height: 1.5; }
.administration-access-number .administration-access-section-heading h3 { margin: 0; color: var(--text); font-size: .98rem; letter-spacing: -.01em; }
.administration-access-number .administration-access-section-heading p { max-width: 68ch; margin: .3rem 0 0; color: var(--muted); line-height: 1.5; }
.administration-passkey-create { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; padding: 1rem; border-top: 1px solid var(--line-soft); }
.administration-passkey-create label, .administration-passkey-rename { min-width: 0; display: grid; gap: .4rem; color: var(--text-soft); }
.administration-passkey-create input, .administration-passkey-rename input { width: 100%; min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: .7rem; padding: .55rem .7rem; color: var(--text); background: var(--panel-soft); font: inherit; }
.administration-passkey-create input:focus, .administration-passkey-create input:focus-visible,
.administration-passkey-rename input:focus, .administration-passkey-rename input:focus-visible { border-color: var(--blue); outline: 3px solid var(--focus); outline-offset: 2px; }
.administration-passkey-create button, .administration-passkey-row button { min-width: 44px; min-height: 44px; }
.administration-passkey-empty { margin: 0; padding: 1rem; border-top: 1px solid var(--line-soft); color: var(--muted); line-height: 1.5; }
.administration-passkey-list { border-top: 1px solid var(--line-soft); }
.administration-passkey-list:empty { display: none; }
.administration-passkey-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem 1rem; padding: .8rem 1rem; border-radius: 0; box-shadow: none; }
.administration-passkey-row + .administration-passkey-row { border-top: 1px solid var(--line-soft); }
.administration-passkey-summary { min-width: 0; display: grid; gap: .3rem; }
.administration-passkey-label { overflow-wrap: anywhere; color: var(--text); font-size: .98rem; letter-spacing: -.01em; }
.administration-passkey-dates { display: flex; flex-wrap: wrap; gap: .25rem .85rem; color: var(--muted); line-height: 1.45; }
.administration-passkey-actions, .administration-passkey-inline-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .5rem; }
.administration-passkey-actions button, .administration-passkey-inline-actions button { border: 1px solid var(--line); border-radius: .65rem; padding: .55rem .8rem; color: var(--text-soft); background: var(--panel-soft); }
.administration-passkey-actions button:hover, .administration-passkey-inline-actions button:hover { border-color: var(--blue); color: var(--text); }
.administration-passkey-actions button:disabled { color: var(--muted); cursor: not-allowed; opacity: .68; }
.administration-passkey-rename, .administration-passkey-confirm { grid-column: 1 / -1; padding-top: .75rem; border-top: 1px solid var(--line-soft); }
.administration-passkey-rename { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.administration-passkey-confirm { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.administration-passkey-confirm p, .administration-passkey-last-reason { margin: 0; color: var(--muted); line-height: 1.5; }
.administration-passkey-last-reason { grid-column: 1 / -1; font-size: .9rem; }
.administration-passkey-notice { min-height: 1.5rem; margin: 0; padding: 0 1rem 1rem; color: var(--muted); line-height: 1.5; }
.administration-passkey-notice.error { color: var(--danger); }
.android-installation-content { padding: 0 1rem 1rem; color: var(--text-soft); line-height: 1.5; }
.android-installation-content p { margin: 0; max-width: 68ch; }
#android-installation-status:empty { display: none; }
#android-installation-retry { margin-top: .75rem; min-height: 44px; }
#android-installation-version { margin-bottom: .75rem; color: var(--muted); }
#android-installation-download { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; max-width: 100%; padding: .6rem 1rem; text-decoration: none; text-align: center; }
#android-installation-download:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.android-installation-steps { margin: 1.25rem 0 .75rem; padding-left: 1.25rem; max-width: 68ch; }
.android-installation-steps li + li { margin-top: .5rem; }
#android-installation-origin { overflow-wrap: anywhere; font-weight: 600; }
.android-installation-help { color: var(--muted); }
@media (max-width: 32rem) {
  #android-installation-download { width: 100%; }
  .administration-passkey-create, .administration-passkey-row,
  .administration-passkey-rename, .administration-passkey-confirm { grid-template-columns: 1fr; }
  .administration-passkey-create button { width: 100%; }
  .administration-passkey-actions, .administration-passkey-inline-actions { justify-content: stretch; }
  .administration-passkey-actions button, .administration-passkey-inline-actions button { flex: 1 1 auto; }
}
@media (max-width: 50rem) {
  .administration-view .administration-content { padding-bottom: calc(6rem + env(safe-area-inset-bottom)); }
}


.administration-access { margin-top: 2rem; }
.administration-access-heading { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; }
.administration-access-heading h2 { margin: 0; font-size: 1.35rem; letter-spacing: -.02em; }
.administration-access-heading p { max-width: 68ch; margin: .35rem 0 0; color: var(--muted); line-height: 1.5; }
.administration-access-heading button { min-height: 44px; }
.administration-access-number { display: grid; gap: 1rem; margin-top: 1.25rem; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.administration-access-current { display: grid; gap: .3rem; }
.administration-access-current span { color: var(--muted); }
.administration-access-current strong { color: var(--blue-strong); font-size: 1.35rem; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.administration-access-protection { margin: 0; color: var(--blue-strong); line-height: 1.5; }
.administration-access-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; padding-top: 1rem; border-top: 1px solid var(--line-soft); }
.administration-access-form label { display: grid; gap: .4rem; color: var(--text-soft); }
.administration-access-form input { min-width: 0; min-height: 44px; border: 1px solid var(--line); border-radius: .7rem; padding: .55rem .7rem; color: var(--text); background: var(--panel-soft); font: inherit; }
.administration-access-form input:focus, .administration-access-form input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.administration-access-form button { min-height: 44px; }
.administration-access-notice { min-height: 1.5rem; margin: 0; color: var(--muted); line-height: 1.5; }
.administration-access-notice.error { color: var(--danger); }
  margin-top: 1rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
@media (max-width: 32rem) {
  .administration-access-heading, .administration-access-form,
  .administration-access-heading button { width: fit-content; }
}


.administration-ai { display: flex; flex-direction: column; gap: 14px; overflow-x: visible; }
.administration-ai > .administration-head { margin: 0; }
.administration-ai-notice { min-height: 1.25rem; margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.administration-ai-notice.error { color: var(--danger); }
.ai-configuration-group > header { margin: 0; }
.ai-configuration-group h3 { margin: 0; font-size: 14px; }
.ai-configuration-group > header p, .ai-configuration-group > p { max-width: 70ch; margin: 2px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ai-configuration-group > p:empty { display: none; }
.ai-resource-row, .ai-model-row, .ai-function-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 10px 0; }
.ai-resource-row + .ai-resource-row, .ai-model-row + .ai-model-row, .ai-function-row + .ai-function-row { border-top: 1px solid var(--line-soft); }
.ai-resource-row > div:first-child, .ai-model-row > div:first-child, .ai-function-row > div:first-child { min-width: 0; display: grid; gap: 2px; }
.ai-resource-row strong, .ai-model-row strong, .ai-function-row strong { font-size: 14px; }
.ai-resource-row span, .ai-model-row span, .ai-function-row span { overflow-wrap: anywhere; color: var(--muted); font-size: 13px; line-height: 1.4; }
.ai-resource-row small, .ai-model-row small { color: var(--soft, var(--muted)); font-size: 12px; line-height: 1.4; }
.ai-empty-row { margin: 0; padding: 10px 0; color: var(--muted); font-size: 13px; }
.ai-openrouter-form { display: grid; grid-template-columns: minmax(12rem, 1fr) minmax(12rem, 1fr) auto; align-items: end; gap: 10px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.ai-openrouter-form label, .ai-profile-fields label { min-width: 0; display: grid; gap: 4px; color: var(--muted); font-size: 13px; }
/* One field style for the whole screen: inputs and selects alike. */
.administration-ai input:not([type="checkbox"]), .administration-ai select {
  width: 100%; min-width: 0; min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 7px 10px; color: var(--text); background: var(--panel-soft); font: inherit; font-size: 14px;
}
.administration-ai input:focus-visible, .administration-ai select:focus-visible { border-color: var(--blue-strong); outline: 2px solid var(--blue-strong); outline-offset: 2px; }
.ai-row-actions, .ai-function-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ai-row-actions:not(:has(> :not([hidden]))) { display: none; }
.ai-profile-row { min-width: 0; margin: 0; border: 0; border-top: 1px solid var(--line-soft); padding: 10px 0; }
.ai-profile-row legend { float: left; width: 100%; padding: 0; font-weight: 600; font-size: 14px; }
.ai-profile-row p { clear: both; max-width: 70ch; margin: 4px 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.ai-profile-row .error { color: var(--danger); }
.ai-profile-fields { clear: both; display: grid; grid-template-columns: minmax(10rem, .8fr) minmax(12rem, 1.4fr) minmax(10rem, .8fr); gap: 10px; margin: 8px 0; }
#ai-profile-list { display: flex; flex-direction: column; }

@media (max-width: 767px), (pointer: coarse) {
  .administration-ai input:not([type="checkbox"]), .administration-ai select { min-height: 44px; font-size: 16px; }
}

@media (max-width: 50rem) {
  .ai-openrouter-form, .ai-profile-fields { grid-template-columns: 1fr; }
  .ai-openrouter-form button { width: 100%; }
  .ai-model-row, .ai-function-row { grid-template-columns: 1fr; }
  .ai-row-actions button, .ai-function-controls button { flex: 1 1 9rem; }
}

@media (max-width: 32rem) {
  .ai-resource-row { grid-template-columns: 1fr; }
  .ai-resource-row button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .administration-ai * { scroll-behavior: auto !important; transition-duration: 0s !important; }
}


html:not(.help-all) .help-text:not(.help-open) { display: none !important; }
.help-toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem;
  margin: 0 0 0 0.4rem; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: transparent;
  color: var(--muted); font: italic 600 11px/1 Georgia, 'Times New Roman', serif; vertical-align: middle; cursor: pointer; }
/* Drawn, not text: the heading keeps its own words (search, tests, screen readers read «Ayuda» from the label). */
.help-toggle::before { content: 'i'; }
.help-toggle:hover, .help-toggle:focus-visible, .help-toggle[aria-expanded="true"], html.help-all .help-toggle {
  border-color: var(--accent); color: var(--accent); }
.help-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* Always a circle (23/10/2026: on a phone, screens that give their buttons a 44 px touch height stretched it into an
   oval); the touch area grows around it, unseen. */
.help-toggle { position: relative; flex: none; box-sizing: border-box; min-width: 0 !important; min-height: 0 !important;
  max-height: 1.15rem; align-self: center; }
.help-toggle::after { content: ''; position: absolute; inset: -0.75rem; }
.help-toggle-alone { align-self: flex-start; margin: 2px 0; }
html.help-all .help-toggle-alone { display: none; }
.help-text.help-open, html.help-all .help-text { color: var(--muted); }
.help-all-toggle[aria-pressed="true"] { color: var(--accent); }


.administration-work { display: flex; flex-direction: column; gap: 10px; }
.administration-work > .administration-head { margin: 0 0 6px; }
#administration-work-title:focus { outline: none; }
.administration-work-notice { min-height: 1.25rem; margin: 0; color: var(--muted); font-size: 13px; }
.administration-work-notice.error { color: var(--danger); }
.administration-work-section { margin: 10px 0 0; font-size: 14px; }
.administration-work .row-copy { overflow-wrap: anywhere; }
@media (max-width: 50rem) {
  .administration-work .row { grid-template-columns: minmax(0, 1fr); }
  .administration-work .row.with-bar { grid-template-columns: 6px minmax(0, 1fr); }
  .administration-work .row > .action-button-quiet { grid-column: -2; justify-self: start; }
}


.internet-administration { max-width: 72rem; }
.internet-administration p, .internet-administration ol { margin: 0; line-height: 1.55; }
.internet-administration small, .internet-administration .internet-help { color: var(--muted); }
.internet-administration .internet-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.internet-administration .internet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.internet-administration label { display: grid; gap: .4rem; min-width: 0; }
.internet-administration input, .internet-administration textarea, .internet-administration select { width: 100%; min-width: 0; }
.internet-administration .internet-toggle { display: flex; align-items: center; gap: .75rem; min-height: 44px; cursor: pointer; }
.internet-administration .internet-toggle input { width: 1.25rem; height: 1.25rem; min-height: 1.25rem; flex: none; }
.internet-administration details { min-width: 0; }
.internet-administration summary { min-height: 44px; display: list-item; align-content: center; cursor: pointer; font-weight: 600; }
.internet-administration summary:focus-visible { outline: 3px solid var(--focus, var(--blue)); outline-offset: 2px; }
.internet-administration details > div { display: grid; gap: 1rem; padding-top: .75rem; }
.internet-administration .internet-secrets { display: grid; gap: .75rem; }
.internet-administration .internet-secrets:empty, .internet-administration .internet-editor:empty { display: none; }
.internet-administration .administration-connection-row { padding-inline: 0; }
.internet-administration .administration-connection-row span, .internet-administration code { overflow-wrap: anywhere; }
.internet-administration .internet-session { display: grid; gap: .75rem; padding: 1rem; border: 1px solid var(--line); background: var(--panel-soft); }
.internet-administration .internet-human-image { width: 100%; height: auto; display: block; background: white; }
.internet-administration .connection-owner-notice.error { color: var(--danger); }
.internet-administration button:disabled { opacity: .55; cursor: wait; }
@media (max-width: 38rem) {
  .internet-administration .internet-grid { grid-template-columns: 1fr; }
  .internet-administration .internet-actions > button { flex: 1 1 auto; }
}


.holiday-place-upcoming { display: flex; flex-direction: column; gap: 6px; max-width: 34rem; }
.holiday-place-upcoming h4 { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--text); }
.holiday-place-upcoming ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.holiday-place-upcoming li { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 8px; font-size: 13px; color: var(--soft); }
.holiday-place-upcoming code { overflow-wrap: anywhere; font-size: 12px; }
.company-days { display: flex; flex-direction: column; gap: 8px; max-width: 46rem; padding-top: 8px; border-top: 1px solid var(--line-soft); }
.company-days h4 { margin: 0; font-size: 13px; font-weight: 600; color: var(--text); }
.company-days-list { display: grid; gap: 6px; }
.company-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.company-day input, .company-day select, .company-days-notice { min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 8px; background: var(--panel); color: var(--text); font: inherit; font-size: 13px; }
.company-day input[type="text"] { flex: 1 1 12rem; min-width: 0; }
.company-day-hours { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.company-day-hours[hidden] { display: none; }
.company-days-notice { width: 5rem; }
@media (max-width: 40rem) { .holiday-place-upcoming li { grid-template-columns: minmax(0, 1fr); gap: 0; } }


.sip-administration .sip-status { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--panel-soft); }
.sip-administration .sip-status strong { color: var(--text); }
.sip-administration { --text-soft: var(--soft); --text-muted: var(--muted); --focus-ring: var(--blue); max-width: 64rem; margin-inline: auto; }
.sip-administration [hidden] { display: none !important; }
.sip-administration .sip-status { justify-content: space-between; }
.sip-administration .sip-status > div { display: grid; gap: .3rem; }
.sip-tabs { display: flex; flex-wrap: wrap; gap: .25rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line); }
.sip-tabs button { border: 0; border-radius: .65rem; background: transparent; color: var(--text-soft); padding: .65rem 1rem; font: inherit; cursor: pointer; }
.sip-tabs button:hover { background: var(--panel-soft); }
.sip-tabs button[aria-pressed="true"] { background: var(--blue-wash); color: var(--text); font-weight: 700; }
.sip-administration [data-sip-panel] { display: grid; gap: 1.8rem; }
.sip-administration fieldset { border: 0; border-radius: 0; padding: .5rem 0 0; gap: .85rem; }
.sip-administration legend { padding: 0; font-size: 1.05rem; }
.sip-administration label { min-width: 0; }
.sip-administration input:not([type="checkbox"]), .sip-administration select, .sip-administration textarea { width: 100%; min-width: 0; }
.sip-administration input[type="checkbox"] { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.sip-administration label:not(.sip-phone-outbound) { display: grid; gap: .4rem; color: var(--text-soft); }
.sip-administration p { line-height: 1.5; }
.sip-administration .sip-field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sip-disclosure { border-top: 1px solid var(--line-soft); padding-block: .75rem; }
.sip-disclosure summary { cursor: pointer; color: var(--text-soft); min-height: 44px; align-content: center; }
.sip-disclosure summary:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.sip-hours-moved { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin: 0; color: var(--muted); }
.sip-fields { display: grid; gap: 1rem; padding-block: .75rem; }
.sip-section-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.sip-section-actions p { margin: 0; color: var(--text-muted); }
.sip-save-bar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; border-top: 1px solid var(--line); padding-block: 1rem; }
.sip-administration button:disabled { opacity: .55; cursor: default; }
.sip-message-section h3 { margin: 0 0 .8rem; font-size: 1.05rem; }
.sip-administration [data-sip-add], .sip-administration [data-sip-hangup], .sip-administration [data-sip-save-line] { justify-self: start; }
.sip-administration .sip-status p { flex: 1 1 16rem; margin: 0; color: var(--text-soft); }
.sip-administration fieldset > p { margin: 0; color: var(--text-soft); max-width: 68ch; }
.sip-administration [data-sip-phones], .sip-administration [data-sip-call-numbers] { display: grid; gap: .75rem; }
.sip-phone-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: .75rem; padding-block: .75rem; border-bottom: 1px solid var(--line-soft); }
.sip-phone-row > label:not(.sip-phone-outbound) { display: grid; gap: .4rem; color: var(--text-soft); }
.sip-phone-row > .sip-phone-outbound { grid-column: 1 / 3; }
.sip-phone-row > button { grid-column: 3; justify-self: end; }
.sip-phone-outbound { display: flex; align-items: center; gap: .4rem; min-height: 44px; color: var(--text-soft); }
.sip-phone-outbound input { min-height: auto; }
.sip-administration .sip-messages { display: grid; gap: .75rem; padding: 0; list-style: none; }
.sip-messages li { padding: .75rem 0; border-bottom: 1px solid var(--line-soft); }
.sip-messages p { margin: .35rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.sip-messages small { color: var(--text-muted); }
@media (max-width: 44rem) { .sip-phone-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sip-phone-row > .sip-phone-outbound { grid-column: 1; } .sip-phone-row > button { grid-column: 2; } }
@media (max-width: 30rem) { .sip-phone-row { grid-template-columns: minmax(0, 1fr); } .sip-phone-row > .sip-phone-outbound, .sip-phone-row > button { grid-column: 1; } .sip-administration .sip-status button { width: 100%; } }
@media (max-width: 44rem) {
  .sip-tabs button { flex: 1 1 40%; padding-inline: .6rem; }
  .sip-administration .sip-field-pair { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 30rem) {
  .sip-save-bar > button { width: 100%; }
}


.attention-hours-week { display: grid; gap: 6px; margin: 8px 0; }
.attention-hours-day { display: grid; grid-template-columns: minmax(12rem, 15rem) repeat(2, max-content); align-items: center; gap: 8px 16px; }
.attention-hours-day label { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 8px; color: var(--soft); font-size: 13px; }
.attention-hours-range { display: grid; grid-template-columns: repeat(2, 7.5rem); gap: 6px; }
.attention-hours-range input, .attention-hours-day select { min-width: 0; min-height: 2.25rem; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); padding: 4px 8px; background: var(--panel); font-variant-numeric: tabular-nums; }
.administration-inline-help { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
@media (max-width: 40rem) {
  .attention-hours-day { grid-template-columns: minmax(0, 1fr); padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
  .attention-hours-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


.connection-outage { padding: 10px 12px; border-radius: var(--radius-sm); background: var(--amber-wash); }
.connection-outage strong { color: var(--amber); font-size: 13px; }
.connection-outage p { margin: 4px 0 0; color: var(--soft); }
.wholesaler-rows { display: flex; flex-direction: column; gap: 8px; }
.wholesaler-row { display: grid; grid-template-columns: minmax(10rem, 1fr) 9rem 9rem auto; align-items: end; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.wholesaler-row > div { display: grid; gap: 2px; }
.wholesaler-state, .wholesaler-note { color: var(--muted); font-size: 12px; }
.wholesaler-note { grid-column: 1 / -1; }
.wholesaler-note:empty { display: none; }
.wholesaler-row label { display: grid; gap: 4px; min-width: 0; color: var(--muted); font-size: 13px; }
@media (max-width: 40rem) { .wholesaler-row { grid-template-columns: 1fr 1fr; } .wholesaler-row > div { grid-column: 1 / -1; } }