/* Lenguaje visual «la referencia visual aprobada» (20 septiembre 2026).
   Esta capa traduce los componentes existentes; no altera permisos ni documentos. */
html[data-ui="erp"] {
  color-scheme:light;
  --fc-background:hsl(220 25% 96%); --fc-ink:hsl(218 31% 16%); --fc-muted:hsl(218 14% 42%);
  --fc-card:#fff; --fc-primary:#4e6dab; --fc-on-primary:#fff;
  --fc-secondary:#f1f3f7; --fc-selected:#f0f3fa;
  --fc-row-hover:#f7f8fb;
  --fc-border:#e0e4eb; --fc-input:#d3dae5;
  --fc-success:hsl(161 67% 27%); --fc-warning:hsl(37 83% 30%); --fc-error:hsl(0 65% 43%);
  --fc-nav:rgb(255 255 255 / .65); --fc-nav-border:rgb(255 255 255 / .8);
  --fc-ambient:radial-gradient(ellipse at 5% 0%,#edf1f8 0,transparent 46%),radial-gradient(ellipse at 100% 95%,#f7f4f1 0,transparent 48%);
  --fc-shadow:0 16px 40px -25px rgb(63 72 88 / .22),0 3px 9px -6px rgb(63 72 88 / .08);
  --fc-floating:0 28px 80px -24px rgb(35 43 56 / .25);
  --fc-button-shadow:0 7px 15px -10px rgb(62 82 116 / .35);
  --fc-font:-apple-system,BlinkMacSystemFont,Inter,"Segoe UI",sans-serif;
  --bg-body:var(--fc-background); --bg-main:var(--fc-background); --bg:var(--fc-background);
  --bg-card:var(--fc-card); --surface:var(--fc-card); --bg-sidebar:var(--fc-nav);
  --bg-input:var(--fc-card); --bg-hover:var(--fc-secondary); --bg-deep:hsl(220 30% 98%); --bg-secondary:var(--fc-secondary);
  --border:var(--fc-border); --border-color:var(--fc-border); --border-light:var(--fc-border); --border-input:var(--fc-input);
  --text-primary:var(--fc-ink); --text-secondary:var(--fc-muted); --text-tertiary:var(--fc-muted); --text-muted:var(--fc-muted);
  --accent:var(--fc-primary); --accent-bg:var(--fc-selected); --accent-border:#c8d3e5;
  --action:var(--fc-primary); --on-action:var(--fc-on-primary); --action-hover:#456299;
  --blue:var(--fc-primary); --green:var(--fc-success); --orange:var(--fc-warning); --red:var(--fc-error); --purple:#7054a1;
  --nav-active-bg:var(--fc-selected); --badge-bg:var(--fc-secondary); --modal-bg:var(--fc-card);
  --table-header-bg:var(--fc-secondary); --table-stripe:hsl(220 30% 99%); --shadow:var(--fc-shadow);
  --pre-section-bg:var(--fc-secondary); --pre-section-border:var(--fc-border);
  --glass-mint:#eaf6f1; --glass-blue:#f0f3fa; --glass-purple:#f2eef8; --glass-sand:#fcf4e6;
  --verde:var(--fc-primary); --verde-borde:var(--fc-primary); --verde-hover:var(--action-hover); --btn-borde:var(--fc-input); --btn-texto:var(--fc-ink);
  /* Tokens semánticos que la capa anterior dejaba en oliva y aquí no estaban traducidos.
     Éxito, aviso y error conservan su significado; el resto pasa a la paleta azul. */
  --success:var(--fc-success); --success-bg:var(--glass-mint);
  --warning:var(--fc-warning); --warning-bg:var(--glass-sand);
  --danger:var(--fc-error); --danger-bg:hsl(0 65% 96%);
  --info:var(--fc-primary); --info-bg:var(--fc-selected);
  --neutral-bg:var(--fc-secondary); --neutral-fg:var(--fc-muted);
  --focus:var(--fc-primary); --overlay:rgb(35 43 56 / .28);
  --popover-shadow:var(--fc-floating); --border-highlight:rgb(255 255 255 / .8);
}
html[data-ui="erp"][data-theme="dark"] {
  color-scheme:dark; --fc-background:hsl(222 27% 9%); --fc-ink:hsl(218 30% 95%); --fc-muted:hsl(218 16% 70%);
  --fc-card:hsl(222 23% 13%); --fc-primary:hsl(224 96% 76%); --fc-on-primary:hsl(222 37% 14%);
  --fc-secondary:hsl(222 22% 20%); --fc-selected:hsl(224 40% 24%); --fc-border:hsl(221 19% 24%); --fc-input:hsl(221 19% 29%);
  --fc-row-hover:hsl(222 23% 16%);
  --fc-success:hsl(158 56% 65%); --fc-warning:hsl(39 92% 72%); --fc-error:hsl(0 86% 75%);
  --fc-nav:hsl(222 23% 13% / .8); --fc-nav-border:var(--fc-border); --bg-deep:hsl(222 23% 16%);
  --fc-ambient:radial-gradient(ellipse at 0% 0%,#1a2744 0,transparent 55%);
  --action-hover:#a9c0ff; --accent-border:var(--fc-input);
  --glass-mint:#203b32; --glass-blue:#263652; --glass-purple:#342d46; --glass-sand:#423623;
  --danger-bg:hsl(0 40% 20%);
}
html[data-ui="erp"] body { background-color:var(--fc-background)!important; background-image:var(--fc-ambient)!important; background-attachment:fixed; color:var(--fc-ink); font-family:var(--fc-font); font-size:14px; line-height:1.5; }
html[data-ui="erp"] body::before { display:none; }
html[data-ui="erp"] :is(button,input,select,textarea) { font-family:var(--fc-font); }
html[data-ui="erp"] :is(input,textarea,[contenteditable]) { caret-color:var(--fc-primary); }
html[data-ui="erp"] ::selection { background:var(--fc-selected); color:var(--fc-ink); }
html[data-ui="erp"] :is(button,a,input,select,textarea,summary,[tabindex]):focus-visible { outline:2px solid var(--fc-primary); outline-offset:3px; }
html[data-ui="erp"] :is(.view,.nav-menu,.table-container,.gm-lista,.modal-content,.gm-lectura) { scrollbar-color:color-mix(in srgb,var(--fc-muted) 30%,transparent) transparent; scrollbar-width:thin; }
html[data-ui="erp"] ::-webkit-scrollbar-thumb { background:color-mix(in srgb,var(--fc-muted) 30%,transparent); border-radius:6px; }

/* Marco de oficina. Los submenús conservan su estructura y acceso actuales. */
html[data-ui="erp"] body:not(.employee-app) .app { max-width:1800px; margin:auto; padding:24px; gap:24px; background:transparent; }
html[data-ui="erp"] body:not(.employee-app) .nav-sidebar {
  width:236px; min-width:236px; padding:8px; border:1px solid var(--fc-nav-border)!important; border-radius:24px;
  background:var(--fc-nav)!important; box-shadow:var(--fc-shadow); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  --text-primary:var(--fc-ink); --text-secondary:var(--fc-muted); --text-tertiary:var(--fc-muted); --text-muted:var(--fc-muted);
  --accent:var(--fc-primary); --bg-hover:var(--fc-secondary); --border:var(--fc-border);
}
html[data-ui="erp"] .nav-brand { padding:14px 10px 22px; gap:10px; }
html[data-ui="erp"] .nav-brand-text { font-size:21px; color:var(--fc-ink)!important; letter-spacing:-.6px; }
/* El distintivo de la empresa configurada: su color de Identidad (--fc-primary lo pone
   brand.js), no uno escrito aquí. */
html[data-ui="erp"] .nav-logo { width:34px; height:36px; color:var(--fc-primary)!important; background:color-mix(in srgb,var(--fc-primary) 16%,#fff)!important; border-radius:11px; }
html[data-ui="erp"] .nav-menu { padding:8px 0; gap:4px; }
html[data-ui="erp"] .nav-sidebar :is(.nav-item,.nav-group-head) { min-width:0; max-width:100%; min-height:44px; padding:12px; gap:10px; border-radius:16px; color:var(--fc-muted)!important; font-size:14px; font-weight:500; line-height:1.4; }
html[data-ui="erp"] .nav-sidebar :is(.nav-item,.nav-group-head) > span { min-width:0; overflow-wrap:anywhere; }
html[data-ui="erp"] .nav-sidebar :is(.nav-item,.nav-group-head) svg { width:19px; height:19px; }
html[data-ui="erp"] .nav-sidebar :is(.nav-item,.nav-group-head):hover { background:var(--fc-secondary)!important; color:var(--fc-ink)!important; }
html[data-ui="erp"] .nav-sidebar :is(.nav-item.active,.nav-group.active > .nav-group-head,.nav-group-head.active) { color:var(--fc-primary)!important; background:var(--fc-selected)!important; box-shadow:none; border:0!important; }
html[data-ui="erp"] .nav-sidebar :is(.nav-item.active,.nav-group-head.active) > svg { opacity:1; stroke:currentColor!important; }
html[data-ui="erp"] .nav-group-body .nav-item { margin:0; padding-left:22px; font-size:13px; }
html[data-ui="erp"] .nav-footer { padding:12px 4px 4px; border-color:var(--fc-border)!important; }
html[data-ui="erp"] :is(.nav-user-name,.btn-logout) { color:var(--fc-ink)!important; }
html[data-ui="erp"] .nav-user-role { color:var(--fc-muted)!important; }
html[data-ui="erp"] .nav-user-avatar { background:var(--fc-selected)!important; color:var(--fc-primary)!important; border-radius:12px; }
html[data-ui="erp"] .nav-badge { background:var(--fc-selected)!important; color:var(--fc-primary)!important; }
html[data-ui="erp"] .nav-settings { border-color:var(--fc-border)!important; background:var(--fc-card)!important; color:var(--fc-ink)!important; border-radius:12px; }
html[data-ui="erp"] .sidebar-fichaje { background:var(--fc-selected)!important; border-color:var(--fc-border)!important; color:var(--fc-ink)!important; }
html[data-ui="erp"] .main-content { background:transparent!important; min-width:0; }
html[data-ui="erp"] body:not(.employee-app) .view { padding:8px 0 32px; max-width:1400px; width:100%; margin:0 auto; }
html[data-ui="erp"] .view-header { align-items:flex-start; gap:20px; margin-bottom:28px; flex-wrap:wrap; }
html[data-ui="erp"] :is(.view-header h1,#view-dashboard h1,#view-mi-espacio h1) { font-size:32px; line-height:1.25; font-weight:600; letter-spacing:-.035em; }
html[data-ui="erp"] :is(.view-subtitle,.view-header p) { font-size:14px; color:var(--fc-muted); line-height:1.6; }
html[data-ui="erp"] :is(.view-header-actions,.contab-header-actions) { gap:8px; flex-wrap:wrap; }
html[data-ui="erp"] :is(.section-header h2,.section-title,.contab-panel-header h2) { font-size:20px; font-weight:600; letter-spacing:-.025em; }

/* Controles compartidos: tamaños estables, foco y jerarquía de acciones. */
html[data-ui="erp"] :is(.btn-secondary,.home-button) { background:var(--fc-card)!important; border:1px solid var(--fc-input)!important; color:var(--fc-ink)!important; }
html[data-ui="erp"] .btn-secondary:hover:not(:disabled) { background:var(--fc-secondary)!important; border-color:var(--fc-input)!important; color:var(--fc-ink)!important; }
html[data-ui="erp"] :is(.btn-danger,.btn-delete) { color:var(--fc-error)!important; background:color-mix(in srgb,var(--fc-error) 8%,var(--fc-card))!important; border-color:transparent!important; }
html[data-ui="erp"] :is(.filter-btn,.contab-tab,.ctz-tab,.gm-cuenta) { border-radius:12px!important; box-shadow:none!important; font-size:13px; font-weight:500; }
html[data-ui="erp"] :is(.filter-btn,.contab-tab,.ctz-tab,.gm-cuenta).active { color:var(--fc-primary)!important; background:var(--fc-card)!important; border-color:transparent!important; box-shadow:var(--fc-shadow)!important; }
html[data-ui="erp"] :is(.filter-bar,.contab-tabs) { gap:6px; }
html[data-ui="erp"] :is(#rrhh-tabs,.contab-tabs,.seg-secciones) { padding:6px; background:var(--fc-nav); border:0; border-radius:16px; margin-bottom:24px; }
html[data-ui="erp"] #rrhh-tabs .filter-btn { padding:11px 14px; border:0!important; border-radius:12px; }
html[data-ui="erp"] #rrhh-tabs .filter-btn.active { background:var(--fc-card)!important; color:var(--fc-primary)!important; box-shadow:var(--fc-shadow)!important; }
html[data-ui="erp"] #rrhh-tabs .rh-task-tab:not(.active) { color:var(--fc-muted)!important; background:transparent!important; }
html[data-ui="erp"] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),select,textarea) { color:var(--fc-ink); background-color:var(--fc-card); border-color:var(--fc-input); border-radius:12px; }
html[data-ui="erp"] :is(input,textarea)::placeholder { color:var(--fc-muted); opacity:1; }
html[data-ui="erp"] input:is([type=checkbox],[type=radio]) { accent-color:var(--fc-primary); }
html[data-ui="erp"] :is(.form-group input:not([type=checkbox]):not([type=radio]),.form-group select,.search-bar input,.rh-toolbar input,.rh-toolbar select,.seg-search) { min-height:44px; }
html[data-ui="erp"] :is(.form-group label,.fact-filtro,.rh-field) { color:var(--fc-muted); font-size:12px; font-weight:500; }
html[data-ui="erp"] :is(.form-grid,.form-grid-3) > * { min-width:0; }

/* Formularios y buscadores: los controles heredados comparten la paleta actual. */
html[data-ui="erp"] :is(.terc-bloque,.modal-header) { border-color:var(--fc-border); }
html[data-ui="erp"] .terc-bloque { background:var(--fc-card); }
html[data-ui="erp"] :is(.terc-bloque-tit,.cw-section-title,.ctz-seccion) { color:var(--fc-ink); }
html[data-ui="erp"] .emp-lupa { background:var(--fc-secondary); color:var(--fc-primary); border-color:var(--fc-border); box-shadow:none; transition:background-color 150ms ease,border-color 150ms ease; }
html[data-ui="erp"] .emp-lupa:hover { background:var(--fc-selected); border-color:var(--fc-input); filter:none; }
html[data-ui="erp"] #modal-tercero .terc-chip input:checked + span { background:var(--fc-selected); color:var(--fc-primary); border-color:var(--fc-input); }
html[data-ui="erp"] .terc-chip input:focus-visible + span { outline:2px solid var(--fc-primary); outline-offset:3px; }
html[data-ui="erp"] :is(.search-dropdown,.sel2-menu,.gm-ctx,.emp-panel,.ui-confirm-box,.datepicker-popover) { background:var(--fc-card)!important; border-color:var(--fc-border); box-shadow:var(--fc-shadow); }
html[data-ui="erp"] .emp-op:is(:hover,:focus-visible) { background:var(--fc-row-hover); }
html[data-ui="erp"] :is(.btn-icon,.btn-action):hover { background:var(--fc-secondary); }
html[data-ui="erp"] .filter-btn.active .ter-cnt { background:var(--fc-selected); color:var(--fc-primary); }

/* Superficies y tablas: una elevación por zona, no una por cada celda. */
html[data-ui="erp"] :is(.fin-kpi-val,.stat-value,.stat-number) { font-size:26px!important; font-weight:600; letter-spacing:-.025em; font-variant-numeric:tabular-nums; }
html[data-ui="erp"] .fin-kpi { padding:22px!important; min-width:0; }
html[data-ui="erp"] .fin-kpi-lbl { color:var(--fc-muted); font-size:12px; }
html[data-ui="erp"] .table-container { min-width:0; max-width:100%; background:var(--fc-card)!important; border:1px solid var(--fc-border); border-radius:16px; box-shadow:var(--fc-shadow); overflow-x:auto; }
html[data-ui="erp"] :is(.data-table,.contab-table,.seg-table) { background:var(--fc-card); font-size:14px; }
html[data-ui="erp"] :is(.data-table,.contab-table,.seg-table) th { background:var(--fc-secondary)!important; color:var(--fc-muted)!important; padding:14px 16px; font-size:12px; font-weight:500; border-color:var(--fc-border)!important; white-space:nowrap; }
html[data-ui="erp"] :is(.data-table,.contab-table,.seg-table) td { border-color:var(--fc-border)!important; padding:14px 16px; font-size:14px; font-variant-numeric:tabular-nums; }
html[data-ui="erp"] :is(.data-table,.contab-table,.seg-table) tbody tr { background:var(--fc-card); }
html[data-ui="erp"] :is(.data-table,.contab-table,.seg-table) tbody tr:hover { background:var(--fc-row-hover)!important; }
/* Las celdas también deben sobrescribir el hover verde !important del tema anterior. */
html[data-ui="erp"] :is(.data-table,.contab-table,.seg-table) tbody tr:hover td { background:var(--fc-row-hover)!important; }
html[data-ui="erp"] :is(.balance-col-header,.bal-col-head,.bal-cab,.pyg-cab,.balance-header) { background:var(--fc-secondary)!important; color:var(--fc-ink)!important; }
html[data-ui="erp"] :is(.bal-total,.balance-total,.pyg-total) { background:var(--fc-selected)!important; color:var(--fc-ink)!important; border-color:var(--fc-border)!important; }
html[data-ui="erp"] .modal { background:rgb(25 37 58 / .25)!important; backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); }
html[data-ui="erp"] :is(.modal-content > .form-actions:last-child,.modal-form > .form-actions:last-child,.modal-form > form > .form-actions:last-child) { background:var(--fc-card)!important; border-color:var(--fc-border); }
html[data-ui="erp"] .modal-header h3 { font-size:21px; font-weight:600; letter-spacing:-.025em; }
html[data-ui="erp"] :is(.modal-close,.btn-icon) { color:var(--fc-muted); }
html[data-ui="erp"] .modal-close:hover { background:var(--fc-secondary); color:var(--fc-ink); }
html[data-ui="erp"] :is(.badge-success,.ctz-pill.aprobada,.ps-state.is-signed) { background:color-mix(in srgb,var(--fc-success) 10%,var(--fc-card))!important; color:var(--fc-success)!important; }
html[data-ui="erp"] :is(.badge-warning,.badge-pendiente) { background:color-mix(in srgb,var(--fc-warning) 10%,var(--fc-card))!important; color:var(--fc-warning)!important; }

/* Inicio, contabilidad, equipo y asistente usan el mismo lenguaje. */
html[data-ui="erp"] #view-dashboard { --home-soft:var(--fc-secondary); --home-line:var(--fc-border); }
html[data-ui="erp"] #view-dashboard .home-section { padding:24px; background:var(--fc-card); border:0; border-radius:22px; box-shadow:var(--fc-shadow); }
html[data-ui="erp"] #view-dashboard :is(.home-top-grid,.home-bottom-grid) { gap:24px; }
html[data-ui="erp"] #view-dashboard .home-section-head h2 { font-size:18px; font-weight:600; }
html[data-ui="erp"] #view-dashboard .home-header { border:0; padding:0; margin-bottom:28px; }
html[data-ui="erp"] #view-dashboard :is(.home-divider,.home-section-divider) { border:0; }
html[data-ui="erp"] #view-dashboard :is(.home-mail-tabs,.home-table thead) { background:var(--fc-secondary); }
html[data-ui="erp"] :is(.chatia-convs,.chatia-chat,.correo-sidebar,.correo-main) { background:var(--fc-card)!important; border-color:var(--fc-border)!important; }
html[data-ui="erp"] :is(.chatia-conv.active,.chatia-conv:hover) { background:var(--fc-selected)!important; }
html[data-ui="erp"] :is(.chatia-avatar,.chatia-user-ava,.gm-avatar) { background:var(--fc-selected)!important; color:var(--fc-primary)!important; }
html[data-ui="erp"] #view-mi-espacio .me-fichar { background:var(--fc-selected)!important; }
html[data-ui="erp"] #view-mi-espacio .me-kpis { border-radius:22px; background:var(--fc-card); box-shadow:var(--fc-shadow); }
html[data-ui="erp"] #view-mi-espacio .me-kpis .fin-kpi { box-shadow:none!important; border-radius:0!important; }
html[data-ui="erp"] :is(.rh-tasks-focus,.aw-summary,.seg-resumen,.mg-summary) { background:var(--fc-card)!important; border-color:var(--fc-border)!important; border-radius:22px; box-shadow:var(--fc-shadow); }

/* Correo: un espacio propio, lista 36 / lectura 64, desplazamientos separados. */
html[data-ui="erp"] body:has(#view-correo:not(.hidden)):not(.employee-app) .nav-sidebar { display:none; }
html[data-ui="erp"] body:has(#view-correo:not(.hidden)):not(.employee-app) .app { padding:16px; max-width:none; }
html[data-ui="erp"] #view-correo { max-width:none; padding:0!important; height:100%; overflow:hidden; }
html[data-ui="erp"] .interfaz-mail-back { display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:8px 12px; margin:12px 12px 4px; border:0; border-radius:12px; background:var(--fc-card); color:var(--fc-primary); font:500 13px var(--fc-font); cursor:pointer; min-height:40px; }
html[data-ui="erp"] #view-correo .gm-layout { display:grid; grid-template-columns:minmax(280px,36fr) minmax(0,64fr); height:100%; min-height:0; border:1px solid var(--fc-border); border-radius:22px; overflow:hidden; background:var(--fc-card); box-shadow:var(--fc-shadow); }
html[data-ui="erp"] #view-correo .gm-lista-col { width:auto; min-width:0; max-width:none; display:flex; flex-direction:column; background:color-mix(in srgb,var(--fc-secondary) 55%,var(--fc-card))!important; border-right:1px solid var(--fc-border); min-height:0; }
html[data-ui="erp"] #view-correo .gm-lista { min-height:0; flex:1; overflow-y:auto; }
html[data-ui="erp"] #view-correo .gm-lectura { width:auto; min-width:0; height:100%; overflow-y:auto; background:var(--fc-card)!important; }
html[data-ui="erp"] #view-correo :is(.gm-cuentas,.gm-toolbar) { background:transparent!important; border-color:var(--fc-border)!important; flex-wrap:wrap; }
html[data-ui="erp"] #view-correo .gm-cuenta { background:transparent!important; border:0!important; }
html[data-ui="erp"] #view-correo .gm-cuenta.active { background:var(--fc-card)!important; }
html[data-ui="erp"] #view-correo :is(.gm-item.active,.gm-thread.active,.gm-row.active) { background:var(--fc-selected)!important; }
html[data-ui="erp"] #view-correo :is(.gm-cuenta-ava,.gm-cuenta-badge,.gm-carpeta-badge) { background:var(--fc-selected)!important; color:var(--fc-primary)!important; }
html[data-ui="erp"] #view-correo :is(.gm-carpeta-btn,.gm-carpeta-menu) { background:var(--fc-card)!important; border-color:var(--fc-border)!important; border-radius:12px; }
html[data-ui="erp"] #view-correo .reply-panel { background:var(--fc-card)!important; padding:24px; margin:0; min-height:100%; }
html[data-ui="erp"] #view-correo .reply-editor { min-height:280px; font-size:15px; line-height:1.65; background:var(--fc-card); border-color:var(--fc-border); }
html[data-ui="erp"] #view-correo :is(.reply-header,.fmt-toolbar,.cc-field) { border-color:var(--fc-border); }
html[data-ui="erp"] #view-correo .email-body { color:#202c3c; background:#fff; }

/* App del empleado: mismos tokens, conserva la navegación y gestos propios. */
html[data-ui="erp"] body.employee-app { --employee-bg:var(--fc-background); --employee-surface:var(--fc-card); --employee-ink:var(--fc-ink); --employee-muted:var(--fc-muted); --employee-line:var(--fc-border); --employee-green:var(--fc-primary); --employee-sage:var(--fc-selected); --accent:var(--fc-primary); --accent-bg:var(--fc-selected); --border:var(--fc-border); --text-primary:var(--fc-ink); --text-secondary:var(--fc-muted); }
html[data-ui="erp"] body.employee-app .main-content { background:transparent!important; }
html[data-ui="erp"] body.employee-app :is(.tar-item,.me-card,.me-kpis) { border-color:var(--fc-border)!important; }
html[data-ui="erp"] :is(.ep-hero,.ep-summary,.ch-nomina-hero,.payroll-summary) { background:var(--fc-selected)!important; color:var(--fc-ink)!important; border-color:var(--fc-border)!important; }
html[data-ui="erp"] :is(.app-permissions-card,.app-permissions-settings) { background:var(--fc-card); border-color:var(--fc-border); }
html[data-ui="erp"] #login-screen { background:transparent!important; }
html[data-ui="erp"] #login-screen > div { background:var(--fc-card)!important; border:0!important; border-radius:24px!important; padding:32px!important; box-shadow:var(--fc-floating)!important; }
html[data-ui="erp"] :is(.login-user,.login-user-btn) { background:var(--fc-card); border-color:var(--fc-border); border-radius:12px; color:var(--fc-ink); }

@media(min-width:801px) and (max-width:1150px) {
  html[data-ui="erp"] body:not(.employee-app) .app { padding:20px; gap:20px; }
  html[data-ui="erp"] body:not(.employee-app) .nav-sidebar { width:220px; min-width:220px; }
}
@media(max-width:800px) {
  html[data-ui="erp"] body:not(.employee-app) .app { padding:0; gap:0; }
  html[data-ui="erp"] body:not(.employee-app) .view { padding:20px 12px 32px; }
  html[data-ui="erp"] :is(.view-header h1,#view-dashboard h1,#view-mi-espacio h1) { font-size:24px; }
  html[data-ui="erp"] .view-header { gap:14px; margin-bottom:22px; }
  html[data-ui="erp"] :is(input:not([type=checkbox]):not([type=radio]),select,textarea) { font-size:16px; }
  /* El menú lateral se abría de borde a borde: por arriba se metía bajo la barra de
     estado y por abajo lo cortaba el menú de pestañas. Ahora cabe entre los dos y,
     si no entra, se desplaza. */
  html[data-ui="erp"] body:not(.employee-app) .nav-sidebar { width:min(300px,88vw); min-width:0; top:calc(8px + env(safe-area-inset-top)); bottom:calc(84px + env(safe-area-inset-bottom)); height:auto; max-height:none; padding:8px; border-radius:24px; background:var(--fc-card)!important; overflow-y:auto; overscroll-behavior:contain; }
  html[data-ui="erp"] .mobile-tabbar { left:12px; right:12px; width:auto; bottom:max(10px,env(safe-area-inset-bottom)); padding:6px; }
  html[data-ui="erp"] .mobile-tabbar .mtb-item { color:var(--fc-muted); border-radius:16px; }
  html[data-ui="erp"] .mobile-tabbar .mtb-item.active { background:var(--fc-card)!important; color:var(--fc-primary)!important; box-shadow:var(--fc-shadow); }
  html[data-ui="erp"] #view-dashboard .home-section { padding:18px; }
  html[data-ui="erp"] .modal-content { border-radius:24px 24px 0 0!important; }
  html[data-ui="erp"] body.employee-app :is(.me-card,.tar-item){ border-radius:22px; }
  html[data-ui="erp"] body:has(#view-correo:not(.hidden)):not(.employee-app) .app { padding:8px; }
  html[data-ui="erp"] #view-correo .gm-layout { grid-template-columns:1fr; border-radius:18px; }
  html[data-ui="erp"] #view-correo .gm-lista-col { height:100%; border:0; }
  html[data-ui="erp"] #view-correo .gm-lectura { display:none; }
  html[data-ui="erp"] #view-correo .gm-layout.gm-lectura-abierta .gm-lista-col { display:none; }
  html[data-ui="erp"] #view-correo .gm-layout.gm-lectura-abierta .gm-lectura { display:flex; flex-direction:column; }
  html[data-ui="erp"] #view-correo .gm-mov-cab { background:var(--fc-card); }
  html[data-ui="erp"] #view-correo .reply-panel { padding:16px; }
  html[data-ui="erp"] #view-correo .reply-editor { min-height:240px; }
}
@media(prefers-reduced-motion:reduce) {
  html[data-ui="erp"] *,html[data-ui="erp"] *::before,html[data-ui="erp"] *::after { animation-iteration-count:1!important; scroll-behavior:auto!important; }
  /* El desplazamiento se va; el color y la opacidad se quedan: son los que explican el estado.
     `transform:none` NO puede ir sobre `*`: rompería el centrado por translate(-50%,-50%). Aquí
     va sólo donde el transform es adorno de entrada. */
  /* Cajones, hojas, marcadores y la hamburguesa se COLOCAN con transform: aquí sólo se les
     quita el deslizamiento. Si les quitáramos el transform se quedarían fuera de su sitio
     (el cajón, abierto para siempre; la X del menú, tres rayas iguales). */
}
@media print {
  html[data-ui="erp"] body { background:#fff!important; color:#000; }
  html[data-ui="erp"] body:not(.employee-app) .app { padding:0; display:block; height:auto; }
  html[data-ui="erp"] :is(.table-container,.me-card,.fin-kpi) { box-shadow:none!important; }
}

/* Componentes con paletas locales de versiones anteriores. */
html[data-ui="erp"] :is(.rp-permissions,.rp-permissions-open) { --rp-ink:var(--fc-ink); --rp-muted:var(--fc-muted); --rp-green:var(--fc-primary); --rp-line:var(--fc-border); background:var(--fc-card); border-color:var(--fc-border); border-radius:16px; }
html[data-ui="erp"] .rp-permissions { background:var(--fc-selected); }
html[data-ui="erp"] :is(.ps-sign,.ps-submit,.ui-dialog-ok) { background:var(--fc-primary)!important; color:var(--fc-on-primary)!important; border-color:var(--fc-primary)!important; border-radius:12px; }
html[data-ui="erp"] :is(.ps-label,.ps-help,.ps-consent,.ps-status,.ps-close,.ps-clear,.ps-cancel) { color:var(--fc-muted); }
html[data-ui="erp"] :is(.ps-body,.ps-footer,.ps-header,.ps-review,.ps-document-top) { background:var(--fc-card); border-color:var(--fc-border); }
html[data-ui="erp"] .ps-signed { background:color-mix(in srgb,var(--fc-success) 10%,var(--fc-card)); color:var(--fc-success); }
html[data-ui="erp"] :is(.payroll-salary,.payroll-amount) { color:var(--fc-ink)!important; }
html[data-ui="erp"] body.employee-app :is(.payroll-caption,.payroll-note,#payroll-year,#payroll-currency,#payroll-received-total span,.rh-location-notice,.rh-location-status) { color:var(--fc-muted); }
html[data-ui="erp"] body.employee-app .payroll-received { border-color:var(--fc-input); }
html[data-ui="erp"] body.employee-app .payroll-progress { background:var(--fc-input); }
html[data-ui="erp"] body.employee-app .btn-primary:hover:not(:disabled) { background:var(--action-hover)!important; border-color:var(--action-hover)!important; color:var(--fc-on-primary)!important; }
html[data-ui="erp"] body.employee-app .tar-foto { background:var(--fc-selected); color:var(--fc-primary); }
html[data-ui="erp"] :is(#tes-seguimiento,#tes-prevision) { --seg-tint:var(--fc-selected); }
html[data-ui="erp"] :is(#tes-seguimiento .seg-summary,#tes-prevision .prev-summary) { background:var(--fc-card); border-radius:22px; box-shadow:var(--fc-shadow); }
html[data-ui="erp"] #contab-panel-balances :is(.bal-col,.pyg-cascada,.pyg-account-group) { background:var(--fc-card); border-radius:22px; border-color:var(--fc-border); box-shadow:var(--fc-shadow); }
html[data-ui="erp"] #contab-panel-balances :is(.bal-head,.pyg-c-title) { background:var(--fc-secondary); color:var(--fc-ink); }
html[data-ui="erp"] #view-dashboard .home-chart-line { stroke:var(--fc-primary); }
html[data-ui="erp"] #view-dashboard .home-chart-point { fill:var(--fc-primary); }
html[data-ui="erp"] #view-dashboard .home-chart-line.is-previous { stroke:var(--fc-muted); }
html[data-ui="erp"] #view-dashboard .home-change.is-up { color:var(--fc-success); }
html[data-ui="erp"] #view-dashboard .home-mail-account.active { border-color:var(--fc-primary); color:var(--fc-primary); }
html[data-ui="erp"] :is(.nav-settings-btn,.sf-card) { background:var(--fc-card)!important; border-color:var(--fc-border)!important; color:var(--fc-ink)!important; border-radius:16px; }
html[data-ui="erp"] :is(.sf-btn,.sidebar-fichar-btn) { background:var(--fc-primary)!important; color:var(--fc-on-primary)!important; }

/* Integración de superficies y controles que antes tenían colores propios. */
html[data-ui="erp"] :is(.admin-grid,.dashboard-grid,.dash-card,.contab-panel) { min-width:0; }
html[data-ui="erp"] .contab-panel { background:var(--fc-card)!important; border-color:var(--fc-border); border-radius:22px; box-shadow:var(--fc-shadow); }
html[data-ui="erp"] :is(.dash-card,.contab-panel) .table-container { box-shadow:none; }
html[data-ui="erp"] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),select,textarea) { color:var(--fc-ink)!important; background-color:var(--fc-card)!important; border-color:var(--fc-input)!important; }
html[data-ui="erp"] :is(input,textarea)::placeholder { color:var(--fc-muted)!important; }
html[data-ui="erp"] .nav-fichar-btn { background:var(--fc-card); color:var(--fc-ink); border-color:var(--fc-input); border-radius:12px; }
html[data-ui="erp"] .nav-fichar-btn-primary { background:var(--fc-primary); color:var(--fc-on-primary); border-color:var(--fc-primary); }
html[data-ui="erp"] #view-mi-espacio .me-fichar { border-radius:22px; }
html[data-ui="erp"] #view-correo :is(.gm-cuenta-tab,.gm-mov-back) { border-color:var(--fc-input); color:var(--fc-muted); background:var(--fc-card); border-radius:12px; }
html[data-ui="erp"] #view-correo .gm-cuenta-tab.active { background:var(--fc-card); color:var(--fc-primary); border-color:var(--fc-border); box-shadow:var(--fc-shadow); }
html[data-ui="erp"] #view-correo :is(.gm-cuenta-ini,.gm-cuenta-tab.active .gm-cuenta-ini) { background:var(--fc-selected); color:var(--fc-primary); }
html[data-ui="erp"] #view-correo .gm-noleido .gm-item-from { color:var(--fc-ink); }
html[data-ui="erp"] #view-correo .gm-noleido .gm-item-from::after { background:var(--fc-primary); }
html[data-ui="erp"] #view-correo .gm-fab { background:var(--fc-primary); color:var(--fc-on-primary); box-shadow:var(--fc-button-shadow); }
@media(max-width:800px) {
  html[data-ui="erp"] .admin-grid { grid-template-columns:minmax(0,1fr)!important; }
  html[data-ui="erp"] .mobile-tabbar button { color:var(--fc-muted); }
  html[data-ui="erp"] .mobile-tabbar button.active { background:var(--fc-selected); color:var(--fc-primary); box-shadow:none; }
  html[data-ui="erp"] .mobile-tabbar button.active svg { background:transparent; }
  html[data-ui="erp"] body:has(#view-correo:not(.hidden)) :is(.app,.main-content) { height:100dvh!important; padding-bottom:0!important; }
  html[data-ui="erp"] #view-correo .gm-lectura { top:0; bottom:0; height:100dvh; }
  html[data-ui="erp"] #view-correo .gm-fab { bottom:calc(20px + env(safe-area-inset-bottom)); }
  html[data-ui="erp"] #view-correo .gm-mov-cab { border-color:var(--fc-border); }
  html[data-ui="erp"] .contab-panel { padding:16px; }
}

/* Contraste de controles heredados con fondo de acción. */
html[data-ui="erp"] .btn-send { background:var(--fc-primary)!important; color:var(--fc-on-primary)!important; }
html[data-ui="erp"] :is(#tes-vista,#tes-modo,#filter-tipo-balance) .filter-btn.active { background:var(--fc-card)!important; color:var(--fc-primary)!important; border-color:transparent!important; }

html[data-ui="erp"] .wizard-step.active .wizard-num,
html[data-ui="erp"] .linea-card:focus-within .linea-card-num { color:var(--fc-on-primary); }

/* Revisión de integración: estados locales de chat, acceso e inventario. */
html[data-ui="erp"] #btn-chatia-enviar,
html[data-ui="erp"] .chatint-enviar { background:var(--fc-primary)!important; color:var(--fc-on-primary)!important; }
html[data-ui="erp"] #btn-chatia-enviar:hover:not(:disabled),
html[data-ui="erp"] .chatint-enviar:hover:not(:disabled) { background:var(--action-hover)!important; }
html[data-ui="erp"] #btn-chatia-enviar:disabled { background:var(--fc-input)!important; color:var(--fc-muted)!important; }
html[data-ui="erp"] :is(.chatia-bv-chip,.chatia-input-row,.chatint-input-row) { background:var(--fc-card); border-color:var(--fc-input); color:var(--fc-ink); }
html[data-ui="erp"] :is(.chatia-bv-ico,.chatint-conv-tag) { background:var(--fc-selected); color:var(--fc-primary); }
html[data-ui="erp"] :is(.chatia-bv-chip,.chatia-clip):hover { background:var(--fc-selected); color:var(--fc-primary); border-color:var(--fc-input); transform:none; }
html[data-ui="erp"] .chatia-input-row:focus-within { border-color:var(--fc-primary); box-shadow:0 0 0 3px var(--fc-selected); }
html[data-ui="erp"] .chatia-ia { background:var(--fc-secondary); }
html[data-ui="erp"] .chatia-usuario { background:var(--fc-primary); color:var(--fc-on-primary); }
html[data-ui="erp"] #view-correo .gm-cuenta-tab.active { background:var(--fc-card)!important; color:var(--fc-primary)!important; border-color:var(--fc-border)!important; }
html[data-ui="erp"] #view-correo .gm-cuenta-tab:hover { background:var(--fc-selected)!important; color:var(--fc-primary)!important; border-color:var(--fc-border)!important; }
html[data-ui="erp"] #view-contabilidad .contab-dash-grupo { background:var(--fc-card); border-color:var(--fc-border); box-shadow:var(--fc-shadow); }
html[data-ui="erp"] #view-contabilidad .contab-dash-grupo .contab-dash-card { background:transparent!important; box-shadow:none!important; }
html[data-ui="erp"] #view-contabilidad .contab-dash-grupo .contab-dash-card:hover { background:var(--fc-selected)!important; border-color:transparent!important; box-shadow:none!important; transform:none; }
html[data-ui="erp"] #view-contabilidad .contab-dash-grupo .contab-dash-card .cdc-ico { background:var(--fc-selected)!important; color:var(--fc-primary)!important; border-color:transparent!important; }
html[data-ui="erp"] .rp-permissions-open { color:var(--fc-ink); }
html[data-ui="erp"] .rp-permissions-open:hover { background:var(--fc-selected); color:var(--fc-primary); }
html[data-ui="erp"] body.employee-app :is(#me-hoy-horas,.employee-clock-top .me-card-tit) { color:var(--fc-ink); }
html[data-ui="erp"] body.employee-app :is(#me-hoy-horas .employee-time-unit,.me-reloj > small,.me-estado b) { color:var(--fc-muted); }
html[data-ui="erp"] .login-user-card { background:var(--fc-card); border-color:var(--fc-input); border-radius:12px; }
html[data-ui="erp"] .login-user-card:hover { background:var(--fc-selected); border-color:var(--fc-input); transform:none; }

/* Repaso del 20 de septiembre: restos verdes de la capa anterior, fichaje del lateral y cajón de totales. */
html[data-ui="erp"] .dir-destacada input { background-color:var(--fc-card)!important; }
html[data-ui="erp"] .chatia-ia { background:var(--fc-secondary); }

/* El fichaje del lateral: una línea de estado y dos botones, sin ocupar media barra. */
html[data-ui="erp"] .nav-fichar { border-radius:14px; padding:10px 12px; }
html[data-ui="erp"] .nav-fichar-estado { font-size:12.5px; line-height:1.25; margin-bottom:6px; flex-wrap:nowrap; }
html[data-ui="erp"] .nav-fichar-estado small { font-size:11.5px; white-space:nowrap; }
html[data-ui="erp"] .nav-fichar-btn { padding:6px 8px; font-size:12px; border-radius:9px; min-height:0; }
html[data-ui="erp"] .nav-fichar :is(.rh-location-notice,.rh-location-status) { font-size:11px; }
html[data-ui="erp"] .nav-fichar .rh-location-notice summary { font-size:11px; margin-top:6px; }
html[data-ui="erp"] .nav-fichar .rh-location-status:empty { display:none; }

/* Albarán: etiquetas y totales con el mismo aire que el resto de ventanas. */

/* ============================================================================
   Barrido de restos verdes (21 de septiembre).
   La capa anterior («Cristal y lima») escribe estos colores a mano y con
   !important; aquí se traducen a los tokens --fc-* SOLO con la estética
   interfaz activa, para que volver a la capa verde siga siendo posible.
   ========================================================================== */

/* Etiquetas de formulario: la capa anterior las pinta en oliva con más peso
   de selector que la regla general de arriba. */
html[data-ui="erp"] :is(.form-group label,.ctz-campo label,.cw-section .form-group label,.af-check,.cb-check) { color:var(--fc-muted); }

/* Tablas de las pantallas que no usan .data-table. */
html[data-ui="erp"] :is(.ctz-tabla,.chatia-tabla,.fin-table,.conc-tabla) th { background:var(--fc-secondary)!important; color:var(--fc-muted)!important; border-color:var(--fc-border)!important; }
html[data-ui="erp"] :is(.ctz-tabla,.chatia-tabla,.fin-table,.conc-tabla) td { color:var(--fc-ink); border-color:var(--fc-border)!important; }
html[data-ui="erp"] .data-table .total-row td { background:var(--fc-secondary)!important; color:var(--fc-ink)!important; }

/* Cabeceras, iconos redondeados y cifras grandes de las fichas. */
html[data-ui="erp"] :is(.stat-value,.fin-kpi-val,.ctz-kpi-val,.tf-stat-val,.cs2-val) { color:var(--fc-ink)!important; }
html[data-ui="erp"] .stat-icon svg { stroke:var(--fc-primary)!important; }
html[data-ui="erp"] :is(.ctz-kpi,.tf-stat,.contab-dash-grupo,.maintenance-status,#tes-vista,.chatia-lista-col,.chatia-panel,.chatint-head-left,.chatint-conv-head,.reply-panel,.table-container) { border-color:var(--fc-border)!important; }
html[data-ui="erp"] :is(.maintenance-status,#tes-vista,.ctz-kpi,.tf-stat) { background:var(--fc-card)!important; }
html[data-ui="erp"] .ctz-kpi.ctz-kpi-destacado { background:var(--fc-selected)!important; }
html[data-ui="erp"] .contab-dash-grupo:nth-child(1) { background:var(--fc-card)!important; }
html[data-ui="erp"] .contab-dash-grupo .contab-dash-card::after { color:var(--fc-muted); }

/* Listas activas: correo, carpetas y conversaciones. */
html[data-ui="erp"] :is(.gm-carpeta.active,.gm-item.active,.email-item.active,.chatia-conv-activa) { background:var(--fc-selected)!important; color:var(--fc-primary); border-color:var(--fc-border); }
html[data-ui="erp"] :is(.chatia-burbuja-user,.chatia-burbuja.usuario,.ctz-chat-user) { background:var(--fc-primary)!important; color:var(--fc-on-primary)!important; }

/* Avisos y distintivos sueltos que seguían en verde o salvia. */
html[data-ui="erp"] :is(.reply-attachment,.ai-status,.asi-cuadre-ok,.ctz-buzon-ok) { background:var(--success-bg); }
html[data-ui="erp"] .per-chip.per-abierto { background:var(--fc-selected); color:var(--fc-primary); }
html[data-ui="erp"] .login-user-avatar { background:var(--fc-selected)!important; color:var(--fc-primary)!important; }
html[data-ui="erp"] :is(.terc-bloque-tit,.cw-section-title,.ctz-seccion) { color:var(--fc-ink); }
html[data-ui="erp"] #mobile-nav-toggle { border-color:var(--fc-border); color:var(--fc-ink); }
html[data-ui="erp"] .mobile-nav-open #mobile-nav-toggle { background:var(--fc-selected); }
html[data-ui="erp"] :is(.btn-icon,.btn-action):hover { background:var(--fc-selected); }
html[data-ui="erp"] :is(input,select,textarea):focus { border-color:var(--fc-primary)!important; }


/* Densidad: la fila se ajusta al contenido en vez de reservar 118 px fijos. */

/* La tarjeta: la hora deja de robar sitio al nombre, que ya dispone de dos
   líneas completas. El resto del detalle sigue en el título emergente. */
/* El estado ya se lee en el texto y en el fondo; la tarjeta no necesita
   además una pestaña de color en el costado. */
/* Con tarjetas dentro, «Programar» se queda en una franja discreta: la casilla
   no crece y el sitio sigue estando donde se espera. */
/* Sin ratón no hay hover: en móvil la franja se ve entera. */


/* «Programar» es un hueco que espera, no un botón que reclama. */


/* Indicadores (contabilidad, tesorería, cotizaciones): la capa anterior los pintaba
   de menta, azul, morado y arena por posición, y el azul se perdía contra el fondo.
   Tarjeta blanca como el resto del panel; el color vive en el icono, que es donde
   distingue sin competir. */
html[data-ui="erp"] :is(.stat-card,.fin-kpi,.ctz-kpi,.tf-stat),
html[data-ui="erp"] :is(.stat-card,.fin-kpi,.ctz-kpi,.tf-stat):nth-child(4n+2),
html[data-ui="erp"] :is(.stat-card,.fin-kpi,.ctz-kpi,.tf-stat):nth-child(4n+3),
html[data-ui="erp"] :is(.stat-card,.fin-kpi,.ctz-kpi,.tf-stat):nth-child(4n+4),
html[data-ui="erp"] :is(.stat-card.stat-blue,.stat-card.stat-purple,.stat-card.stat-orange,.stat-card.stat-green),
html[data-ui="erp"] .fin-kpi:has(.fin-kpi-rojo) { background:var(--fc-card)!important; border:1px solid var(--fc-border)!important; box-shadow:var(--fc-shadow)!important; }

html[data-ui="erp"] .ctz-kpi-ico { width:38px; height:38px; border-radius:11px; }
html[data-ui="erp"] .ctz-ico-verde { background:#e6f2ec!important; color:#2f6b55!important; }
html[data-ui="erp"] .ctz-ico-azul { background:#e8eef9!important; color:#3a5a8c!important; }
html[data-ui="erp"] .ctz-ico-morado { background:#efeaf7!important; color:#5b4a86!important; }
html[data-ui="erp"] .ctz-kpi-ico[style*="warning"] { background:#f8eee0!important; color:#8a5d1c!important; }
html[data-ui="erp"] :is(.stat-icon,.fin-kpi-ico) { border-radius:11px; }

/* Pestañas de RRHH: llevaban el subrayado de la estética anterior y, al no tener la
   barra hueco a los lados, la marca del primero se salía por la esquina redondeada.
   Van como el resto de barras del programa: pastilla blanca sobre la barra. */
html[data-ui="erp"] #view-rrhh #rrhh-tabs { padding:6px; gap:4px; border-bottom:0; }
html[data-ui="erp"] #view-rrhh #rrhh-tabs .filter-btn { border-bottom:0!important; border-radius:12px; padding:9px 14px; min-height:38px; }
html[data-ui="erp"] #view-rrhh #rrhh-tabs .filter-btn.active { background:var(--fc-card)!important; color:var(--fc-primary)!important; box-shadow:var(--fc-shadow)!important; border-bottom:0!important; }
html[data-ui="erp"] #view-rrhh #rrhh-tabs .rh-task-tab { background:transparent!important; padding:9px 14px; }
html[data-ui="erp"] #view-rrhh #rrhh-tabs .rh-task-tab.active { background:var(--fc-card)!important; }
html[data-ui="erp"] .rhh-filtro[aria-pressed="true"] { background:var(--fc-primary); border-color:var(--fc-primary); color:var(--fc-on-primary); }
html[data-ui="erp"] .rhh-filtro[aria-pressed="true"] b { color:var(--fc-on-primary); }

/* Móvil: la estética nueva rehizo el margen superior de las vistas y se perdió el
   hueco de la barra de estado del teléfono, así que el título y el botón de volver
   quedaban debajo de la hora y de la isla dinámica. El hueco vuelve, y en la app
   instalada un poco más, que ahí no hay barra del navegador que lo tape. */
@media(max-width:800px) {
  html[data-ui="erp"] body:not(.employee-app) .view { padding-top:calc(20px + env(safe-area-inset-top)); }
  html[data-ui="erp"] body:not(.employee-app) :is(.gm-mov-head,.gm-mov-cab,.chatia-mov-cab) { padding-top:calc(10px + env(safe-area-inset-top)); }
}
@media(display-mode:standalone) and (max-width:800px) {
  html[data-ui="erp"] body:not(.employee-app) .view { padding-top:calc(26px + env(safe-area-inset-top)); }
}

/* App del empleado: la tarjeta de jornada iba del mismo azul pálido que el fondo y
   no se despegaba; y la barra de abajo era blanca al 65 %, con la marca del
   seleccionado también blanca, así que se veía un pico raro donde acababa la
   tarjeta de detrás. */
html[data-ui="erp"] #view-mi-espacio .me-fichar,
html[data-ui="erp"] body.employee-app .me-fichar { background:var(--fc-card)!important; border:1px solid var(--fc-border)!important; box-shadow:var(--fc-shadow); }
html[data-ui="erp"] body.employee-app .me-fichar[data-clock-state="dentro"] { background:var(--fc-card)!important; border-color:color-mix(in srgb,var(--fc-success) 35%,var(--fc-border))!important; }
html[data-ui="erp"] body.employee-app .me-fichar[data-clock-state="pausa"] { background:var(--fc-card)!important; border-color:color-mix(in srgb,var(--fc-warning) 35%,var(--fc-border))!important; }


@media(max-width:800px) {
  /* El correo se sale por arriba en la app: su vista anula el margen de las demás,
     así que el hueco de la barra de estado tiene que ponerlo su propio marco. */
  /* Solo el marco exterior pone el hueco: si lo ponen los dos, en el iPhone se suma
     dos veces y el correo aparece caído media pantalla. */
  html[data-ui="erp"] body:has(#view-correo:not(.hidden)):not(.employee-app) .app { padding-top:calc(10px + env(safe-area-inset-top))!important; }
  html[data-ui="erp"] body:has(#view-correo:not(.hidden)):not(.employee-app) .main-content { padding-top:0!important; }
  html[data-ui="erp"] #view-correo :is(.gm-mov-head,.gm-mov-cab) { padding-top:10px; }
  html[data-ui="erp"] #view-correo .gm-lectura { top:env(safe-area-inset-top); height:calc(100dvh - env(safe-area-inset-top)); }

  /* La barra de abajo iba pegada al borde: flota por encima de la línea del iPhone. */
  html[data-ui="erp"] .mobile-tabbar { bottom:calc(var(--vv-hueco, 0px) + max(12px, env(safe-area-inset-bottom))); }
  html[data-ui="erp"] body.employee-app #employee-nav{ bottom:calc(14px + env(safe-area-inset-bottom))!important; }
}

/* En la app instalada la página se desliza por debajo de la barra de estado y se
   veían los números y los títulos pasando tras la hora y la isla. Una franja del
   color del fondo tapa esa zona mientras se desplaza. */
@media(display-mode:standalone) {
  html[data-ui="erp"] body::after { content:''; position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top); background:var(--fc-background); z-index:1200; pointer-events:none; }
}

@media(max-width:800px) {
  /* En el correo el menú de abajo se escondía: en la app es la única forma de salir
     sin gestos raros, así que se queda, y la lista deja sitio para que no lo tape. */
  html[data-ui="erp"] body:has(#view-correo:not(.hidden)):not(.employee-app) .mobile-tabbar { display:grid; }
  html[data-ui="erp"] #view-correo .gm-lista { padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  html[data-ui="erp"] #view-correo .gm-fab { bottom:calc(92px + env(safe-area-inset-bottom)); }
  html[data-ui="erp"] #view-correo .gm-lectura { padding-bottom:calc(86px + env(safe-area-inset-bottom)); }
  /* Y el título del correo no necesita dos huecos: el de arriba ya lo pone el marco. */
  html[data-ui="erp"] #view-correo .gm-mov-head { padding-top:6px; }
}

@media(max-width:800px) {
  /* Inicio en el móvil: fuera la fecha y la hora de actualización, que ya se ven en
     el teléfono y en la tarjeta del correo. El título manda y los dos botones van
     a la par, cada uno con la mitad del ancho. */
  html[data-ui="erp"] #view-dashboard :is(#home-date,#home-updated) { display:none; }
  html[data-ui="erp"] #view-dashboard .home-header { gap:16px; margin-bottom:6px; }
  html[data-ui="erp"] #view-dashboard .home-heading h1 { font-size:30px; line-height:1.15; letter-spacing:-.04em; }
  html[data-ui="erp"] #view-dashboard .home-header-actions { width:100%; gap:10px; }
  html[data-ui="erp"] #view-dashboard .home-header-actions .home-button { flex:1 1 0; min-width:0; justify-content:center; min-height:44px; }
}

@media(max-width:800px) {
  /* El chat acaba justo donde empieza el menú de abajo y le tapaba la casilla de
     escribir: deja sitio para la barra. */
  html[data-ui="erp"] body:not(.employee-app) .chatia-panel { padding-bottom:calc(8px + 78px + env(safe-area-inset-bottom)); }
  html[data-ui="erp"] body:not(.employee-app) .chatia-input-row { padding-bottom:0; }
  html[data-ui="erp"] body:not(.employee-app) .chatia-input-row { margin-bottom:0; }
}

@media(max-width:800px) {
  /* Inicio · Facturación en el móvil: el selector de mes peleaba con el título, la
     letra bajaba a 10 px, la tabla de comparación se salía de la tarjeta y la
     última sección quedaba debajo del menú. */
  /* Todas las tarjetas con el mismo margen por dentro: al quitarlo, el contenido
     tocaba los bordes y cada tarjeta empezaba en un sitio distinto. */
  html[data-ui="erp"] #view-dashboard .home-section { padding:18px; }
  html[data-ui="erp"] #view-dashboard .home-section-head { flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:14px; }
  html[data-ui="erp"] #view-dashboard .home-section-head > :last-child { margin-left:auto; }
  /* Las filas del correo y de la agenda se alinean con el título, sin sangrías sueltas. */
  html[data-ui="erp"] #view-dashboard .home-email { padding:10px 0; }
  html[data-ui="erp"] #view-dashboard .home-pending { margin-top:18px; padding-top:16px; }
  /* Los estados vacíos llevaban sangría propia y mucho aire: se alinean con el resto. */
  html[data-ui="erp"] #view-dashboard .home-empty { padding:20px 0; }
  /* Y la letra menuda de las tarjetas sube a un tamaño que se lee en la mano. */
  html[data-ui="erp"] #view-dashboard :is(.home-link,.home-empty,.home-email-subject,.home-email small,.home-email time) { font-size:13px; }
  html[data-ui="erp"] #view-dashboard .home-title-inline { width:100%; }
  html[data-ui="erp"] #view-dashboard #home-month { width:100%; max-width:100%; font-size:15px; min-height:44px; }
  html[data-ui="erp"] #view-dashboard :is(select,input) { max-width:100%; }
  html[data-ui="erp"] #view-dashboard .home-chart-legend { flex-wrap:wrap; gap:4px 14px; }
  html[data-ui="erp"] #view-dashboard .home-comparison-table { table-layout:fixed; width:100%; font-size:11.5px; }
  html[data-ui="erp"] #view-dashboard .home-comparison-table :is(th,td) { padding:8px 4px; }
  html[data-ui="erp"] #view-dashboard :is(.home-method,.home-chart-legend,.home-chart text) { font-size:12px; }
  html[data-ui="erp"] #view-dashboard .home-chart { width:calc(100% - 6px); }
  html[data-ui="erp"] #view-dashboard .home-method { margin-top:14px; color:var(--fc-muted); }
  /* Sitio al final para que la última tarjeta no acabe debajo del menú de abajo. */
  html[data-ui="erp"] body:not(.employee-app) #view-dashboard { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
}

/* Correo: las firmas de la gente vienen con tablas e imágenes de ancho fijo hechas
   para el ordenador y en el móvil se salían. Se les pone techo sin tocar el
   contenido, y lo que no cabe (una tabla ancha) se desplaza dentro de su caja. */
@media(max-width:800px) {
  html[data-ui="erp"] #view-correo .email-body { overflow-x:auto; overflow-wrap:anywhere; }
  html[data-ui="erp"] #view-correo .email-body :is(img,video) { max-width:100%!important; height:auto!important; }
  html[data-ui="erp"] #view-correo .email-body :is(table,td,th) { max-width:100%!important; }
  html[data-ui="erp"] #view-correo .email-body table { width:auto!important; }
  html[data-ui="erp"] #view-correo .email-body :is(div,p,span,td) { max-width:100%; }
}
/* Y el sin leer se nota: negrita, punto azul y un fondo apenas insinuado. */
html[data-ui="erp"] #view-correo .gm-item.gm-noleido { background:color-mix(in srgb, var(--fc-selected) 60%, var(--fc-card)); }
html[data-ui="erp"] #view-correo .gm-item.gm-noleido :is(.gm-item-from,.gm-item-l2) { font-weight:700; color:var(--fc-ink); }
html[data-ui="erp"] #view-correo .gm-item:not(.gm-noleido) :is(.gm-item-from,.gm-item-l2) { font-weight:400; color:var(--fc-muted); }
html[data-ui="erp"] #view-correo .gm-item:not(.gm-noleido) .gm-item-from { color:var(--fc-ink); }

/* Contabilizador: su marco venía con un margen negativo de 32 px, pensado para el
   relleno que tenían las vistas antes. Con la estética nueva eso lo empujaba fuera
   de la pantalla por la derecha. Ahora encaja en su sitio, como cualquier panel. */
html[data-ui="erp"] #view-correo-contable .correo-layout { margin:0; height:calc(100dvh - 150px); min-height:520px; border:1px solid var(--fc-border); border-radius:22px; overflow:hidden; box-shadow:var(--fc-shadow); }
html[data-ui="erp"] #view-correo-contable .correo-sidebar { border-right-color:var(--fc-border); }
@media(max-width:800px) {
  html[data-ui="erp"] #view-correo-contable .correo-layout { flex-direction:column; height:auto; min-height:0; }
  html[data-ui="erp"] #view-correo-contable .correo-sidebar { width:auto; min-width:0; border-right:0; border-bottom:1px solid var(--fc-border); }
}

@media(max-width:800px) {
  /* Pendientes: cuatro columnas no caben en un teléfono y había que arrastrar la
     tabla a un lado para ver el importe. Cada asunto pasa a ser un bloque: qué
     necesita atención arriba, cuántos documentos e importe debajo, y la acción al
     final. Sin desplazamiento lateral. */
  html[data-ui="erp"] #view-dashboard .home-table-scroll { overflow:visible; }
  html[data-ui="erp"] #view-dashboard .home-task-table { min-width:0; width:100%; display:block; font-size:13px; }
  html[data-ui="erp"] #view-dashboard .home-task-table thead { display:none; }
  html[data-ui="erp"] #view-dashboard .home-task-table tbody { display:block; }
  html[data-ui="erp"] #view-dashboard .home-task-table tr { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:baseline; gap:2px 12px; padding:14px 0; border-bottom:1px solid var(--fc-border); }
  html[data-ui="erp"] #view-dashboard .home-task-table tr:last-child { border-bottom:0; }
  html[data-ui="erp"] #view-dashboard .home-task-table td { display:block; padding:0; border:0; }
  html[data-ui="erp"] #view-dashboard .home-task-table td:nth-child(1) { grid-column:1/-1; padding-left:20px; font-weight:600; }
  html[data-ui="erp"] #view-dashboard .home-task-table td:nth-child(2) { color:var(--fc-muted); font-size:12.5px; padding-left:20px; }
  html[data-ui="erp"] #view-dashboard .home-task-table td:nth-child(3) { text-align:right; font-weight:600; font-variant-numeric:tabular-nums; }
  html[data-ui="erp"] #view-dashboard .home-task-table td:nth-child(4) { grid-column:1/-1; padding-left:20px; margin-top:6px; }
}

@media(max-width:800px) {
  /* Inicio · ajuste de espacios: el título de cada tarjeta y su enlace caben en la
     misma línea, los nombres dejan de rozar el borde y cada bloque respira igual. */
  /* Título y enlace en la misma línea; lo ancho (el selector de mes) sigue pudiendo
     bajar a su propio renglón en vez de salirse de la tarjeta. */
  html[data-ui="erp"] #view-dashboard .home-section-head { flex-wrap:wrap; align-items:baseline; gap:10px 12px; }
  html[data-ui="erp"] #view-dashboard .home-section-head > select { flex:1 0 100%; }
  html[data-ui="erp"] #view-dashboard .home-title-inline { min-width:0; flex:1 1 auto; }
  html[data-ui="erp"] #view-dashboard .home-section-head > .home-link { flex:0 0 auto; margin-left:auto; white-space:nowrap; }
  html[data-ui="erp"] #view-dashboard .home-section-head h2 { min-width:0; overflow-wrap:anywhere; }

  /* Correo: el remitente manda; fecha y estado se quedan con lo justo. */
  html[data-ui="erp"] #view-dashboard .home-email { gap:4px 12px; }
  html[data-ui="erp"] #view-dashboard .home-email strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
  html[data-ui="erp"] #view-dashboard .home-email :is(time,small) { white-space:nowrap; }

  /* Pendientes: aire entre el asunto, las cifras y la acción. */
  html[data-ui="erp"] #view-dashboard .home-task-table tr { gap:6px 12px; padding:16px 0; }
  html[data-ui="erp"] #view-dashboard .home-task-table td:nth-child(1) strong { display:block; line-height:1.35; }
  html[data-ui="erp"] #view-dashboard .home-task-table td:nth-child(1) small { display:block; margin-top:3px; font-weight:400; font-size:12px; line-height:1.4; color:var(--fc-muted); }
  html[data-ui="erp"] #view-dashboard .home-task-table td:nth-child(4) { margin-top:10px; }

  /* Las tarjetas sin nada que enseñar no necesitan media pantalla de aire. */
  html[data-ui="erp"] #view-dashboard :is(.table-empty,.home-empty) { padding:6px 0; min-height:0; }
}

/* Existencias y mercaderías: las tarjetas venían con una franja de color arriba,
   la etiqueta en mayúsculas de color y la cifra secundaria también de color —tres
   acentos por tarjeta—. Con la estética nueva basta con el icono: tarjeta blanca,
   cifra en tinta y el color solo donde distingue. */
html[data-ui="erp"] .ex-azul { --ex-c:var(--fc-primary); }