@font-face{font-family:'Archivo Q2W';src:url('./fonts/Archivo-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap;}
@font-face{font-family:'Archivo Q2W';src:url('./fonts/Archivo-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;}
@font-face{font-family:'Public Sans Q2W';src:url('./fonts/PublicSans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Public Sans Q2W';src:url('./fonts/PublicSans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}
@font-face{font-family:'Public Sans Q2W';src:url('./fonts/PublicSans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Mono Q2W';src:url('./fonts/IBMPlexMono-Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;}
@font-face{font-family:'Plex Mono Q2W';src:url('./fonts/IBMPlexMono-Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;}

:root{
  color-scheme: light;
  --display: 'Archivo Q2W', ui-sans-serif, system-ui, sans-serif;
  --body: 'Public Sans Q2W', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: 'Plex Mono Q2W', ui-monospace, 'SF Mono', monospace;

  --ink: #161A1D;
  --ink-soft: #4A5260;
  --ink-faint: #5B6472;
  --paper: #ffffff;
  /*--paper: #F5F3F4;*/
  --surface: #FFFFFF;
  --surface-sunken: #EDF1F6;
  --line: #D5DBE4;
  --line-soft: #E8ECF2;
  --topbar-bg: #E6EAF0;
  --search-bg: #E6EAF0;
  --bgGrey1:#3A4352;
  --bgDark1:#171D24;
  --bgDark2:#11161C;
  --bgDark3:#0D1117;
  --bgDark4: #171D24; /*Used on SideNav Panel*/
  --bgLight: #EDF1F6;
  --bgLight2: #f5f5f5;
  --sideNavBg: #f3f3f4;
  --text1: #F3F5F9;
  --text2: #7D8795;

  --accent: #F42A5F;
  --accent-strong: #D01E4C;
  --accent-wash: #FDE8EE;
  --accent-swatch: #F42A5F;
  --accent-black: #1e1e27;
  /* Fixed brand pink, never overridden by .module-quotes -- for a button that should
     stay pink (like OT's) even on a Cotizaciones page, which reskins --accent green. */
  --brand-pink: #F42A5F;
  --brand-pink-strong: #D01E4C;
  --pill-neutral: #5B6472;
  --pill-info: #177EC7;
  --pill-warning: #FF7106;
  --pill-good: #1E8A5F;
  --pill-critical: #E10421;
  --accent-grey: #999999;
  --activeBg: #bfbfbf;
  --activeBg2: #eaeaea;
  --activeLabel: #000000;
  --btn-ghost-bg: #EDF1F6; --btn-ghost-hover: #DCE2EA;
  --chevron-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F7887' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5L12 15l6.5-6.5'/%3E%3C/svg%3E");

  --good: #1E8A5F;      --good-wash: #E4F3EB;
  --warning: #9C6608;   --warning-wash: #FBF0DC;
  --critical: #8A1216;  --critical-wash: #F5E1E0;
  --info: #4552A6;      --info-wash: #E9EAF7;
  --neutral: #39708F;   --neutral-wash: #E9EFF3;

  /* avatar palette */
  --av-0-bg:#12233a;  --av-0-tx:#60a5fa; /* blue */
  --av-1-bg:#133d3d;  --av-1-tx:#2dd4bf; /* teal */
  --av-2-bg:#3f230b;  --av-2-tx:#fb923c; /* orange */
  --av-3-bg:#441818;  --av-3-tx:#f87171; /* red */
  --av-4-bg:#271e47;  --av-4-tx:#c084fc; /* purple */
  --av-5-bg:#1a2042;  --av-5-tx:#818cf8; /* indigo */
  --av-6-bg:#082832;  --av-6-tx:#22d3ee; /* cyan */
  --av-7-bg:#143427;  --av-7-tx:#4ade80; /* green */
  --av-8-bg:#3e142b;  --av-8-tx:#f472b6; /* pink */
  --av-9-bg:#31220b;  --av-9-tx:#fbbf24; /* amber */
  --av-10-bg:#142314; --av-10-tx:#86efac; /* lime */
  --av-11-bg:#251532; --av-11-tx:#d8b4fe; /* violet */
  --av-12-bg:#161634; --av-12-tx:#a5b4fc; /* lavender */

 /* avatar light palette matched to dark palette */
--av-light-0-bg:#208bea;  --av-light-0-tx:#0d3d4d; /* blue */
--av-light-1-bg:#00a6a6;  --av-light-1-tx:#1e4d3a; /* teal */
--av-light-2-bg:#f79400;  --av-light-2-tx:#3d2a0e; /* orange */
--av-light-3-bg:#f04444;  --av-light-3-tx:#7b2d2d; /* red */
--av-light-4-bg:#8455f6;  --av-light-4-tx:#3b2d6e; /* purple */
--av-light-5-bg:#526de0;  --av-light-5-tx:#242d5e; /* indigo */
--av-light-6-bg:#00a6a6;  --av-light-6-tx:#0d3d4d; /* cyan */
--av-light-7-bg:#36a852;  --av-light-7-tx:#1e4d3a; /* green */
--av-light-8-bg:#ec3f91;  --av-light-8-tx:#5c1e40; /* pink */
--av-light-9-bg:#f79400;  --av-light-9-tx:#3d2a0e; /* amber */
--av-light-10-bg:#63c900; --av-light-10-tx:#1e4d3a; /* lime */
--av-light-11-bg:#9b59b6; --av-light-11-tx:#3b2d6e; /* violet */
--av-light-12-bg:#c13fc1; --av-light-12-tx:#5c1e40; /* lavender */



/* dark palette */
--dark-bg-blue:#12233a;      --dark-tx-blue:#60a5fa;
--dark-bg-teal:#133d3d;      --dark-tx-teal:#2dd4bf;
--dark-bg-orange:#3f230b;    --dark-tx-orange:#fb923c;
--dark-bg-red:#441818;       --dark-tx-red:#f87171;
--dark-bg-purple:#271e47;    --dark-tx-purple:#c084fc;
--dark-bg-indigo:#1a2042;    --dark-tx-indigo:#818cf8;
--dark-bg-cyan:#082832;      --dark-tx-cyan:#22d3ee;
--dark-bg-green:#143427;     --dark-tx-green:#4ade80;
--dark-bg-pink:#3e142b;      --dark-tx-pink:#f472b6;
--dark-bg-amber:#31220b;     --dark-tx-amber:#fbbf24;
--dark-bg-lime:#142314;      --dark-tx-lime:#86efac;
--dark-bg-violet:#251532;    --dark-tx-violet:#d8b4fe;
--dark-bg-lavender:#161634;  --dark-tx-lavender:#a5b4fc;

/* light palette */
--light-bg-blue:#208bea;      --light-tx-blue:#0d3d4d;
--light-bg-teal:#00a6a6;      --light-tx-teal:#1e4d3a;
--light-bg-orange:#f79400;    --light-tx-orange:#3d2a0e;
--light-bg-red:#f04444;       --light-tx-red:#7b2d2d;
--light-bg-purple:#8455f6;    --light-tx-purple:#3b2d6e;
--light-bg-indigo:#526de0;    --light-tx-indigo:#242d5e;
--light-bg-cyan:#00a6a6;      --light-tx-cyan:#0d3d4d;
--light-bg-green:#36a852;     --light-tx-green:#1e4d3a;
--light-bg-pink:#ec3f91;      --light-tx-pink:#5c1e40;
--light-bg-amber:#f79400;     --light-tx-amber:#3d2a0e;
--light-bg-lime:#63c900;      --light-tx-lime:#1e4d3a;
--light-bg-violet:#9b59b6;    --light-tx-violet:#3b2d6e;
--light-bg-lavender:#c13fc1;  --light-tx-lavender:#5c1e40;



  --radius-s: 8px;
  --field-h: 40px;
  --radius-m: 14px;
  --radius-l: 10px;
  --shadow-card: 0 1px 2px rgba(22,26,29,.05), 0 8px 24px -12px rgba(22,26,29,.13);
  --shadow-pop: 0 12px 40px -8px rgba(22,26,29,.3);
  --focus-ring: 0 0 0 3px rgba(47,111,237,.35);
  --focus-ring2: 0 0 0 1px rgb(190, 215, 255), 0 0 10px 2px rgba(47, 111, 237, 0.55);
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --ink: #EDEFF2;
  --ink-soft: #B8C0C9;
  --ink-faint: #8A95A3;
  --paper: #0D1117;
  --surface: #151B23;
  --surface-sunken: #1C232C;
  --line: #28313B;
  --line-soft: #212830;
  --topbar-bg: #0D1117;
  --search-bg: #0D1117;

  --accent: #F42A5F;
  --accent-strong: #FF6B8C;
  --accent-wash: #3A1421;
  --accent-swatch: #F42A5F;
  --brand-pink: #F42A5F;
  --brand-pink-strong: #FF6B8C;

  --good: #3FBE85;     --good-wash: #17301F;
  --warning: #E0A83B;  --warning-wash: #35290D;
  --critical: #E36E7C; --critical-wash: #3A1B20;
  --info: #8C97D9;     --info-wash: #232A4D;
  --neutral: #7FA6C2;  --neutral-wash: #1D2B33;

  --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
  --shadow-pop: 0 20px 60px -10px rgba(0,0,0,.7);
  --focus-ring: 0 0 0 3px rgba(244,42,95,.4);

  --bgLight2: var(--surface-sunken);
  --sideNavBg: var(--surface-sunken);
  --text2: var(--ink-faint);
  --activeBg: #3A3D3F;
  --activeBg2: #262B2D;
  --activeLabel: var(--ink);
  --btn-ghost-bg: #1C232C; --btn-ghost-hover: #111720;
  --chevron-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8591' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5L12 15l6.5-6.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ink: #EDEFF2; --ink-soft: #B8C0C9; --ink-faint: #8A95A3;
    --paper: #0D1117; --surface: #151B23; --surface-sunken: #1C232C;
    --line: #28313B; --line-soft: #212830; --topbar-bg: #0D1117; --search-bg: #0D1117;
    --accent: #F42A5F; --accent-strong: #FF6B8C; --accent-wash: #3A1421; --accent-swatch: #F42A5F;
    --brand-pink: #F42A5F; --brand-pink-strong: #FF6B8C;
    --good: #3FBE85; --good-wash: #17301F;
    --warning: #E0A83B; --warning-wash: #35290D;
    --critical: #E36E7C; --critical-wash: #3A1B20;
    --info: #8C97D9; --info-wash: #232A4D;
    --neutral: #7FA6C2; --neutral-wash: #1D2B33;
    --shadow-card: 0 1px 2px rgba(0,0,0,.3), 0 10px 30px -14px rgba(0,0,0,.6);
    --shadow-pop: 0 20px 60px -10px rgba(0,0,0,.7);
    --focus-ring: 0 0 0 3px rgba(244,42,95,.4);
    --bgLight2: var(--surface-sunken);
    --sideNavBg: var(--surface-sunken);
    --text2: var(--ink-faint);
    --activeBg: #3A3D3F;
    --activeBg2: #262B2D;
    --activeLabel: var(--ink);
    --btn-ghost-bg: #1C232C; --btn-ghost-hover: #111720;
    --chevron-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8591' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 8.5L12 15l6.5-6.5'/%3E%3C/svg%3E");
  }
  :root.module-quotes:not([data-theme="light"]){--accent:#22A893;--accent-strong:#4FD1B8;--accent-wash:#0F2E28;--accent-swatch:#22A893;--focus-ring:0 0 0 3px rgba(34,168,147,.4);}
}

*,*::before,*::after{box-sizing:border-box;vertical-align:sub;}
@media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

*{ scrollbar-width:thin; scrollbar-color:var(--bgGrey1) transparent; }
*::-webkit-scrollbar{ width:10px; height:10px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-corner{ background:transparent; }
*::-webkit-scrollbar-thumb{
  background-color:var(--ink-faint);
  border-radius:999px;
  border:2px solid transparent;
  background-clip:content-box;
}
*::-webkit-scrollbar-thumb:hover{ background-color:var(--ink-soft); }

html,body{margin:0;padding:0;height:100%;overflow:hidden;}
body{
  font-family:var(--body);
  background:var(--paper);
  color:var(--ink);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  height:100vh;
  display:flex;
  flex-direction:column;
}
h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--ink);}
p{margin:0;}
button{font-family:inherit;}
input,textarea,select,button{color:inherit;}
a{color:inherit;text-decoration:none;}
:focus-visible{outline:none;box-shadow:var(--focus-ring2);border-radius:6px;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
.req-mark{color:var(--critical);font-weight:700;}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.01em;}

/* ---------- icons ---------- */
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.icon.lg{width:20px;height:20px;}
.icon.xl{width:28px;height:28px;}
.pdf-btn .icon{margin:-6px 0;}
.icon-filled{width:20px;height:20px;flex:none;fill:currentColor;stroke:none;}
.icon-filled.lg{width:20px;height:20px;}
.icon-filled.xl{width:28px;height:28px;}

/* ---------- topbar ---------- */



.topbar{
  display:flex;align-items:center;gap:20px;padding:12px 24px;background:var(--topbar-bg);
  border-bottom:0.5px solid var(--line);position:sticky;top:0;z-index:30;flex:none;
}
.topbar-left{display:flex;align-items:center;gap:20px;min-width:0; padding-left:10px;}
.brand{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:-.02em;display:flex;align-items:center;gap:10px;}
.brand-module{color:var(--text2);font-size:13px;font-weight:500;white-space:nowrap;}
.brand img {
  /* x-offset | y-offset | blur-radius | color */
  filter: drop-shadow(0px 0px 3px rgba(229, 56, 59, 0.6));
}

.tb-divider{width:1px;height:20px;background:var(--line);}
.ot-chip{
  display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:13px;font-weight:500;
  background:var(--surface-sunken);padding:5px 10px;border-radius:8px;color:var(--ink-soft);
}
.topbar-center{flex:1;display:flex;justify-content:center;min-width:0;}
.search-field{
  display:flex;align-items:center;gap:8px;background:var(--search-bg);border:0px solid transparent;
  border-radius:10px;padding:8px 12px;width:100%;max-width:420px;color:var(--ink-faint);
}
.search-field:focus-within{border-color:var(--accent);}
.search-field input{border-color:var(--accent);background:transparent;outline:none;font-size:13.5px;width:100%;color:var(--ink);}
.search-field input::placeholder{color:var(--ink-faint);}
.topbar-right{display:flex;align-items:center;gap:20px;}
.icon-btn{
  width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-soft);
}
.icon-btn:hover{background:var(--surface-sunken);}
.nav-toggle{display:none;}
.user-chip{
  display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;border:0px solid var(--line);cursor:pointer;
  /*filter: drop-shadow(0px 0px 3px rgba(125, 226, 249, 0.8));*/
}
.avatar{
  width:36px;height:36px;border-radius:50%;background:var(--accent);color:#fff;font-size:13px;font-weight:700;
  display:flex;align-items:center;justify-content:center;font-family:var(--display);flex:none;
}
.avatar.sm{width:30px;height:30px;font-size:10px;}
.settings-avatar{display:none;}
.settings-td-label{display:none;}
.avatar.av-0{background:var(--dark-bg-blue);color:var(--dark-tx-blue);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-blue) 70%, transparent));}
.avatar.av-1{background:var(--dark-bg-teal);color:var(--dark-tx-teal);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-teal) 70%, transparent));}
.avatar.av-2{background:var(--dark-bg-orange);color:var(--dark-tx-orange);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-orange) 70%, transparent));}
.avatar.av-3{background:var(--dark-bg-red);color:var(--dark-tx-red);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-red) 70%, transparent));}
.avatar.av-4{background:var(--dark-bg-purple);color:var(--dark-tx-purple);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-purple) 70%, transparent));}
.avatar.av-5{background:var(--dark-bg-indigo);color:var(--dark-tx-indigo);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-indigo) 70%, transparent));}
.avatar.av-6{background:var(--dark-bg-cyan);color:var(--dark-tx-cyan);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-cyan) 70%, transparent));}
.avatar.av-7{background:var(--dark-bg-green);color:var(--dark-tx-green);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-green) 70%, transparent));}
.avatar.av-8{background:var(--dark-bg-pink);color:var(--dark-tx-pink);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-pink) 70%, transparent));}
.avatar.av-9{background:var(--dark-bg-amber);color:var(--dark-tx-amber);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-amber) 70%, transparent));}
.avatar.av-10{background:var(--dark-bg-lime);color:var(--dark-tx-lime);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-lime) 70%, transparent));}
.avatar.av-11{background:var(--dark-bg-violet);color:var(--dark-tx-violet);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-violet) 70%, transparent));}
.avatar.av-12{background:var(--dark-bg-lavender);color:var(--dark-tx-lavender);filter:drop-shadow(0px 0px 6px color-mix(in srgb, var(--dark-tx-lavender) 70%, transparent));}
.user-chip span.name{font-size:13px;font-weight:600;color:var(--text1);}
:root[data-theme="light"] .user-chip .avatar{background:#177EC7;color:#fff;filter:none;}

/* ---------- shell layout ---------- */
#appContent{display:contents;}
.shell{display:grid;grid-template-columns:220px 1fr 300px;grid-template-rows:1fr auto;flex:1;min-height:0;overflow:hidden;}
.shell.no-rail{grid-template-columns:220px 1fr;}
.sidenav{border-right:1px solid var(--line);padding:20px 12px;background:var(--sideNavBg);min-height:0;overflow-y:auto;display:flex;flex-direction:column;}
.sidenav ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.sidenav a{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:13.5px;font-weight:400;
  color:var(--text2);cursor:pointer;
}
.sidenav a:hover{background:var(--activeBg2);}
.sidenav a.active{background:var(--activeBg);color:var(--activeLabel);}
.sidenav a .count-badge{
  margin-left:auto;font-family:var(--mono);font-size:11px;background:var(--surface-sunken);color:var(--ink-soft);
  padding:1px 7px;border-radius:999px;
}
.sidenav a.active .count-badge{background:rgba(0,0,0,.08);}
.nav-group-toggle{
  display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border:0;border-radius:9px;background:transparent;
  font:inherit;font-size:13.5px;color:var(--text2);text-align:left;cursor:pointer;
}
.nav-group-toggle:hover{background:var(--activeBg2);}
.nav-group-toggle .label{flex:1;}
.nav-chevron{display:inline-flex;transition:transform .2s;}
.nav-chevron .icon{width:16px;height:16px;}
.sidenav .nav-group .nav-sub{display:none;padding:2px 0 4px 22px;margin:0;}
.sidenav .nav-group.open .nav-sub{display:flex;}
.sidenav .nav-group.open > .nav-group-toggle .nav-chevron{transform:rotate(180deg);}
.sidenav .nav-sub a{padding:7px 12px;font-size:13px;}
.is-off{display:none !important;}
@media (max-width: 1180px){
  .sidenav .nav-group-toggle .label, .sidenav .nav-group-toggle .nav-chevron{display:none;}
  .sidenav .nav-group-toggle{justify-content:center;padding:11px;}
  .sidenav .nav-sub{display:none !important;}
}
.sidenav-foot{margin-top:auto;padding:12px;border-top:1px solid var(--line-soft);color:var(--ink-faint);font-size:11.5px;line-height:1.6;flex:none;}

.canvas{padding:12px 12px 12px;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
.editor-head{margin-bottom:18px;display:flex;justify-content:space-between;gap:16px;align-items:flex-end;flex:none;}
.editor-head .eh-title{min-width:0;flex:1 1 360px;}
.eh-back{display:inline-block;font-size:12.5px;color:var(--ink-faint);text-decoration:none;margin-bottom:6px;}
.eh-back:hover{color:var(--ink);}
.eh-row{display:flex;align-items:center;gap:14px;}
.eh-row h1{margin:0;}
.eh-icon svg{width:34px;height:34px;stroke-width:1;}
.eh-icon{width:44px;height:44px;border-radius:12px;background:var(--accent-wash);color:var(--accent);display:flex;align-items:center;justify-content:center;flex:none;}
.eh-actions{display:flex;align-items:center;gap:10px;flex:none;}
.eh-actions .btn.ghost{background:var(--btn-ghost-bg);color:var(--ink-soft);border-color:transparent;}
.eh-actions .btn.ghost:hover{background:var(--btn-ghost-hover);}
.success-actions .btn.secondary{background:var(--btn-ghost-bg);border-color:transparent;color:var(--ink);}
.success-actions .btn.secondary:hover{background:var(--btn-ghost-hover);}
.bento.ot-bento{grid-template-columns:minmax(0,1fr);}

.editor-head h1{font-size:23px;}
.editor-head p{color:var(--ink-faint);font-size:13.5px;margin-top:4px;}

.error-banner{
  display:flex;align-items:center;gap:8px;background:var(--critical-wash);color:var(--critical);
  border:1px solid color-mix(in srgb, var(--critical) 30%, transparent);
  padding:11px 14px;border-radius:var(--radius-s);font-size:13.5px;font-weight:600;margin-bottom:16px;flex:none;
}
.btn[hidden]{display:none;}
.error-banner[hidden]{display:none;}
.info-banner{
  display:flex;align-items:center;gap:8px;background:var(--info-wash);color:var(--info);
  border:1px solid color-mix(in srgb, var(--info) 30%, transparent);
  padding:11px 14px;border-radius:var(--radius-s);font-size:13.5px;font-weight:600;margin-bottom:16px;flex:none;
}
.info-banner[hidden]{display:none;}

/* ---------- bento grid ---------- */
.bento{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;align-items:stretch;flex:1;min-height:0;overflow-y:auto;padding-right:4px;}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  padding:20px 22px;box-shadow:var(--shadow-card);
}
.card.span-2{grid-column:span 2;}
.card > header{margin-bottom:16px;}
.card > header h2{font-size:15px;}
.card > header p{color:var(--ink-faint);font-size:12.5px;margin-top:2px;}
.card.approval{border-color:color-mix(in srgb, var(--warning) 45%, var(--line));background:linear-gradient(180deg, var(--warning-wash), var(--surface) 70%);}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
.field:last-child{margin-bottom:0;}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:14px;}
.field-row:last-child{margin-bottom:0;}
.field label{display:flex;align-items:center;height:18px;font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.form-divider{border:0;border-top:1px solid var(--line);margin:18px 0;}
#addUserModal .modal-card{width:min(560px,94vw);max-width:560px;--field-h:34px;}
#addUserModal .field{gap:4px;margin-bottom:10px;}
#addUserModal .field-row{gap:12px;margin-bottom:10px;}
#addUserModal .field label{height:16px;font-size:12px;}
#addUserModal input[type="text"],#addUserModal input[type="password"]{font-size:13px;}
#addUserModal #btnSaveNewUser{margin-top:18px;}
#addUserModal .form-divider{margin:12px 0;}
.field-hint{font-size:12px;color:var(--ink-faint);}
.field-error{display:none;font-size:12px;color:var(--critical);font-weight:600;align-items:center;gap:5px;}
.field-error .icon{width:13px;height:13px;}
.field.has-error .field-error{display:flex;}
.field.has-error input,.field.has-error .combobox-trigger{border-color:var(--critical);background:var(--critical-wash);}

input[type="date"],input[type="text"],input[type="password"],input[type="number"],input[type="search"],input[type="email"],select,textarea{
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-s);
  padding:9px 11px;font-size:13.5px;font-family:var(--body);width:100%;color:var(--ink);
}
input[type="date"],input[type="text"],input[type="password"],input[type="number"],input[type="search"],input[type="email"],select{
  height:var(--field-h);padding-top:0;padding-bottom:0;box-sizing:border-box;
}
select{
  appearance:none;-webkit-appearance:none;padding-right:38px;
  background-image:var(--chevron-img);background-repeat:no-repeat;background-position:right 11px center;background-size:20px 20px;
}

.field-duo{display:flex;gap:8px;}
.field-duo input[type="number"]{flex:0 0 100px;}
.field-duo select,.field-duo .combobox{flex:1;}
input[type="date"]{font-family:var(--mono);font-variant-numeric:tabular-nums;}
textarea{resize:vertical;min-height:64px;font-family:var(--body);line-height:1.5;}
input:disabled{background:var(--surface-sunken);color:var(--ink-faint);cursor:not-allowed;}
input::placeholder,textarea::placeholder{color:var(--ink-faint);}

.conditional[hidden]{display:none;}

/* ---------- combobox ---------- */
.combobox{position:relative;}
.combobox-trigger{
  width:100%;height:var(--field-h);box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-s);
  padding:0 11px;font-size:13.5px;cursor:pointer;text-align:left;
}
.combobox-trigger .placeholder{color:var(--ink-faint);}
.combobox-trigger .icon{color:var(--ink-faint);}
.combobox-trigger[aria-expanded="true"]{border-color:var(--accent);box-shadow:var(--focus-ring);}
.combobox-value{display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.combobox-panel{
  position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius-m);box-shadow:var(--shadow-pop);
  padding:8px;display:none;max-height:280px;
}
.combobox-panel.open{display:flex;flex-direction:column;}
.combobox.has-value .combobox-value{margin-right:26px;}
.combobox-clear{
  position:absolute;top:50%;right:34px;transform:translateY(-50%);z-index:1;
  width:22px;height:22px;padding:0;border:0;border-radius:6px;background:transparent;color:var(--ink-faint);
  display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.combobox-clear:hover{color:var(--ink);background:var(--surface-sunken);}
.combobox-clear[hidden]{display:none;}
.combobox-clear .icon{width:14px;height:14px;}
.combobox-search{
  display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;padding:6px 9px;margin-bottom:6px;
}
.combobox-search input{border:none;outline:none;font-size:13px;width:100%;background:transparent;}
.combobox-search .icon{color:var(--ink-faint);}
.combobox-list{list-style:none;margin:0;padding:0;overflow-y:auto;}
.combobox-list li{
  padding:8px 9px;border-radius:7px;font-size:13.5px;cursor:pointer;display:flex;align-items:center;gap:8px;
}
.combobox-list li:hover,.combobox-list li.active{background:var(--accent-wash);}
.combobox-list li[aria-selected="true"]{font-weight:700;}
.combobox-list li .swatch{width:8px;height:8px;border-radius:50%;flex:none;}
.combobox-empty{padding:12px 9px;color:var(--ink-faint);font-size:13px;text-align:center;}
.combobox-list li.combobox-add{color:var(--accent-strong);font-weight:600;border-top:1px solid var(--line-soft);margin-top:4px;padding-top:10px;}
.combobox-list li.combobox-add:hover{background:var(--accent-wash);}
.combobox-list li.combobox-add .icon{width:14px;height:14px;}
.item-combobox .combobox-trigger{padding:0 8px;font-size:13px;}
.item-combobox .combobox-panel{min-width:160px;}
.item-combobox .combobox-clear{display:none;}
.item-combobox.has-value .combobox-value{margin-right:0;}

.link-btn{
  border:none;background:transparent;color:var(--accent-strong);font-weight:700;font-size:12.5px;
  display:inline-flex;align-items:center;gap:5px;cursor:pointer;padding:2px 0;margin-top:8px;align-self:flex-start;
}
.link-btn:hover{text-decoration:underline;}
.link-btn[hidden]{display:none;}

/* ---------- cotización: items table ---------- */
.items-table{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:4px;}
.items-table th{
  text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);
  font-weight:700;padding:0 8px 8px;
}
.items-table td{padding:6px 8px;vertical-align:top;border-top:1px solid var(--line-soft);}
.items-table .col-part{width:44px;text-align:center;color:var(--ink-faint);line-height:40px;}
.items-table .col-qty{width:70px;}
.items-table .col-unit{width:110px;}
.items-table .col-price{width:120px;text-align:right;}
.items-table .col-total{width:110px;text-align:right;}
.items-table .col-material{width:130px;}
.items-table .col-material-detail{width:150px;}
.items-table .col-photo{width:60px;text-align:center;}
.items-table .col-delivered{width:90px;text-align:center;}
.items-table .col-remove{width:36px;}
.item-sub{display:block;font-size:12px;color:var(--ink-faint);margin-top:2px;}
.items-total-line{text-align:right;font-size:15px;font-weight:800;margin:10px 0 4px;}
.items-table tfoot td{border-top:1px solid var(--line);padding-top:10px;}
.items-table .items-total-label{text-align:right;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
.items-table .items-total-value{text-align:right;font-size:15px;font-weight:800;}
.items-table .col-qty{width:110px;}
.items-table .col-material{width:150px;}
.items-table .col-qty .item-input,.items-table .col-material .item-input{display:block;width:100%;margin-bottom:4px;}

.item-editor{max-width:460px;width:calc(100% - 32px);}
.item-editor-body{display:flex;flex-direction:column;gap:14px;margin-top:14px;}
.item-editor .field{margin-bottom:0;}
.item-editor textarea{min-height:90px;resize:vertical;}
.ie-photo{display:flex;flex-wrap:wrap;gap:8px;}
.ie-photo-preview{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ie-photo-preview img{width:96px;height:96px;object-fit:cover;border-radius:var(--radius-s);cursor:pointer;display:block;}
.ie-camera,.btn.ie-camera{display:none;}
.ie-camera[hidden],.btn.ie-camera[hidden]{display:none !important;}
/* Files area of the item dialog: a drop box, then one row per attached file */
.ie-dropzone{display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 16px 18px;text-align:center;cursor:pointer;
  border:2px dashed var(--line);border-radius:var(--radius-m);background:var(--surface-sunken);transition:border-color .15s,background .15s;}
.ie-dropzone:hover,.ie-dropzone:focus-visible,.ie-dropzone.is-dragover{border-color:var(--accent);background:var(--accent-wash);}
.ie-dropzone:focus-visible{outline:none;box-shadow:var(--focus-ring2);}
.ie-drop-icon{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%;background:var(--surface);color:var(--accent-strong);box-shadow:0 1px 3px rgba(0,0,0,.18);}
.ie-drop-icon .icon{width:22px;height:22px;}
.ie-dropzone.is-dragover .ie-drop-icon{background:var(--accent);color:#fff;}
.ie-drop-title{font-family:var(--display);font-size:16px;font-weight:700;color:var(--ink);}
.ie-drop-or{font-size:13px;color:var(--ink-faint);}
.ie-drop-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:2px;}
.ie-drop-actions .btn{font-size:15px;padding:10px 18px;}
.ie-drop-actions .btn .icon{width:18px;height:18px;}
.ie-drop-hint{margin-top:4px;font-size:12.5px;color:var(--ink-faint);}
.ie-files{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:8px;}
.ie-files:empty{display:none;}
.ie-file{display:flex;align-items:center;gap:12px;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius-l);background:var(--surface);}
.ie-file-thumb{flex:none;display:flex;width:44px;height:44px;}
.ie-file-thumb .doc-tile-wrap{width:44px;height:44px;}
.ie-photo-open{width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:var(--radius-s);overflow:hidden;background:var(--surface-sunken);cursor:pointer;}
.ie-photo-open img{width:100%;height:100%;object-fit:cover;display:block;}
.ie-file-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.ie-file-name{font-size:14.5px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ie-file-meta{font-size:12.5px;color:var(--ink-faint);}
.ie-file-remove{flex:none;width:36px;height:36px;border-radius:8px;color:var(--ink-faint);}
.ie-file-remove:hover{background:var(--critical-wash);color:var(--critical);}
@media (max-width:640px){ .ie-camera,.btn.ie-camera{display:inline-flex;} }
.ie-check{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.ie-check input{width:18px;height:18px;margin:0;accent-color:var(--accent);}
.item-editor-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;}
.id-extra{display:contents;}
.settings-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap;}
.settings-head h1{font-size:24px;margin:0 0 4px;}
.settings-head p{margin:0;color:var(--ink-faint);font-size:14px;}
.client-search{max-width:360px;margin-bottom:12px;}
@media (max-width: 640px){
  .effective-table.clients-table thead{display:none;}
  .effective-table.clients-table,.effective-table.clients-table tbody{display:block;width:100%;}
  .effective-table.clients-table tr{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:12px 0;border-bottom:1px solid var(--line-soft);}
  .effective-table.clients-table td{display:block;padding:0;border:0;}
  .effective-table.clients-table td.client-name{grid-column:1;font-weight:600;font-size:14px;}
  .effective-table.clients-table td.client-actions{grid-column:2;grid-row:1;}
  .effective-table.clients-table td[data-label]{grid-column:1 / -1;font-size:13px;color:var(--ink-soft);}
  .effective-table.clients-table td[data-label]::before{content:attr(data-label) ": ";color:var(--ink-faint);}
  .client-search{max-width:none;}
}
.item-details{display:flex;flex-direction:column;gap:12px;margin:14px 0 0;}
.item-detail-row{display:flex;flex-direction:column;gap:3px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);}
.item-detail-row dt{font-size:12px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
.item-detail-row dd{margin:0;font-size:15px;color:var(--ink);white-space:pre-wrap;}
.id-photo{width:120px;height:120px;object-fit:cover;border-radius:var(--radius-s);cursor:pointer;display:block;margin-top:4px;}

/* Phones: each item becomes a block with its description on top and the other
   summary cells wrapping underneath, instead of a wide table that overflows the card. */
@media (max-width: 640px){
  #itemsTable thead{display:none;}
  #itemsTable,#itemsTable tbody{display:block;width:100%;}
  #itemsTable tr[data-index]{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:12px 0;border-top:1px solid var(--line-soft);cursor:pointer;}
  #itemsTable tr[data-index] td{display:block;width:auto;padding:0;border:0;text-align:left;}
  #itemsTable tr[data-index] .col-part{display:none;}
  #itemsTable tr[data-index] .col-desc{flex-basis:100%;order:-1;}
  #itemsTable tr[data-index] .col-price,#itemsTable tr[data-index] .col-total{text-align:left;line-height:1.4;}
  #itemsTable .item-delivered-checkbox{margin-top:0;}
  #itemsTable .col-edit .icon-btn,#itemsTable .col-remove .icon-btn{margin-top:0;}
}
.item-delivered-checkbox{width:18px;height:18px;cursor:pointer;accent-color:var(--accent);}
.items-table .item-input{
  border:1px solid var(--line);background-color:var(--surface);border-radius:var(--radius-s);
  padding:7px 9px;font-size:13px;font-family:var(--body);width:100%;color:var(--ink);
}
.items-table textarea.item-input{resize:vertical;height:var(--field-h);min-height:var(--field-h);line-height:1.4;padding-top:11px;}
.items-table input.item-input,.items-table select.item-input{height:var(--field-h);padding-top:0;padding-bottom:0;}
.items-table select.item-input{padding-right:38px;}
.items-table .col-price .item-input{text-align:right;}
.items-table .item-total{text-align:right;font-weight:700;line-height:40px;}
.items-table .item-delivered-checkbox{margin-top:11px;}
.items-table .col-remove .icon-btn{margin-top:3px;}
.items-empty-row td{text-align:center;color:var(--ink-faint);padding:18px 8px;}
.items-grand-label{text-align:right;font-size:12px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;padding-top:12px;}
.items-grand-total{text-align:right;font-size:16px;font-weight:800;padding-top:12px;}

.photo-attach-btn{
  width:40px;height:40px;border:1px dashed var(--line);background:var(--surface-sunken);border-radius:var(--radius-s);
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink-faint);
}
.photo-attach-btn:hover{border-color:var(--accent);color:var(--accent-strong);}
/* No overflow:hidden here -- it used to clip the remove button (an absolutely
   positioned child meant to straddle the corner, half outside this box) along
   with the image. The image gets its own border-radius instead. */
.photo-thumb{position:relative;width:40px;height:40px;}
.photo-thumb img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius-s);}
.photo-thumb-remove{
  position:absolute;bottom:-6px;right:-6px;width:16px;height:16px;border-radius:50%;border:none;
  background:var(--critical);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;
  box-shadow:0 1px 3px rgba(0,0,0,.5);
}
.photo-thumb-remove .icon{width:9px;height:9px;}
.photo-thumb-static{width:38px;height:38px;object-fit:cover;border-radius:var(--radius-s);display:block;cursor:pointer;}
.photo-thumb img{cursor:pointer;}
.photo-actions{display:flex;align-items:center;justify-content:center;gap:6px;}
/* documents on an item: a compact list under the photo in the table, a roomier one in the item dialog */
.doc-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px;text-align:left;}
.doc-item{display:flex;align-items:center;gap:6px;font-size:12px;line-height:1.3;min-width:0;}
.doc-name{display:inline-flex;align-items:center;gap:5px;min-width:0;color:var(--ink-soft);text-decoration:none;}
a.doc-name:hover{color:var(--accent-strong);text-decoration:underline;}
.doc-name .icon{width:14px;height:14px;flex:none;}
.doc-name span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.doc-size{flex:none;color:var(--ink-faint);font-size:11px;}
.doc-item.is-pending .doc-name{font-style:italic;}
.doc-remove{flex:none;width:18px;height:18px;border:0;border-radius:50%;background:none;color:var(--ink-faint);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.doc-remove:hover{background:var(--critical-wash);color:var(--critical);}
.doc-remove .icon{width:11px;height:11px;}
.wo-m-item .doc-tiles{margin:0;flex:none;gap:4px;flex-wrap:nowrap;}
.wo-m-item .doc-tile-wrap{width:36px;height:36px;}
.items-table tr.is-dragover td{background:var(--accent-wash);}
.doc-tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:6px;}
.doc-tile-wrap{position:relative;width:40px;height:40px;}
.doc-tile{position:relative;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border-radius:var(--radius-s);border:1px solid var(--line);background:var(--surface-sunken);color:var(--ink-soft);cursor:pointer;text-decoration:none;}
.doc-tile.is-pending{cursor:default;border-style:dashed;}
.doc-tile img,.doc-tile canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.doc-ext{font-size:10px;font-weight:800;letter-spacing:.03em;line-height:1;}
.doc-tile.has-thumb .doc-ext,.doc-tile.kind-image .doc-ext{display:none;}
.doc-tile.kind-pdf{background:#fbe3e1;color:#b3261e;border-color:#f0b8b4;}
.doc-tile.kind-word{background:#e1ecfb;color:#1d5cb8;border-color:#b6cff0;}
.doc-tile.kind-excel{background:#dff3e6;color:#1e7a45;border-color:#b3dfc3;}
.doc-tile.kind-ppt{background:#fdebd9;color:#b85a0f;border-color:#f3cda6;}
.doc-tile.kind-text,.doc-tile.kind-file{background:var(--surface-sunken);color:var(--ink-soft);}
.doc-tile.has-thumb{background:#fff;}
.doc-tile:hover{border-color:var(--accent);}
.doc-tile-remove{position:absolute;bottom:-6px;right:-6px;width:16px;height:16px;border-radius:50%;border:none;background:var(--critical);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;box-shadow:0 1px 3px rgba(0,0,0,.5);}
.doc-tile-remove .icon{width:9px;height:9px;}
@media (min-width:641px){.items-table .col-photo{min-width:112px;}}
.doc-count{display:inline-flex;align-items:center;gap:3px;margin-top:4px;font-size:11.5px;color:var(--ink-faint);}
.doc-count .icon{width:12px;height:12px;}
.items-table .col-desc .doc-name span{max-width:320px;}
.ie-docs .doc-list{margin-top:10px;}
.ie-docs .doc-item{font-size:13px;}
.ie-docs .doc-name span{max-width:240px;}
.item-editor .field-error[hidden]{display:none;}

/* ---------- cotización: rich-text notes ---------- */
.richtext-toolbar{display:flex;align-items:center;gap:4px;padding:6px;background:var(--surface-sunken);border:1px solid var(--line);border-bottom:none;border-radius:var(--radius-s) var(--radius-s) 0 0;}
.rt-btn{border:none;background:transparent;border-radius:6px;padding:6px 10px;font-size:13px;cursor:pointer;color:var(--ink);}
.rt-btn:hover{background:var(--surface);}
.rt-sep{width:1px;height:20px;background:var(--line);margin:0 4px;}
.richtext-editor{
  border:1px solid var(--line);border-radius:0 0 var(--radius-s) var(--radius-s);background:var(--surface);
  padding:12px 14px;min-height:110px;font-size:13.5px;line-height:1.6;color:var(--ink);
}
.richtext-editor:empty::before{content:attr(data-placeholder);color:var(--ink-faint);}
.richtext-editor ul,.richtext-editor ol{margin:0 0 0 20px;padding:0;}
.richtext-editor .rt-img-wrap{min-width:60px;max-width:100%;line-height:0;}

.image-preview-card{position:relative;background:transparent;padding:0;max-width:90vw;max-height:90vh;box-shadow:none;}
.image-preview-card img{display:block;max-width:90vw;max-height:90vh;border-radius:var(--radius-m);}
.image-preview-card .modal-close{position:absolute;top:-14px;right:-14px;background:var(--surface);border:1px solid var(--line);}

.field-row-3{grid-template-columns:repeat(3,minmax(0,1fr));}

/* ---------- pills ---------- */
.pill{
  display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;
  white-space:nowrap;
}
.pill.big{padding:6px 13px;font-size:13px;}
.pill .icon{width:13px;height:13px;}
.pill.big .icon{width:15px;height:15px;}
.pill.good{background:var(--good-wash);color:var(--good);}
.pill.warning{background:var(--warning-wash);color:var(--warning);}
.pill.critical{background:var(--critical-wash);color:var(--critical);}
.pill.info{background:var(--info-wash);color:var(--info);}
.pill.neutral{background:var(--neutral-wash);color:var(--neutral);}
:root[data-theme="light"] .pill.good{background:var(--pill-good);color:#fff;}
:root[data-theme="light"] .pill.warning{background:var(--pill-warning);color:#fff;}
:root[data-theme="light"] .pill.critical{background:var(--pill-critical);color:#fff;}
:root[data-theme="light"] .pill.info{background:var(--pill-info);color:#fff;}
:root[data-theme="light"] .pill.neutral{background:var(--pill-neutral);color:#fff;}

.status-warning{
  margin-top:12px;display:flex;align-items:center;gap:8px;background:var(--critical-wash);color:var(--critical);
  padding:9px 12px;border-radius:var(--radius-s);font-size:12.5px;font-weight:600;
}

/* ---------- dropzone ---------- */
.dropzone{
  border:1.5px dashed var(--line);border-radius:var(--radius-m);padding:26px;text-align:center;
  color:var(--ink-faint);font-size:13px;background:var(--surface-sunken);
}
.dropzone .icon{margin:0 auto 8px;color:var(--ink-faint);}

/* ---------- context rail ---------- */
.context-rail{border-left:1px solid var(--line);padding:20px 18px;display:flex;flex-direction:column;gap:16px;background:var(--surface);min-height:0;overflow-y:auto;}
.rail-card{border:1px solid var(--line);border-radius:var(--radius-m);padding:16px;background:var(--paper);}
.rail-card h3{font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-faint);margin-bottom:12px;font-family:var(--body);font-weight:700;}
.rail-ot-number{font-family:var(--mono);font-size:20px;font-weight:600;letter-spacing:.01em;}
.rail-top{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
.rail-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;}
.rail-row:last-child{margin-bottom:0;}
.rail-row .k{font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.rail-row .v{
  font-weight:400;display:flex;align-items:center;gap:6px;height:var(--field-h);box-sizing:border-box;
  border:1px solid var(--line);background:var(--surface);border-radius:var(--radius-s);
  padding:0 11px;font-size:13.5px;color:var(--ink);
}
.rail-people{display:flex;flex-direction:column;gap:8px;}
.rail-person{display:flex;align-items:center;gap:15px;font-size:13px;padding: 0px 0px 10px 0px;}
.rail-person .role{color:var(--ink-faint);font-size:11.5px;}

.checklist ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.checklist li{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-soft);}
.checklist-complete{display:flex;align-items:center;gap:8px;color:var(--good);font-weight:700;font-size:13.5px;}

.timeline{list-style:none;margin:0;padding:0;position:relative;}
.timeline li{position:relative;padding-left:20px;padding-bottom:16px;}
.timeline li:last-child{padding-bottom:0;}
.timeline li::before{content:"";position:absolute;left:4px;top:4px;width:7px;height:7px;border-radius:50%;background:var(--accent);}
.timeline li::after{content:"";position:absolute;left:7px;top:14px;bottom:0;width:1px;background:var(--line);}
.timeline li:last-child::after{display:none;}
.timeline .t-text{font-size:12.5px;font-weight:600;color:var(--ink);}
.timeline .t-meta{font-size:11.5px;color:var(--ink-faint);margin-top:1px;}

/* ---------- sticky action bar ---------- */
.action-bar{
  position:sticky;bottom:0;z-index:20;display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;background:var(--surface);border-top:1px solid var(--line);
  box-shadow:0 -8px 24px -16px rgba(22,26,29,.25);flex:none;
}
.action-bar-right{display:flex;gap:10px;}
.btn{
  border-radius:10px;padding:10px 18px;font-size:13.5px;font-weight:700;cursor:pointer;border:1.5px solid transparent;
  display:inline-flex;align-items:center;gap:7px;
}
.btn.ghost{background:transparent;color:var(--ink-soft);border-color:transparent;}
.btn.ghost:hover{background:var(--surface-sunken);}
.btn.secondary{background:var(--surface);color:var(--ink);border-color:var(--line);}
.btn.secondary:hover{background:var(--surface-sunken);}
.btn.outline{background:transparent;color:var(--accent-strong);border-color:var(--accent);}
.btn.outline:hover{background:var(--accent-wash);}
.btn.primary{background:var(--accent);color:#fff;}
.btn.primary:hover{background:var(--accent-strong);}
.btn.primary:disabled{opacity:.55;cursor:not-allowed;}
.btn.primary.brand-pink{background:var(--brand-pink);}
.btn.primary.brand-pink:hover{background:var(--brand-pink-strong);}
.btn .spinner{width:14px;height:14px;border-radius:50%;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:spin .7s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- preview ticket ---------- */
.preview-ticket{display:none;max-width:760px;margin:0 auto;flex:1;min-height:0;overflow-y:auto;}
.preview-ticket.visible{display:block;}
.ticket-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-card);overflow:hidden;}
.ticket-head{
  padding:22px 26px;background:var(--ink);color:var(--paper);display:flex;justify-content:space-between;align-items:center;
  background-image:radial-gradient(circle at 15% 15%, rgba(255,255,255,.06), transparent 55%);
}
.ticket-head .t-ot{font-family:var(--mono);font-size:22px;font-weight:600;}
.ticket-head .t-sub{font-size:12px;opacity:.65;margin-top:2px;}
.ticket-body{padding:24px 26px;display:grid;grid-template-columns:1fr 1fr;gap:18px 24px;}
.ticket-field{display:flex;flex-direction:column;gap:3px;}
.ticket-field.full{grid-column:span 2;}
.ticket-field .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);font-weight:700;}
.ticket-field .v{font-size:14.5px;font-weight:600;}
.ticket-foot{padding:18px 26px;background:var(--surface-sunken);display:flex;justify-content:flex-end;gap:10px;}

/* ---------- success ---------- */
.success-overlay{display:none;position:fixed;inset:0;z-index:100;background:rgba(22,26,29,.5);align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px);}
.success-overlay.visible{display:flex;}
.success-card{
  background:var(--surface);border-radius:var(--radius-l);box-shadow:var(--shadow-pop);max-width:440px;width:100%;
  padding:34px 30px;text-align:center;
}
.success-icon{
  width:56px;height:56px;border-radius:50%;background:var(--good-wash);color:var(--good);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.success-card h2{font-size:19px;margin-bottom:8px;}
.success-card p{color:var(--ink-faint);font-size:13.5px;margin-bottom:18px;}
.success-meta{display:flex;justify-content:center;gap:10px;margin-bottom:22px;flex-wrap:wrap;}
.success-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* ---------- editor mode toggle (form vs preview) ---------- */
[data-editor-view="preview"] .bento,
[data-editor-view="preview"] .editor-head{display:none;}
[data-editor-view="preview"] .preview-ticket{display:block;}

/* ---------- auth (login): gradient brand panel + form card; dark by default, light when the person chose it ---------- */
.auth-page{
  --a-panel:#171D24;--a-field:#0D1117;--a-line:#2a323d;--a-ink:#F3F5F9;--a-ink-soft:#B7BFCB;--a-ink-faint:#8A93A1;--a-link:#ff7a9c;
  --a-grad:linear-gradient(135deg,#5b0e2b 0%,#9e1342 52%,#d11c4b 100%);
  display:block;height:auto;min-height:calc(100vh / var(--ui-zoom, 1));background:var(--a-panel);color:var(--a-ink);
}
:root[data-theme="light"] .auth-page{
  --a-panel:#fff;--a-field:#f3f0f2;--a-line:#e3dde1;--a-ink:#161A1D;--a-ink-soft:#4A5260;--a-ink-faint:#6F7887;--a-link:#D01E4C;
}
.login{min-height:calc(100vh / var(--ui-zoom, 1));display:grid;grid-template-columns:minmax(0,1.1fr) minmax(420px,.9fr);}

.auth-hero{position:relative;overflow:hidden;color:#fff;background:url("images/login-bg.jpg") center/cover no-repeat,var(--a-grad);display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px;}
.auth-hero > *{position:relative;}
.auth-logo{height:44px;width:auto;max-width:240px;display:block;object-fit:contain;}
.auth-hero h2{font-size:clamp(34px,3.6vw,52px);line-height:1.04;max-width:11em;color:#fff;}
.auth-lead{margin-top:16px;font-size:16px;line-height:1.55;color:rgba(255,255,255,.82);max-width:30em;}
.auth-chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px;}
.auth-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:14px;font-size:13.5px;font-weight:600;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);backdrop-filter:blur(6px);}
.auth-chip .icon{width:16px;height:16px;stroke:#fff;}
.auth-hero-foot{font-size:12.5px;color:rgba(255,255,255,.65);}

.auth-side{display:flex;align-items:center;justify-content:center;padding:40px 32px;background:var(--a-panel);}
.auth-card{width:100%;max-width:380px;}
.auth-product{display:block;height:44px;width:auto;margin-bottom:34px;}
.auth-product-dark{display:block;} .auth-product-light{display:none;}
:root[data-theme="light"] .auth-product-dark{display:none;} :root[data-theme="light"] .auth-product-light{display:block;}
.auth-title{font-size:30px;margin-bottom:8px;color:var(--a-ink);}
.auth-subtitle{color:var(--a-ink-faint);font-size:14.5px;line-height:1.5;margin-bottom:26px;}
.auth-page .error-banner{display:flex;gap:9px;align-items:flex-start;background:var(--critical-wash);color:var(--critical);border:1px solid color-mix(in srgb,var(--critical) 30%,transparent);border-radius:12px;padding:11px 13px;font-size:13px;font-weight:600;margin-bottom:18px;}
.auth-page .error-banner[hidden]{display:none;}
:root[data-theme="dark"] .auth-page .error-banner{background:#3a1519;color:#ff7b86;}
.auth-page .error-banner .icon{width:16px;height:16px;margin-top:1px;}
.auth-page .field{margin-bottom:16px;gap:0;}
.auth-page .field label{height:auto;font-size:12.5px;color:var(--a-ink-soft);margin-bottom:7px;}
.auth-input{position:relative;}
.auth-input-ico{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--a-ink-faint);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;}
.auth-page .auth-input input{width:100%;height:50px;padding:0 44px;border-radius:14px;border:1.5px solid var(--a-line);background:var(--a-field);color:var(--a-ink);font:inherit;font-size:15px;outline:0;box-shadow:none;transition:border-color .15s,box-shadow .15s,background .15s;}
.auth-page .auth-input input:focus{border-color:var(--accent);background:var(--a-panel);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);}
.auth-page .field.has-error input{border-color:var(--critical);}
.auth-page .field-error{margin-top:6px;}
.auth-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:38px;height:38px;border:0;background:none;border-radius:10px;cursor:pointer;color:var(--a-ink-faint);display:grid;place-items:center;}
.auth-eye:hover{background:color-mix(in srgb,var(--a-ink) 8%,transparent);}
.auth-eye svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.auth-card .btn{width:100%;justify-content:center;margin-top:8px;height:52px;border:0;border-radius:14px;font-family:var(--display);font-size:15.5px;letter-spacing:.01em;color:#fff;background:linear-gradient(135deg,#ff5c85,#e8325f);box-shadow:0 8px 20px -8px rgba(232,50,95,.7);}
.auth-card .btn:hover{filter:brightness(1.05);}
.auth-card .btn:disabled{opacity:.7;cursor:progress;}
.auth-foot{display:flex;justify-content:space-between;gap:12px;margin-top:22px;font-size:13px;color:var(--a-ink-faint);}
.auth-foot a{color:var(--a-link);font-weight:600;}
.auth-foot a:hover{text-decoration:underline;}

@media (max-width:860px){
  .auth-page{background:var(--a-grad);background-attachment:fixed;}
  .login{display:flex;flex-direction:column;}
  .auth-hero{padding:calc(env(safe-area-inset-top) + 32px) 24px 56px;justify-content:flex-start;}
  .auth-hero-main,.auth-hero-foot{display:none;}
  .auth-logo{height:36px;}
  .auth-side{flex:1;align-items:flex-start;padding:30px 22px calc(env(safe-area-inset-bottom) + 28px);border-radius:28px 28px 0 0;margin-top:-28px;box-shadow:0 -10px 30px rgba(0,0,0,.18);position:relative;}
  .auth-product{height:38px;margin-bottom:24px;}
  .auth-title{font-size:26px;}
}
.error-banner.success{
  background:var(--good-wash);color:var(--good);
  border-color:color-mix(in srgb, var(--good) 30%, transparent);
}

/* ---------- Panel de Control (admin Settings page) ---------- */
.settings-table{width:100%;border-collapse:collapse;font-size:13.5px;}
.settings-table th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-faint);
  padding:8px 10px;border-bottom:1px solid var(--line);
}
.settings-table td{padding:10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.settings-table tr.reset-row td{border-bottom:1px solid var(--line);background:var(--surface-sunken);}
.badge{
  display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:700;padding:3px 9px;
  border-radius:999px;background:var(--surface-sunken);color:var(--ink-soft);
}
.badge.good{background:var(--good-wash);color:var(--good);}
.badge.critical{background:var(--critical-wash);color:var(--critical);}
.badge.info{background:var(--info-wash);color:var(--info);}
.badge.warning{background:var(--warning-wash);color:var(--warning);}
:root[data-theme="light"] .badge.good{background:var(--pill-good);color:#fff;}
:root[data-theme="light"] .badge.critical{background:var(--pill-critical);color:#fff;}
:root[data-theme="light"] .badge.info{background:var(--pill-info);color:#fff;}
.reset-panel{padding:14px 6px 4px;max-width:420px;}
.reset-panel .field{margin-bottom:12px;}
.reset-panel-actions{display:flex;gap:10px;}
.branding-logo-row{display:flex;align-items:center;gap:20px;margin-bottom:18px;flex-wrap:wrap;}
.branding-logo-preview{display:flex;align-items:center;justify-content:center;padding:14px 18px;border:1px solid var(--line-soft);border-radius:10px;background:var(--surface-sunken);}
.branding-logo-preview img{display:block;width:150px;height:auto;filter:drop-shadow(0px 0px 3px rgba(229, 56, 59, 0.6));}
.branding-logo-actions{display:flex;flex-direction:column;gap:8px;}
.user-edit-tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 18px;overflow-x:auto;}
.user-edit-tabs button{padding:8px 12px;border:none;background:transparent;color:var(--ink-faint);font-size:12.5px;font-weight:600;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;}
.user-edit-tabs button:hover{color:var(--ink-soft);}
.user-edit-tabs button.active{color:var(--accent);border-bottom-color:var(--accent);}
.user-edit-tabs button.danger-tab.active{color:var(--critical);border-bottom-color:var(--critical);}
/* the user editor is one draft: a tab with unsaved edits is marked, and one Save at the bottom saves them all */
.user-edit-tabs button.is-edited::after{content:"";display:inline-block;width:6px;height:6px;margin-left:6px;border-radius:50%;background:var(--warning);vertical-align:middle;}
.ue-actions{justify-content:flex-end;margin-top:18px;}
/* phones: every tab of the draft visible (they wrap instead of scrolling one off the edge) */
@media (max-width:640px){.modal-card .user-edit-tabs{flex-wrap:wrap;overflow-x:visible;}}
.btn.danger{background:var(--critical);color:#fff;}
.btn.danger:hover{filter:brightness(.92);}
.catalog-manager-add{display:flex;gap:8px;margin:4px 0 16px;}
.catalog-manager-add input{flex:1;}
.catalog-manager-list{list-style:none;margin:0;padding:0;max-height:320px;overflow-y:auto;}
.catalog-manager-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line-soft);font-size:13.5px;}
.catalog-manager-row:last-child{border-bottom:none;}
.catalog-manager-row.is-archived .catalog-manager-name{color:var(--ink-faint);text-decoration:line-through;}
.catalog-manager-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.catalog-manager-row-actions{display:flex;align-items:center;gap:6px;flex:none;}
.catalog-manager-row-actions .icon-btn{width:28px;height:28px;border-radius:7px;}
.catalog-manager-row.is-editing{gap:8px;}
.catalog-manager-edit-input{flex:1;min-width:0;}
.effective-card{margin-top:16px;}
.effective-picker{max-width:360px;margin-bottom:14px;}
.effective-table{width:100%;border-collapse:collapse;font-size:13px;}
.effective-table th,.effective-table td{padding:8px 10px;border-bottom:1px solid var(--line-soft);text-align:left;vertical-align:top;}
.effective-table th{color:var(--ink-faint);font-weight:600;}
.user-chip-wrap{position:relative;}
button.user-chip{background:none;border:0;padding:0;margin:0;cursor:pointer;border-radius:50%;font:inherit;}
button.user-chip:focus-visible{outline:2px solid currentColor;outline-offset:2px;}
.user-menu{position:absolute;top:0;right:calc(100% + 8px);min-width:200px;z-index:60;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);padding:6px;}
.user-menu[hidden]{display:none;}
.user-menu button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 12px;border:0;border-radius:8px;background:none;color:var(--ink);font:inherit;font-size:14px;cursor:pointer;}
.user-menu button:hover{background:var(--surface-sunken);}
.user-menu .um-label{flex:1;min-width:0;}
.user-menu .um-icon,.user-menu .um-check{display:flex;flex:none;color:var(--ink-faint);}
.user-menu .icon{width:18px;height:18px;}
.user-menu .um-check{color:var(--accent-strong);}
.user-menu .um-check .icon{width:14px;height:14px;}
.user-menu-sub button{padding-left:40px;}
.user-menu-sep{height:1px;background:var(--line);margin:6px 4px;}
.modal-section[hidden]{display:none;}
:root.module-quotes[data-theme="light"]{--accent:#22A893;--accent-strong:#209D78;--accent-wash:#E3F7F2;--accent-swatch:#22A893;}
:root.module-quotes[data-theme="dark"]{--accent:#22A893;--accent-strong:#4FD1B8;--accent-wash:#0F2E28;--accent-swatch:#22A893;--focus-ring:0 0 0 3px rgba(34,168,147,.4);}
.modal-overlay.anchored{background:transparent;backdrop-filter:none;align-items:flex-start;justify-content:flex-start;padding:0;}
.modal-overlay.anchored .modal-card{position:fixed;max-width:380px;max-height:calc(100vh - 24px);box-shadow:var(--shadow-pop);}
/* Phones: the desktop anchor puts the card to the left of the avatar, which is off-screen
   at phone widths. Pin it to the screen edges instead; it scrolls inside if it's taller. */
@media (max-width: 640px){
  .modal-overlay.anchored{background:rgba(22,26,29,.55);backdrop-filter:blur(3px);}
  body:has(.popover-floating:not([hidden]))::after{
    content:"";position:fixed;inset:0;z-index:59;background:rgba(22,26,29,.55);backdrop-filter:blur(3px);
  }
  .modal-overlay.anchored .modal-card{left:12px !important;right:12px !important;top:12px !important;max-width:none;width:auto;padding:24px 20px;}
}
.audit-values{white-space:pre-wrap;font-size:12px;background:var(--surface-sunken);padding:8px;border-radius:6px;margin-top:6px;max-height:200px;overflow:auto;}
.effective-table details summary{cursor:pointer;color:var(--ink-faint);font-size:12px;margin-top:4px;}
.settings-canvas{overflow-y:auto;}
.settings-canvas > .card{flex:none;}
.settings-canvas > .settings-users-card{flex:1;min-height:0;max-height:none;}
.roles-panel{max-width:640px;}
.role-options{display:flex;flex-direction:column;gap:2px;}
.role-option{display:flex;align-items:center;gap:10px;font-size:14px;min-width:0;cursor:pointer;padding:7px 8px;border-radius:8px;}
.role-option:hover{background:var(--surface-sunken);}
.role-option input{margin:0;flex:none;}

/* ---------- Configuración (per-user settings modal: theme + own password) ---------- */
.modal-overlay{display:none;position:fixed;inset:0;z-index:100;background:rgba(22,26,29,.5);align-items:center;justify-content:center;padding:24px;backdrop-filter:blur(3px);}
.modal-overlay.visible{display:flex;}
.modal-card{
  background:var(--surface);border-radius:var(--radius-l);box-shadow:var(--shadow-pop);max-width:440px;width:100%;
  padding:30px 28px;position:relative;max-height:calc(100vh - 48px);overflow-y:auto;
}
.modal-close{position:absolute;top:14px;right:14px;}
.modal-card h2{font-size:19px;margin-bottom:4px;padding-right:30px;}
.modal-section{margin-top:22px;padding-top:20px;border-top:1px solid var(--line-soft);}
.modal-section:first-of-type{margin-top:18px;padding-top:0;border-top:none;}
.modal-section h3{font-size:13px;color:var(--ink-soft);margin-bottom:12px;}
.theme-choice{display:flex;gap:10px;}
.theme-option{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:var(--radius-s);
  border:1.5px solid var(--line);cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft);
}
.theme-option:has(input:checked){border-color:var(--accent);color:var(--ink);background:var(--accent-wash);}
.theme-option input{position:absolute;opacity:0;width:0;height:0;}
.password-field{position:relative;}
.password-field input{padding-right:38px;}
.password-toggle{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);width:28px;height:28px;border-radius:7px;
  border:none;background:transparent;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;cursor:pointer;
}
.password-toggle:hover{background:var(--surface-sunken);color:var(--ink-soft);}
.modal-section .btn{width:100%;justify-content:center;margin-top:6px;}
.config-subtitle{font-size:13px;color:var(--ink-soft);margin:22px 0 4px;}

/* ---------- Tablero (board view: order rail + detail cards) ---------- */
.board{display:flex;gap:12px;flex:1;min-height:0;}
.order-rail{
  position:relative;
  flex:none;width:340px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;min-height:0;
}
/* Was var(--bgDark3), a constant that's always near-black regardless of theme
   (unlike --surface-sunken, which properly resolves per theme) -- it happened
   to match dark mode's own page background exactly, so it went unnoticed
   there, but stayed black in light mode too instead of switching. */
.rail-toolzone{background:var(--surface-sunken);border-bottom:1px solid var(--line);flex:none;}
.rail-search{display:flex;align-items:center;gap:8px;padding:14px 14px 0;flex:none;}
.rail-search-field{
  flex:1;display:flex;align-items:center;gap:8px;background:var(--surface-sunken);border:1px solid var(--line);
  border-radius:10px;padding:8px 12px;color:var(--ink-faint);min-width:0;
}
.rail-search-field input{
  border:none;outline:none;background:transparent;font-size:13.5px;width:100%;color:var(--ink);
  padding:0;border-radius:0;appearance:none;-webkit-appearance:none;
}
.rail-search-field input::placeholder{color:var(--ink-faint);}
.rail-search-field:focus-within{border-color:var(--accent);}
/* The global :focus-visible rule (box-shadow, not outline) draws its own ring
   straight onto the input regardless of outline:none above -- the outer pill's
   :focus-within border is the intended focus affordance here, not this one. */
.rail-search-field input:focus-visible{box-shadow:none;}

/* ---------- reportes: collapsible report list + viewer ---------- */
.report-board{position:relative;}
.report-rail{
  flex:none;width:280px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column;min-height:0;
  transition:width .2s ease, opacity .15s ease, margin .2s ease, border-width .2s ease;
}
/* Collapsing only shrinks this panel's own width -- anchored at its left edge next
   to the sidenav, so the visible right edge is what retracts leftward as it closes. */
.report-rail.collapsed{width:0;min-width:0;border-width:0;opacity:0;pointer-events:none;margin-right:-12px;}
.report-rail-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;border-bottom:1px solid var(--line);flex:none;}
.report-rail-head h2{font-size:15px;}
.report-list{display:flex;flex-direction:column;padding:8px;gap:4px;overflow-y:auto;}
.report-row{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border:none;background:transparent;border-radius:var(--radius-s);
  font-size:13.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;text-align:left;width:100%;
}
.report-row:hover{background:var(--surface-sunken);}
.report-row.selected{background:var(--accent-wash);color:var(--accent-strong);}
.report-row .icon,.report-row .icon-filled{width:17px;height:17px;flex:none;}

.report-rail-reopen{
  display:none;position:absolute;left:0;top:14px;z-index:5;width:28px;height:36px;
  border-radius:0 var(--radius-m) var(--radius-m) 0;border:1px solid var(--line);border-left:none;
  background:var(--surface);color:var(--ink-faint);align-items:center;justify-content:center;cursor:pointer;
}
.report-rail-reopen:not([hidden]){display:flex;}
.report-rail-reopen:hover{color:var(--ink);}
.report-rail-reopen .icon{transform:rotate(180deg);}

.report-viewer{flex:1;min-width:0;overflow-y:auto;padding-right:4px;}
.report-panel .editor-head{margin-bottom:12px;}

.rail-toolbar{display:flex;gap:8px;padding:12px 14px;flex:none;}
.rail-toolbar .btn{flex:0.8;justify-content:center;min-width:0;}
.rail-toolbar .icon-btn{width:40px;height:40px;flex:none;}
/* ---------- toolbar icon-button popovers (Filtros, Ordenar) ---------- */
/* Both pills used to render as full "label + chevron" buttons inline in the
   toolbar; with two of them (Filtros, Ordenar) that crowded the row. They're
   now icon-only triggers, and their content opens as a floating popover
   instead of an inline panel that pushed the rest of the rail down. */
.popover-wrap{position:relative;flex:none;}
.icon-btn[aria-expanded="true"]{background:var(--surface-sunken);border-color:var(--accent-grey);color:var(--ink);}
.icon-btn-badge{
  position:absolute;top:-5px;right:-5px;min-width:16px;height:16px;padding:0 4px;border-radius:999px;
  background:var(--accent);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;
}
.icon-btn-badge[hidden]{display:none;}

/* .popover-floating: position is set inline (top/left) by initPopover() each time
   it opens, computed from the trigger's live position -- it's moved to a direct
   child of <body> so an ancestor's overflow:hidden (e.g. .order-rail, there to
   clip the order list to the rail's rounded corners) can't clip it. */
.popover{
  width:260px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-m);
  box-shadow:0 16px 36px -10px rgba(0,0,0,.5);padding:14px;display:flex;flex-direction:column;gap:12px;
}
.popover.popover-floating{position:fixed;z-index:60;}
.popover[hidden]{display:none;}
.popover-head{display:flex;align-items:center;gap:7px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);}
.popover-head .icon{width:14px;height:14px;color:var(--ink-faint);flex:none;}
.popover-title{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);flex:none;}
.popover-head-spacer{flex:1;}
.popover-clear{border:none;background:transparent;color:var(--accent-strong);font-size:12px;font-weight:700;cursor:pointer;padding:0;font:inherit;}
.popover-clear[hidden]{display:none;}
.popover .filter-field{flex:none;min-width:0;}
.popover-dir-toggle{
  width:24px;height:24px;border-radius:6px;border:1px solid var(--accent-grey);background:var(--accent-wash);
  display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--accent-strong);flex:none;
}
.popover-dir-toggle:hover{filter:brightness(1.15);}
.popover-dir-toggle .icon{width:14px;height:14px;}
.popover-close{border:none;background:transparent;color:var(--ink-faint);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:2px;flex:none;}
.popover-close:hover{color:var(--ink);}
.popover-close .icon{width:14px;height:14px;}

.sort-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);margin-bottom:2px;}
.sort-field-list{display:flex;flex-direction:column;gap:2px;}
.sort-field-option{
  display:flex;align-items:center;padding:7px 9px;border:none;background:transparent;border-radius:8px;
  font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;text-align:left;width:100%;font:inherit;
}
.sort-field-option:hover{background:var(--surface-sunken);}
.sort-field-option[aria-checked="true"]{background:var(--accent-wash);color:var(--accent-strong);}

/* Fixed height so filtering the rows doesn't shrink the page under the open popover. */
.audit-body{height:420px;overflow:auto;}
.audit-table{table-layout:fixed;width:100%;}
.audit-table thead th{position:sticky;top:0;z-index:1;background:var(--surface);}
.audit-table thead th:nth-child(1){width:150px;}
.audit-table thead th:nth-child(2){width:170px;}
.audit-table thead th:nth-child(3){width:180px;}
.audit-th{display:inline-flex;align-items:center;gap:6px;}
.audit-col-btn{
  display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;padding:0;flex:none;
  border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink-faint);cursor:pointer;
}
.audit-col-btn:hover{background:var(--surface-sunken);color:var(--ink);}
.audit-col-btn.is-active{color:var(--accent-strong);background:var(--accent-wash);border-color:var(--accent-grey);}
.audit-col-btn .icon{width:14px;height:14px;}
.audit-pop{width:280px;max-height:calc(100vh - 24px);overflow-y:auto;}
.audit-pop .icon{width:14px;height:14px;flex:none;}
.audit-pop .popover-head{cursor:grab;touch-action:none;user-select:none;}
.audit-pop.is-dragging .popover-head{cursor:grabbing;}
.audit-pop .sort-field-option{gap:8px;}
.audit-pop .field{gap:4px;margin-top:2px;}
.audit-check-list{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;}
.audit-check{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;font-size:13px;color:var(--ink-soft);cursor:pointer;}
.audit-check:hover{background:var(--surface-sunken);}
.audit-check[hidden]{display:none;}
.audit-check input{accent-color:var(--accent);width:15px;height:15px;margin:0;flex:none;}

.order-list{flex:1;min-height:0;overflow-y:auto;scrollbar-width:none;}
.order-list::-webkit-scrollbar{display:none;width:0;height:0;}
.order-list-thumb{
  position:absolute;right:3px;width:5px;border-radius:999px;background:var(--bgGrey1);
  opacity:.85;cursor:pointer;z-index:2;touch-action:none;
}
.order-list-thumb:hover,.order-list-thumb.dragging{background:var(--ink-soft);}
.order-list-thumb[hidden]{display:none;}
.order-list-loading,.order-list-empty{padding:32px 16px;text-align:center;color:var(--ink-faint);font-size:13px;}
.order-row{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 14px;border-bottom:1px solid var(--line);border-left:3px solid transparent;
  border-top:none;border-right:none;background:transparent;text-align:left;cursor:pointer;font:inherit;color:inherit;
}
.order-row:hover{background:var(--surface-sunken);}
.order-row.selected{background:var(--accent-wash);border-left-color:var(--accent);}
.order-row.selected .order-ot{color:var(--accent-strong);}
.order-ot{font-weight:700;font-size:13.5px;display:block;}
.order-client{
  font-size:12px;color:var(--ink-faint);margin-top:2px;display:block;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:210px;
}
.order-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex:none;}
.order-date{font-size:10.5px;color:var(--ink-faint);}
.status-dot{width:8px;height:8px;border-radius:999px;flex:none;}
.status-dot.good{background:var(--good);}
.status-dot.warning{background:var(--warning);}
.status-dot.critical{background:var(--critical);}
.status-dot.info{background:var(--info);}
.status-dot.neutral{background:var(--neutral);}

.order-detail{flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;min-height:0;}
.order-detail-empty{
  flex:1;display:flex;align-items:center;justify-content:center;color:var(--ink-faint);font-size:13.5px;
  background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius-l);
}
.order-header{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);
  box-shadow:var(--shadow-card);padding:18px 20px;flex:none;
}
.mobile-back-btn{
  display:none;align-items:center;gap:6px;background:var(--accent-wash);
  border:1px solid var(--accent);border-radius:9px;color:var(--accent-strong);
  font-size:13px;font-weight:700;padding:9px 14px;margin-bottom:14px;cursor:pointer;
}
.mobile-back-btn:hover{background:var(--accent);color:#fff;}
.mobile-back-btn .icon{width:16px;height:16px;}
.oh-top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;}
.oh-id{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.oh-ot{font-size:20px;font-weight:700;}
.oh-client{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink-faint);border-left:1px solid var(--line);padding-left:12px;line-height:1.3;}
.oh-actions{display:flex;gap:8px;flex:none;}
.oh-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line-soft);}
.chip{
  display:flex;align-items:center;gap:7px;font-size:12px;padding:6px 12px;border-radius:var(--radius-s);
  background:var(--surface-sunken);color:var(--ink-soft);
}
.chip b{color:var(--ink);font-weight:600;}
.chip b a{color:var(--accent-strong);text-decoration:underline;text-underline-offset:2px;}
.chip b a:hover{color:var(--accent);}
.chip-label{color:var(--ink-faint);font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;}
.note-text{font-size:13.5px;line-height:1.6;color:var(--ink-soft);margin:0;}
.avatar.muted{background:var(--surface-sunken);color:var(--ink-faint);filter:none;}

/* ---------- KPI strip + queue table (Hoja Tabular) ---------- */
.kpi-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:20px;flex:none;}
@media (min-width: 1450px){
  .kpi-strip{grid-template-columns:repeat(6,minmax(0,1fr));}
}
.kpi-card[hidden]{display:none;}
/* some cards are hidden (statuses this installation does not use): share the width evenly */
.kpi-strip.kpi-strip-fit{grid-template-columns:repeat(var(--kpi-cols),minmax(0,1fr));}

/* ---------- Control Panel: role management ---------- */
.role-toolbar{justify-content:flex-start;margin:6px 0 10px;}
.role-form{border:1px solid var(--line);border-radius:var(--radius-m,10px);padding:14px;margin:6px 0 14px;max-width:560px;}
.role-form[hidden]{display:none;}
.role-flags{display:flex;flex-wrap:wrap;gap:8px 22px;margin:10px 0;}
.role-flags label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer;}
.role-subhead{font-size:16px;margin:22px 0 4px;}
#roleActionsSection[hidden]{display:none;}
.kpi-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);padding:12px 14px;
  box-shadow:var(--shadow-card);display:flex;flex-direction:row;align-items:center;gap:10px;
  width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit;
  transition:border-color .15s ease, background-color .15s ease;
}
.kpi-card:hover{border-color:var(--accent-grey); border-width:2px;}
.kpi-card[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash);}
.kpi-card:has(.av-light-6)[aria-pressed="true"]{border-color: var(--light-bg-blue);background: color-mix(in srgb, var(--light-bg-blue) 14%, var(--surface));border-width: 1.5px;box-shadow: 0 0 10px var(--light-bg-blue);}
.kpi-card:has(.av-light-4)[aria-pressed="true"]{border-color:var(--light-bg-teal);background:color-mix(in srgb, var(--light-bg-teal) 14%, var(--surface));border-width:1.5px;box-shadow: 0 0 10px var(--light-bg-teal);}
.kpi-card:has(.av-light-9)[aria-pressed="true"]{border-color:var(--light-bg-orange);background:color-mix(in srgb, var(--light-bg-orange) 14%, var(--surface));border-width:1.5px;box-shadow: 0 0 10px var(--light-bg-orange);}
.kpi-card:has(.av-light-0)[aria-pressed="true"]{border-color:var(--light-bg-red);background:color-mix(in srgb, var(--light-bg-red) 14%, var(--surface));border-width:1.5px;box-shadow: 0 0 10px var(--light-bg-red);}
.kpi-card:has(.av-light-10)[aria-pressed="true"]{border-color:var(--light-bg-purple);background:color-mix(in srgb, var(--light-bg-purple) 14%, var(--surface));border-width:1.5px;box-shadow: 0 0 10px var(--light-bg-purple);}
.kpi-card:has(.av-light-1)[aria-pressed="true"]{border-color:var(--light-bg-indigo);background:color-mix(in srgb, var(--light-bg-indigo) 14%, var(--surface));border-width:1.5px;box-shadow: 0 0 10px var(--light-bg-indigo);}
.kpi-icon{
  width:40px;height:40px;border-radius:var(--radius-s);flex:none;display:flex;align-items:center;justify-content:center;
}
.kpi-icon .icon{width:20px;height:20px;}
.kpi-icon.av-light-6 {background: var(--light-bg-blue); color: var(--light-tx-blue); filter: drop-shadow(0px 0px 2px color-mix(in srgb, var(--light-tx-blue) 50%, transparent));}
.kpi-icon.av-light-4{background:var(--light-bg-teal);color:var(--light-tx-teal);filter:drop-shadow(0px 0px 3px color-mix(in srgb, var(--light-tx-teal) 80%, transparent));}
.kpi-icon.av-light-9{background:var(--light-bg-orange);color:var(--light-tx-orange);filter:drop-shadow(0px 0px 3px color-mix(in srgb, var(--light-tx-orange) 80%, transparent));}
.kpi-icon.av-light-0{background:var(--light-bg-red);color:var(--light-tx-red);filter:drop-shadow(0px 0px 3px color-mix(in srgb, var(--light-tx-red) 80%, transparent));}
.kpi-icon.av-light-10{background:var(--light-bg-purple);color:var(--light-tx-purple);filter:drop-shadow(0px 0px 3px color-mix(in srgb, var(--light-tx-purple) 80%, transparent));}
.kpi-icon.av-light-1{background:var(--light-bg-indigo);color:var(--light-tx-indigo);filter:drop-shadow(0px 0px 3px color-mix(in srgb, var(--light-tx-indigo) 80%, transparent));}
.kpi-card-text{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:2px;min-width:0;}
.kpi-card .k{font-size:11.5px;color:var(--ink-faint);font-weight:700;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.kpi-card .v{font-family:var(--mono);font-size:24px;font-weight:600;line-height:1.1;}
.kpi-card.warning .v{color:var(--warning);}
.kpi-card.info .v{color:var(--info);}
.kpi-card.critical .v{color:var(--critical);}
.kpi-card.good .v{color:var(--good);}

/* Tablero's mobile-only KPI strip (Hoja Tabular's counts, folded into Tablero on
   phones -- see the max-width:640px block below for the actual grid/sizing).
   Hidden here so it never shows on desktop, where Hoja Tabular stays separate. */
.mobile-kpi-strip{display:none;}

/* ---------- Hoja Tabular filter toolbar ---------- */
.filter-toolbar{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:12px;flex:none;}
.filter-field{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;min-width:150px;}
.filter-field label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
.filter-field select{
  -moz-appearance:none;border:1px solid var(--line);background-color:var(--surface);border-radius:var(--radius-s);
  padding-left:10px;font-size:13px;font-family:var(--body);color:var(--ink);cursor:pointer;
}
.filter-field select:focus-visible{border-color:var(--accent);}
.btn.sm{padding:8px 12px;font-size:12.5px;}
.btn[hidden]{display:none;}

.active-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px;flex:none;}
.active-filters[hidden]{display:none;}
.filter-chip{
  display:inline-flex;align-items:center;gap:6px;background:var(--accent-wash);color:var(--accent-strong);
  padding:5px 6px 5px 10px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;
}
.chip-remove{border:none;background:transparent;color:inherit;cursor:pointer;display:flex;align-items:center;padding:3px;border-radius:50%;}
.chip-remove:hover{background:rgba(0,0,0,.08);}
.chip-remove .icon{width:11px;height:11px;}

.queue-card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-card);
  overflow:hidden;flex:1;min-height:0;display:flex;flex-direction:column;
}
.queue-table-scroll{flex:1;min-height:0;overflow-y:auto;}
table.queue-table{width:100%;border-collapse:collapse;font-size:13.5px;}
table.queue-table thead th{
  text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);
  padding:0;border-bottom:1px solid var(--line);background:var(--surface-sunken);font-weight:700;
  position:sticky;top:0;z-index:1;
}
.th-sort{
  width:100%;display:flex;align-items:center;gap:5px;background:transparent;border:none;
  font:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit;cursor:pointer;
  padding:12px 16px;text-align:left;
}
.th-sort:hover{color:var(--ink);}
.sort-ind{display:inline-flex;align-items:center;opacity:.35;}
.sort-ind.active{opacity:1;color:var(--accent-strong);}
.sort-ind .icon{width:12px;height:12px;transition:transform .15s ease;}
.sort-ind.asc .icon{transform:rotate(180deg);}
.sort-priority{font-size:9px;margin-left:1px;}
table.queue-table tbody td{padding:13px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
table.queue-table tbody tr:last-child td{border-bottom:none;}
table.queue-table tbody tr:hover{background:var(--bgLight2);cursor:pointer;}
.queue-ot{font-family:var(--mono);font-weight:600;}
.queue-subtext{display:block;color:var(--ink-faint);font-size:12px;margin-top:2px;}
.queue-empty{padding:48px 16px;text-align:center;color:var(--ink-faint);}
.queue-loading{padding:48px 16px;text-align:center;color:var(--ink-faint);}

/* ---------- responsive: tablet ---------- */
@media (max-width: 1180px){
  .shell{grid-template-columns:76px 1fr 280px;}
  .shell.no-rail{grid-template-columns:76px 1fr;}
  .sidenav a span.label{display:none;}
  .sidenav a{justify-content:center;padding:11px;}
  .sidenav a .count-badge{position:absolute;transform:translate(10px,-10px);}
  .sidenav a{position:relative;}
  .brand-module{display:none;}
}
@media (max-width: 980px){
  .shell{grid-template-columns:76px 1fr;}
  .context-rail{
    grid-column:1 / -1;border-left:none;border-top:1px solid var(--line);
    flex-direction:row;overflow-x:auto;
  }
  .rail-card{min-width:230px;flex:none;}
  .bento{grid-template-columns:1fr;}
  .card.span-2{grid-column:span 1;}
  .field-row{grid-template-columns:1fr;}
  .ticket-body{grid-template-columns:1fr;}
  .ticket-field.full{grid-column:span 1;}
  .search-field{max-width:220px;}
  .board{flex-direction:column;overflow-y:auto;}
  .order-rail{width:100%;max-height:280px;}
  .order-detail{flex:none;min-height:0;}
}
@media (max-width: 640px){
  .shell{grid-template-columns:1fr;}
  .shell.no-rail{grid-template-columns:1fr;}
  /* OT Form is the only page with real content in the shell's second grid row
     (context-rail) -- .shell's base rule sizes that row "auto" (its full natural
     height) against the canvas row's "1fr" (whatever's left over). Stacking the
     rail's cards full-width (above) made that row much taller, which squeezed the
     actual form down to the leftover space. Both rows get their natural height
     instead, and .shell itself (rather than .canvas) becomes the one scroll
     container -- scoped to plain .shell so Tablero/Hoja Tabular/Panel de Control's
     .shell.no-rail (which has nothing in that row) keeps its already-working
     .canvas-scrolls setup untouched. */
  /* Switching to flex here (from grid) because CSS Grid's "auto" row-sizing kept
     compressing canvas back down no matter what was tried -- this mirrors the
     already-working fix for .board/.queue-table-scroll below: the scrolling
     parent is flex, and the child that must keep its full natural height gets
     flex:none instead of being left to the default flex-shrink. */
  .shell:not(.no-rail){display:flex;flex-direction:column;overflow-y:auto;}
  .shell:not(.no-rail) .canvas{flex:none;overflow-y:visible;min-height:auto;}
  .shell:not(.no-rail) .context-rail{flex:none;}
  /* .canvas is overflow:hidden by default (desktop relies on an inner region like
     .board/.queue-table-scroll to scroll internally within a fixed height). Stacked
     to a single column, those inner regions' content easily exceeds that fixed
     height -- and since they're flex children, they were being flex-shrunk to fit
     instead of overflowing, silently clipping content (in Hoja Tabular's case, the
     whole table area shrank to zero height). Making .canvas itself the scroll
     container, and stopping the specific children that were shrinking from doing
     so, fixes it uniformly across pages. */
  .canvas{overflow-y:auto;}
  .bento{flex:none;}
  .queue-table-scroll{flex:none;}
  /* OT Form's context-rail (ticket-status card + "Campos requeridos") is a
     horizontally side-scrolling strip on tablet (.context-rail{flex-direction:row})
     -- not truly vertical. On a phone both cards should stack full-width instead. */
  .context-rail{flex-direction:column;overflow-x:visible;}
  .rail-card{min-width:0;width:100%;}
  /* Overrides the 980px rule's 280px cap, which existed for when the rail and
     detail were stacked and had to share height -- with detail hidden until
     tapped, the list should fill the screen instead of leaving dead space. */
  .order-rail{max-height:none;flex:1;}
  .order-detail{display:none;}
  .mobile-back-btn{display:flex;position:sticky;top:0;z-index:3;}
  /* Tablero shows only the list OR only the detail, never both at once --
     .board.detail-open is toggled by board.js when a row/back button is tapped. */
  .board.detail-open .order-rail{display:none;}
  .board.detail-open .order-detail{display:flex;}
  /* Panel de Control: the 6-column table doesn't fit a phone, so each row
     collapses to Nombre/Rol/Usuario and tapping it (settings.js) reveals the
     Estado/Admin/Acciones cells it already renders, unhiding them in place
     instead of duplicating that markup in a separate detail view. */
  .settings-table thead{display:none;}
  .settings-table, .settings-table tbody, .settings-table tr{display:block;width:100%;}
  .settings-table td{display:none;padding:4px 0;border:none;}
  /* Collapsed: name + avatar only. Rol/Usuario join Estado/Admin/Acciones,
     revealed together when the row is tapped (tr.expanded td, below). */
  .settings-table td:nth-child(1){display:flex;align-items:center;gap:10px;font-weight:600;}
  .settings-avatar{display:flex;width:34px;height:34px;font-size:11px;flex:none;}
  .settings-table tr[data-row-id]{position:relative;padding:12px 20px 12px 0;border-bottom:1px solid var(--line-soft);cursor:pointer;}
  .settings-table tr[data-row-id].expanded td{display:block;}
  /* The generic ".expanded td" rule above also flattens td:nth-child(1) (the
     avatar+name row) to display:block, dropping the name below the avatar --
     this wins back the side-by-side layout and makes the name bolder so the
     open row's identity stays clear once its details are showing. */
  .settings-table tr[data-row-id].expanded td:nth-child(1){display:flex;font-weight:800;}
  /* Visual marker for which card is open, since it's no longer obvious once
     the collapsed-row chevron (::after, below) disappears. The wrapping .card
     (settings.html) has its own 22px padding, which previously left the
     background stopping short of the list's actual edges -- margin:0 -22px
     bleeds it through that padding to the full list width, and the matching
     22px padding cancels the bleed back out for the row's own content, so
     the avatar+name lands at the exact same position as the collapsed rows
     instead of shifting -- it should look like the same row, not a child of
     it. Only the detail cells below (next rule) indent, lined up under the
     name rather than the avatar. */
  .settings-table tr[data-row-id].expanded{
    background:var(--surface-sunken);width:calc(100% + 44px);margin:0 -22px;padding:14px 22px;
  }
  .settings-table tr[data-row-id].expanded td:nth-child(n+2){padding-left:44px;}
  .settings-td-label{display:inline;font-weight:700;color:var(--ink-faint);}
  .settings-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
  .settings-actions .btn{width:100%;justify-content:center;}
  /* .btn.ghost is transparent by design elsewhere (e.g. Tablero's "Ver en Hoja
     Tabular" link) -- scoped here so Desactivar/Hacer admin read as real,
     tappable buttons instead of plain text in this list. */
  .settings-actions .btn.ghost{background:var(--surface);border-color:var(--line);color:var(--ink);}
  .settings-actions .btn.ghost:hover{background:var(--surface-sunken);}
  .settings-table tr[data-row-id]:not(.expanded)::after{
    content:"";position:absolute;right:2px;top:50%;margin-top:-5px;width:7px;height:7px;
    border-right:1.5px solid var(--ink-faint);border-bottom:1.5px solid var(--ink-faint);transform:rotate(-45deg);
  }
  .settings-table tr.reset-row{cursor:default;border-bottom:1px solid var(--line);}
  /* Tablero's mobile KPI strip: 3 per row, each card compacted to label-on-top +
     icon/value-below-it (the desktop .kpi-card is a single wider row: icon left,
     label+value stacked right -- doesn't fit three across a phone). */
  .mobile-kpi-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px 14px;}
  /* Option A+B from the reviewed mockup: a colored left border (A) plus a
     bigger, better-centered icon badge (B) -- padding/gap trimmed by exactly
     as much as the icon grew, so the card isn't any taller than before. */
  .mobile-kpi-strip .kpi-card{
    flex-direction:column;align-items:flex-start;gap:4px;padding:6px 8px 6px 9px;
    border-left:3px solid var(--line);
  }
  .mobile-kpi-strip .mobile-kpi-bottom{display:flex;align-items:center;gap:6px;}
  .mobile-kpi-strip .kpi-icon{width:22px;height:22px;border-radius:6px;filter:none;}
  .mobile-kpi-strip .kpi-icon .icon{width:14px;height:14px;}
  .mobile-kpi-strip .k{font-size:9px;}
  .mobile-kpi-strip .v{font-size:15px;}
  /* Mobile uses a dark wash + bright stroke per icon (matching the reviewed
     mockup) instead of .kpi-icon.av-light-N's bright-fill/dark-glyph pair,
     which is tuned for the larger 40px desktop badge, not this compact one.
     The left border reuses the same bright color as the icon's stroke. */
  .mobile-kpi-strip .kpi-icon.av-light-6, .mobile-kpi-strip .kpi-icon.av-light-1{background:#12233A;color:#6FA8E6;}
  .mobile-kpi-strip .kpi-icon.av-light-4{background:#0F2E33;color:#4FD1C5;}
  .mobile-kpi-strip .kpi-icon.av-light-9{background:#3A2A12;color:#F2B84B;}
  .mobile-kpi-strip .kpi-icon.av-light-0{background:#3A1416;color:#EF4448;}
  .mobile-kpi-strip .kpi-icon.av-light-10{background:#241A3A;color:#B794F6;}
  .mobile-kpi-strip .kpi-card.av-light-6, .mobile-kpi-strip .kpi-card.av-light-1{border-left-color:#6FA8E6;}
  .mobile-kpi-strip .kpi-card.av-light-4{border-left-color:#4FD1C5;}
  .mobile-kpi-strip .kpi-card.av-light-9{border-left-color:#F2B84B;}
  .mobile-kpi-strip .kpi-card.av-light-0{border-left-color:#EF4448;}
  .mobile-kpi-strip .kpi-card.av-light-10{border-left-color:#B794F6;}
  /* Hoja Tabular's content now lives inside Tablero on phones, so its own nav
     entry is redundant there -- desktop keeps it untouched. */
  [data-mobile-hide]{display:none !important;}
  .sidenav{
    position:fixed;top:0;left:0;bottom:0;width:250px;z-index:60;
    transform:translateX(-100%);transition:transform .18s ease;
  }
  body.nav-open .sidenav{transform:translateX(0);box-shadow:var(--shadow-pop);}
  body.nav-open{overflow:hidden;}
  body.nav-open::after{content:"";position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:55;}
  .nav-toggle{display:inline-flex;}
  .topbar{padding:8px 16px;}
  .brand img{width:auto;max-width:224px;height:auto;max-height:36px;}
  .sidenav a span.label{display:inline;}
  .sidenav a{justify-content:flex-start;padding:9px 12px;position:static;}
  .sidenav a .count-badge{position:static;transform:none;}
  .topbar-center{display:none;}
  /* Distribute hamburger / logo / avatar evenly instead of leaving them bunched
     at the left with a big empty gap before the avatar. display:contents makes
     .topbar-left/.topbar-right disappear as boxes so their children (nav-toggle
     + brand, and the user-chip) become direct flex items of .topbar alongside
     each other, which justify-content:space-between then spaces out. */
  .topbar{justify-content:space-between;}
  .topbar-left{display:contents;}
  .topbar-right{display:flex;align-items:center;gap:12px;}
  /* Vista previa + Cancelar share a row (Vista previa left, Cancelar right);
     Crear OT gets its own full-width row below. .action-bar-right's children
     (Vista previa, Crear OT) aren't DOM siblings of Cancelar, so display:contents
     drops that wrapper's own box and promotes them to direct flex items of
     .action-bar alongside Cancelar -- letting order+flex-wrap freely regroup
     all three without restructuring the markup or touching desktop's layout. */
  .action-bar{flex-direction:row;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;}
  .action-bar-right{display:contents;}
  #btnPreview{order:1;}
  .action-bar-cancel{order:2;align-self:auto;}
  #btnSubmit{order:3;flex:1 1 100%;justify-content:center;}
  .kpi-strip{grid-template-columns:1fr;}
  .filter-toolbar{flex-direction:column;align-items:stretch;}
  .filter-field{min-width:0;}
}

@media (max-width: 760px){
  .editor-head{flex-direction:column;align-items:stretch;}
  .editor-head .eh-title{flex:none;}
  .eh-actions{flex-wrap:wrap;}
  .eh-actions .btn{flex:1 1 auto;justify-content:center;}
}

.ro-pills{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.editor-head.ro-head{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-card);padding:18px 20px;margin-bottom:16px;}
.rail-row .muted{color:var(--ink-faint);font-weight:400;}

@media (max-width: 760px){
  .field-row-3{grid-template-columns:minmax(0,1fr);}
}

/* Light Mode: each status icon box is its solid palette colour with a white glyph,
   on phone and desktop alike. Dark Mode keeps the tinted badges. */
:root[data-theme="light"] .kpi-icon{color:#fff;filter:none;}
:root[data-theme="light"] .kpi-icon.av-light-6{background:var(--light-bg-blue);}
:root[data-theme="light"] .kpi-icon.av-light-4{background:var(--light-bg-teal);}
:root[data-theme="light"] .kpi-icon.av-light-9{background:var(--light-bg-orange);}
:root[data-theme="light"] .kpi-icon.av-light-0{background:var(--light-bg-red);}
:root[data-theme="light"] .kpi-icon.av-light-10{background:var(--light-bg-purple);}
:root[data-theme="light"] .kpi-icon.av-light-1{background:var(--light-bg-indigo);}

.rail-row[hidden]{display:none !important;}

.items-table tr.is-cancelled td{color:var(--ink-faint);text-decoration:line-through;}
.items-table tr.is-cancelled td input[type="checkbox"],.items-table tr.is-cancelled td .item-input{text-decoration:none;}
.items-table .col-cancelled,.items-table .col-completed{width:96px;text-align:center;}
#liaisonPill{margin-left:10px;vertical-align:middle;}
#liaisonPill[hidden]{display:none !important;}
.oh-id .liaison-pill{margin-left:8px;}

.card > header.card-head-split{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;}
.net-price-toggle{white-space:nowrap;margin-top:6px;}
.items-table tr[hidden]{display:none;}
.items-table tfoot tr:first-child td{border-top:2px solid var(--ink);}
.items-tfoot-value{text-align:right;font-size:14px;font-weight:600;padding-top:8px;}
.items-table .col-flag{text-align:center;width:88px;}
.items-table tr.is-cancelled td{color:var(--ink-faint);text-decoration:line-through;}
.items-table tr.is-cancelled td input[type="checkbox"]{text-decoration:none;}

#otItemsCard .items-table{width:100%;table-layout:auto;}
#otItemsCard .items-table .col-price,#otItemsCard .items-table .col-total{white-space:nowrap;text-align:right;}
#otItemsCard .items-table .col-flag{width:76px;}

#otItemsCard .items-table{font-size:12.5px;}
#otItemsCard .items-table th,#otItemsCard .items-table td{padding:8px 6px;}
#otItemsCard .items-table .col-flag{width:70px;}
#otItemsCard .items-table th{font-size:10.5px;}

#otItemsCard .items-table .col-status{width:128px;}
#otItemsCard .items-table .col-status label{display:flex;align-items:center;gap:6px;font-size:11.5px;white-space:nowrap;text-transform:none;letter-spacing:0;font-weight:500;}
#otItemsCard .items-table .col-status input{margin:0;}
.items-table tr.is-cancelled td.col-status{text-decoration:none;color:inherit;}

@media (max-width: 1180px){
  #otItemsCard .items-table th,#otItemsCard .items-table td{padding:8px 4px;}
}

#otItemsCard tbody tr.item-row-open{cursor:pointer;}
#otItemsCard tbody tr.item-row-open:hover td{background:var(--activeBg2);}

#itemDetails .modal-card{width:min(680px,94vw);max-width:680px;}
.item-details .item-detail-group{display:flex;flex-wrap:wrap;gap:12px 10px;padding-bottom:12px;border-bottom:1px solid var(--line-soft);}
.item-details .item-detail-group .item-detail-row{flex:1 1 0;min-width:72px;padding:0;border:0;}
.item-details .item-detail-group .id-photo{width:110px;height:110px;}
.item-details .item-detail-group .item-detail-row dd{font-size:14px;}
.item-details .item-detail-group .item-detail-row.is-wide{flex:1.8 1 0;}

#itemDetails .modal-card{width:min(880px,94vw);max-width:880px;}
.item-details .item-detail-grid{display:grid;gap:12px 14px;align-items:start;padding-bottom:12px;border-bottom:1px solid var(--line-soft);}
.item-details .item-detail-grid .item-detail-grid{padding-bottom:0;border-bottom:0;}
.item-details .item-detail-grid .item-detail-row{padding:0;border:0;min-width:0;}
.item-details .item-detail-grid .id-photo{width:110px;height:110px;}

#itemDetails .modal-card{width:min(900px,94vw);max-width:900px;}
.item-details{margin:18px 0 0;gap:0;}
.item-details > .item-detail-grid{display:grid;}
.item-details .item-detail-grid .item-detail-row{padding:10px 12px;min-height:58px;border:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:3px;}
.item-details .item-detail-grid.is-tall .item-detail-row{min-height:100px;}
.item-details .item-detail-grid.is-sub{border:0;}
.item-details .item-detail-grid.is-sub .item-detail-row{padding:10px 10px;min-height:0;}
.item-details .item-detail-row dt{font-size:11px;letter-spacing:.06em;}
.item-details .item-detail-row dd{font-size:14px;}
.item-details .item-detail-grid .id-photo{width:90px;height:90px;}

.item-editor-actions[hidden]{display:none !important;}

.richtext-editor.is-dragover{outline:2px dashed var(--brand,var(--ink-faint));outline-offset:-4px;}
.item-context-menu{position:fixed;z-index:1000;min-width:180px;padding:4px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-s);box-shadow:var(--shadow-pop);}
.item-context-menu button{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:none;color:var(--ink);font:inherit;font-size:13px;text-align:left;border-radius:4px;cursor:pointer;}
.item-context-menu button:hover{background:var(--surface-sunken);}

/* ---------- Compact layout (opt-in, toggled by #layoutToggle in shell.js) ----------
   Restyles the OT / COT editors and the board's OT detail (:is(.ot-bento,.quote-bento)). Remove the
   html.layout-compact class and everything above applies unchanged. */
.layout-toggle .lt-compact{display:none;}
html.layout-compact .layout-toggle .lt-compact{display:inline;}
html.layout-compact .layout-toggle .lt-classic{display:none;}
.compact-only{display:none;}
.view-details{display:none;}
.details-card[hidden]{display:none;}

html.layout-compact .compact-only{display:flex;}
html.layout-compact .view-details{display:block;}
html.layout-compact :is(.ot-bento,.quote-bento) .classic-only,
html.layout-compact :is(.ot-bento,.quote-bento) .rail-row.hide-compact{display:none;}

/* grid: row 1 = three cards, then items, then observations */
html.layout-compact :is(.ot-bento,.quote-bento){
  --field-h:32px;
  grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch;align-content:start;
}
html.layout-compact :is(.ot-bento,.quote-bento):not(:has(.details-card)){grid-template-columns:repeat(2,minmax(0,1fr));}
html.layout-compact :is(.ot-bento,.quote-bento) > .card:has(.items-table),
html.layout-compact :is(.ot-bento,.quote-bento) > #otItemsCard{grid-column:1 / -1;grid-row:2;}
html.layout-compact :is(.ot-bento,.quote-bento) > .card:not(:has(.items-table)):not(#otItemsCard):not(:has(.richtext-editor)):not(.obs-card):not(#internalNotesCard):not(#woProductionCard){grid-row:1;}
/* the order's Production card (Item work) has its own full-width row, below Observations */
html.layout-compact .ot-bento > #woProductionCard{grid-column:1 / -1;grid-row:auto;}
/* board: the Details card is the grid's fourth column, so Production, Items and Observations span all four */
html.layout-compact #orderDetail .ot-bento:has(> .details-card){grid-template-columns:repeat(3,minmax(0,1fr)) auto;}
html.layout-compact :is(.ot-bento,.quote-bento) > .card:has(.richtext-editor),
html.layout-compact :is(.ot-bento,.quote-bento) > .obs-card,
html.layout-compact :is(.ot-bento,.quote-bento) > #internalNotesCard{grid-column:1 / -1;grid-row:auto;min-width:0;}

/* cards */
html.layout-compact :is(.ot-bento,.quote-bento) > .card{padding:16px 20px 18px;}
html.layout-compact :is(.ot-bento,.quote-bento) > .card > header{margin-bottom:12px;}
html.layout-compact :is(.ot-bento,.quote-bento) > .card > header h2{font-size:18px;color:var(--ink-soft);}
html.layout-compact :is(.ot-bento,.quote-bento) > .card > header p{display:none;}
html.layout-compact :is(.ot-bento,.quote-bento) > .cmp-flex{display:flex;flex-direction:column;}
html.layout-compact :is(.ot-bento,.quote-bento) .cmp-o3{order:3;}
html.layout-compact :is(.ot-bento,.quote-bento) .cmp-o4{order:4;}
html.layout-compact :is(.ot-bento,.quote-bento) .field-row{display:contents;}

/* fields: label above a short input */
html.layout-compact :is(.ot-bento,.quote-bento) .field{gap:4px;margin-bottom:12px;}
html.layout-compact :is(.ot-bento,.quote-bento) .field label{height:auto;font-size:12.5px;font-weight:400;color:var(--ink-soft);line-height:1.2;}
html.layout-compact :is(.ot-bento,.quote-bento) input[type="date"],
html.layout-compact :is(.ot-bento,.quote-bento) input[type="text"],
html.layout-compact :is(.ot-bento,.quote-bento) input[type="number"],
html.layout-compact :is(.ot-bento,.quote-bento) select,
html.layout-compact :is(.ot-bento,.quote-bento) .combobox-trigger{font-size:13px;padding-left:10px;padding-right:10px;border-radius:6px;}
html.layout-compact :is(.ot-bento,.quote-bento) select{padding-right:30px;background-size:16px 16px;}
html.layout-compact :is(.ot-bento,.quote-bento) input::placeholder{text-overflow:ellipsis;}
html.layout-compact :is(.ot-bento,.quote-bento) .field-duo input[type="number"]{flex:0 0 72px;}
html.layout-compact :is(.ot-bento,.quote-bento) .field-duo .combobox{min-width:0;}
html.layout-compact :is(.ot-bento,.quote-bento) .field .link-btn{margin:2px 0 0;align-self:flex-start;font-size:12px;}

/* view rows (board detail): label above a boxed value */
html.layout-compact :is(.ot-bento,.quote-bento) .rail-row{gap:4px;margin-bottom:12px;}
html.layout-compact :is(.ot-bento,.quote-bento) .rail-row .k{font-size:12.5px;font-weight:400;color:var(--ink-soft);line-height:1.2;}
html.layout-compact :is(.ot-bento,.quote-bento) .rail-row .v{
  font-size:13px;padding:3px 10px;border-radius:6px;min-width:0;height:auto;min-height:var(--field-h);line-height:1.3;
}
html.layout-compact :is(.ot-bento,.quote-bento) .note-text{font-size:12.5px;}

/* items + observations */
html.layout-compact :is(.ot-bento,.quote-bento) .items-table textarea.item-input{padding-top:6px;min-height:var(--field-h);}
html.layout-compact :is(.ot-bento,.quote-bento) .items-table .item-total{line-height:var(--field-h);}
html.layout-compact :is(.ot-bento,.quote-bento) .items-table .item-delivered-checkbox{margin-top:7px;}
html.layout-compact :is(.ot-bento,.quote-bento) .items-table .col-remove .icon-btn{margin-top:0;}
html.layout-compact #otItemsCard .items-table th,
html.layout-compact #otItemsCard .items-table td{padding:5px 6px;}
html.layout-compact :is(.ot-bento,.quote-bento) .richtext-editor{min-height:140px;}

/* header */
html.layout-compact .edit-main .editor-head{margin-bottom:12px;}
html.layout-compact .edit-main .editor-head .eh-title p{display:none;}
html.layout-compact .editor-head.ro-head{align-items:flex-end;padding:18px 24px;}
html.layout-compact .ro-head .eh-icon{width:64px;height:64px;border-radius:16px;}
html.layout-compact .ro-head .eh-icon svg{width:40px;height:40px;}
html.layout-compact .ro-head .oh-id{flex-direction:column;align-items:flex-start;gap:0;}
html.layout-compact .ro-head .oh-ot{font-size:34px;line-height:1.1;font-weight:800;}
html.layout-compact .ro-head .oh-client{border:0;padding:0;font-size:22px;font-weight:400;color:var(--ink-soft);}
html.layout-compact .ro-head .ro-pills{display:none;}

/* Detalles: label left, pill value right */
html.layout-compact .details-card .rail-top{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;margin-bottom:12px;}
html.layout-compact .details-card .rail-top .rail-top-label{font-size:12.5px;color:var(--ink-soft);}
html.layout-compact .details-card .rail-ot-number{display:none;}
html.layout-compact .details-card .rail-top .pill{justify-self:start;}
html.layout-compact .details-card .rail-card{border:0;box-shadow:none;background:none;padding:0;margin:0;}
html.layout-compact .details-card .rail-row{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:center;margin-bottom:12px;}
html.layout-compact .details-card .rail-row .v{border:0;background:none;padding:0;min-height:0;justify-self:start;}
html.layout-compact .details-card .rail-row .v.days-pill,
html.layout-compact .details-card .rail-row #railDays{
  display:inline-flex;padding:5px 16px;border-radius:999px;
  background:#FF7106;color:#fff;font-weight:700;font-size:13px;
}
html.layout-compact .details-card .rail-row .v.quote-pill{
  display:inline-flex;align-items:center;min-width:128px;min-height:30px;padding:0 16px;border-radius:999px;
  background:var(--light-bg-teal,#0d9488);color:#fff;font-weight:700;font-size:13px;box-sizing:border-box;
}
html.layout-compact .details-card .rail-row .v.quote-pill a{color:#fff;text-decoration:none;}
html.layout-compact .details-card .rail-card.checklist{margin-top:4px;}
html.layout-compact .details-card .rail-card.checklist h3{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:400;color:var(--ink-soft);margin-bottom:6px;}

/* OT form: the right rail moves into the Detalles card, so its column goes away */
html.layout-compact .shell:has(#detailsCard){grid-template-columns:var(--lm-side,220px) 1fr;}
html.layout-compact .shell:has(#detailsCard) .context-rail{display:none;}
@media (max-width:1180px){html.layout-compact .shell:has(#detailsCard){grid-template-columns:76px 1fr;}}
/* desktop layout keeps its full side menu at tablet widths, like every other page */
@media (min-width:641px) and (max-width:1180px){html.layout-m.layout-compact .shell:has(#detailsCard){grid-template-columns:var(--lm-side) 1fr;}}
@media (max-width:640px){
  html.layout-compact :is(.ot-bento,.quote-bento){grid-template-columns:minmax(0,1fr);}
  /* !important: the desktop placement rules use ids (#otItemsCard, #internalNotesCard) and would
     otherwise keep every card on grid-row 1 / 2, stacking them on top of each other. */
  html.layout-compact :is(.ot-bento,.quote-bento) > .card,
  html.layout-compact :is(.ot-bento,.quote-bento) > #otItemsCard,
  html.layout-compact :is(.ot-bento,.quote-bento) > #internalNotesCard,
  html.layout-compact :is(.ot-bento,.quote-bento) > .obs-card,
  html.layout-compact :is(.ot-bento,.quote-bento) > .card:has(.items-table){grid-column:auto !important;grid-row:auto !important;}
}

/* Prioridad y fechas: 2-column grid so estimated and actual delivery dates share a row */
.lbl-c{display:none;}
html.layout-compact .lbl-c{display:inline;}
html.layout-compact .lbl-x{display:none;}
html.layout-compact :is(.ot-bento,.quote-bento) > .cmp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-content:start;}
html.layout-compact :is(.ot-bento,.quote-bento) > .cmp-grid > *:not(.cmp-half),
html.layout-compact :is(.ot-bento,.quote-bento) > .cmp-grid .field-row > *:not(.cmp-half){grid-column:1 / -1;}
html.layout-compact :is(.ot-bento,.quote-bento) .cmp-o4{order:4;}
html.layout-compact :is(.ot-bento,.quote-bento) .cmp-o5{order:5;}
html.layout-compact :is(.ot-bento,.quote-bento) > .cmp-grid > .cmp-o4.cmp-half{order:4;}

/* Campos requeridos: classic shows only what is missing; compact always lists every field */
.checklist li.req-done{display:none;}
.checklist ul.all-done{display:none;}
.checklist li svg,.checklist li .icon{flex:none;}
html.layout-compact .checklist li.req-done{display:flex;color:var(--good);font-weight:700;}
html.layout-compact .checklist li.req-todo{color:var(--ink-faint);font-weight:700;}
html.layout-compact .checklist ul.all-done{display:flex;}
html.layout-compact .checklist-complete{display:none;}
html.layout-compact .details-card .rail-card.checklist{display:grid;grid-template-columns:140px minmax(0,1fr);align-items:start;}
html.layout-compact .details-card .rail-card.checklist h3{margin:0;padding-top:1px;}
html.layout-compact .details-card .rail-card.checklist ul{gap:4px;}
html.layout-compact :is(.ot-bento,.quote-bento) .cmp-o1{order:1;}

/* Edit form: Estado de OT dropdown lives in the Detalles card; calculated values look disabled */
html.layout-compact .details-card .field{display:grid;grid-template-columns:140px minmax(0,1fr);column-gap:0;align-items:center;margin-bottom:12px;}
html.layout-compact .details-card .field > :not(label){grid-column:2;}
html.layout-compact .details-card .field label{font-size:12.5px;font-weight:400;color:var(--ink-soft);}
html.layout-compact :is(.ot-bento,.quote-bento) #field-entrega[hidden]{display:flex;}
html.layout-compact :is(.ot-bento,.quote-bento) #field-entrega .field-hint{display:none;}
html.layout-compact #detailsCard .rail-row .v{opacity:.55;cursor:not-allowed;}

/* "+ Registrar nuevo cliente" sits in the label row, right-aligned, so the fields below don't shift */
/* the Client field: the Walk-In box on the left, then the Client column (its label and "Register new client" link on one row, the box below) */
html.layout-compact :is(.ot-bento,.quote-bento) #field-cliente{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;}
html.layout-compact :is(.ot-bento,.quote-bento) #field-cliente > .client-col{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:10px;row-gap:4px;align-items:center;min-width:0;}
/* the client column alone (no Walk-In checkbox beside it, as on the Quote form) spans the whole field, so the dropdown
   is as wide as the fields next to it (Department) instead of shrinking to its content */
html.layout-compact :is(.ot-bento,.quote-bento) #field-cliente > .client-col:only-child{grid-column:1 / -1;}
html.layout-compact :is(.ot-bento,.quote-bento) #field-cliente .client-col > label{grid-row:1;grid-column:1;}
html.layout-compact :is(.ot-bento,.quote-bento) #field-cliente .client-col > .link-btn{grid-row:1;grid-column:2;justify-self:end;align-self:center;margin:0;}
html.layout-compact :is(.ot-bento,.quote-bento) #field-cliente .client-col > .combobox{grid-row:2;grid-column:1 / -1;}
html.layout-compact :is(.ot-bento,.quote-bento) #field-cliente .client-col > .field-error{grid-row:3;grid-column:1 / -1;}

/* Edit form (compact layout): the board's order list stays visible, search/filter/new disabled */
.edit-rail{display:none;}
.cmp-edit-id{display:none;}
html.layout-compact .canvas:has(.edit-rail.on){flex-direction:row;gap:12px;}
html.layout-compact .edit-rail.on{display:flex;}
.edit-main{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;}
/* While an existing OT/COT is still loading its data the cards sit dimmed, then ease in once filled. */
.edit-main .bento{transition:opacity .18s ease;}
.edit-main.is-hydrating .bento{opacity:.5;pointer-events:none;}
.edit-rail .rail-toolzone{opacity:.5;pointer-events:none;}
.edit-rail .order-row{cursor:not-allowed;}
.edit-rail .order-row:hover{background:transparent;}
.edit-rail .order-row.selected:hover{background:var(--accent-wash);}
@media (max-width:1180px){html.layout-compact .edit-rail.on{display:none;}}

/* Edit form header mirrors the view header: icon + folio + client, only the buttons differ */
html.layout-compact .editor-head.is-editing{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-card);
  padding:18px 24px;align-items:flex-end;
}
html.layout-compact .editor-head.is-editing .eh-back,
html.layout-compact .editor-head.is-editing .eh-title > .eh-row:not(.cmp-edit-id){display:none;}
html.layout-compact .editor-head.is-editing .cmp-edit-id{display:flex;}
html.layout-compact .is-editing .eh-icon{width:64px;height:64px;border-radius:16px;}
html.layout-compact .is-editing .eh-icon svg{width:40px;height:40px;}
html.layout-compact .is-editing .oh-id{flex-direction:column;align-items:flex-start;gap:0;display:flex;}
html.layout-compact .is-editing .oh-ot{font-size:34px;line-height:1.1;font-weight:800;}
html.layout-compact .is-editing .oh-client{border:0;padding:0;font-size:22px;font-weight:400;color:var(--ink-soft);}

/* Cotización view header mirrors the OT header (the old chips move into Detalles) */
html.layout-compact .order-header{padding:18px 24px;}
html.layout-compact .order-header .oh-top{align-items:flex-end;}
html.layout-compact .order-header .oh-chips{display:none;}
html.layout-compact .order-header .eh-icon{width:64px;height:64px;border-radius:16px;}
html.layout-compact .order-header .eh-icon svg{width:40px;height:40px;}
html.layout-compact .order-header .oh-id{flex-direction:column;align-items:flex-start;gap:0;}
html.layout-compact .order-header .oh-ot{font-size:34px;line-height:1.1;font-weight:800;}
html.layout-compact .order-header .oh-client{border:0;padding:0;font-size:22px;font-weight:400;color:var(--ink-soft);}
html.layout-compact .order-header .oh-id .pill{display:none;}
html.layout-compact .order-header .oh-actions .btn.sm{padding:9px 18px;font-size:14px;}

/* Cotización Detalles (form rail moved into the card): calculated values as neutral pills */
html.layout-compact #detailsCard[data-doc="quote"] .rail-row .v:not(.quote-pill){
  background:var(--neutral-wash);color:var(--neutral);border-radius:999px;padding:5px 16px;font-weight:700;font-size:13px;
}
html.layout-compact #detailsCard[data-doc="quote"] .rail-row .v.plain:empty{display:none;}
html.layout-compact #detailsCard[data-doc="quote"] .rail-row .v.quote-pill:empty,
html.layout-compact .details-card .rail-row .v.quote-pill:empty{
  display:inline-flex;min-width:0;min-height:0;padding:0;background:none;color:var(--ink-faint);font-weight:400;
}
html.layout-compact #detailsCard[data-doc="quote"] .rail-row .v.quote-pill:empty::before,
html.layout-compact .details-card .rail-row .v.quote-pill:empty::before{content:"\2014";}

/* Cotización Detalles: a distinct colour per value (view pills + form rail values) */
.pill.c-blue,html.layout-compact #detailsCard #railCreated{background:var(--light-bg-blue,#2f6fed);color:#fff;}
.pill.c-violet,html.layout-compact #detailsCard #railCreatedBy{background:var(--light-bg-violet,#9b59b6);color:#fff;}
.pill.c-indigo,html.layout-compact #detailsCard #railItemCount{background:var(--light-bg-indigo,#4f46e5);color:#fff;}
.pill.c-green,html.layout-compact #detailsCard #railGrandTotal{background:#2e9d5b;color:#fff;}
html.layout-compact #detailsCard #railSubtotal,html.layout-compact #detailsCard #railTax{background:#FF7106;color:#fff;}

/* Selected OT / COT in the list glows in the module's theme colour (pink for OT, teal for COT),
   replacing the default blue focus ring on these rows. */
.order-row.selected,
.order-row.selected:focus,
.order-row.selected:focus-visible{
  position:relative;z-index:1;border-radius:0;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
             0 0 14px 2px color-mix(in srgb, var(--accent) 40%, transparent);
}
.order-row:focus-visible:not(.selected){border-radius:0;box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);outline:none;}

/* Selected row: a thin accent line on the left AND right, same 1px weight as the row's
   top/bottom lines (padding compensates for the narrower left border so text doesn't shift). */
.order-row.selected{border-left:1px solid var(--accent);border-right:1px solid var(--accent);padding-left:16px;}

/* First row in the list gets its own top line (the toolzone's bottom border moves onto it, so the
   line isn't doubled, and a selected first row shows the accent line like any other). */
.rail-toolzone:has(+ .order-list){border-bottom:0;}
.order-list > .order-row:first-child{border-top:1px solid var(--line);}
.order-list > .order-row.selected:first-child{border-top-color:var(--accent);}

/* Phones: every field stacks vertically (the estimated / actual delivery dates stop sharing a row). */
@media (max-width:640px){
  html.layout-compact :is(.ot-bento,.quote-bento) > .cmp-grid{grid-template-columns:minmax(0,1fr);}
}

/* Phones, OT and COT detail views: the Artículos list shows only Parte and Descripción; tapping a
   row opens every field in the popup (below), all stacked vertically. */
@media (max-width:640px){
  #otItemsCard .items-table:not(#itemsTable) thead th:not(:nth-child(1)):not(:nth-child(3)),
  #otItemsCard .items-table:not(#itemsTable) tbody td:not(:nth-child(1)):not(:nth-child(3)),
  #quoteItemsCard .items-table:not(#itemsTable) thead th:not(:nth-child(1)):not(:nth-child(4)),
  #quoteItemsCard .items-table:not(#itemsTable) tbody td:not(:nth-child(1)):not(:nth-child(4)){display:none;}
  #quoteItemsCard .items-table:not(#itemsTable) tbody tr{cursor:pointer;}
  /* item popup: single column even where the desktop layout uses a 7-column grid */
  .item-details .item-detail-grid{grid-template-columns:minmax(0,1fr) !important;}
  .item-details .item-detail-grid,
  .item-details .item-detail-row{grid-column:auto !important;}
  /* same compact rows as the COT popup: no fixed row heights, one line between fields */
  .item-details{gap:12px;margin:14px 0 0;}
  .item-details .item-detail-grid{gap:12px;padding-bottom:0;border-bottom:0;}
  .item-details .item-detail-grid .item-detail-row{
    min-height:0 !important;padding:0 0 12px;margin:0;border:0;border-bottom:1px solid var(--line-soft);
  }
  .item-details .item-detail-grid.is-sub .item-detail-row{padding:0 0 12px;}
  .item-details .item-detail-row dt{font-size:12px;letter-spacing:.04em;}
  .item-details .item-detail-row dd{font-size:15px;}
  .item-details .item-detail-grid .id-photo{width:120px;height:120px;}
}

/* Phones: narrowest possible Parte column (Descripción gets the width); the COT view hides the
   totals footer (the Total General pill opens them in a popup instead). */
@media (max-width:640px){
  #otItemsCard .items-table:not(#itemsTable) thead th:nth-child(1),
  #otItemsCard .items-table:not(#itemsTable) tbody td:nth-child(1),
  #quoteItemsCard .items-table:not(#itemsTable) thead th:nth-child(1),
  #quoteItemsCard .items-table:not(#itemsTable) tbody td:nth-child(1){width:1%;white-space:nowrap;padding-right:10px;}
  /* only in Diseño Clásico, where the Detalles pill gives access to the totals */
  html.layout-compact #otItemsCard .items-table tfoot,
  html.layout-compact #quoteItemsCard .items-table tfoot{display:none;}
  .pill[data-action="totals"]{cursor:pointer;}
}

/* Item editor. Desktop keeps the original vertical list (Cantidad, Unidad, ... then the status
   checkboxes with their full names). Phones (<= 640px) get Parte | Cantidad | Unidad on the first
   row and the status checkboxes in a row of three with short labels above (CAN. COM. ENT.). */
.item-editor .ie-top{display:contents;}
.item-editor .ie-part{display:none !important;}
.item-editor .ie-status{display:flex;flex-direction:column;gap:14px;}
.item-editor .ie-status-col{display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.item-editor .ie-status-col input{width:18px;height:18px;margin:0;accent-color:var(--accent);}
.item-editor .ie-status-col[data-f="delivered"]{order:0;}
.item-editor .ie-status-col[data-f="cancelled"]{order:1;}
.item-editor .ie-status-col[data-f="completed"]{order:2;}
.item-editor .ie-short{display:none;}
.item-editor .ie-full{display:inline;}
@media (max-width:640px){
  .item-editor .ie-top{display:grid;grid-template-columns:72px minmax(0,1fr) minmax(0,1.4fr);gap:10px;}
  .item-editor .ie-top .field{margin-bottom:0;min-width:0;}
  .item-editor .ie-part{display:flex !important;}
  .item-editor .ie-part input{text-align:center;background:var(--surface-sunken);color:var(--ink-soft);cursor:default;}
  .item-editor .ie-status{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;}
  .item-editor .ie-status-col{flex-direction:column;justify-content:flex-start;align-items:center;gap:6px;font-size:inherit;}
  .item-editor .ie-status-col[data-f]{order:0;}
  .item-editor .ie-status-col[data-f="completed"]{order:0;}
  .item-editor .ie-status-col[data-f="delivered"]{order:1;}
  .item-editor .ie-status-col[data-f="cancelled"]{order:2;}
  .item-editor .ie-status-col input{width:20px;height:20px;}
  .item-editor .ie-status-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;color:var(--ink-soft);}
  .item-editor .ie-short{display:inline;}
  .item-editor .ie-full{display:none;}
  /* amounts line up with the text inside the neighbouring input boxes */
  #itemsTable td.col-price,#itemsTable td.col-total{line-height:var(--field-h);}
}
/* OT Total General pill in Detalles is a phone-only entry point to the totals popup */
@media (min-width:641px){#otTotalRow{display:none !important;}}

/* Phones, OT and COT forms: each item is a card -- "Parte 1 | 10 Piezas", the description, the price
   line, then the status checkboxes (COM ENT CAN, label left of its box) with edit / remove on the
   right of the same row. */
@media (max-width:640px){
  #itemsTable tr[data-index]{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
    padding:14px;margin:0 0 10px;border:1px solid var(--line);border-radius:12px;
  }
  #itemsTable tr[data-index] .col-part{display:flex;order:1;flex:none;font-size:14px;color:var(--ink-faint);
    align-items:center;gap:5px;padding-right:12px;border-right:1px solid var(--line);}
  #itemsTable tr[data-index] .col-part .ps-label{font-family:var(--body);}
  #itemsTable tr[data-index] .col-qty{order:2;flex:none;font-size:14px;color:var(--ink-faint);}
  #itemsTable tr[data-index] .col-desc{order:3;flex-basis:100%;font-size:16px;line-height:1.35;color:var(--ink);}
  #itemsTable tr[data-index] .col-photo{order:4;flex-basis:100%;}
  #itemsTable tr[data-index] .col-completed{order:5;}
  #itemsTable tr[data-index] .col-delivered{order:6;}
  #itemsTable tr[data-index] .col-cancelled{order:7;}
  #itemsTable tr[data-index] .col-edit{order:8;margin-left:auto;}
  #itemsTable tr[data-index] .col-remove{order:9;}
  #itemsTable tr[data-index] .st-chk{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;
    color:var(--ink-soft);cursor:pointer;}
  #itemsTable tr[data-index] .st-chk input{margin:0;}
  /* price line: label and amount on the same baseline / size */
  #itemsTable tr[data-index] .item-sub{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;font-size:13px;margin-top:6px;}
  #itemsTable tr[data-index] .item-sub > span{font-size:13px;line-height:1.5;}
  #itemsTable tr[data-index] .item-sub .amt{color:var(--ink-soft);}
}
@media (max-width:640px){
  #itemsTable tr[data-index] .col-part,#itemsTable tr[data-index] .col-qty{font-family:var(--body);}
  /* no empty "—" photo placeholder line in the card */
  #itemsTable tr[data-index] .col-photo:has(> .item-sub){display:none;}
}

@media (max-width:640px){
  /* status checkboxes on the card are display-only; they are changed in the item editor (pencil) */
  #itemsTable tr[data-index] .st-chk{cursor:default;}
  #itemsTable tr[data-index] .st-chk input:disabled{opacity:1;cursor:default;}
}

/* Phones: COT/OT detail header fits the screen (no horizontal scroll).
   Smaller folio/client text, buttons in one row (Editar - Convertir a OT - PDF icon). */
@media (max-width:640px){
  html .order-header,html.layout-compact .order-header,
  html .editor-head.ro-head,html.layout-compact .editor-head.ro-head{padding:14px 12px;min-width:0;max-width:100%;box-sizing:border-box;}
  html .order-header .oh-top,html.layout-compact .order-header .oh-top,
  html .editor-head.ro-head,html.layout-compact .editor-head.ro-head{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:flex-start;gap:12px;}
  .editor-head.ro-head .eh-title,.order-header .eh-row{flex:none;min-width:0;width:100%;justify-content:flex-start;}
  .order-header .eh-row,.ro-head .eh-row{gap:10px;min-width:0;}
  html .order-header .eh-icon,html.layout-compact .order-header .eh-icon,
  html .ro-head .eh-icon,html.layout-compact .ro-head .eh-icon{width:40px;height:40px;border-radius:10px;}
  html .order-header .eh-icon svg,html.layout-compact .order-header .eh-icon svg,
  html .ro-head .eh-icon svg,html.layout-compact .ro-head .eh-icon svg{width:26px;height:26px;}
  html .order-header .oh-id,html.layout-compact .order-header .oh-id,
  html .ro-head .oh-id,html.layout-compact .ro-head .oh-id{flex-direction:column;align-items:flex-start;gap:0;min-width:0;}
  html .order-header .oh-ot,html.layout-compact .order-header .oh-ot,
  html .ro-head .oh-ot,html.layout-compact .ro-head .oh-ot{font-size:18px;line-height:1.15;font-weight:800;}
  html .order-header .oh-client,html.layout-compact .order-header .oh-client,
  html .ro-head .oh-client,html.layout-compact .ro-head .oh-client{font-size:13px;font-weight:400;border:0;padding:0;overflow-wrap:anywhere;}
  .order-header .oh-actions,.ro-head .eh-actions{display:flex;flex-wrap:nowrap;gap:8px;width:100%;}
  .order-header .oh-actions .btn,.ro-head .eh-actions .btn{flex:1 1 auto;min-width:0;padding:9px 8px;font-size:13px;justify-content:center;white-space:nowrap;}
  .order-header .oh-actions [data-action="edit"],.ro-head .eh-actions [data-action="edit"]{order:1;}
  .order-header .oh-actions [data-action="convert"]{order:2;}
  .order-header .oh-actions [data-action="pdf"],.ro-head .eh-actions [data-action="pdf"]{order:3;flex:0 0 auto;padding:9px 12px;}
  .order-header .oh-actions [data-action="email"]{order:4;}
  .order-header .oh-actions .pdf-label,.ro-head .eh-actions .pdf-label{display:none;}
}

/* Phones: the Panel de Control group keeps its label/chevron and expands (the tablet rule hides them). */
@media (max-width:640px){
  .sidenav .nav-group-toggle .label{display:inline;}
  .sidenav .nav-group-toggle .nav-chevron{display:inline-flex;}
  .sidenav .nav-group-toggle{justify-content:flex-start;padding:9px 12px;}
  .sidenav .nav-group .nav-sub{display:none !important;}
  .sidenav .nav-group.open .nav-sub{display:flex !important;}
}

/* Phones: Roles y Permisos shows one access column at a time; the audit list is Cuándo + Tipo/Quién
   and a row opens a detail card. Desktop is unchanged. */
.access-scope-switch{display:none;}
.audit-table .m-only{display:none;}
.audit-detail-list{margin:12px 0;display:flex;flex-direction:column;gap:10px;}
.audit-detail-row dt{font-size:12px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
.audit-detail-row dd{margin:2px 0 0;font-size:14px;color:var(--ink);overflow-wrap:anywhere;}
.audit-detail-card{max-height:85vh;overflow:auto;}
@media (max-width:640px){
  .access-scope-switch{display:flex;flex-direction:column;gap:4px;margin-bottom:10px;}
  .access-scope-switch select{width:100%;}
  .access-node-table{width:100%;table-layout:fixed;}
  .access-node-table select{width:100%;max-width:100%;min-width:0;}
  .access-node-table[data-scope="others"] th:nth-child(3),.access-node-table[data-scope="others"] td:nth-child(3){display:none;}
  .access-node-table[data-scope="own"] th:nth-child(2),.access-node-table[data-scope="own"] td:nth-child(2){display:none;}
  .audit-table .d-only{display:none;}
  .audit-table .m-only{display:table-cell;}
  .audit-table th.d-only,.audit-table th:nth-child(n+2):not(.m-only){display:none;}
  .audit-table td.m-only .audit-tq-type,.audit-table .audit-when-split > span,.audit-table td.m-only .audit-tq-who{display:block;}
  .audit-table span.m-only{display:block;}
  .audit-table .audit-tq-who{color:var(--ink-faint);font-size:12px;}
  .audit-table .audit-when-split > span:last-child{color:var(--ink-faint);font-size:12px;}
  .audit-table tbody tr[data-i]{cursor:pointer;}
}

/* Phones: pull-to-refresh indicator (see q2w_initPullToRefresh in shell.js). */
.ptr-indicator{display:none;}
@media (max-width:640px){
  html{overscroll-behavior-y:contain;}
  .ptr-indicator{position:fixed;top:60px;left:50%;width:36px;height:36px;border-radius:50%;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-card);z-index:90;display:none;align-items:center;justify-content:center;transform:translate(-50%,-40px);pointer-events:none;}
  .ptr-indicator.is-pulling,.ptr-indicator.is-loading{display:flex;}
  .ptr-indicator span{width:16px;height:16px;border-radius:50%;border:2px solid var(--ink-faint);border-top-color:transparent;}
  .ptr-indicator.is-ready span{border-color:var(--brand-pink);border-top-color:transparent;}
  .ptr-indicator.is-loading span{animation:ptr-spin .7s linear infinite;}
}
@keyframes ptr-spin{to{transform:rotate(360deg);}}

/* Phones: long item descriptions wrap inside their card instead of spilling out (OT and COT). */
@media (max-width:640px){
  .items-table,.items-table tbody{max-width:100%;}
  .items-table td,.items-table .col-desc{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;white-space:normal;}
  #itemsTable tr[data-index]{max-width:100%;box-sizing:border-box;}
  #itemsTable tr[data-index] .col-desc{min-width:0;max-width:100%;overflow-wrap:anywhere;white-space:pre-wrap;}
}

@media (max-width:640px){
  .item-details,.item-detail-row{min-width:0;max-width:100%;}
  .item-detail-row dd{min-width:0;max-width:100%;overflow-wrap:anywhere;word-break:break-word;}
}

/* Phones, OT/COT view: the item cards keep exactly the Edit-mode look (undo the table cell padding). */
@media (max-width:640px){
  html #otItemsCard #itemsTable tr[data-index] td,html.layout-compact #otItemsCard #itemsTable tr[data-index] td,
  html #quoteItemsCard #itemsTable tr[data-index] td,html.layout-compact #quoteItemsCard #itemsTable tr[data-index] td{padding:0;}
  html.layout-compact #otItemsCard #itemsTable tr[data-index] td.col-part,html #otItemsCard #itemsTable tr[data-index] td.col-part,html.layout-compact #quoteItemsCard #itemsTable tr[data-index] td.col-part,html #quoteItemsCard #itemsTable tr[data-index] td.col-part{padding-right:12px;}
  #otItemsCard #itemsTable,#quoteItemsCard #itemsTable{font-size:13px;}
  #otItemsCard #itemsTable tr[data-index],#quoteItemsCard #itemsTable tr[data-index]{cursor:pointer;}
}

/* Phones: Filtros / Ordenar (OT and COT lists) open centered on screen instead of at the trigger,
   where they ran off the right edge. initPopover sets top/left inline, hence !important. */
@media (max-width:640px){
  #railFilters.popover-floating,#railSort.popover-floating{
    top:50% !important;left:50% !important;transform:translate(-50%,-50%);
    width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;box-sizing:border-box;
  }
}

/* Phones, Control Panel > Currency: no example line, a three-column list (Code, Name, Symbol); tapping a
   row opens its details (settings.js). Desktop keeps the full table. */
@media (max-width:640px){
  #currencyExample{display:none;}
  .currency-table th:nth-child(n+4),.currency-table td:nth-child(n+4){display:none;}
  .currency-table tbody tr{cursor:pointer;}
  .currency-detail{margin:0 0 16px;}
  .currency-detail-row{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid var(--line-soft);}
  .currency-detail-row dt{color:var(--text-muted, inherit);opacity:.75;}
  .currency-detail-row dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere;}
}

/* Totals show "symbol amount CODE": the symbol and the code in a softer tone of the amount's own colour. */
.money-sym,.money-code{opacity:.6;vertical-align:baseline;}
.items-grand-total,.items-tfoot-value,.items-total-value{white-space:nowrap;}
/* Totals footer: label and amount centred on the same line (the global vertical-align:sub would drop the amount). */
.items-table tfoot td{vertical-align:middle;}
.items-table tfoot .items-grand-label,.items-table tfoot .items-grand-total,.items-table tfoot .items-tfoot-value,
.items-table tfoot .items-total-label,.items-table tfoot .items-total-value{padding-top:9px;padding-bottom:9px;}

/* Phones, work order item status popup ("Edit Status | Item N"): a roomy vertical list, bigger boxes on the left,
   "COM - Complete" beside each. Only when the popup has nothing but the three status boxes. */
.item-editor .ie-code{display:none;}
@media (max-width:640px){
  .item-editor.ie-status-only .ie-status{display:flex;flex-direction:column;gap:30px;padding:14px 4px 10px;}
  .item-editor.ie-status-only .ie-status-col{flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:22px;}
  .item-editor.ie-status-only .ie-status-col input{width:32px;height:32px;flex:none;}
  .item-editor.ie-status-only .ie-status-label{font-size:17px;font-weight:500;letter-spacing:0;color:var(--ink);}
  .item-editor.ie-status-only .ie-short{display:none;}
  .item-editor.ie-status-only .ie-full{display:inline;margin-left:4px;}
  .item-editor.ie-status-only .ie-part{display:none !important;}
  .item-editor.ie-status-only .ie-code,.item-editor.ie-status-only .ie-full{vertical-align:baseline;}
  .item-editor.ie-status-only .ie-code{display:inline-block;min-width:84px;font-weight:800;}
  .item-editor.ie-status-only .ie-code::after{content:"-";font-weight:400;margin:0 0 0 14px;color:var(--ink-soft);vertical-align:baseline;}
}

/* ===== Home (phone landing page; home.html redirects wider screens to the board) ===== */
[data-mobile-only]{display:none !important;}
.home{display:none;}
@media (max-width:640px){
  [data-mobile-only]{display:list-item !important;}
  /* the Home page fills the whole area under the top bar (no frame) with a deep-blue backdrop */
  .canvas:has(.home){padding:0;}
  .home{display:flex;flex-direction:column;gap:24px;flex:1 0 auto;padding:8px 16px 32px;color:#fff;}
  /* the backdrop covers the whole screen; the top and bottom bars float over it without their own background */
  /* the backdrop is its own layer, fixed behind the screen and larger than it, so it fills any phone size
     (taller screens, dynamic toolbars, safe areas) whatever height the page itself reports */
  html:has(.home){background:#020b1f;}
  body:has(.home){background:transparent;}
  body:has(.home)::before{content:"";position:fixed;left:0;right:0;top:-80px;bottom:-80px;z-index:-1;pointer-events:none;background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 800' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='6'/%3E%3C/filter%3E%3C/defs%3E%3Cg filter='url(%23b)' fill='none' stroke='%2360a5ff' stroke-linecap='round'%3E%3Cpath d='M-20 130C90 150 200 220 260 330' stroke-opacity='.5' stroke-width='4'/%3E%3Cpath d='M-20 250C110 270 230 350 290 470' stroke-opacity='.32' stroke-width='3.5'/%3E%3Cpath d='M420 380C330 400 270 450 230 520' stroke-opacity='.55' stroke-width='4'/%3E%3Cpath d='M420 470C340 490 290 540 250 610' stroke-opacity='.32' stroke-width='3.5'/%3E%3C/g%3E%3C/svg%3E") center/100% 100% no-repeat,
        radial-gradient(110% 22% at 75% 36%, rgba(40,130,255,.35), transparent 70%),
        linear-gradient(180deg,#0f5bd0 0%,#0f5bd0 12%,#062a63 42%,#020b1f 80%),
        #020b1f;}
  body:has(.home) .topbar{background:transparent;border-bottom:0;box-shadow:none;}
  body:has(.home) .brand{visibility:hidden;}
  body:has(.home) .topbar .icon-btn, body:has(.home) .topbar .nav-toggle{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);}
  body:has(.home) .topbar .icon-btn .icon{stroke:#fff;}
  body:has(.home) .tabbar{background:transparent;border-top:0;}
  body:has(.home) .tabbar a, body:has(.home) .tabbar .tabbar-more{color:rgba(255,255,255,.7);}
  body:has(.home) .tabbar a.active{color:#4aa3ff;background:none;}
  /* Home: the avatar keeps its own (never blue) color in both themes, with a thin 50% border and a glow in that color */
  body:has(.home) .user-chip .avatar.av-1{border:1px solid color-mix(in srgb, var(--dark-tx-teal) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-1{background:var(--dark-bg-teal);color:var(--dark-tx-teal);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-teal) 70%, transparent);}
  body:has(.home) .user-chip .avatar.av-2{border:1px solid color-mix(in srgb, var(--dark-tx-orange) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-2{background:var(--dark-bg-orange);color:var(--dark-tx-orange);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-orange) 70%, transparent);}
  body:has(.home) .user-chip .avatar.av-3{border:1px solid color-mix(in srgb, var(--dark-tx-red) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-3{background:var(--dark-bg-red);color:var(--dark-tx-red);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-red) 70%, transparent);}
  body:has(.home) .user-chip .avatar.av-4{border:1px solid color-mix(in srgb, var(--dark-tx-purple) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-4{background:var(--dark-bg-purple);color:var(--dark-tx-purple);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-purple) 70%, transparent);}
  body:has(.home) .user-chip .avatar.av-7{border:1px solid color-mix(in srgb, var(--dark-tx-green) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-7{background:var(--dark-bg-green);color:var(--dark-tx-green);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-green) 70%, transparent);}
  body:has(.home) .user-chip .avatar.av-8{border:1px solid color-mix(in srgb, var(--dark-tx-pink) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-8{background:var(--dark-bg-pink);color:var(--dark-tx-pink);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-pink) 70%, transparent);}
  body:has(.home) .user-chip .avatar.av-9{border:1px solid color-mix(in srgb, var(--dark-tx-amber) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-9{background:var(--dark-bg-amber);color:var(--dark-tx-amber);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-amber) 70%, transparent);}
  body:has(.home) .user-chip .avatar.av-10{border:1px solid color-mix(in srgb, var(--dark-tx-lime) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-10{background:var(--dark-bg-lime);color:var(--dark-tx-lime);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-lime) 70%, transparent);}
  body:has(.home) .user-chip .avatar.av-11{border:1px solid color-mix(in srgb, var(--dark-tx-violet) 50%, transparent);}
  :root[data-theme="light"] body:has(.home) .user-chip .avatar.av-11{background:var(--dark-bg-violet);color:var(--dark-tx-violet);filter:none;box-shadow:0 0 8px 1px color-mix(in srgb, var(--dark-tx-violet) 70%, transparent);}
  body:has(.home) .shell{background:transparent;}
  body:has(.home) .canvas{background:transparent;}
  .home-hero{display:flex;flex-direction:column;align-items:stretch;text-align:center;gap:10px;padding-top:0;}
  .home-logo{align-self:center;width:132px;height:132px;border-radius:28px;object-fit:cover;background:#000;box-shadow:0 10px 28px rgba(0,0,0,.4);}
  .home-title{margin:6px 0 0;display:flex;flex-direction:column;align-items:stretch;color:#fff;}
  .home-q2w{display:block;font-size:44px;line-height:1.05;font-weight:800;letter-spacing:.5px;}
  /* each line stays on one row: home.js shrinks the font until the text fits the width */
  .home-system,.home-tagline{display:block;white-space:nowrap;overflow:hidden;}
  .home-system{font-size:24px;line-height:1.3;font-weight:600;letter-spacing:.2px;}
  .home-tagline{margin:0;font-size:15px;line-height:1.45;color:rgba(255,255,255,.62);}
  .home-tagline span{font-size:inherit;line-height:inherit;vertical-align:baseline;}
  .home-client{font-weight:600;}
  .home-cards{display:flex;flex-direction:column;gap:12px;width:90%;align-self:center;}
  .home-card{
    display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:22px;color:#fff;
    text-decoration:none;box-shadow:0 8px 20px rgba(0,0,0,.28);height:92px;
  }
  .home-card:active{transform:scale(.985);}
  .home-card-quotes{background:linear-gradient(135deg,#1fb283,#0f8a63);}
  .home-card-orders{background:linear-gradient(135deg,#f9466f,#d11c4b);}
  .home-card-inventory{background:linear-gradient(135deg,#ff9a1f,#f26b0c);}
  .home-card-icon{
    flex:none;width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.2);
    display:flex;align-items:center;justify-content:center;
  }
  .home-card-icon .icon-filled{width:30px;height:30px;fill:#fff;}
  .home-card-icon .icon{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;}
  .home-card-text{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px;}
  .home-card-title{font-size:20px;font-weight:600;line-height:1.2;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
  .home-card-sub{font-size:14px;opacity:.85;line-height:1.3;}
  .home-card-chevron .icon{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
  .home-card.is-soon{opacity:.55;filter:saturate(.7);box-shadow:none;}
  .home-card.is-soon{position:relative;}
  .home-card-badge{position:absolute;top:10px;right:14px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.28);}
}

/* Bottom bar (phones only): Home / Quotes / Work Orders / More (opens the side menu) */
.tabbar{display:none;}
@media (max-width:640px){
  .tabbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--sideNavBg);border-top:1px solid var(--line);
    /* iPhone: the icons sit just above the home indicator instead of a full safe area higher; Android (inset 0) keeps 6px */
    padding:6px 8px max(6px, calc(env(safe-area-inset-bottom) - 12px));
  }
  .tabbar a, .tabbar .tabbar-more{
    flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;border:0;border-radius:14px;background:none;color:var(--ink-faint);
    font:inherit;font-size:11.5px;text-decoration:none;cursor:pointer;
  }
  .tabbar a[hidden],.tabbar .tabbar-more[hidden]{display:none;}
  .tabbar .icon, .tabbar .icon-filled{width:24px;height:24px;}
  .tabbar .icon{stroke-width:1.4;}
  .tabbar .label{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* open page: filled icon and label in bright blue; the others stay outline and grey */
  .tabbar .ic-line,.tabbar .ic-solid{display:flex;}
  .tabbar .ic-solid,.tabbar a.active .ic-line,.tabbar .tabbar-more .ic-solid{display:none;}
  .tabbar a.active .ic-solid{display:flex;}
  .tabbar a.active,.tabbar .tabbar-more[aria-expanded="true"]{color:#3b9bff;font-weight:700;}
  .tabbar .tabbar-more[aria-expanded="true"] .ic-line{display:flex;}
  /* keep content clear of the bar; hide the bar while typing so the keyboard has the room */
  .shell{padding-bottom:calc(64px + env(safe-area-inset-bottom));}
  body:has(input:focus, textarea:focus, select:focus) .tabbar{display:none;}
  body:has(input:focus, textarea:focus, select:focus) .shell{padding-bottom:0;}
}

/* ===== Work Orders list on phones (pink theme) =====
   Desktop keeps the compact rail: every .wo-* piece below is hidden outside the phone block. */
.wo-head,.wo-tabs,.wo-tabs-wrap,.wo-avatar,.wo-date,.wo-pills,.wo-person,.wo-chevron,.topbar-title,.wo-person-short,.wo-lead,.pdf-img,.missing-info-banner{display:none;}
@media (max-width:640px){
  /* header band behind the (transparent) top bar and the title row; list view only, not the order detail */
  body:has(.board.m-list:not(.detail-open)){
    background:
      linear-gradient(180deg,#5b0e2b 0,#5b0e2b 56px,rgba(91,14,43,0) 130px) top/100% 196px no-repeat,
      linear-gradient(160deg,#5b0e2b 0%,#9e1342 62%,#d11c4b 100%) top/100% 196px no-repeat,
      var(--paper);
  }
  body:has(.board.m-list:not(.detail-open)) .topbar{background:transparent;border-bottom:0;box-shadow:none;}
  body:has(.board.m-list:not(.detail-open)) .brand{display:none;}
  body:has(.board.m-list:not(.detail-open)) .topbar .icon-btn{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);}
  body:has(.board.m-list:not(.detail-open)) .topbar .icon-btn .icon{stroke:#fff;}
  body:has(.board.m-list:not(.detail-open)) .topbar-right{display:flex;align-items:center;gap:12px;}
  body:has(.board.m-list:not(.detail-open)) .topbar-title{
    display:block;flex:1;min-width:0;color:#fff;font-family:var(--display);font-size:24px;font-weight:800;line-height:1.1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .canvas:has(.board.m-list:not(.detail-open)){padding:0;overflow:hidden;}
  /* a thin strip of header under the top bar; the round + button straddles its lower edge, i.e. the sheet's top edge */
  .wo-head{display:block;position:relative;flex:none;height:34px;z-index:5;}
  .canvas:has(.board.detail-open) .wo-head{display:none;}
  .wo-fab{
    position:absolute;left:50%;bottom:-28px;transform:translateX(-50%);width:56px;height:56px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;
    background:linear-gradient(135deg,#ff5c85,#e8325f);border:4px solid var(--paper);box-shadow:0 8px 18px rgba(232,50,95,.45);
  }
  .wo-fab[hidden]{display:none;}
  .wo-fab .icon{width:26px;height:26px;stroke:#fff;stroke-width:2;}

  /* the sheet holding tabs, search and cards */
  .board.m-list:not(.detail-open) .order-rail{border:0;border-radius:24px 24px 0 0;background:var(--paper);box-shadow:0 -6px 22px rgba(0,0,0,.22);}
  .board.m-list:not(.detail-open) .rail-toolzone{background:transparent;border:0;padding:38px 14px 4px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
  .board.m-list:not(.detail-open) .rail-search,.board.m-list:not(.detail-open) .rail-toolbar{display:contents;}
  .board.m-list:not(.detail-open) #btnRefreshOrders,.board.m-list:not(.detail-open) .rail-toolbar .btn,.board.m-list:not(.detail-open) .mobile-kpi-strip{display:none;}
  .board.m-list:not(.detail-open) .rail-search-field{flex:1 1 0;min-width:0;}
  .board.m-list:not(.detail-open) .rail-toolbar .icon-btn{width:44px;height:44px;border-radius:14px;}

  .wo-tabs-wrap{display:block;position:relative;flex:0 0 100%;min-width:0;}
  .wo-tabs-arrow{
    position:absolute;top:0;bottom:0;z-index:2;display:flex;align-items:center;width:40px;padding:0;border:0;cursor:pointer;color:var(--ink-soft);
  }
  .wo-tabs-arrow[hidden]{display:none;}
  .wo-tabs-arrow .icon{width:20px;height:20px;stroke-width:2.2;}
  .wo-tabs-arrow.left{left:0;justify-content:flex-start;padding-left:2px;background:linear-gradient(90deg,var(--paper) 55%,rgba(255,255,255,0));}
  .wo-tabs-arrow.right{right:0;justify-content:flex-end;padding-right:2px;background:linear-gradient(270deg,var(--paper) 55%,rgba(255,255,255,0));}
  :root[data-theme="dark"] .wo-tabs-arrow.left{background:linear-gradient(90deg,var(--paper) 55%,rgba(0,0,0,0));}
  :root[data-theme="dark"] .wo-tabs-arrow.right{background:linear-gradient(270deg,var(--paper) 55%,rgba(0,0,0,0));}
  .wo-tabs{display:flex;flex:0 0 100%;gap:6px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .wo-tabs::-webkit-scrollbar{display:none;}
  .wo-tab-label::before{content:attr(data-label);}
  .wo-tab{
    flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border:0;border-radius:12px;
    background:var(--surface-sunken);color:var(--ink-soft);font:inherit;font-size:12.5px;white-space:nowrap;cursor:pointer;
  }
  .wo-tab[hidden]{display:none;}
  .wo-tab-count{min-width:18px;padding:1px 5px;border-radius:999px;background:var(--surface);font-size:11px;font-weight:600;text-align:center;}
  .wo-tab[aria-selected="true"]{background:linear-gradient(135deg,#ff5c85,#e8325f);color:#fff;font-weight:600;}
  .wo-tab[aria-selected="true"] .wo-tab-count{background:rgba(255,255,255,.25);color:#fff;}

  /* cards */
  .board.m-list:not(.detail-open) .order-list{padding:10px 14px 16px;display:flex;flex-direction:column;gap:10px;}
  .board.m-list:not(.detail-open) .order-list-thumb{display:none;}
  .board.m-list:not(.detail-open) .order-row{
    display:grid;grid-template-columns:44px minmax(0,1fr) auto 14px;align-items:center;gap:8px;flex:none;
    padding:12px 10px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-card);
  }
  .board.m-list:not(.detail-open) .order-row.selected{background:var(--surface);border-color:var(--line);}
  .board.m-list:not(.detail-open) .order-row.selected .order-ot{color:inherit;}
  .board.m-list:not(.detail-open) .order-row .status-dot,.board.m-list:not(.detail-open) .order-row .order-date{display:none;}
  .board.m-list:not(.detail-open) .order-main{min-width:0;display:flex;flex-direction:column;gap:2px;}
  .board.m-list:not(.detail-open) .order-ot{font-size:14.5px;white-space:nowrap;}
  .board.m-list:not(.detail-open) .order-client{font-size:13.5px;color:var(--ink);max-width:none;margin:0;}
  .board.m-list:not(.detail-open) .order-row-side{gap:8px;}
  .wo-avatar{
    display:flex;width:44px;height:44px;border-radius:50%;align-items:center;justify-content:center;font-size:14px;font-weight:700;
    background:hsl(var(--h) 75% 93%);color:hsl(var(--h) 55% 34%);
  }
  :root[data-theme="dark"] .wo-avatar{background:hsl(var(--h) 35% 22%);color:hsl(var(--h) 85% 76%);}
  .wo-date{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:12.5px;color:var(--ink-faint);}
  .wo-date span{white-space:nowrap;}
  .wo-date .icon{width:15px;height:15px;}
  .wo-date.late{color:#e0294d;}
  .wo-pills{display:flex;gap:4px;flex-wrap:nowrap;justify-content:flex-end;}
  .wo-pill{padding:3px 7px;border-radius:8px;font-size:11px;font-weight:500;white-space:nowrap;background:#e4eefc;color:#2a63b8;}
  .wo-pill.good{background:#dcf5e8;color:#16804f;}
  .wo-pill.warning{background:#fdf0d4;color:#9a6700;}
  .wo-pill.critical{background:#fde2e6;color:#c0233f;}
  :root[data-theme="dark"] .wo-pill{background:#14294a;color:#8db8f2;}
  :root[data-theme="dark"] .wo-pill.good{background:#123426;color:#5fd6a0;}
  :root[data-theme="dark"] .wo-pill.warning{background:#3a2a0c;color:#f2c25b;}
  :root[data-theme="dark"] .wo-pill.critical{background:#3f1520;color:#f58a9d;}
  .wo-person{display:flex;align-items:center;gap:7px;min-width:0;}
  .wo-person-av{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--surface-sunken);color:var(--ink-soft);}
  .wo-person-name{font-size:12.5px;color:var(--ink-soft);max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wo-chevron{display:flex;color:var(--ink-faint);}
  .wo-chevron .icon{width:18px;height:18px;}
  /* .wo-* parts that start hidden above must show on phones */
  .wo-tabs,.wo-pills,.wo-person{display:flex;}
}

/* ===== Desktop: the same cards as the phone, in the order rail and the item status badges ===== */
@media (min-width:641px){
  .order-list{padding:10px;display:flex;flex-direction:column;gap:10px;}
  .order-list > .order-row,.order-list > .order-row:first-child{
    display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;flex:none;
    padding:10px 12px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-card);
  }
  .order-list > .order-row:hover{background:var(--surface-sunken);}
  .order-list > .order-row.selected,.order-list > .order-row.selected:first-child,
  .order-list > .order-row.selected:focus,.order-list > .order-row.selected:focus-visible{background:var(--accent-wash);border:1px solid var(--accent);border-radius:16px;padding-left:10px;}
  .order-list > .order-row:focus-visible:not(.selected){border-radius:16px;}
  .order-list > .order-row.selected .order-ot{color:var(--accent-strong);}
  .order-list > .order-row .status-dot,.order-list > .order-row .order-date,.order-list > .order-row .order-row-side > .v{display:none;}
  .order-list > .order-row .order-main{min-width:0;display:flex;flex-direction:column;gap:2px;}
  .order-list > .order-row .order-ot{font-size:14.5px;white-space:nowrap;}
  .order-list > .order-row .order-client{font-size:13.5px;color:var(--ink);max-width:none;margin:0;}
  .order-list > .order-row .order-main,.order-list > .order-row .order-row-side{display:contents;}
  .order-list > .order-row{grid-template-rows:auto auto auto;row-gap:2px;}
  .order-list > .order-row .wo-avatar{display:none;}
  .order-list > .order-row .order-ot{grid-column:1;grid-row:1;align-self:center;}
  .order-list > .order-row .order-client{grid-column:1;grid-row:2;align-self:center;}
  .order-list > .order-row .wo-date{grid-column:1;grid-row:3;align-self:center;margin:0;}
  .order-list > .order-row .wo-pills{grid-column:2;grid-row:1;align-self:center;justify-self:end;}
  .order-list > .order-row .wo-chevron{display:none;}
  .board.wo-board .order-list > .order-row .wo-pills .wo-pill:first-child:not(:only-child){display:none;}
  .order-list > .order-row .wo-person{grid-column:2;grid-row:3;align-self:center;justify-self:end;}
  .order-list > .order-row .order-client{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .order-list > .order-row .wo-person-name{max-width:84px;}
  .order-list > .order-row .order-ot,.order-list > .order-row .order-client{display:flex;align-items:center;gap:5px;min-width:0;}
  .order-list > .order-row .wo-lead{display:inline-flex;flex:none;color:var(--ink-faint);}
  .order-list > .order-row .wo-lead .icon{width:15px;height:15px;stroke-width:1.5;}
  .order-list > .order-row .wo-date .icon{stroke-width:1.5;}
  .order-list > .order-row.selected .wo-person-av{background:color-mix(in srgb,var(--accent) 24%,var(--surface));color:var(--accent-strong);}
  .order-list > .order-row.selected .wo-lead,.order-list > .order-row.selected .wo-date:not(.late) .icon{color:var(--accent);}
  .order-list > .order-row .order-client .wo-lead-text{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .wo-date{display:flex;align-items:center;gap:5px;margin-top:2px;font-size:12.5px;color:var(--ink-faint);}
  .wo-date span{white-space:nowrap;}
  .wo-date .icon{width:15px;height:15px;}
  .wo-date.late{color:#e0294d;}
  .wo-pills{display:flex;gap:4px;flex-wrap:nowrap;}
  .wo-pill{padding:2px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;background:#e4eefc;color:#2a63b8;border:1.5px solid #3b82e0;}
  .wo-pill.good{background:#dcf5e8;color:#16804f;border-color:#1fa064;}
  .wo-pill.warning{background:#fdf0d4;color:#9a6700;border-color:#e59a00;}
  .wo-pill.critical{background:#fde2e6;color:#c0233f;border-color:#d92d4b;}
  :root[data-theme="dark"] .wo-pill{background:#14294a;color:#8db8f2;border-color:#4a90e2;}
  :root[data-theme="dark"] .wo-pill.good{background:#123426;color:#5fd6a0;border-color:#2fb57d;}
  :root[data-theme="dark"] .wo-pill.warning{background:#3a2a0c;color:#f2c25b;border-color:#e0a21a;}
  :root[data-theme="dark"] .wo-pill.critical{background:#3f1520;color:#f58a9d;border-color:#e5546e;}
  .wo-person{display:flex;align-items:center;gap:7px;min-width:0;}
  .wo-person-av{flex:none;width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;background:var(--surface-sunken);color:var(--ink-soft);}
  .wo-person-name{font-size:12.5px;color:var(--ink-soft);max-width:96px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .wo-person-short{display:none;font-size:12.5px;color:var(--ink-soft);white-space:nowrap;}
  .wo-person.is-long .wo-person-name{display:none;}
  .wo-person.is-long .wo-person-short{display:inline;}
  .wo-chevron{display:flex;color:var(--ink-faint);}
  .wo-chevron .icon{width:18px;height:18px;}
  /* item status badge (also used by the read-only items table): none / complete / delivered / canceled */
  .items-table .col-status{text-align:center;width:70px;}
  .wo-m-check{display:inline-flex;align-items:center;justify-content:center;flex:none;width:38px;height:28px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);}
  .wo-m-check.is-done{background:#e8325f;border-color:#e8325f;}
  .wo-m-check.is-done.is-delivered{background:#16a765;border-color:#16a765;}
  .wo-m-check.is-canceled{background:#111;border-color:#111;}
  .wo-m-check .icon{width:18px;height:18px;stroke:#fff;stroke-width:3;}
  .wo-m-check.is-delivered .icon{width:26px;height:22px;stroke-width:2.6;}
}

/* ===== Phones: no hamburger (the menu items moved to the avatar menu and the More menu) ===== */
.um-phone-only{display:none;}
.user-menu button[hidden]{display:none;}
@media (max-width:640px){
  .topbar .nav-toggle{display:none !important;}
  .user-menu button.um-phone-only{display:flex;}
  .user-menu button.um-phone-only[hidden]{display:none;}
  .user-menu-sep.um-phone-only{display:block;}
  /* More (bottom bar) */
  .more-menu{
    position:fixed;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));z-index:70;min-width:230px;padding:6px;
    background:var(--surface);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-pop);
  }
  .more-menu[hidden],.more-menu [hidden]{display:none !important;}
  .more-item{
    display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:0;border-radius:10px;background:none;color:var(--ink);
    font:inherit;font-size:15px;text-align:left;text-decoration:none;cursor:pointer;
  }
  .more-item:active,.more-sub a:active{background:var(--surface-sunken);}
  .more-icon,.more-chevron{display:flex;flex:none;color:var(--ink-faint);}
  .more-icon .icon{width:20px;height:20px;}
  .more-chevron .icon{width:16px;height:16px;}
  .more-group-toggle[aria-expanded="true"] .more-chevron{transform:rotate(180deg);}
  .more-sub{display:flex;flex-direction:column;padding:2px 0 4px 44px;}
  .more-sub a{padding:10px 12px;border-radius:10px;color:var(--ink);font-size:14.5px;text-decoration:none;}
}

/* ===== Work order detail on phones (pink theme). Desktop keeps its own detail: .wo-m is phone-only. ===== */
.wo-m{display:none;}
@media (max-width:640px){
  /* the page is the pink header band + a sheet; the old header, back button and cards stay in the DOM (scripts use them) but are hidden */
  .board.wo-board.detail-open .order-detail > .mobile-back-btn,
  .board.wo-board.detail-open .order-detail > .ro-head,
  .board.wo-board.detail-open .order-detail > .bento{display:none;}
  body:has(.board.wo-board.detail-open) .topbar{display:none;}
  .canvas:has(.board.wo-board.detail-open){padding:0;}
  .board.wo-board.detail-open .order-detail{gap:0;}
  .wo-m{display:block;}

  .wo-m-top{background:linear-gradient(180deg,#5b0e2b 0%,#9e1342 55%,#d11c4b 100%);color:#fff;padding:12px 16px 36px;}
  .wo-m-back{display:inline-flex;align-items:center;gap:6px;padding:6px 4px 6px 0;border:0;background:none;color:#fff;font:inherit;font-size:16px;font-weight:600;cursor:pointer;}
  .wo-m-back .icon{width:22px;height:22px;stroke:#fff;stroke-width:2;}
  .wo-m-hero{display:flex;align-items:center;gap:14px;margin-top:12px;margin-bottom:6px;}
  .wo-m-avatar{width:64px;height:64px;font-size:21px;flex:none;}
  .wo-m-id{min-width:0;display:flex;flex-direction:column;gap:2px;}
  .wo-m-folio{font-size:26px;font-weight:700;line-height:1.1;letter-spacing:.3px;}
  .wo-m-client{font-family:var(--display);font-size:17px;font-weight:600;line-height:1.25;opacity:.92;overflow-wrap:anywhere;}
  .wo-m-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;}
  .wo-m-meta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;}
  .wo-m-meta .wo-date{margin:0;color:rgba(255,255,255,.9);font-size:14px;}
  .wo-m-meta .wo-date.late{color:#ff9db1;}
  .wo-m-meta .wo-date .icon{stroke:currentColor;}
  .wo-m-meta .wo-person-name{color:#fff;font-size:14px;max-width:150px;}
  .wo-m-meta .wo-person-av{background:rgba(255,255,255,.9);color:#5b0e2b;width:28px;height:28px;font-size:11px;}

  .wo-m-sheet{margin-top:-20px;position:relative;border-radius:24px 24px 0 0;background:var(--paper);padding:14px 14px calc(100px + env(safe-area-inset-bottom));min-height:60vh;}
  .wo-m-tabs{display:flex;gap:6px;margin-bottom:14px;}
  .wo-m-tabs .wo-tab{flex:1 1 0;}
  .wo-m-panel[hidden]{display:none;}
  .wo-m-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;margin-bottom:12px;box-shadow:var(--shadow-card);}
  .wo-m-card[hidden]{display:none;}
  .wo-m-card h3{margin:0 0 6px;font-size:17px;font-weight:700;}
  .wo-m-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;min-height:44px;border-bottom:1px solid var(--line);}
  .wo-m-row:last-child{border-bottom:0;}
  .wo-m-row[hidden]{display:none;}
  .wo-m-row .k{color:var(--ink-faint);font-size:13.5px;flex:none;}
  .wo-m-row .v{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px;font-weight:500;font-size:14.5px;line-height:1.3;text-align:right;min-width:0;overflow-wrap:anywhere;}
  .wo-m-progress-card{display:flex;align-items:center;gap:10px;padding:10px 14px;}
  .wo-m-progress-card .wo-m-sub{margin:0;font-size:13.5px;white-space:nowrap;}
  .wo-m-count{font-size:15px;font-weight:600;flex:none;}
  .wo-m-track{flex:1;min-width:30px;height:10px;border-radius:999px;background:var(--surface-sunken);overflow:hidden;}
  .wo-m-track i{display:block;height:100%;border-radius:999px;background:#16a765;width:0;transition:width .25s ease;}
  .wo-m-pct{font-weight:600;font-size:14px;flex:none;min-width:36px;text-align:right;}
  .wo-m-items{background:var(--surface);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow-card);overflow:hidden;}
  .wo-m-items .note-text{padding:14px;margin:0;}
  .wo-m-item{display:flex;align-items:center;gap:10px;padding:12px 12px;border-bottom:1px solid var(--line);cursor:pointer;}
  .wo-m-item:last-child{border-bottom:0;}
  /* one checkmark = completed, two = delivered */
  .wo-m-check{display:flex;align-items:center;justify-content:center;flex:none;width:38px;height:28px;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);}
  .wo-m-check.is-done{background:#e8325f;border-color:#e8325f;}
  .wo-m-check.is-done.is-delivered{background:#16a765;border-color:#16a765;}
  .wo-m-check.is-canceled{background:#111;border-color:#111;}
  .wo-m-check .icon{width:18px;height:18px;stroke:#fff;stroke-width:3;}
  .wo-m-check.is-delivered .icon{width:26px;height:22px;stroke-width:2.6;}
  .wo-m-item-n{flex:none;color:var(--ink-faint);font-size:13px;min-width:22px;}
  .wo-m-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .wo-m-item-desc{font-size:15px;font-weight:500;overflow-wrap:anywhere;}
  .wo-m-item-sub{font-size:12.5px;color:var(--ink-faint);overflow-wrap:anywhere;}
  .wo-m-item.is-cancelled .wo-m-item-desc{text-decoration:line-through;opacity:.6;}
  .wo-m-item-photo{flex:none;width:40px;height:40px;border-radius:8px;object-fit:cover;border:1px solid var(--line);}

}

/* ===== Work order detail on phones: header actions, edit modes, item popup ===== */
.id-flags,.id-confirm{display:none;}
@media (max-width:640px){
  .wo-m-bar{display:flex;align-items:center;justify-content:space-between;}
  .wo-m-pdfbtn{
    width:42px;height:42px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:12px;cursor:pointer;
    background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25);
  }
  .wo-m-pdfbtn .icon{width:26px;height:26px;}
  .wo-m-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;}
  .wo-m-card-head h3{margin:0;}
  .wo-m-editbtn{
    width:38px;height:38px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;cursor:pointer;
    border:1px solid var(--line);background:var(--surface-sunken);color:var(--ink-soft);
  }
  .wo-m-editbtn[hidden]{display:none;}
  .wo-m-editbtn .icon{width:18px;height:18px;}
  .wo-m-field{display:flex;flex-direction:column;gap:4px;padding:8px 0;}
  .wo-m-field[hidden]{display:none;}
  .wo-m-field .k{font-size:13px;color:var(--ink-faint);}
  .wo-m-field select,.wo-m-field input{
    width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;
  }
  .wo-m-field select{appearance:none;-webkit-appearance:none;padding-right:38px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:18px;}
  .wo-m-field select:focus,.wo-m-field input:focus{border-color:#e8325f;outline:0;}
  .wo-m-error{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fde2e6;color:#c0233f;font-size:14px;}
  .wo-m-error[hidden]{display:none;}
  .wo-m-edit-actions{display:flex;gap:10px;margin-top:14px;}
  .wo-m-edit-actions .btn{flex:1;height:46px;justify-content:center;border-radius:12px;font-size:15px;font-weight:600;}
  .wo-m-edit-actions .btn.ghost,.id-confirm .btn.ghost{background:var(--surface-sunken);border:0;color:var(--ink-soft);}
  .wo-m-edit-actions .btn.primary{background:linear-gradient(135deg,#ff5c85,#e8325f);border:0;color:#fff;}
  #woMNotesCard .richtext-editor{min-height:160px;}
  /* item popup: status checkboxes and the save-or-not prompt */
  .item-editor{position:relative;}
  .id-flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:14px;}
  .id-flag{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px 4px;border:1px solid var(--line);border-radius:12px;background:var(--surface-sunken);font-size:13.5px;text-align:center;cursor:pointer;}
  .id-flag input{width:20px;height:20px;margin:0;accent-color:#e8325f;}
  .id-flag:has(input:disabled){opacity:.5;cursor:default;}
  .id-confirm{
    position:absolute;left:14px;right:14px;bottom:14px;z-index:5;padding:16px;border:1px solid var(--line);border-radius:14px;
    background:var(--surface);box-shadow:var(--shadow-pop);
  }
  .id-confirm:not([hidden]){display:block;}
  .id-confirm p{margin:0 0 12px;font-size:16px;font-weight:600;text-align:center;}
  .id-confirm .item-editor-actions{display:flex;gap:10px;}
  .id-confirm .btn{flex:1;justify-content:center;}
}

@media (max-width:640px){
  .wo-pill-lg{padding:5px 14px;border-radius:999px;font-size:13.5px;font-weight:700;}
  .wo-pill.amber{background:#FF7106;color:#fff;}
  .wo-pill.teal{background:#0d9488;color:#fff;}
  .wo-pill.teal a{color:#fff;text-decoration:none;}
  .wo-pill-lg.good,.wo-pill-lg.critical,.wo-pill-lg.warning,.wo-pill-lg.info,.wo-pill-lg.neutral{color:#fff;}
  .wo-pill-lg.good{background:#16a765;}
  .wo-pill-lg.critical{background:#e0294d;}
  .wo-pill-lg.warning{background:#FF7106;}
  .wo-pill-lg.info,.wo-pill-lg.neutral{background:#2f7be5;}
}

@media (max-width:640px){
  /* item popup (phones): compact rows, status boxes right under the title */
  #itemDetails .item-details{gap:0;}
  #itemDetails .item-detail-row{padding:7px 0;}
  #itemDetails .item-detail-row dt{font-size:11px;}
  #itemDetails .item-detail-row dd{font-size:15px;}
  #itemDetails .id-flags{margin:2px 0 8px;}
  #itemDetails .id-flag{padding:8px 4px;gap:4px;font-size:13px;}
  #itemDetails .id-flag input{width:18px;height:18px;}
  .id-flag input{accent-color:#e8325f;}
}

/* ===== New work order on phones (work-order-new-m.js) ===== */
#woNewM{display:none;}
@media (max-width:640px){
  #woNewM:not([hidden]){display:block;}
  .canvas:has(#woNewM:not([hidden])){padding:0;}
  .canvas:has(#woNewM:not([hidden])) > :not(#woNewM){display:none !important;}
  .shell:has(#woNewM:not([hidden])) .context-rail{display:none !important;}
  body:has(#woNewM:not([hidden])) .topbar{display:none;}
  .wo-n-sheet{padding-bottom:calc(150px + env(safe-area-inset-bottom));}
  .wo-tab.has-error::after{content:"";width:8px;height:8px;margin-left:6px;border-radius:50%;background:#e0294d;}
  .wo-tab[aria-selected="true"].has-error::after{background:#fff;}
  .wo-m-field.has-error select,.wo-m-field.has-error input{border-color:#e0294d;}
  .wo-m-field select:disabled,.wo-m-field input:disabled{opacity:.6;background:var(--surface-sunken);}
  .wo-n-note{font-size:14px;color:var(--ink-soft);}
  .wo-n-link,.wo-n-add{
    display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px dashed var(--line);border-radius:12px;background:none;
    color:#e8325f;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;
  }
  .wo-n-link{margin-top:8px;}
  .wo-n-add{width:100%;justify-content:center;margin-bottom:12px;padding:12px;background:var(--surface);}
  .wo-n-add:disabled{opacity:.5;}
  .wo-n-link .icon,.wo-n-add .icon{width:18px;height:18px;stroke:currentColor;}
  .wo-n-remove{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:50%;background:var(--surface-sunken);color:var(--ink-soft);cursor:pointer;}
  .wo-n-remove .icon{width:16px;height:16px;}
  .wo-n-actions{
    position:fixed;left:0;right:0;bottom:calc(76px + env(safe-area-inset-bottom));z-index:45;display:flex;gap:10px;padding:10px 14px;
    background:var(--paper);border-top:1px solid var(--line);
  }
  .wo-n-actions .btn{height:46px;border-radius:14px;justify-content:center;font-size:15px;font-weight:600;}
  .wo-n-actions .btn.ghost{flex:0 0 32%;background:var(--surface-sunken);border:0;color:var(--ink-soft);}
  .wo-n-actions .btn.primary{flex:1;background:linear-gradient(135deg,#ff5c85,#e8325f);border:0;color:#fff;}
  .wo-n-confirm{position:fixed;inset:0;z-index:80;display:flex;align-items:flex-end;padding:14px;background:rgba(0,0,0,.45);}
  .wo-n-confirm[hidden]{display:none;}
  .wo-n-confirm-card{width:100%;padding:18px 16px 16px;border-radius:18px;background:var(--surface);box-shadow:var(--shadow-pop);margin-bottom:calc(70px + env(safe-area-inset-bottom));}
  .wo-n-confirm-card p{margin:0 0 14px;text-align:center;font-size:17px;font-weight:600;}
  .wo-n-confirm-actions{display:flex;gap:10px;}
  .wo-n-confirm-actions .btn{flex:1;height:46px;justify-content:center;border-radius:12px;font-size:15px;font-weight:600;}
  .wo-n-confirm-actions .btn.ghost{background:var(--surface-sunken);border:0;color:var(--ink-soft);}
  .wo-n-confirm-actions .btn.primary{background:linear-gradient(135deg,#ff5c85,#e8325f);border:0;color:#fff;}
}

@media (max-width:640px){
  .rt-photo-row{display:flex;gap:8px;margin-top:10px;}
  .rt-photo-row .btn{flex:1;justify-content:center;gap:6px;background:var(--surface-sunken);border:0;color:var(--ink-soft);}
  .rt-photo-row .btn:disabled{opacity:.5;}
  .rt-photo-row .icon{width:18px;height:18px;}
}

/* ===== Quotes list on phones: the Work Orders list in the green Quotes theme ===== */
@media (max-width:640px){
  body:has(.board.q-board:not(.detail-open)){
    background:
      linear-gradient(180deg,#0a3d2e 0,#0a3d2e 56px,rgba(10,61,46,0) 130px) top/100% 196px no-repeat,
      linear-gradient(180deg,#0a3d2e 0%,#0e6b50 55%,#14a37a 100%) top/100% 196px no-repeat,
      var(--paper);
  }
  .canvas:has(.board.q-board:not(.detail-open)) .wo-fab{background:linear-gradient(135deg,#2fd3a0,#0f9d72);box-shadow:0 8px 18px rgba(15,157,114,.45);}
  .board.q-board:not(.detail-open) .wo-tab[aria-selected="true"]{background:linear-gradient(135deg,#2fd3a0,#0f9d72);}
  .board.q-board:not(.detail-open) #btnRefreshQuotes{display:none;}
  /* quote card: three rows. folio | expiry pill, client | total, date | creator */
  .board.q-board:not(.detail-open) .order-row{
    grid-template-columns:44px minmax(0,1fr) auto 14px;grid-template-rows:auto auto auto;align-items:center;column-gap:10px;row-gap:4px;
  }
  .board.q-board:not(.detail-open) .order-main,.board.q-board:not(.detail-open) .order-row-side{display:contents;}
  .board.q-board:not(.detail-open) .order-row .wo-avatar{grid-column:1;grid-row:1 / 4;align-self:center;}
  .board.q-board:not(.detail-open) .order-row .order-ot{grid-column:2;grid-row:1;align-self:center;}
  .board.q-board:not(.detail-open) .order-row .wo-pills{grid-column:3;grid-row:1;justify-self:end;align-self:center;}
  .board.q-board:not(.detail-open) .order-row .order-client{grid-column:2;grid-row:2;align-self:center;}
  .board.q-board:not(.detail-open) .order-row .v{
    grid-column:3;grid-row:2;justify-self:end;align-self:center;font-family:var(--body);font-size:13.5px;font-weight:600;color:var(--ink);white-space:nowrap;
  }
  .board.q-board:not(.detail-open) .order-row .wo-date{grid-column:2;grid-row:3;margin:0;align-self:center;}
  .board.q-board:not(.detail-open) .order-row .wo-person{grid-column:3;grid-row:3;justify-self:end;align-self:center;}
  .board.q-board:not(.detail-open) .order-row .wo-chevron{grid-column:4;grid-row:1 / 4;align-self:center;}
}

/* bottom bar: Quotes lights up green, Work Orders pink (Home stays blue) */
@media (max-width:640px){
  .tabbar a.active[href$="quotes.html"],.tabbar a.active[href$="quote-form.html"]{color:#16b583;}
  .tabbar a.active[href$="index.html"],.tabbar a.active[href$="work-order-form.html"]{color:#f0396a;}
}

/* ===== Quote detail on phones (green theme): reuses the work order detail pieces (.wo-m*) ===== */
@media (max-width:640px){
  .board.q-board.detail-open .order-detail > .mobile-back-btn,
  .board.q-board.detail-open .order-detail > .order-header,
  .board.q-board.detail-open .order-detail > .bento{display:none;}
  body:has(.board.q-board.detail-open) .topbar{display:none;}
  .canvas:has(.board.q-board.detail-open){padding:0;}
  .board.q-board.detail-open .order-detail{gap:0;}
  .canvas:has(.board.q-board.detail-open) .wo-head{display:none;}
  .q-m .wo-m-top{background:linear-gradient(180deg,#0a3d2e 0%,#0e6b50 55%,#14a37a 100%);}
  .q-m .wo-m-bar-actions{display:flex;gap:8px;}
  .q-m .wo-tab[aria-selected="true"]{background:linear-gradient(135deg,#2fd3a0,#0f9d72);}
  .q-m .wo-m-edit-actions .btn.primary{background:linear-gradient(135deg,#2fd3a0,#0f9d72);}
  .q-m .wo-m-field select:focus,.q-m .wo-m-field input:focus{border-color:#0f9d72;}
  .q-m .wo-m-progress-card{justify-content:space-between;}
  .q-m .wo-m-total-big{font-size:18px;font-weight:700;margin-left:auto;white-space:nowrap;}
  .q-m .wo-m-item-total{flex:none;font-weight:600;font-size:14px;white-space:nowrap;}
  .wo-q-convert{
    width:100%;display:flex;align-items:center;justify-content:center;gap:8px;height:46px;margin-bottom:12px;border:0;border-radius:14px;
    background:linear-gradient(135deg,#ff5c85,#e8325f);color:#fff;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  }
  .wo-q-convert .icon{width:20px;height:20px;stroke:#fff;}
  .wo-m-field-duo{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;align-items:end;}
  .wo-m-check-row{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:15px;}
  .wo-m-check-row input{width:20px;height:20px;margin:0;accent-color:#0f9d72;}
  .q-m .wo-m-card:not(.wo-m-progress-card) > .wo-m-sub{margin:-2px 0 8px;}
}

/* ===== New quote on phones (quote-new-m.js): same pieces as the new work order, in green ===== */
#quoteNewM{display:none;}
@media (max-width:640px){
  #quoteNewM:not([hidden]){display:block;}
  .canvas:has(#quoteNewM:not([hidden])){padding:0;}
  .canvas:has(#quoteNewM:not([hidden])) > :not(#quoteNewM){display:none !important;}
  .shell:has(#quoteNewM:not([hidden])) .context-rail{display:none !important;}
  body:has(#quoteNewM:not([hidden])) .topbar{display:none;}
  .q-m .wo-n-actions .btn.primary,.q-m .wo-n-confirm-actions .btn.primary{background:linear-gradient(135deg,#2fd3a0,#0f9d72);}
  .q-m .wo-n-link,.q-m .wo-n-add{color:#0f9d72;}
  .wo-m-items{margin-bottom:12px;}
}

/* ===== Clients on phones (blue theme): list of cards, detail by parts, new client ===== */
.c-board,.c-fab{display:none;}
@media (max-width:640px){
  .c-board{display:flex;}
  .canvas:has(.c-board) > .settings-head,.canvas:has(.c-board) > .error-banner,.canvas:has(.c-board) > .card{display:none;}
  .canvas:has(.c-board:not(.detail-open)){padding:0;overflow:hidden;}
  body:has(.board.c-board:not(.detail-open)){
    background:
      linear-gradient(180deg,#082a63 0,#082a63 56px,rgba(8,42,99,0) 130px) top/100% 196px no-repeat,
      linear-gradient(180deg,#082a63 0%,#0c479e 55%,#1c6fe0 100%) top/100% 196px no-repeat,
      var(--paper);
  }
  .canvas:has(.c-board:not(.detail-open)) .wo-fab{display:flex;background:linear-gradient(135deg,#5aa8ff,#1c6fe0);box-shadow:0 8px 18px rgba(28,111,224,.45);}
  .canvas:has(.c-board:not(.detail-open)) .wo-fab[hidden]{display:none;}
  .canvas:has(.c-board:not(.detail-open)) .wo-head{display:block;}
  .canvas:has(.c-board.detail-open) .wo-head{display:none;}
  body:has(.board.c-board.detail-open) .topbar{display:none;}
  .canvas:has(.c-board.detail-open){padding:0;}
  .board.c-board.detail-open .order-detail{gap:0;}
  /* the shared list styling (m-list) applies; the c-board pieces only differ in color and content */
  .board.c-board:not(.detail-open) .rail-toolzone{padding-top:38px;}
  .board.c-board:not(.detail-open) .order-ot.c-name{font-family:var(--body);font-size:15.5px;font-weight:700;white-space:normal;}
  .board.c-board:not(.detail-open) .order-row .v{font-size:12.5px;color:var(--ink-faint);white-space:nowrap;}
  .board.c-board:not(.detail-open) .order-row .order-date,.board.c-board:not(.detail-open) .order-row .status-dot{display:none;}
  .c-m .wo-m-top{background:linear-gradient(180deg,#082a63 0%,#0c479e 55%,#1c6fe0 100%);}
  .c-m .c-title{font-family:var(--display);font-size:26px;font-weight:800;line-height:1.15;overflow-wrap:anywhere;}
  .c-m .wo-m-meta .wo-date{color:rgba(255,255,255,.9);}
  .c-m .wo-m-bar-actions{display:flex;gap:8px;}
  .c-m .wo-m-bar-actions a{text-decoration:none;}
  .c-m .wo-m-edit-actions .btn.primary,.c-m.wo-n .wo-n-actions .btn.primary,.c-m .wo-n-confirm-actions .btn.primary{background:linear-gradient(135deg,#5aa8ff,#1c6fe0);}
  .c-m .wo-m-field select:focus,.c-m .wo-m-field input:focus{border-color:#1c6fe0;}
}

/* ===== Control Panel on phones (blue theme): section list, then each section on a sheet ===== */
.cp-head,.cp-home{display:none;}
@media (max-width:640px){
  .settings-canvas{padding:0;overflow-y:auto;}
  /* Control Panel contains the Clients and Users lists (.board.m-list.c-board); the full-height list rules above
     (.canvas:has(...){overflow:hidden}) are for the Work Orders, Quotes and Clients pages and must not stop the Control
     Panel page from scrolling. Same specificity, later in the file. */
  .canvas.settings-canvas:has(.c-board),.canvas.settings-canvas:has(.board.m-list){overflow-y:auto;}
  .settings-canvas > .editor-head{display:none;}
  body:has(.settings-canvas){
    background:
      linear-gradient(180deg,#082a63 0,#082a63 56px,rgba(8,42,99,0) 130px) top/100% 196px no-repeat,
      linear-gradient(180deg,#082a63 0%,#0c479e 55%,#1c6fe0 100%) top/100% 196px no-repeat,
      var(--paper);
  }
  body:has(.settings-canvas) .topbar{background:transparent;border-bottom:0;box-shadow:none;}
  body:has(.settings-canvas) .brand{display:none;}
  body:has(.settings-canvas) .topbar .icon-btn{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);}
  body:has(.settings-canvas) .topbar .icon-btn .icon{stroke:#fff;}
  body:has(.settings-canvas) .topbar-right{display:flex;align-items:center;gap:12px;}
  body:has(.settings-canvas) .topbar-title{
    display:block;flex:1;min-width:0;color:#fff;font-family:var(--display);font-size:24px;font-weight:800;line-height:1.1;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .cp-head{display:block;position:relative;flex:none;height:34px;z-index:5;}
  .cp-fab{display:flex;}
  .cp-fab[hidden]{display:none;}
  body.cp-landing .cp-head{height:26px;}
  .cp-home:not([hidden]){
    display:flex;flex-direction:column;gap:10px;background:var(--paper);border-radius:24px 24px 0 0;padding:22px 14px 120px;min-height:70vh;
    box-shadow:0 -6px 22px rgba(0,0,0,.22);
  }
  .cp-item{
    display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);
    box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none;
  }
  .cp-item[hidden]{display:none;}
  .cp-item-icon{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5aa8ff,#1c6fe0);}
  .cp-item-icon .icon{width:24px;height:24px;stroke:#fff;}
  .cp-item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  .cp-item-text b{font-size:16px;font-weight:600;}
  .cp-item-text i{font-style:normal;font-size:13px;color:var(--ink-faint);}
  .cp-item-chev .icon{width:18px;height:18px;color:var(--ink-faint);}

  .cp-sheet{
    display:block;background:var(--paper);border-radius:24px 24px 0 0;padding:44px 14px calc(110px + env(safe-area-inset-bottom));
    min-height:70vh;box-shadow:0 -6px 22px rgba(0,0,0,.22);
  }
  body.cp-landing .cp-sheet{display:none;}
  body:not([data-cp-section="usuarios"]) .cp-sheet{padding-top:22px;}
  .cp-sheet > .card,.cp-sheet .effective-card{
    margin:0 0 12px;padding:14px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-card);overflow:visible;
  }
  .cp-sheet .card > header{margin-bottom:10px;}
  .cp-sheet .card > header h2{margin:0 0 4px;font-size:18px;}
  .cp-sheet .card > header p{margin:0;font-size:13px;color:var(--ink-faint);line-height:1.4;}
  .cp-sheet .field input:not([type=checkbox]),.cp-sheet .field select,.cp-sheet .field textarea{
    width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:16px;
  }
  .cp-sheet .field input:focus,.cp-sheet .field select:focus{border-color:#1c6fe0;outline:0;}
  .cp-sheet .field label{font-size:13px;color:var(--ink-faint);}
  .cp-sheet .btn.primary{background:linear-gradient(135deg,#5aa8ff,#1c6fe0);border:0;color:#fff;font-weight:600;}
  .cp-sheet .btn{min-height:44px;border-radius:12px;justify-content:center;}
  .cp-sheet .btn.sm{min-height:44px;font-size:14.5px;}
  .cp-sheet .btn:not(.primary){background:var(--surface-sunken);border:0;color:var(--ink-soft);}
  .cp-sheet .reset-panel-actions{flex-wrap:wrap;margin:10px 0 0;}
  .cp-sheet .reset-panel-actions .btn{flex:1 1 140px;}
  .cp-sheet .role-form{max-width:none;border-radius:14px;background:var(--surface-sunken);border:0;}
  .cp-sheet .role-flags{flex-direction:column;gap:2px;}
  .cp-sheet .role-flags label{min-height:44px;font-size:15px;}
  .cp-sheet input[type=checkbox]{width:20px;height:20px;accent-color:#1c6fe0;}
  .cp-sheet .error-banner{border-radius:12px;margin-bottom:12px;}
  /* users: each row is a card */
  .cp-sheet > .settings-users-card{padding:0;border:0;background:transparent;box-shadow:none;overflow:visible !important;}
  .cp-sheet .settings-table tr[data-row-id]{
    background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:12px 30px 12px 12px;margin-bottom:10px;box-shadow:var(--shadow-card);
  }
  .cp-sheet .settings-table tr[data-row-id].expanded{width:100%;margin:0 0 10px;padding:14px 12px;background:var(--surface);}
  .cp-sheet .settings-table tr[data-row-id]:not(.expanded)::after{right:14px;}
}

@media (max-width:640px){
  .cp-back{display:none;}
  body:has(.settings-canvas) .cp-back:not([hidden]){display:inline-flex;align-items:center;justify-content:center;flex:none;margin-right:2px;text-decoration:none;}
  body:has(.settings-canvas) .cp-back .icon{width:22px;height:22px;}
  body:has(.settings-canvas) .topbar-left{display:flex !important;flex:1;min-width:0;align-items:center;gap:8px;}
}

@media (max-width:640px){
  .cp-fab{background:linear-gradient(135deg,#5aa8ff,#1c6fe0);box-shadow:0 8px 18px rgba(28,111,224,.45);}
}

@media (max-width:640px){
  .cp-sheet [data-token]{flex:0 0 auto;min-height:36px;padding:0 12px;font-size:13px;}
  .cp-sheet .token-row,.cp-sheet .numbering-tokens{display:flex;flex-wrap:wrap;gap:8px;margin:8px 0;}
}

.role-list-m,.role-back-m{display:none;}
@media (max-width:640px){
  [data-cp-section="roles"] .effective-picker,[data-cp-section="roles"] #accessNodeCard > header p{display:none;}
  [data-cp-section="roles"]:not(.cp-role-open) .role-list-m{display:flex;flex-direction:column;gap:10px;margin:2px 0 12px;}
  .cp-role-open .role-back-m{
    display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:6px 10px 6px 4px;border:0;border-radius:10px;background:none;
    color:#1c6fe0;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  }
  .role-back-m .icon{width:20px;height:20px;stroke:#1c6fe0;}
  .cp-role-open .role-toolbar{display:none;}
  [data-cp-section="roles"]:not(.cp-role-open) #accessNodeBody,[data-cp-section="roles"]:not(.cp-role-open) #accessNodeActions{display:none;}
  .role-card{
    display:flex;align-items:center;gap:12px;width:100%;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
    box-shadow:var(--shadow-card);font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  }
  .role-card.is-inactive{opacity:.6;}
  .role-card-icon{flex:none;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#5aa8ff,#1c6fe0);}
  .role-card-icon .icon{width:20px;height:20px;stroke:#fff;}
  .role-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
  .role-card-text b{font-size:15.5px;font-weight:600;}
  .role-card-text i{font-style:normal;font-size:12.5px;color:var(--ink-faint);}
  .role-card-chev .icon{width:18px;height:18px;color:var(--ink-faint);}
  .role-toggle-inactive{padding:10px;border:0;background:none;color:#1c6fe0;font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
  /* the access matrix: one row per node, label above its level picker */
  .access-node-table thead{display:none;}
  .access-node-table,.access-node-table tbody{display:block;width:100%;}
  .access-node-table tr[data-node-key]{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line-soft);}
  .access-node-table td{display:block;padding:0;border:0;}
  .access-node-table td:first-child{flex:1;min-width:0;font-size:14.5px;}
  .access-node-table td:not(:first-child){flex:0 0 130px;}
  .access-node-table select{height:40px;font-size:14px;}
  [data-cp-section="roles"] .cp-sheet .btn.sm{min-height:44px;}
  [data-token]{width:auto !important;}
}

/* dialogs opened from the Control Panel and Clients pages take the blue theme on phones */
@media (max-width:640px){
  body:has(.settings-canvas) .modal-card .btn.primary,body:has(.c-board) .modal-card .btn.primary{background:linear-gradient(135deg,#5aa8ff,#1c6fe0);border:0;color:#fff;}
  body:has(.settings-canvas) .modal-card [role="tab"][aria-selected="true"],body:has(.settings-canvas) .modal-card .modal-tab.active{color:#1c6fe0;border-bottom-color:#1c6fe0;}
}

@media (max-width:640px){
  body:has(.settings-canvas) .user-edit-tabs button.active{color:#1c6fe0;border-bottom-color:#1c6fe0;}
}

/* System settings on phones: a list of its parts, then one part at a time */
.desk-only{display:block;}
.phone-only{display:none;}
@media (max-width:640px){
  .desk-only{display:none;}
  .phone-only{display:block;}
  [data-cp-section="ajustes"][data-cp-sub=""] .cp-sheet{display:none;}
  /* inside a part: the page title already names it, so the card header goes */
  [data-cp-section="ajustes"]:not([data-cp-sub=""]) .cp-sheet > .card > header{display:none;}
  [data-cp-sub="qt"] #currencyCard,[data-cp-sub="qt"] #passwordCard,[data-cp-sub="qt"] #brandingCard,[data-cp-sub="qt"] #termsCard,[data-cp-sub="qt"] .numbering-series[data-doc="WO"],
  [data-cp-sub="wo"] #currencyCard,[data-cp-sub="wo"] #passwordCard,[data-cp-sub="wo"] #brandingCard,[data-cp-sub="wo"] #termsCard,[data-cp-sub="wo"] .numbering-series[data-doc="QT"],
  [data-cp-sub="cur"] #systemCard,[data-cp-sub="cur"] #passwordCard,[data-cp-sub="cur"] #brandingCard,[data-cp-sub="cur"] #termsCard,
  [data-cp-sub="pw"] #systemCard,[data-cp-sub="pw"] #currencyCard,[data-cp-sub="pw"] #brandingCard,[data-cp-sub="pw"] #termsCard,
  [data-cp-sub="tc"] #systemCard,[data-cp-sub="tc"] #currencyCard,[data-cp-sub="tc"] #passwordCard,[data-cp-sub="tc"] #brandingCard,
  [data-cp-sub="br"] #systemCard,[data-cp-sub="br"] #currencyCard,[data-cp-sub="br"] #passwordCard,[data-cp-sub="br"] #termsCard{display:none !important;}
  #termsText{width:100%;min-height:260px;resize:vertical;font:inherit;line-height:1.45;}
  [data-cp-sub="qt"] .numbering-series,[data-cp-sub="wo"] .numbering-series{margin-top:0 !important;}
  [data-cp-sub="qt"] .numbering-series > h3,[data-cp-sub="wo"] .numbering-series > h3{display:none;}
  #brandingCard .branding-logo-row{flex-direction:column;align-items:flex-start;}
}

@media (max-width:640px){
  /* branding keeps its note (the logo is only for PDFs); only the repeated title goes */
  [data-cp-section="ajustes"][data-cp-sub="br"] .cp-sheet > #brandingCard > header{display:block;}
  [data-cp-sub="br"] #brandingCard > header h2{display:none;}
  [data-cp-sub="br"] #brandingCard > header p{font-size:14px;color:var(--ink-soft);margin-bottom:6px;}
}

/* Long (translated) titles in the headers wrap onto two rows instead of being cut off */
@media (max-width:640px){
  /* only on the pages that show a title in the top bar (the bar is shared, so on Home it stays hidden) */
  body:has(.board.m-list:not(.detail-open), .settings-canvas) .topbar-title{
    display:-webkit-box !important;-webkit-box-orient:vertical;-webkit-line-clamp:2;white-space:normal !important;
    overflow:hidden !important;text-overflow:clip !important;line-height:1.05 !important;overflow-wrap:anywhere;
  }
  .wo-m-back span{white-space:normal;text-align:left;line-height:1.1;}
  .wo-m-back{min-width:0;}
  .wo-m-folio,.wo-m-client,.c-m .c-title{overflow-wrap:anywhere;}
}

/* Phones: avatars are solid, colorful circles with white initials (Light mode everywhere; always on Home) */
@media (max-width:640px){
  .avatar.av-0{--avc:#2f7be5;}
  .avatar.av-1{--avc:#0d9488;}
  .avatar.av-2{--avc:#f97316;}
  .avatar.av-3{--avc:#ef4444;}
  .avatar.av-4{--avc:#9333ea;}
  .avatar.av-5{--avc:#4f46e5;}
  .avatar.av-6{--avc:#0891b2;}
  .avatar.av-7{--avc:#16a34a;}
  .avatar.av-8{--avc:#db2777;}
  .avatar.av-9{--avc:#d97706;}
  .avatar.av-10{--avc:#65a30d;}
  .avatar.av-11{--avc:#7c3aed;}
  .avatar.av-12{--avc:#6366f1;}
  :root[data-theme="light"] .avatar[class*="av-"]{background:var(--avc);color:#fff;filter:none;}
  :root[data-theme] body:has(.home) .user-chip .avatar[class*="av-"]{
    background:var(--avc);color:#fff;filter:none;
    border:1px solid color-mix(in srgb, color-mix(in srgb, var(--avc) 60%, #fff) 50%, transparent);
    box-shadow:0 0 8px 1px color-mix(in srgb, var(--avc) 75%, transparent);
  }
}

/* Notifications: the bell and its panel */
.topbar-bell{position:relative;}
.bell-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--danger,#d11c4b);color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;box-sizing:border-box;}
.bell-badge[hidden]{display:none;}
.notif-panel{position:fixed;top:58px;right:16px;width:360px;max-width:calc(100vw - 16px);max-height:70vh;display:flex;flex-direction:column;z-index:70;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-card);overflow:hidden;}
.notif-panel[hidden]{display:none;}
.notif-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);}
.notif-head h2{margin:0;font-size:15px;}
.notif-list{overflow-y:auto;}
.notif-item{display:flex;align-items:flex-start;gap:10px;width:100%;padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;}
.notif-item:hover{background:var(--surface-sunken);}
.notif-dot{flex:none;width:8px;height:8px;margin-top:6px;border-radius:50%;background:transparent;}
.notif-item.is-unread .notif-dot{background:var(--accent-strong);}
.notif-item.is-unread .notif-msg{font-weight:600;}
.notif-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
.notif-msg{font-size:14px;overflow-wrap:anywhere;}
.notif-time{font-size:12px;color:var(--ink-faint);}
.notif-empty{margin:0;padding:22px 14px;text-align:center;color:var(--ink-faint);font-size:14px;}
@media (max-width:640px){
  .notif-panel{top:56px;left:8px;right:8px;width:auto;}
}

/* Control Panel > Workflow */
.wf-block{margin-top:18px;}
.wf-block h3{margin:0 0 6px;font-size:15px;}
.wf-event{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;}
.wf-event h4{margin:0 0 2px;font-size:14px;}
.wf-notify{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:14px;font-weight:600;cursor:pointer;}
.wf-group{margin-top:10px;}
.wf-group-title{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
.wf-people{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;}
.wf-people .chip{display:inline-flex;align-items:center;gap:4px;}
.wf-event select{max-width:100%;margin-top:4px;}
.notif-head-actions{display:flex;align-items:center;gap:14px;}
.notif-push{padding:10px 14px;border-bottom:1px solid var(--line);}
.notif-push[hidden]{display:none;}
.notif-push .note-text{margin:0;font-size:13px;}
.notif-push .btn{width:100%;}
.notif-head-actions .link-btn{white-space:nowrap;}
.notif-head{flex-wrap:wrap;}
.notif-head-actions{width:100%;justify-content:space-between;}
.liaison-state-pill[hidden]{display:none !important;}

/* iPhone: the page extends under the status bar (viewport-fit=cover), so every header on a phone leaves room
   for it and its own background fills that area. env() is 0 everywhere else. */
@media (max-width:640px){
  .topbar{padding-top:calc(8px + env(safe-area-inset-top));}
  /* the status text is always white, so the strip under it stays dark even where the top bar is light */
  .topbar{background-image:linear-gradient(#0D1117,#0D1117);background-size:100% env(safe-area-inset-top);background-repeat:no-repeat;}
  .wo-m-top{padding-top:calc(12px + env(safe-area-inset-top));}
  .ptr-indicator{top:calc(60px + env(safe-area-inset-top));}
  .notif-panel{top:calc(56px + env(safe-area-inset-top));}
}

/* Install page and the link on the login page */
.install-block{margin-top:18px;text-align:left;}
.install-block .btn{width:100%;justify-content:center;}
.install-ok{margin:0 0 12px;font-size:15px;font-weight:600;text-align:center;}
.install-steps{margin:0 0 8px;padding-left:22px;display:flex;flex-direction:column;gap:12px;font-size:15px;line-height:1.4;}
.install-qr{display:block;margin:12px auto;background:#fff;border-radius:12px;padding:8px;box-sizing:content-box;}
.install-link-row{display:flex;gap:8px;align-items:center;}
.install-link-row input{flex:1;min-width:0;}
.install-signin{margin:18px 0 0;text-align:center;font-size:14px;}
.install-signin a{color:var(--a-link,var(--accent-strong));font-weight:600;}
.install-signin a:hover{text-decoration:underline;}
/* Install page: the login look, one centered card over the brand image */
.install-page{display:flex;align-items:center;justify-content:center;padding:24px;min-height:calc(100vh / var(--ui-zoom, 1));background:url("images/login-bg.jpg") center/cover no-repeat,var(--a-grad);}
.install-card{max-width:440px;margin:0 auto;padding:36px 32px;text-align:center;background:var(--a-panel);border-radius:24px;box-shadow:0 24px 60px -20px rgba(0,0,0,.55);}
.install-card .auth-product{margin:0 auto 26px;}
.install-card .install-steps{text-align:left;}
.install-card .note-text{color:var(--a-ink-soft);font-size:14px;text-align:center;}
.install-card .install-link-row{margin-top:8px;}
.install-card .install-ok{color:var(--a-ink);}
.install-card .install-qr{margin:16px auto;}
.install-card .install-link-row input{height:52px;padding:0 14px;border-radius:14px;border:1.5px solid var(--a-line);background:var(--a-field);color:var(--a-ink);font:inherit;font-size:14px;outline:0;}
.install-card .install-link-row .btn{height:52px;margin-top:0;}
.install-card .btn{text-decoration:none;}
.install-link-row .btn{width:auto;flex:0 0 auto;}

/* Desktop: everything is ~8% smaller (phones keep their size) */
@media (min-width:641px){
  html{--ui-zoom:.75;zoom:var(--ui-zoom);}
  html[data-size="medium"]{--ui-zoom:.83;}
  html[data-size="large"]{--ui-zoom:.92;}
  body{height:calc(100vh / var(--ui-zoom));}
}

/* Desktop: edit one section of a work order in place (pencil in the section header) and the item popup with its
   three status boxes, laid out like the phone's. Phones keep their own rules above. */
@media (min-width:641px){
  .card > header.card-head-split{align-items:center;}
  .sec-editbtn{flex:none;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;cursor:pointer;border:1px solid var(--line);background:var(--surface-sunken);color:var(--ink-soft);}
  .sec-editbtn:hover{background:var(--accent-wash);color:var(--accent);border-color:var(--accent);}
  .sec-editbtn[hidden]{display:none;}
  .sec-editbtn .icon{width:16px;height:16px;}
  html.layout-compact :is(.ot-bento,.quote-bento) .field-row.team-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:12px;}
  .team-pair .rail-row{margin-bottom:0;min-width:0;}
  /* Coordination queue and Coordinator share a row; without queues the Coordinator takes the whole row */
  html.layout-compact :is(.ot-bento,.quote-bento) .field-row.team-pair:has(> [hidden]){grid-template-columns:minmax(0,1fr);}
  .team-pair .field{margin-bottom:0;min-width:0;}
  /* read-only Items table of a work order: a shorter Description, room for Material and Photo, Status centered */
  #otItemsCard .items-table:not(#itemsTable) th:nth-child(1){width:56px;}
  #otItemsCard .items-table:not(#itemsTable) th:nth-child(2){width:110px;}
  #otItemsCard .items-table:not(#itemsTable) th:nth-child(3){width:52%;}
  #otItemsCard .items-table:not(#itemsTable) th:nth-child(4){width:14%;min-width:150px;}
  #otItemsCard .items-table:not(#itemsTable) td:nth-child(5) .photo-thumb-static{display:block;margin:0 auto;}
  #otItemsCard .items-table:not(#itemsTable) th:nth-child(5){width:110px;text-align:center;}
  #otItemsCard .items-table:not(#itemsTable) td:nth-child(5){text-align:center;}
  #otItemsCard .items-table:not(#itemsTable) th:nth-child(6){width:128px;text-align:center;}
  /* read-only Items table of a quote: the Photo header and its pictures / file tiles share one center line */
  #quoteItemsCard .items-table th:nth-child(5),#quoteItemsCard .items-table td:nth-child(5){text-align:center;}
  #quoteItemsCard .items-table td:nth-child(5) .photo-thumb-static{display:block;margin:0 auto;}
  .items-breakdown{display:flex;justify-content:flex-end;align-items:center;padding:10px 8px 6px 0;margin-top:2px;border-top:2px solid var(--ink);}
  .items-breakdown .link-btn{color:var(--accent);font-weight:700;font-size:13px;}
  #priceBreakdown .modal-card{width:min(1100px,94vw);max-width:1100px;}
  #priceBreakdown .pb-body{margin-top:14px;max-height:70vh;overflow:auto;}
  /* order header: the PDF icon sits to the left of the Submit / Recall button, as tall as it */
  .ro-head .eh-actions{flex-direction:row;align-items:center;gap:12px;}
  .ro-head .eh-actions [data-action="pdf"]{order:-1;padding:0;background:none;border:0;box-shadow:none;}
  .ro-head .eh-actions [data-action="pdf"] .icon{display:none;}
  .ro-head .eh-actions [data-action="pdf"] .pdf-img{display:block;height:38px;width:auto;transition:transform .12s ease;}
  .ro-head .eh-actions [data-action="pdf"]:hover .pdf-img{transform:translateY(-1px) scale(1.05);}
  .ro-head .eh-actions .pdf-label{display:none;}
  .ro-head .eh-actions [data-action="submit-wo"],.ro-head .eh-actions [data-action="recall-wo"]{box-sizing:border-box;height:40px;padding-top:0;padding-bottom:0;}
  .ot-pdf-card #otPdfGenerate{display:flex;margin:20px auto 6px;}
  .missing-info-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border:1px solid #e59a00;border-radius:12px;background:#fdf0d4;color:#7a4f00;}
  :root[data-theme="dark"] .missing-info-banner{background:#3a2a0c;color:#f2c25b;border-color:#b87d10;}
  .missing-info-banner .icon{flex:none;width:20px;height:20px;margin-top:1px;}
  .missing-info-banner strong{font-size:14px;}
  .missing-info-banner p{margin:2px 0 0;font-size:13.5px;white-space:pre-wrap;overflow-wrap:anywhere;}
  .ot-info-card{width:min(520px,94vw);}
  .ot-info-card textarea{width:100%;min-height:110px;resize:vertical;}
  .ot-info-card .item-editor-actions{margin-top:14px;}
  .sec-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;}
  .sec-edit-grid .field{margin-bottom:0;}
  .sec-edit-grid .sec-own-row{grid-column:1;}
  .sec-edit-grid .sec-wide-row{grid-column:1 / -1;}
  html.layout-compact .details-card .sec-edit-grid .field,.details-card .sec-edit-grid .field{display:flex;flex-direction:column;grid-template-columns:none;align-items:stretch;margin-bottom:0;}
  .details-card .sec-edit-grid{grid-template-columns:minmax(0,1fr);}
  html.layout-compact .details-card .sec-edit-grid .field label{font-weight:700;}
  .sec-edit-grid .field[hidden]{display:none;}
  .sec-edit-grid .sec-ro{display:flex;align-items:center;min-height:var(--field-h);font-size:13px;color:var(--ink-soft);}
  .sec-edit-error{margin:12px 0 0;padding:9px 12px;border-radius:10px;background:var(--critical-wash,#fde2e6);color:var(--critical);font-size:13px;}
  .sec-edit-error[hidden]{display:none;}
  .sec-edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px;}
  .card.sec-editing .richtext-editor{min-height:160px;}
  .card.sec-editing .rt-photo-row{display:flex;gap:8px;margin-top:10px;}
  .card.sec-editing .rt-photo-row .ie-camera{display:none;}

  /* item popup with status boxes */
  #itemDetails.has-flags .modal-card{width:min(460px,94vw);max-width:460px;position:relative;}
  #itemDetails.has-flags .item-details{gap:0;margin:14px 0 0;}
  #itemDetails.has-flags .item-detail-grid{gap:12px;padding-bottom:0;border-bottom:0;}
  #itemDetails.has-flags .item-detail-grid .item-detail-row{min-height:0;padding:7px 0 9px;margin:0;border:0;border-bottom:1px solid var(--line-soft);}
  #itemDetails.has-flags .item-detail-row dt{font-size:12px;letter-spacing:.06em;color:color-mix(in srgb,var(--accent) 45%,var(--ink-soft));}
  #itemDetails.has-flags .item-detail-row dd{font-size:14px;}
  #itemDetails.has-flags .id-flags + .item-detail-grid .item-detail-row dd{font-size:18px;line-height:1.35;}
  #itemDetails.has-flags .id-flags + .item-detail-grid .item-detail-row{padding-bottom:16px;}
  #itemDetails.has-flags .item-detail-grid .id-photo{width:120px;height:120px;}
  #itemDetails.has-flags .id-flags{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:2px 0 8px;}
  #itemDetails.has-flags .id-flag{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:10px 4px;border:1px solid var(--line);border-radius:12px;background:var(--surface-sunken);font-size:13.5px;text-align:center;cursor:pointer;}
  #itemDetails.has-flags .id-flag input{width:18px;height:18px;margin:0;accent-color:var(--accent);}
  #itemDetails.has-flags .id-flag:has(input:disabled){opacity:.5;cursor:default;}
  #itemDetails .id-confirm:not([hidden]){display:block;position:absolute;left:18px;right:18px;bottom:18px;z-index:5;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface);box-shadow:var(--shadow-pop);}
  #itemDetails .id-confirm p{margin:0 0 12px;font-size:15px;font-weight:600;text-align:center;}
  #itemDetails .id-confirm .item-editor-actions{display:flex;gap:10px;margin-top:0;}
  #itemDetails .id-confirm .btn{flex:1;justify-content:center;}
}

/* ===== Phones: the bell and the avatar stay visible inside a work order or a quote, and the PDF (and e-mail)
   buttons sit in the row of the Overview / Items / Notes tabs ===== */
@media (max-width:640px){
  body:has(.board.wo-board.detail-open) .topbar,
  body:has(.board.q-board.detail-open) .topbar{display:flex;border-bottom:0;box-shadow:none;}
  body:has(.board.wo-board.detail-open) .topbar{background-color:#5b0e2b;}
  body:has(.board.q-board.detail-open) .topbar{background-color:#0a3d2e;}
  body:has(.board.wo-board.detail-open) .topbar .brand,
  body:has(.board.q-board.detail-open) .topbar .brand{display:none;}
  body:has(.board.wo-board.detail-open) .topbar .icon-btn,
  body:has(.board.q-board.detail-open) .topbar .icon-btn{color:#fff;background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);}
  body:has(.board.wo-board.detail-open) .topbar .icon-btn .icon,
  body:has(.board.q-board.detail-open) .topbar .icon-btn .icon{stroke:#fff;}
  body:has(.board.wo-board.detail-open) .topbar-right,
  body:has(.board.q-board.detail-open) .topbar-right{margin-left:auto;}
  .board.wo-board.detail-open .wo-m-top,
  .board.q-board.detail-open .wo-m-top{padding-top:4px;}
  .wo-m-tabs .wo-tab{padding:9px 6px;min-width:0;}
  .wo-m-tabs .wo-m-tabbtn{flex:0 0 42px;width:42px;height:auto;align-self:stretch;border-radius:12px;background:var(--surface-sunken);border:0;color:var(--ink-soft);}
  .wo-m-tabs .wo-m-tabbtn .icon{width:22px;height:22px;}
}

/* ===== Phones: Submit / Recall / Request information / Information provided at the top of the Overview tab ===== */
.wo-m-missing,.wo-m-actions{display:none;}
@media (max-width:640px){
  .wo-m-missing:not([hidden]){display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;padding:12px 14px;border:1px solid #e59a00;border-radius:14px;background:#fdf0d4;color:#7a4f00;}
  :root[data-theme="dark"] .wo-m-missing:not([hidden]){background:#3a2a0c;color:#f2c25b;border-color:#b87d10;}
  .wo-m-missing .icon{flex:none;width:20px;height:20px;margin-top:1px;}
  .wo-m-missing strong{font-size:14.5px;}
  .wo-m-missing p{margin:2px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;}
  .wo-m-actions:not([hidden]){display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;}
  .wo-m-actions .btn{flex:1 1 140px;justify-content:center;height:37px;padding:0 10px;border-radius:12px;font-size:13.5px;font-weight:600;white-space:nowrap;}
  .wo-m-actions .btn[hidden]{display:none;}
  .wo-m-actions .btn.primary{background:linear-gradient(135deg,#ff5c85,#e8325f);border:0;color:#fff;}
  .wo-m-actions .btn.secondary{background:var(--surface-sunken);border:0;color:var(--ink-soft);}
  .ot-info-card{width:calc(100% - 32px);}
  .ot-info-card textarea{width:100%;min-height:110px;box-sizing:border-box;}
}

/* ===== Mobile style layout on desktop (html.layout-m, chosen in the avatar menu) =====
   Classic layout plus the phone's look: burgundy top bar, light sidebar with the logo, pink cards, an action row
   in place of the phone's tabs. Everything is scoped to html.layout-m and min-width:641px, so phones and the other
   layouts are untouched. The elements below only exist for this layout. */
.wo-d-actions,.items-count,.items-toggle,.topbar-sub,.topbar-icon,.brand-slogan{display:none;}
@media (min-width:641px){
  /* the detail panel already puts 12px between its parts: with 2px more the header sits as far from the cards as the cards are from each other (14px) */
  .order-detail > .editor-head.ro-head{margin-bottom:2px;}
  html.layout-m{
    --lm-grad:linear-gradient(100deg,#5b0e2b 0%,#9e1342 55%,#d11c4b 100%);
    --lm-bg:#f6f3f5;
    --lm-chip:linear-gradient(135deg,#ff5c85,#e8325f);
    --lm-side:232px;
  }
  html.layout-m.module-quotes{--lm-grad:linear-gradient(100deg,#0a3d2e 0%,#0e6b50 55%,#14a37a 100%);--lm-chip:linear-gradient(135deg,#2fd3a0,#0f9d72);}
  :root[data-theme="dark"].layout-m{--lm-bg:var(--paper);}
  html.layout-m body{background:var(--lm-bg);}

  /* top bar: logo over the sidebar column, title block and tools on the gradient */
  html.layout-m .topbar{
    padding:0 24px 0 0;min-height:84px;border-bottom:0;
    background:linear-gradient(90deg,var(--sideNavBg) 0,var(--sideNavBg) var(--lm-side),transparent var(--lm-side)),var(--lm-grad);
  }
  html.layout-m .topbar-left{
    flex:1;min-width:0;padding:0;gap:0;display:grid;grid-template-columns:var(--lm-side) auto minmax(0,1fr);grid-template-rows:auto auto;align-items:center;
  }
  html.layout-m .topbar-left .brand{grid-column:1;grid-row:1 / span 2;padding:0 18px 0 22px;}
  html.layout-m .topbar-left .brand img{width:172px;max-width:100%;filter:none;}
  html.layout-m .topbar-left .brand{flex-direction:column;align-items:flex-start;justify-content:center;gap:5px;}
  html.layout-m .brand-slogan{display:block;width:172px;height:11px;overflow:visible;}
  html.layout-m .brand-slogan text{font-family:var(--display);font-weight:700;font-size:8.6px;letter-spacing:.4px;text-transform:uppercase;fill:#343434;}
  :root[data-theme="dark"] .brand-slogan text{fill:#fff;}
  html.layout-m .topbar-title{
    display:block;grid-column:3;grid-row:1;align-self:end;padding-left:28px;color:#fff;font-family:var(--display);font-size:26px;font-weight:800;line-height:1.15;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  html.layout-m .topbar-title:empty{display:none;}
  html.layout-m .topbar-sub{display:block;grid-column:3;grid-row:2;align-self:start;padding-left:28px;color:rgba(255,255,255,.82);font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.layout-m .topbar-sub:empty{display:none;}
  html.layout-m .topbar-title:empty + .topbar-sub{grid-row:1 / span 2;align-self:center;}
  html.layout-m .topbar-title:has(+ .topbar-sub:empty){grid-row:1 / span 2;align-self:center;}
  html.layout-m .topbar-title{grid-row:1 / span 2;align-self:center;}
  html.layout-m .topbar-title:has(+ .topbar-sub:not(:empty)){grid-row:1;align-self:end;}
  html.layout-m .brand-module{display:none;}
  html.layout-m .topbar-icon{
    display:flex;grid-column:2;grid-row:1 / span 2;align-items:center;justify-content:center;width:58px;height:58px;margin:0 16px 0 28px;border-radius:50%;
    background:var(--lm-chip);box-shadow:0 8px 18px -8px rgba(0,0,0,.55);
  }
  html.layout-m .topbar-icon img{width:34px;height:34px;object-fit:contain;}
  html.layout-m .topbar-icon{color:#fff;}
  /* Sign out sits at the bottom of the sidebar, above the company name */
  html.layout-m .sidenav > ul{flex:1;}
  html.layout-m .sidenav li:has(#logoutLink){margin-top:auto;padding-bottom:8px;}
  html.layout-m .sidenav-foot{border-top-color:var(--line);}
  html.layout-m .nav-ico{display:block;width:22px;height:22px;background:currentColor;-webkit-mask:var(--ico) center / contain no-repeat;mask:var(--ico) center / contain no-repeat;}
  /* drawn icons have margins inside their 24-unit box: 38px makes the glyph as tall as the Work Order, Quote and Report pictures (about 28px) */
  html.layout-m .topbar-icon svg{width:38px;height:38px;}
  html.layout-m .topbar-left:has(.topbar-icon) .topbar-title,html.layout-m .topbar-left:has(.topbar-icon) .topbar-sub{padding-left:0;}
  html.layout-m .topbar-center{flex:none;width:340px;}
  html.layout-m .search-field{max-width:none;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);border-radius:14px;color:#fff;padding:10px 14px;}
  html.layout-m .search-field .icon{stroke:#fff;}
  html.layout-m .search-field input{color:#fff;background:transparent;border:0;box-shadow:none;padding:0;}
  html.layout-m .search-field input::placeholder{color:rgba(255,255,255,.82);}
  html.layout-m .search-field:focus-within{border-color:#fff;}
  html.layout-m .topbar-right{gap:14px;}
  html.layout-m .topbar .icon-btn{width:44px;height:44px;border-radius:14px;color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.28);}
  html.layout-m .topbar .icon-btn .icon{stroke:#fff;}
  html.layout-m .topbar .icon-btn:hover{background:rgba(255,255,255,.26);}
  :root.layout-m .topbar .user-chip .avatar{width:42px;height:42px;background:#fff;color:#9e1342;filter:none;font-size:14px;}
  html.layout-m .user-chip{padding:2px 4px 2px 2px;gap:6px;}
  html.layout-m .user-chip::after{content:"";width:8px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 4px 0 2px;}

  /* sidebar */
  html.layout-m .shell{grid-template-columns:var(--lm-side) 1fr;}
  html.layout-m .sidenav{padding:18px 14px;border-right:1px solid var(--line);}
  html.layout-m .sidenav ul{gap:4px;}
  html.layout-m .sidenav a,html.layout-m .nav-group-toggle{padding:11px 14px;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--ink-soft);}
  html.layout-m .sidenav a:hover,html.layout-m .nav-group-toggle:hover{background:var(--surface-sunken);}
  html.layout-m .sidenav a.active{background:var(--accent-wash);color:var(--accent-strong);}
  html.layout-m .sidenav a .icon,html.layout-m .sidenav a .icon-filled{width:22px;height:22px;}
  /* the line weight of the Quotes, Work Orders and Reports pictures (about 1.2px at 22px) */
  html.layout-m .sidenav a .icon{stroke-width:1.3;}

  /* order list rail */
  html.layout-m .order-rail{border:1px solid var(--line);border-radius:22px;width:372px;}
  html.layout-m .rail-toolzone{background:transparent;border:0;padding:14px 14px 4px;display:flex;flex-wrap:wrap;align-items:center;gap:10px;}
  html.layout-m .rail-search,html.layout-m .rail-toolbar{display:contents;}
  html.layout-m #btnRefreshOrders{display:none;}
  html.layout-m .rail-search-field{flex:1 1 0;min-width:0;padding:10px 12px;border-radius:14px;background:var(--surface-sunken);}
  html.layout-m .rail-toolbar .popover-wrap .icon-btn{width:42px;height:42px;border-radius:14px;background:var(--surface-sunken);}
  html.layout-m .rail-toolbar .btn.sm{order:5;flex:0 0 100%;justify-content:center;border:0;color:#fff;background:var(--lm-chip);border-radius:14px;padding:10px 14px;font-weight:600;}
  html.layout-m .wo-tabs-wrap{display:block;position:relative;flex:0 0 100%;min-width:0;}
  html.layout-m .wo-tabs{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;}
  html.layout-m .wo-tabs::-webkit-scrollbar{display:none;}
  html.layout-m .wo-tab-label::before{content:attr(data-label);}
  html.layout-m .wo-tab{
    flex:1 0 auto;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border:0;border-radius:12px;
    background:var(--surface-sunken);color:var(--ink-soft);font:inherit;font-size:12.5px;white-space:nowrap;cursor:pointer;
  }
  html.layout-m .wo-tab[hidden]{display:none;}
  html.layout-m .wo-tab-count{min-width:18px;padding:1px 6px;border-radius:999px;background:var(--surface);font-size:11px;font-weight:600;text-align:center;}
  html.layout-m .wo-tab[aria-selected="true"]{background:var(--lm-chip);color:#fff;font-weight:600;}
  html.layout-m .wo-tab[aria-selected="true"] .wo-tab-count{background:rgba(255,255,255,.25);color:#fff;}
  html.layout-m .wo-tabs-arrow{position:absolute;top:0;bottom:0;width:30px;display:flex;align-items:center;border:0;color:var(--ink-soft);cursor:pointer;background:var(--surface);}
  html.layout-m .wo-tabs-arrow[hidden]{display:none;}
  html.layout-m .wo-tabs-arrow .icon{width:20px;height:20px;stroke-width:2.2;}
  html.layout-m .wo-tabs-arrow.left{left:0;justify-content:flex-start;background:linear-gradient(90deg,var(--surface) 55%,transparent);}
  html.layout-m .wo-tabs-arrow.right{right:0;justify-content:flex-end;background:linear-gradient(270deg,var(--surface) 55%,transparent);}

  /* order cards: avatar, folio / client / date, pills and assignee, chevron */
  html.layout-m .order-list > .order-row,html.layout-m .order-list > .order-row:first-child{
    grid-template-columns:46px minmax(0,1fr) auto 14px;column-gap:10px;padding:12px;border-radius:18px;
  }
  html.layout-m .order-list > .order-row .wo-avatar{display:flex;grid-column:1;grid-row:1 / span 3;width:46px;height:46px;align-self:center;}
  html.layout-m .order-list > .order-row .order-ot{grid-column:2;}
  html.layout-m .order-list > .order-row .order-client{grid-column:2;}
  html.layout-m .order-list > .order-row .wo-date{grid-column:2;}
  html.layout-m .order-list > .order-row .wo-pills{grid-column:3;}
  html.layout-m .order-list > .order-row .wo-person{grid-column:3;}
  html.layout-m .order-list > .order-row .wo-chevron{display:flex;grid-column:4;grid-row:1 / span 3;align-self:center;}
  html.layout-m .board.wo-board .order-list > .order-row .wo-pills .wo-pill:first-child:not(:only-child){display:inline-block;}
  html.layout-m .order-list > .order-row .wo-lead{display:none;}
  html.layout-m .wo-avatar{align-items:center;justify-content:center;border-radius:50%;font-size:14px;font-weight:700;background:hsl(var(--h) 75% 93%);color:hsl(var(--h) 55% 34%);}
  :root[data-theme="dark"].layout-m .wo-avatar{background:hsl(var(--h) 35% 22%);color:hsl(var(--h) 85% 76%);}
  html.layout-m .wo-pill{border:0;border-radius:8px;padding:3px 9px;}
  html.layout-m .order-list > .order-row.selected,html.layout-m .order-list > .order-row.selected:first-child{padding:11px;}

  /* order and quote headers: same height, pink (green on quotes) fading to white across the width */
  html.layout-m :is(.editor-head.ro-head,.order-header){
    align-items:center;padding:18px 26px;border-radius:22px;box-sizing:border-box;min-height:96px;
    background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 16%,var(--surface)) 0%,color-mix(in srgb,var(--accent) 16%,var(--surface)) 30%,var(--surface) 100%);
  }
  html.layout-m .order-header .oh-top{align-items:center;}
  html.layout-m :is(.ro-head,.order-header) .eh-icon{display:none;}
    html.layout-m :is(.ro-head,.order-header) .eh-row{gap:20px;}
  html.layout-m :is(.ro-head,.order-header) .oh-id{flex-direction:column;align-items:flex-start;gap:0;}
  html.layout-m :is(.ro-head,.order-header) .oh-ot{font-size:30px;line-height:1.1;}
  html.layout-m :is(.ro-head,.order-header) .oh-client{border:0;padding:0;font-size:20px;font-weight:600;text-transform:uppercase;color:var(--ink-soft);}
  html.layout-m .ro-head .eh-actions .btn:not(.pdf-btn){display:none !important;}

  /* action row (Submit / Recall / Needs More Info) in place of the phone's tabs */
  html.layout-m .wo-d-actions:not([hidden]){display:flex;flex-wrap:wrap;gap:10px;margin:0 0 14px;}
  html.layout-m .wo-d-actions .btn{flex:0 1 auto;min-width:150px;justify-content:center;padding:11px 22px;border-radius:14px;font-size:14.5px;font-weight:600;}
  html.layout-m .wo-d-actions .btn.primary{border:0;color:#fff;background:var(--lm-chip);box-shadow:0 6px 14px -6px rgba(232,50,95,.55);}
  html.layout-m .wo-d-actions .btn.secondary{background:var(--surface);color:var(--accent-strong);border:1.5px solid var(--accent);}
  html.layout-m .wo-d-actions .btn.secondary:hover{background:var(--accent-wash);}
  html.layout-m .missing-info-banner{margin:0 0 14px;border-radius:16px;}

  /* cards */
  html.layout-m :is(.ot-bento,.quote-bento) > .card{border-radius:20px;}
  html.layout-m :is(.ot-bento,.quote-bento) > .card > header h2{color:var(--ink);font-weight:700;}
  html.layout-m .sec-editbtn{border-radius:50%;}

  /* Items: count badge, collapse chevron for long lists, Add item at the top right */
  html.layout-m #otItemsCard{position:relative;}
  html.layout-m .items-head{display:flex;align-items:center;gap:10px;justify-content:flex-start;}
  html.layout-m .items-head h2{display:flex;align-items:center;gap:8px;}
  html.layout-m .items-count{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;padding:0 8px;border-radius:999px;background:var(--surface-sunken);color:var(--ink-soft);font-size:12px;font-weight:700;}
  html.layout-m .items-toggle{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--surface-sunken);color:var(--ink-soft);cursor:pointer;}
  html.layout-m .items-toggle:hover{background:var(--accent-wash);color:var(--accent);border-color:var(--accent);}
  html.layout-m .items-toggle .icon{width:18px;height:18px;transition:transform .15s ease;transform:rotate(180deg);}
  /* "Add item": the same round + button, bottom left of the Items card, on work orders and on quotes */
  html.layout-m :is(#otItemsCard,#quoteItemsCard) .wo-n-add{
    float:left;display:inline-flex;align-items:center;gap:9px;margin:12px 0 2px 4px;padding:0;border:0;background:none;
    color:var(--accent-strong);font-weight:600;font-size:13.5px;cursor:pointer;
  }
  html.layout-m :is(#otItemsCard,#quoteItemsCard) .wo-n-add .icon{
    width:30px;height:30px;padding:7px;box-sizing:border-box;border-radius:50%;background:var(--lm-chip);stroke:#fff;stroke-width:2.4;
    box-shadow:0 0 6px 1px color-mix(in srgb,var(--accent) 45%,transparent);
  }
  html.layout-m :is(#otItemsCard,#quoteItemsCard) .wo-n-add:hover .icon{filter:brightness(.94);}
  html.layout-m :is(#otItemsCard,#quoteItemsCard)::after{content:"";display:block;clear:both;}
  /* Production, Items and Observations of the board: a chevron beside the title opens and closes the card */
  /* the chevron (and, on Observations, the pencil) sit in the card's top-right corner */
  html.layout-m .card-head-right{display:flex;align-items:center;gap:8px;margin-left:auto;}
  /* Observations always shows its box: about two lines tall while there are no notes */
  html.layout-m #orderDetail .obs-card .obs-view{min-height:calc(2 * 1.5em + 20px);}
  /* its pencil sits right after the title */
  html.layout-m .card-title-row{display:flex;align-items:center;gap:10px;}
  html.layout-m #orderDetail .card.is-collapsed > :not(header){display:none !important;}
  html.layout-m #orderDetail .card.is-collapsed > header{margin-bottom:0 !important;}
  html.layout-m #orderDetail .card.is-collapsed .card-toggle .icon{transform:none;}
  html.layout-m .items-breakdown{border-top:0;justify-content:flex-end;float:right;width:auto;margin-top:12px;padding:6px 8px 0 0;}
  html.layout-m .items-table th{text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;color:var(--ink-faint);}
}

/* Desktop: the PDF button of a work order and of a quote is the same full button, the PDF picture plus "Convert to PDF",
   in the page's colour (pink on work orders, green on quotes) */
@media (min-width:641px){
  .ro-head .eh-actions [data-action="pdf"],.oh-actions [data-action="pdf"]{
    display:inline-flex;align-items:center;gap:9px;order:-1;box-sizing:border-box;height:40px;padding:0 16px 0 8px;
    background:var(--lm-chip,var(--accent));color:#fff;border:0;border-radius:10px;box-shadow:none;font-weight:600;white-space:nowrap;
  }
  .ro-head .eh-actions [data-action="pdf"]:hover,.oh-actions [data-action="pdf"]:hover{background:var(--lm-chip,var(--accent-strong));filter:brightness(.94);}
  .ro-head .eh-actions [data-action="pdf"] .icon,.oh-actions [data-action="pdf"] .icon{display:none;}
  .ro-head .eh-actions [data-action="pdf"] .pdf-img,.oh-actions [data-action="pdf"] .pdf-img{display:block;height:30px;width:auto;}
  .ro-head .eh-actions [data-action="pdf"]:hover .pdf-img{transform:none;}
  .ro-head .eh-actions [data-action="pdf"] .pdf-label,.oh-actions [data-action="pdf"] .pdf-label{display:inline;}
}
/* the PDF button is exactly the same size on work orders and quotes, in every desktop layout */
@media (min-width:641px){
  .ro-head .eh-actions [data-action="pdf"],.oh-actions [data-action="pdf"]{
    box-sizing:border-box !important;width:156px !important;height:40px !important;padding:0 14px 0 8px !important;justify-content:center;font-size:13.5px !important;line-height:1 !important;
  }
}

/* Work Order header (desktop): Claim / Start / Submit / Recall / Needs More Info side by side at the right of the header,
   where the PDF button was; the PDF button is a round icon in the Details card, left of its pencil (same size) */
@media (min-width:641px){
  html.layout-m .wo-d-actions:not([hidden]){display:none;}
  html.layout-m .ro-head .eh-actions{flex-direction:row;align-items:center;gap:8px;}
  html.layout-m .ro-head .eh-actions .btn:not(.pdf-btn){
    display:inline-flex !important;align-items:center;justify-content:center;min-width:150px;height:40px;padding:0 22px;
    border-radius:12px;font-size:14px;font-weight:600;
  }
  html.layout-m .ro-head .eh-actions .btn[hidden]{display:none !important;}
  html.layout-m .ro-head .eh-actions .btn.primary:not(.pdf-btn){border:0;color:#fff;background:var(--lm-chip);}
  html.layout-m .ro-head .eh-actions .btn.secondary{background:var(--surface);color:var(--accent-strong);border:1.5px solid var(--accent);}
  html.layout-m .ro-head .eh-actions .btn.secondary:hover{background:var(--accent-wash);}
  .ro-head .eh-actions [data-action="pdf"]{display:none !important;}
  .sec-head-btns{display:flex;align-items:center;gap:8px;}
  .sec-pdfbtn{padding:0;border:0;background:none;overflow:hidden;}
  .sec-pdfbtn:hover{background:none;filter:brightness(.92);}
  .sec-pdfbtn .pdf-round{display:block;width:100%;height:100%;}
  .sec-pdfbtn[aria-busy="true"]{opacity:.5;cursor:progress;}
}
@media (max-width:640px){
  .sec-pdfbtn{display:none;}
}

/* ===== Mobile style layout on desktop: Clients and Control Panel take the phone's blue theme ===== */
@media (min-width:641px){
  html.layout-m.module-blue{
    --accent:#1c6fe0;--accent-strong:#1559b8;--accent-wash:#e6efff;--accent-swatch:#1c6fe0;--focus-ring:0 0 0 3px rgba(28,111,224,.35);
    --lm-grad:linear-gradient(100deg,#082a63 0%,#0c479e 55%,#1c6fe0 100%);
    --lm-chip:linear-gradient(135deg,#5aa8ff,#1c6fe0);
  }
  :root[data-theme="dark"].layout-m.module-blue{--accent-wash:#10203d;--accent-strong:#6aa8ff;}
  :root.layout-m.module-blue .topbar .user-chip .avatar{color:#0c479e;}
  html.layout-m.module-blue .shell .btn.primary{border:0;color:#fff;background:var(--lm-chip);}
  html.layout-m.module-blue .user-chip::after{border-color:#fff;}

  /* shared: rounded cards and a roomier page on both */
  html.layout-m .settings-canvas{background:transparent;padding:12px;}
  html.layout-m .settings-canvas .card{border-radius:20px;}
  html.layout-m .settings-canvas .card > header h2{font-weight:700;}
  html.layout-m .settings-table th{text-transform:uppercase;letter-spacing:.04em;font-size:10.5px;color:var(--ink-faint);}
  html.layout-m .settings-canvas .btn{border-radius:12px;}

  html.layout-m .settings-canvas > .editor-head{justify-content:flex-end;margin-bottom:12px;}
  html.layout-m .settings-canvas > .editor-head > div{display:none;}
  html.layout-m .settings-canvas > .editor-head .btn{padding:10px 22px;font-weight:600;box-shadow:0 6px 14px -6px rgba(28,111,224,.55);}
  /* Clients: the phone's list of cards beside a detail view, instead of the table */
  html.layout-m .canvas:has(.c-board) > .error-banner,html.layout-m .canvas:has(.c-board) > .card,
  html.layout-m .canvas:has(.c-board) > .settings-head > div{display:none;}
  html.layout-m .canvas:has(.c-board) > .settings-head{order:-1;margin:0 0 10px;justify-content:flex-end;}
  html.layout-m .canvas:has(.c-board) > .settings-head:has(#btnNewClient[hidden]){display:none;}
  html.layout-m .canvas:has(.c-board) #btnNewClient{padding:10px 22px;font-weight:600;box-shadow:0 6px 14px -6px rgba(28,111,224,.55);}
  html.layout-m .c-board{display:flex;flex:1;min-height:0;}
  html.layout-m .c-board .rail-toolzone{padding:14px 14px 4px;}
  html.layout-m .c-board .rail-search{display:flex;flex:1 1 100%;}
  html.layout-m .c-board .order-ot.c-name{font-family:var(--body);font-size:15px;font-weight:700;white-space:normal;}
  html.layout-m .c-board .order-list > .order-row .order-row-side{display:none;}
  html.layout-m .c-board .order-list > .order-row{grid-template-columns:46px minmax(0,1fr) 14px;}
  html.layout-m .c-board .order-list > .order-row .wo-chevron{grid-column:3;}
  html.layout-m .c-board .order-list > .order-row .wo-date{color:var(--ink-faint);}
  html.layout-m .c-board .order-list > .order-row.selected .wo-date .icon{color:var(--accent);}
  html.layout-m .c-board .order-detail{overflow-y:auto;gap:14px;}
  html.layout-m .c-board .mobile-back-btn,html.layout-m .c-board .wo-m-back,html.layout-m .c-board .wo-m-bar{display:none;}
  html.layout-m .c-board .wo-m{display:block;}
  html.layout-m .c-m .wo-m-top{
    display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:20px 26px;border-radius:22px;color:var(--ink);
    border:1px solid var(--line);background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,var(--surface)) 0%,var(--surface) 62%);
  }
  html.layout-m .c-m .wo-m-hero{display:flex;align-items:center;gap:20px;margin:0;}
  html.layout-m .c-m .wo-m-avatar{width:76px;height:76px;font-size:24px;flex:none;}
  html.layout-m .c-m .wo-m-id{display:flex;flex-direction:column;gap:2px;min-width:0;}
  html.layout-m .c-m .wo-m-folio{font-size:28px;font-weight:800;line-height:1.1;overflow-wrap:anywhere;}
  html.layout-m .c-m .wo-m-client{font-family:var(--display);font-size:18px;font-weight:600;color:var(--ink-soft);}
  html.layout-m .c-m .wo-m-meta{display:flex;align-items:center;gap:14px;margin:0;color:var(--ink-soft);}
  html.layout-m .c-m .wo-m-meta .wo-date{color:var(--ink-soft);margin:0;font-size:14.5px;}
  html.layout-m .c-m .wo-m-meta .wo-date .icon{stroke:currentColor;}
  html.layout-m .c-m .wo-m-bar-actions{display:flex;gap:8px;}
  html.layout-m .c-m .wo-m-pdfbtn{width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:12px;color:#fff;background:var(--lm-chip);border:0;}
  html.layout-m .c-m .wo-m-pdfbtn .icon{width:22px;height:22px;stroke:#fff;}
  html.layout-m .c-m .wo-m-sheet{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:14px 0 0;padding:0;background:none;border-radius:0;min-height:0;align-items:start;}
  html.layout-m .c-m .wo-m-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:16px 20px 18px;box-shadow:var(--shadow-card);margin:0;}
  html.layout-m .c-m .wo-m-card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;}
  html.layout-m .c-m .wo-m-card h3{margin:0;font-size:18px;font-weight:700;}
  html.layout-m .c-m .wo-m-editbtn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border-radius:50%;cursor:pointer;border:1px solid var(--line);background:var(--surface-sunken);color:var(--ink-soft);}
  html.layout-m .c-m .wo-m-editbtn:hover{background:var(--accent-wash);color:var(--accent);border-color:var(--accent);}
  html.layout-m .c-m .wo-m-editbtn[hidden]{display:none;}
  html.layout-m .c-m .wo-m-editbtn .icon{width:16px;height:16px;}
  html.layout-m .c-m .wo-m-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;min-height:40px;border-bottom:1px solid var(--line);}
  html.layout-m .c-m .wo-m-row:last-child{border-bottom:0;}
  html.layout-m .c-m .wo-m-row .k{color:var(--ink-faint);font-size:13.5px;flex:none;}
  html.layout-m .c-m .wo-m-row .v{font-weight:500;font-size:14.5px;text-align:right;min-width:0;overflow-wrap:anywhere;}
  html.layout-m .c-m .wo-m-field{display:flex;flex-direction:column;gap:4px;padding:7px 0;}
  html.layout-m .c-m .wo-m-field .k{font-size:13px;color:var(--ink-faint);}
  html.layout-m .c-m .wo-m-field input,html.layout-m .c-m .wo-m-field select{width:100%;height:40px;padding:0 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;}
  html.layout-m .c-m .wo-m-field input:focus,html.layout-m .c-m .wo-m-field select:focus{border-color:var(--accent);outline:0;}
  html.layout-m .c-m .wo-m-error{margin:10px 0 0;padding:10px 12px;border-radius:10px;background:#fde2e6;color:#c0233f;font-size:14px;}
  html.layout-m .c-m .wo-m-error[hidden]{display:none;}
  html.layout-m .c-m .wo-m-edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
  html.layout-m .c-m .wo-m-edit-actions .btn{min-width:110px;height:40px;justify-content:center;border-radius:12px;font-weight:600;}
  html.layout-m .c-m .wo-m-edit-actions .btn.ghost{background:var(--surface-sunken);border:0;color:var(--ink-soft);}
}

/* ===== Clients list: just the avatar and the name, vertically centred (phone and Mobile style desktop) ===== */
@media (max-width:640px){
  .board.c-board:not(.detail-open) .order-row{grid-template-columns:44px minmax(0,1fr) 14px;}
  .board.c-board:not(.detail-open) .order-ot.c-name{font-size:16px;}
}
@media (min-width:641px){
  html.layout-m .c-board .order-list > .order-row{grid-template-columns:46px minmax(0,1fr) 14px;grid-template-rows:auto;align-items:center;padding-top:10px;padding-bottom:10px;}
  html.layout-m .c-board .order-list > .order-row .wo-avatar{grid-row:1;}
  html.layout-m .c-board .order-list > .order-row .order-ot{grid-row:1;align-self:center;font-size:15.5px;}
  html.layout-m .c-board .order-list > .order-row .wo-chevron{grid-row:1;}
  html.layout-m .c-board .order-list > .order-row.selected,html.layout-m .c-board .order-list > .order-row.selected:first-child{padding-top:9px;padding-bottom:9px;}
  /* "New client" under the search box, like "New WO" on the work order list */
  html.layout-m .canvas:has(.c-board) > .settings-head{display:none;}
  html.layout-m .c-board .rail-toolzone #btnNewClient{
    flex:0 0 100%;justify-content:center;border:0;color:#fff;background:var(--lm-chip);border-radius:14px;padding:10px 14px;font-weight:600;box-shadow:none;
  }
  html.layout-m .c-board .rail-toolzone #btnNewClient[hidden]{display:none;}
}

/* ===== Control Panel on desktop: the list of options on the left, the selected option's information on the right ===== */
.cp-item.is-disabled{opacity:.45;filter:grayscale(1);pointer-events:none;}
@media (max-width:640px){
  .cp-item[href$="#clientes"],#clientsSection{display:none !important;}
}
@media (min-width:641px){
  html.layout-m .settings-canvas:has(#cpSheet){
    display:grid;grid-template-columns:340px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);column-gap:16px;overflow:hidden;padding:12px;
  }
  html.layout-m .settings-canvas .cp-head{display:none;}
  html.layout-m .cp-home:not([hidden]){
    grid-column:1;grid-row:1 / span 2;display:flex;flex-direction:column;gap:10px;min-height:0;overflow-y:auto;padding:2px 4px 16px 2px;
  }
  html.layout-m .cp-item{
    display:flex;align-items:center;gap:14px;padding:12px 16px;border:1px solid var(--line);border-radius:18px;background:var(--surface);
    box-shadow:var(--shadow-card);color:var(--ink);text-decoration:none;flex:none;transition:border-color .12s ease,background .12s ease;
  }
  html.layout-m .cp-item:hover{border-color:var(--accent);}
  html.layout-m .cp-item.is-active{border-color:var(--accent);background:var(--accent-wash);box-shadow:0 0 0 1px var(--accent),var(--shadow-card);}
  html.layout-m .cp-item.is-active .cp-item-text b{color:var(--accent-strong);}
  html.layout-m .cp-item-icon{flex:none;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--lm-chip);}
  html.layout-m .cp-item-icon .icon{width:24px;height:24px;stroke:#fff;}
  html.layout-m .cp-item-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
  html.layout-m .cp-item-text b{font-size:15.5px;font-weight:600;}
  html.layout-m .cp-item-text i{font-style:normal;font-size:12.5px;color:var(--ink-faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  html.layout-m .cp-item-chev .icon{width:18px;height:18px;color:var(--ink-faint);}
  html.layout-m .settings-canvas > .editor-head{grid-column:2;grid-row:1;}
  html.layout-m body:not([data-cp-section="usuarios"]) .settings-canvas > .editor-head{display:none;}
  html.layout-m .cp-sheet{grid-column:2;grid-row:2;min-height:0;overflow-y:auto;padding:0 2px 16px 0;}
  html.layout-m body[data-cp-section="clientes"] .cp-sheet{overflow:hidden;}
  html.layout-m .cp-sheet > .card{margin-bottom:14px;}

  /* Clients inside the Control panel: client cards, then the selected client's cards in one column */
  html.layout-m .cp-clients{height:100%;display:flex;flex-direction:column;min-height:0;}
  html.layout-m .cp-clients .c-board{flex:1;min-height:0;}
  html.layout-m .cp-clients .order-rail{width:300px;}
  html.layout-m .cp-clients .c-m .wo-m-sheet{grid-template-columns:minmax(0,640px);}
  html.layout-m .cp-clients > .wo-head{display:none;}
}

/* Clients inside the Control panel: a more compact list and detail */
@media (min-width:641px){
  html.layout-m .cp-clients .rail-toolzone{padding:10px 10px 2px;gap:8px;}
  html.layout-m .cp-clients .rail-search-field{padding:7px 10px;font-size:13px;}
  html.layout-m .cp-clients .rail-toolzone #btnNewClient{padding:7px 12px;font-size:13px;border-radius:12px;}
  html.layout-m .cp-clients .order-list{padding:8px;gap:6px;}
  html.layout-m .cp-clients .c-board .order-list > .order-row{grid-template-columns:34px minmax(0,1fr) 12px;column-gap:9px;padding:6px 10px;border-radius:14px;}
  html.layout-m .cp-clients .c-board .order-list > .order-row.selected,
  html.layout-m .cp-clients .c-board .order-list > .order-row.selected:first-child{padding:5px 9px;}
  html.layout-m .cp-clients .c-board .order-list > .order-row .wo-avatar{width:34px;height:34px;font-size:11.5px;}
  html.layout-m .cp-clients .c-board .order-list > .order-row .order-ot{font-size:13px;}
  html.layout-m .cp-clients .c-board .order-list > .order-row .wo-chevron .icon{width:14px;height:14px;}
  html.layout-m .cp-clients .c-board .order-detail{gap:10px;}
  html.layout-m .cp-clients .c-m .wo-m-top{padding:12px 18px;border-radius:18px;}
  html.layout-m .cp-clients .c-m .wo-m-hero{gap:14px;}
  html.layout-m .cp-clients .c-m .wo-m-avatar{width:50px;height:50px;font-size:17px;}
  html.layout-m .cp-clients .c-m .wo-m-folio{font-size:20px;}
  html.layout-m .cp-clients .c-m .wo-m-client{font-size:14px;}
  html.layout-m .cp-clients .c-m .wo-m-meta .wo-date{font-size:13px;}
  html.layout-m .cp-clients .c-m .wo-m-pdfbtn{width:34px;height:34px;border-radius:10px;}
  html.layout-m .cp-clients .c-m .wo-m-pdfbtn .icon{width:18px;height:18px;}
  html.layout-m .cp-clients .c-m .wo-m-sheet{grid-template-columns:minmax(0,520px);gap:10px;margin-top:10px;}
  html.layout-m .cp-clients .c-m .wo-m-card{padding:10px 16px 12px;border-radius:16px;}
  html.layout-m .cp-clients .c-m .wo-m-card-head{margin-bottom:4px;}
  html.layout-m .cp-clients .c-m .wo-m-card h3{font-size:15px;}
  html.layout-m .cp-clients .c-m .wo-m-editbtn{width:28px;height:28px;}
  html.layout-m .cp-clients .c-m .wo-m-editbtn .icon{width:14px;height:14px;}
  html.layout-m .cp-clients .c-m .wo-m-row{padding:6px 0;min-height:30px;}
  html.layout-m .cp-clients .c-m .wo-m-row .k{font-size:12.5px;}
  html.layout-m .cp-clients .c-m .wo-m-row .v{font-size:13.5px;}
  html.layout-m .cp-clients .c-m .wo-m-field{padding:4px 0;}
  html.layout-m .cp-clients .c-m .wo-m-field .k{font-size:12px;}
  html.layout-m .cp-clients .c-m .wo-m-field input,html.layout-m .cp-clients .c-m .wo-m-field select{height:34px;font-size:13px;}
  html.layout-m .cp-clients .c-m .wo-m-edit-actions .btn{height:34px;min-width:90px;font-size:13px;}
}

/* Quotes on desktop: the cards edit in place (pencil in the header), a row of the items opens that item */
@media (min-width:641px){
  .quote-bento .wo-m-field{display:flex;flex-direction:column;gap:4px;padding:5px 0;}
  .quote-bento .wo-m-field .k{font-size:12.5px;color:var(--ink-soft);}
  .quote-bento .wo-m-field input,.quote-bento .wo-m-field select{width:100%;height:36px;padding:0 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:inherit;font-size:13px;}
  .quote-bento .wo-m-field input:focus,.quote-bento .wo-m-field select:focus{border-color:var(--accent);outline:0;}
  .quote-bento .wo-m-field-duo{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;align-items:end;}
  .quote-bento .wo-m-check-row{display:flex;align-items:center;gap:10px;padding:8px 0;font-size:13.5px;}
  .quote-bento .wo-m-check-row input{width:18px;height:18px;margin:0;accent-color:var(--accent);}
  .quote-bento .wo-m-error{margin:10px 0 0;padding:9px 12px;border-radius:10px;background:var(--critical-wash,#fde2e6);color:var(--critical);font-size:13px;}
  .quote-bento .wo-m-error[hidden]{display:none;}
  .quote-bento .wo-m-edit-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:14px;}
  .quote-bento .wo-m-edit-actions .btn{min-width:100px;justify-content:center;}
  .quote-bento .wo-m-edit-actions .btn.ghost{background:var(--surface-sunken);border:0;color:var(--ink-soft);}
  .quote-bento .card.is-editing .richtext-editor{min-height:140px;}
  #quoteItemsCard .items-table tbody tr[data-item-index]{cursor:pointer;}
  #quoteItemsCard .items-table tbody tr[data-item-index]:hover td{background:var(--accent-wash);}
}

/* the Size choice of the avatar menu is for desktop only */
@media (max-width:640px){
  .user-menu .um-desktop-only{display:none !important;}
}

/* Reports (desktop): its own violet theme, like Quotes is green and the Control Panel blue */
@media (min-width:641px){
  html.layout-m.module-reports{
    --accent:#7c3aed;--accent-strong:#6d28d9;--accent-wash:#f1eaff;--accent-swatch:#7c3aed;--focus-ring:0 0 0 3px rgba(124,58,237,.35);
    --lm-grad:linear-gradient(100deg,#2e1065 0%,#5b21b6 55%,#8b5cf6 100%);
    --lm-chip:linear-gradient(135deg,#a78bfa,#7c3aed);
  }
  :root[data-theme="dark"].layout-m.module-reports{--accent-wash:#241748;--accent-strong:#b39bff;}
  :root.layout-m.module-reports .topbar .user-chip .avatar{color:#5b21b6;}
  html.layout-m.module-reports .shell .btn.primary{border:0;color:#fff;background:var(--lm-chip);}
}

/* Roles and permissions: the roles in a list on the left, the selected role's details on the right (desktop) */
.cp-roles-layout,.cp-roles-list,.cp-roles-detail{display:contents;}
@media (min-width:641px){
  html.layout-m .cp-roles-layout{display:grid;grid-template-columns:300px minmax(0,1fr);gap:18px;align-items:start;}
  html.layout-m .cp-roles-list{display:flex;flex-direction:column;gap:10px;}
  html.layout-m .cp-roles-detail{display:block;min-width:0;}
  html.layout-m .cp-roles-list .role-toolbar{order:0;margin:0;}
  html.layout-m .cp-roles-list .role-toolbar .btn{width:100%;justify-content:center;border:0;color:#fff;background:var(--lm-chip);border-radius:12px;padding:9px 14px;font-weight:600;}
  html.layout-m .cp-roles-list #newRoleForm{order:1;}
  html.layout-m .role-list-m{display:flex;flex-direction:column;gap:8px;order:2;margin:0;}
  html.layout-m [data-cp-section="roles"] .effective-picker{display:none;}
  html.layout-m .role-card{
    display:flex;align-items:center;gap:11px;width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:14px;background:var(--surface);
    box-shadow:var(--shadow-card);font:inherit;color:var(--ink);text-align:left;cursor:pointer;
  }
  html.layout-m .role-card:hover{border-color:var(--accent);}
  html.layout-m .role-card.is-active{border-color:var(--accent);background:var(--accent-wash);box-shadow:0 0 0 1px var(--accent);}
  html.layout-m .role-card.is-active .role-card-text b{color:var(--accent-strong);}
  html.layout-m .role-card.is-inactive{opacity:.6;}
  html.layout-m .role-card-icon{flex:none;width:34px;height:34px;border-radius:11px;display:flex;align-items:center;justify-content:center;background:var(--lm-chip);}
  html.layout-m .role-card-icon .icon{width:18px;height:18px;stroke:#fff;}
  html.layout-m .role-card-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
  html.layout-m .role-card-text b{font-size:14px;font-weight:600;}
  html.layout-m .role-card-text i{font-style:normal;font-size:12px;color:var(--ink-faint);}
  html.layout-m .role-card-chev .icon{width:14px;height:14px;color:var(--ink-faint);}
  html.layout-m .role-toggle-inactive{padding:8px;border:0;background:none;color:var(--accent-strong);font:inherit;font-size:13px;font-weight:600;cursor:pointer;}
  html.layout-m [data-cp-section="roles"] #accessNodeCard > header p{display:none;}
}

/* Workflow: its two tabs (Assignment and notifications / Items) and the plain-language summaries of the item rules */
.wf-tabs{display:flex;gap:6px;margin:4px 0 16px;flex-wrap:wrap;}
html.layout-m .wf-tabs .wo-tab,.wf-tabs .wo-tab{flex:0 0 auto;padding:9px 22px;}
[data-wf-panel="items"] .reset-panel-actions{margin-top:16px;}
.wf-summary{margin:6px 0 0;padding:8px 12px;border-radius:10px;background:var(--surface-sunken);color:var(--ink-soft);}
[data-wf-panel][hidden]{display:none;}
.wf-block input:disabled + *,.wf-notify:has(input:disabled){opacity:.55;}
@media (max-width:640px){
  body:has(.settings-canvas) .wf-tabs .wo-tab[aria-selected="true"]{background:linear-gradient(135deg,#5aa8ff,#1c6fe0);}
}

/* Workflow (desktop): the page is not one big card; each part is its own white card on the page background */
@media (min-width:641px){
  html.layout-m #workflowCard{background:transparent;border:0;box-shadow:none;padding:0;}
  html.layout-m #workflowCard > header{margin-bottom:14px;}
  html.layout-m #workflowCard > header h2{font-size:20px;}
  html.layout-m #workflowCard .wf-subtabs{margin-top:2px;}
  html.layout-m #workflowCard .wf-block,html.layout-m #workflowCard .wf-event{
    background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px 20px 18px;box-shadow:var(--shadow-card);margin:0 0 14px;
  }
  html.layout-m #workflowCard .wf-block h3{margin:0 0 6px;font-size:16px;font-weight:700;}
  html.layout-m #workflowCard .wf-section{margin:6px 0 0;}
  html.layout-m #workflowCard .wf-section > h3{margin:0 0 2px;font-size:16px;font-weight:700;}
  html.layout-m #workflowCard .wf-section > .note-text{margin:0 0 12px;}
  html.layout-m #workflowCard .wf-intro{margin:0 0 14px;}
  html.layout-m #workflowCard .wf-event-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px;}
  html.layout-m #workflowCard .wf-event-head h4{margin:0 0 2px;font-size:15px;}
  html.layout-m #workflowCard .wf-event-head .note-text{margin:0;}
  html.layout-m #workflowCard .wf-event-head .wf-notify{flex:none;font-weight:600;}
  html.layout-m #workflowCard .wf-groups{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
  html.layout-m #workflowCard .wf-group{padding:12px 14px;border-radius:14px;background:var(--surface-sunken);}
  html.layout-m #workflowCard .wf-group-title{display:block;margin-bottom:8px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);}
  html.layout-m #workflowCard .wf-group .role-flags{flex-direction:column;gap:6px;}
  html.layout-m #workflowCard .wf-summary{background:var(--surface-sunken);}
}

/* Needs More Info: the reply box in the yellow banner, the read-only log, and the short "Pending (NMI)" pill under the delivery status */
.missing-info-banner .mi-meta,.wo-m-missing .mi-meta{display:block;margin:1px 0 3px;font-size:12px;opacity:.8;}
.nmi-entry{padding:4px 0 8px;}
.nmi-entry + .nmi-entry{border-top:1px solid var(--line);padding-top:12px;}
.nmi-msg{margin:0 0 8px;padding:9px 14px;border-radius:12px;background:var(--surface-sunken);}
.nmi-msg.is-request{background:#fdf0d4;border-left:3px solid #e59a00;color:#3a2a00;}
.nmi-msg.is-response{background:var(--accent-wash);border-left:3px solid var(--accent);}
:root[data-theme="dark"] .nmi-msg.is-request{background:#3a2a0c;color:#f2c25b;border-left-color:#b87d10;}
.nmi-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--ink-faint);}
.nmi-msg.is-request .nmi-head{color:inherit;opacity:.8;}
.nmi-label{font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.nmi-msg p{margin:4px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;}
.nmi-none{font-size:13px;color:var(--ink-faint);font-style:italic;}
@media (min-width:641px){
  html.layout-m .order-list > .order-row .wo-pill-nmi{grid-column:3;grid-row:2;justify-self:end;align-self:center;}
}

/* the yellow banner opens the reply box when clicked; the box and the log show pictures */
.missing-info-banner.is-replyable,.wo-m-missing.is-replyable{cursor:pointer;}
.missing-info-banner.is-replyable:hover{filter:brightness(.97);}
.missing-info-banner.is-replyable:focus-visible,.wo-m-missing.is-replyable:focus-visible{outline:2px solid #e59a00;outline-offset:2px;}
.mi-hint{display:inline-block;margin-top:8px;font-size:13px;font-weight:700;text-decoration:underline;text-underline-offset:3px;}
.ot-reply-card{width:min(620px,94vw);}
.ot-reply-request{margin:0 0 12px;padding:9px 14px;border-radius:12px;background:#fdf0d4;border-left:3px solid #e59a00;color:#3a2a00;}
:root[data-theme="dark"] .ot-reply-request{background:#3a2a0c;color:#f2c25b;border-left-color:#b87d10;}
.ot-reply-request p{margin:4px 0 0;font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere;}
.ot-reply-editor{border-radius:var(--radius-s);min-height:130px;max-height:40vh;overflow-y:auto;}
.ot-reply-card .rt-photo-row{display:flex;gap:8px;margin-top:10px;}
.nmi-rich{margin-top:4px;font-size:14px;overflow-wrap:anywhere;}
.nmi-rich .rt-img-wrap{max-width:100%;}

/* Control Panel > Users: who is locked out, and the count on the Users option */
.locked-users-banner{margin:0 0 14px;padding:14px 18px;border:1px solid color-mix(in srgb,var(--critical) 45%,var(--line));border-radius:16px;background:var(--critical-wash);color:var(--critical);}
.locked-users-banner[hidden]{display:none;}
.lu-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px;}
.lu-head .icon{width:20px;height:20px;}
.lu-sub{flex-basis:100%;font-size:13px;opacity:.85;}
.lu-row{display:flex;align-items:center;gap:14px;padding:8px 0;border-top:1px solid color-mix(in srgb,var(--critical) 22%,transparent);}
.lu-name{flex:1;min-width:0;font-weight:600;overflow-wrap:anywhere;}
.lu-user{font-weight:400;opacity:.75;margin-left:6px;}
.lu-until{font-size:13px;white-space:nowrap;}
.cp-item-badge{flex:none;min-width:22px;height:22px;padding:0 7px;border-radius:999px;background:var(--critical);color:#fff;font-size:12px;font-weight:700;line-height:22px;text-align:center;}

/* Roles > Actions: one heading per document */
.role-actions-table .role-actions-group th{padding:14px 8px 6px;font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-strong);text-align:left;background:transparent;border-bottom:1px solid var(--line);}

/* Item dialog on desktop: wider and taller, Quantity and Unit share one row, then Description, Unit price and Files.
   Phones keep their own layout (the rules above), and the read-only item details window is not touched. */
@media (min-width:641px){
  #itemEditor .item-editor{max-width:760px;width:calc(100% - 48px);min-height:660px;padding:32px 36px;}
  #itemEditor .item-editor-body{gap:20px;margin-top:20px;}
  #itemEditor .item-editor .ie-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px;}
  #itemEditor .item-editor textarea{min-height:140px;}
  #itemEditor .ie-dropzone{padding:30px 20px 24px;}
  #itemEditor .item-editor-actions{margin-top:28px;}
}
#ieDelete{margin-right:auto;}

/* Roles and permissions: Permissions | Actions tabs, one card per form / document (desktop) */
.rp-tabs{margin:14px 0 12px;}
.rp-tabs[hidden]{display:none;}
.rp-cards{display:flex;flex-direction:column;gap:14px;}
@media (min-width:641px){
  html.layout-m .rp-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:10px 16px 12px;box-shadow:var(--shadow-card);margin:0;}
  html.layout-m .rp-card .wo-m-card-head{margin-bottom:4px;}
  html.layout-m .rp-card h3{margin:0;font-size:15px;font-weight:700;}
  html.layout-m .rp-card .effective-table{width:100%;}
  html.layout-m .rp-card .rp-form-row td{font-weight:600;}
}
/* the two tabs together are as wide as the Role name box above them (desktop) */
@media (min-width:641px){
  html.layout-m .rp-tabs{max-width:530px;margin-left:15px;}
  html.layout-m .rp-tabs .wo-tab{flex:1 1 0;justify-content:center;padding-left:0;padding-right:0;}
}

/* Users in the Control panel (desktop): the list on the left (search, filter, sort) and the selected user's information, like Clients */
@media (max-width:640px){
  #usersDesk{display:none !important;}
}
@media (min-width:641px){
  html.layout-m #usersCard{display:none !important;}
  html.layout-m .cp-item[href$="#permisos"]{display:none;}
  html.layout-m body[data-cp-section="usuarios"] .cp-sheet{overflow:hidden;display:flex;flex-direction:column;}
  html.layout-m .cp-sheet > .cp-users{flex:1;height:auto;min-height:0;margin-bottom:0;}
  html.layout-m .cp-users .rail-toolzone{padding:10px 10px 2px;gap:8px;}
  html.layout-m .cp-users .rail-search-field{padding:7px 10px;font-size:13px;}
  html.layout-m .cp-users .rail-toolbar .popover-wrap .icon-btn{width:36px;height:36px;border-radius:12px;}
  html.layout-m .cp-users .order-row.is-inactive{opacity:.6;}
  html.layout-m .cp-users .c-board .order-list > .order-row .order-main{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;min-width:0;}
  html.layout-m .cp-users .c-board .order-list > .order-row .v{display:block;font-size:12px;color:var(--ink-faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  html.layout-m .cp-users .wo-m-pdfbtn{border:0;cursor:pointer;font:inherit;}
  html.layout-m .cp-users .user-info-table{width:100%;}
  html.layout-m .cp-users .user-info-table th{width:150px;text-align:left;font-weight:400;font-size:12.5px;color:var(--ink-faint);background:transparent;}
  html.layout-m .cp-users .user-info-table th,html.layout-m .cp-users .user-info-table td{padding:8px 4px;border-bottom:1px solid var(--line-soft);font-size:13.5px;}
  html.layout-m .cp-users .wo-m-card .reset-panel-actions{margin-top:12px;}
  html.layout-m .cp-users #userDeskPanel .reset-panel{margin-top:12px;}
  html.layout-m .cp-users .c-m .wo-m-sheet{grid-template-columns:minmax(0,520px) minmax(0,1fr);align-items:start;}
  html.layout-m .cp-users #userEffective .effective-table{width:100%;font-size:12.5px;}
}
@media (min-width:641px){
  html.layout-m .cp-users .c-board .order-list > .order-row .order-main{width:100%;align-items:flex-start;}
  html.layout-m .cp-users .c-board .order-list > .order-row .order-main .order-ot,
  html.layout-m .cp-users .c-board .order-list > .order-row .order-main .v{text-align:left;align-self:flex-start;margin:0;width:100%;}
}

/* Effective permissions in plain words (Users, desktop): a summary, then the details behind a toggle */
.eff-roles{margin:0 0 10px;font-size:13px;}
.eff-k{font-size:11.5px;color:var(--ink-faint);margin-right:6px;}
.eff-summary{display:flex;flex-direction:column;}
.eff-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line-soft);flex-wrap:wrap;}
.eff-row b{font-size:13.5px;font-weight:600;}
.eff-levels{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end;}
.eff-chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;background:var(--surface-sunken);color:var(--ink-soft);border:1px solid var(--line);white-space:nowrap;}
.eff-chip.lvl-NONE{color:var(--ink-faint);font-weight:500;}
.eff-chip.lvl-READ_ONLY{color:var(--info,#5aa8ff);border-color:color-mix(in srgb,var(--info,#5aa8ff) 40%,var(--line));}
.eff-chip.lvl-EDITOR{color:var(--good,#34c37a);border-color:color-mix(in srgb,var(--good,#34c37a) 40%,var(--line));}
.eff-chip.lvl-FULL{color:var(--accent-strong);border-color:var(--accent);background:var(--accent-wash);}
.eff-via{font-size:12px;color:var(--ink-faint);}
.eff-off td{opacity:.7;}
.eff-details{margin-top:12px;}
.eff-details > summary{cursor:pointer;color:var(--accent-strong);font-size:13px;font-weight:600;list-style:none;}
.eff-details > summary::-webkit-details-marker{display:none;}
.eff-details .eff-hide{display:none;}
.eff-details[open] .eff-hide{display:inline;}
.eff-details[open] .eff-show{display:none;}
.eff-h{margin:14px 0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
.eff-card .effective-table{width:100%;font-size:12.5px;}
@media (min-width:641px){
  html.layout-m .cp-users #btnAddUserD{flex:1 1 0;min-width:0;justify-content:center;gap:6px;border:0;color:#fff;background:var(--lm-chip);border-radius:12px;padding:8px 12px;font-weight:600;font-size:13px;box-shadow:none;}
  html.layout-m body[data-cp-section="usuarios"] .settings-canvas > .editor-head #btnAddUser{display:none;}
}
@media (min-width:641px){
  html.layout-m .cp-users .rail-toolbar #btnAddUserD{order:0;flex:1 1 0;}
  html.layout-m .cp-users .rail-toolbar .popover-wrap{order:1;}
}

/* Control Panel > Document templates: the settings on the left, the PDF preview on the right */
.docs-top{display:flex;align-items:center;gap:10px;margin:0 0 12px;flex-wrap:wrap;}
.docs-top .wf-tabs{margin:0;}
.docs-top-spacer{flex:1;}
.docs-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start;}
.docs-preview-state{font-size:12px;color:var(--ink-faint);}
.docs-pdf{width:100%;height:78vh;overflow:auto;box-sizing:border-box;padding:8px;border:1px solid var(--line);border-radius:10px;background:var(--surface-sunken);}
.docs-pdf canvas{display:block;margin:0 auto 10px;background:#fff;box-shadow:0 4px 16px rgba(0,0,0,.35);}
.doc-field{margin:8px 0;}
.doc-field > label{display:block;font-size:12px;color:var(--ink-faint);margin-bottom:3px;}
.doc-field input[type=text],.doc-field select,.doc-entry input[type=text],.doc-add select{width:100%;min-width:0;}
.doc-colors{display:flex;gap:18px;}
.doc-colors > span{display:flex;flex-direction:column;gap:3px;}
.doc-colors input[type=color]{width:46px;height:30px;padding:0;border:1px solid var(--line);border-radius:8px;background:none;}
.doc-banner-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.doc-checks{display:flex;flex-direction:column;gap:6px;margin-top:6px;}
.doc-check{display:flex;align-items:center;gap:8px;font-size:13.5px;cursor:pointer;}
.doc-entry{display:grid;grid-template-columns:auto minmax(90px,.9fr) minmax(0,1.1fr) auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--line-soft);}
.doc-entry.is-custom{grid-template-columns:auto auto minmax(0,.8fr) minmax(0,1.2fr) auto;}
.doc-cols .doc-entry{grid-template-columns:minmax(120px,.9fr) minmax(0,1.1fr);}
.doc-name{font-size:13px;}
.doc-move{display:flex;gap:4px;}
.doc-move .icon-btn,.doc-entry > .icon-btn{width:32px;height:32px;flex:none;}
.doc-move .icon-btn:first-child .icon{transform:rotate(180deg);}
.doc-move .icon-btn[disabled]{opacity:.3;cursor:default;}
.doc-move .icon,.doc-entry > .icon-btn .icon{width:15px;height:15px;}
.doc-add{display:flex;gap:8px;margin-top:8px;align-items:center;}
.doc-add .btn{white-space:nowrap;}
#docEditor{display:flex;flex-direction:column;gap:12px;}
@media (min-width:1200px){
  /* the settings scroll on their own, as a group, while the preview stays in view */
  html.layout-m body[data-cp-section="documentos"] .cp-sheet{overflow:hidden;}
  html.layout-m #documentsCard{height:100%;margin-bottom:0;display:flex;flex-direction:column;min-height:0;}
  html.layout-m .docs-layout{grid-template-columns:minmax(360px,460px) minmax(0,1fr);flex:1;min-height:0;}
  html.layout-m #docEditor{height:100%;min-height:0;overflow-y:auto;padding:0 6px 4px 0;}
  html.layout-m .docs-preview{height:100%;min-height:0;}
  html.layout-m .docs-preview > .rp-card{height:100%;display:flex;flex-direction:column;box-sizing:border-box;}
  html.layout-m .docs-pdf{flex:1;min-height:0;height:auto;}
}

/* Templates menu on the quote and work order forms (desktop) */
.tpl-menu{width:300px;gap:6px;}
.tpl-list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto;}
.tpl-item{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:8px 10px;border:0;border-radius:10px;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;}
.tpl-item:hover{background:var(--surface-sunken);}
.tpl-item span{font-size:12px;color:var(--ink-faint);}
.tpl-actions{border-top:1px solid var(--line-soft);padding-top:6px;display:flex;flex-direction:column;}
.tpl-wrap[hidden]{display:none;}
.tpl-card{width:min(520px,calc(100% - 32px));}
.tpl-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line-soft);}
.tpl-row input{width:100%;min-width:0;}
.doc-entry.has-format{grid-template-columns:auto minmax(60px,.6fr) minmax(0,.9fr) minmax(128px,1fr) auto;}
.doc-format{min-width:0;width:100%;}
.doc-banner-row .btn{height:34px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;}

/* Several pictures per item: one group, three per row, centered (desktop); on a phone the first one with a "+" that opens them all */
.pic-group{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;width:144px;max-width:100%;margin:0 auto;}
.pic-group .doc-tile-wrap{width:44px;height:44px;}
.pic-group.is-phone{display:flex;flex-wrap:nowrap;width:auto;align-items:center;justify-content:center;gap:6px;}
.pic-group.is-phone .doc-tile-wrap{width:36px;height:36px;}
.pic-more{flex:none;min-width:36px;height:36px;padding:0 6px;border-radius:var(--radius-s);border:1px solid var(--accent);background:var(--accent-wash);color:var(--accent-strong);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;}
.pic-group + .doc-tiles,.pic-group + .photo-actions{margin-top:6px;}
@media (min-width:641px){.items-table .col-photo{min-width:168px;}}
.id-pics{display:flex;flex-direction:column;gap:8px;}
.id-pics .id-photo{max-width:100%;}
.pic-gallery-card{width:min(520px,calc(100% - 24px));max-height:90vh;overflow:auto;padding:40px 12px 12px;}
.pic-gallery-list{display:flex;flex-direction:column;gap:10px;}
.pic-gallery-list img{width:100%;height:auto;border-radius:var(--radius-s);display:block;}

/* the item dialog lists what the line still needs and stays open */
.ie-error{list-style:none;margin:10px 0 0;padding:10px 12px;border:1px solid var(--critical);border-radius:var(--radius-s);background:var(--critical-wash);color:var(--critical);font-size:13px;font-weight:600;display:flex;flex-direction:column;gap:4px;}
.ie-error[hidden]{display:none;}
.ie-error li{display:flex;align-items:center;gap:6px;}
.ie-error .icon{width:14px;height:14px;flex:none;}
.field.has-error textarea,.field.has-error select{border-color:var(--critical);background:var(--critical-wash);}

/* Walk-In: a checkbox with its own label to the left of the Client box */
.field-client-walkin{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;}
.field-client-walkin > .walkin-col{display:flex;flex-direction:column;align-items:center;gap:4px;}
.field-client-walkin > .walkin-col > label{font-size:12px;color:var(--ink-faint);white-space:nowrap;margin:0;}
.field-client-walkin > .client-col{min-width:0;}
.walkin-box{appearance:none;-webkit-appearance:none;width:40px;height:40px;margin:0;border:1px solid var(--line);border-radius:10px;background:var(--surface-sunken);cursor:pointer;position:relative;flex:none;}
.walkin-box:hover{border-color:var(--accent);}
.walkin-box:checked{background:var(--accent);border-color:var(--accent);}
.walkin-box:checked::after{content:"";position:absolute;left:13px;top:7px;width:10px;height:18px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg);}
.walkin-box:disabled{opacity:.5;cursor:default;}
.walkin-box:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.field-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;align-items:start;}
.field-pair > .field{min-width:0;}

/* the Walk-In box takes only its own width; the Client column takes the rest, in every layout */
.field-client-walkin > .walkin-col{align-self:start;}
.field-client-walkin > .client-col > label,.field-client-walkin > .client-col > .k{display:block;}

/* the Walk-In box inside the stacked "wo-m" fields (quote and work order Edit, phone screens): those fields give every input the full width of a text box */
.wo-m-field.field-client-walkin{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:start;padding:8px 0;}
.wo-m-field.field-client-walkin .walkin-col{display:flex;flex-direction:column;align-items:center;gap:4px;}
.wo-m-field.field-client-walkin .walkin-col > label{font-size:12px;color:var(--ink-faint);white-space:nowrap;margin:0;}
.wo-m-field.field-client-walkin .client-col{display:flex;flex-direction:column;gap:4px;min-width:0;}
.wo-m-field.field-client-walkin input.walkin-box{appearance:none !important;-webkit-appearance:none !important;width:40px !important;height:40px !important;padding:0 !important;margin:0 !important;border:1px solid var(--line) !important;border-radius:10px !important;background:var(--surface-sunken) !important;flex:none;}
.wo-m-field.field-client-walkin input.walkin-box:checked{background:var(--accent) !important;border-color:var(--accent) !important;}
.pb-net{margin-top:14px;}

/* the pencil and the remove button of an item row sit side by side */
@media (min-width:641px){
  #itemsTable td.col-remove{white-space:nowrap;text-align:right;}
  #itemsTable td.col-remove .icon-btn{display:inline-flex;vertical-align:middle;margin:0 0 0 4px;}
}

/* the lines of a new quote or work order (read-only rows with a pencil): the details are aligned to the top, like the lines of a saved quote or work order */
@media (min-width:641px){
  #itemsTable tbody tr.item-row-open > td{vertical-align:top !important;line-height:1.35 !important;padding-top:8px;padding-bottom:8px;}
  #itemsTable tbody tr.item-row-open > td .item-sub{display:block;line-height:1.3;}
}
@media (min-width:641px){
  #itemsTable tbody tr.item-row-open .item-delivered-checkbox{margin:0 !important;vertical-align:top;}
}

/* total under the lines of a new work order: same look as the Grand total row of a saved one */
.items-total-line{display:flex;justify-content:flex-end;align-items:baseline;gap:14px;padding:9px 10px;}
.items-total-line .items-total-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-faint);}
.items-total-line .items-total-value{font-size:15px;font-weight:800;white-space:nowrap;}
.items-total-line[hidden]{display:none;}

/* item window: quantity, unit and unit price share one row (a phone puts the price on its own row below) */
@media (min-width:641px){
  #itemEditor .item-editor .ie-top{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:20px;}
  #itemEditor .item-editor .ie-top .field{margin-bottom:0;min-width:0;}
}
@media (max-width:640px){
  .item-editor .ie-top [data-f="unitPrice"]{grid-column:1 / -1;}
}

/* Terms & conditions editor (System settings) */
.terms-editor{min-height:260px;max-height:520px;overflow:auto;}
.rt-select{width:auto !important;min-width:0;height:auto;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:6px;padding:5px 8px;font-size:13px;}
.rt-color{display:inline-flex;align-items:center;gap:4px;cursor:pointer;font-weight:800;font-size:14px;padding:2px 6px;border-radius:6px;}
.rt-color:hover{background:var(--surface);}
.rt-color input{width:22px;height:22px;padding:0;border:none;background:none;cursor:pointer;}
.richtext-toolbar{flex-wrap:wrap;}

/* =====================================================================
   Shared sizes (desktop only; the phone, max-width:640px, has its own sizes)
   One height for every button (40px, 32px with .sm), one radius for fields,
   one heading scale (page 23px, card 16px, subsection 14px) and a plain
   checkbox for Walk-In. The login and install pages keep their larger buttons.
   ===================================================================== */
@media (min-width:641px){
  :root{--btn-h:40px;--btn-h-sm:32px;--btn-radius:10px;--field-radius:8px;}

  html .btn:not(.auth-card .btn):not(.install-card .btn):not(.install-block .btn){
    box-sizing:border-box !important;min-height:var(--btn-h) !important;padding:6px 16px !important;
    border-radius:var(--btn-radius) !important;font-size:13.5px !important;line-height:1.2 !important;justify-content:center;
  }
  html .btn.sm:not(.auth-card .btn):not(.install-card .btn):not(.install-block .btn){
    min-height:var(--btn-h-sm) !important;padding:4px 12px !important;font-size:12.5px !important;
  }
  /* the main "New ..." button of a list is a call to action: full size */
  html .rail-toolbar .btn.sm.primary:not(.auth-card .btn):not(.install-card .btn):not(.install-block .btn){min-height:var(--btn-h) !important;padding:6px 16px !important;font-size:13.5px !important;}
  /* disabled: a flat grey, not a faded accent colour (the faded one is below the contrast minimum) */
  html .btn.primary:disabled{opacity:1 !important;background:var(--surface-sunken) !important;color:var(--ink-faint) !important;border-color:var(--line) !important;box-shadow:none !important;background-image:none !important;}

  /* fields */
  html :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),select,textarea,.combobox-trigger):not(.auth-card *):not(.install-card *){
    border-radius:var(--field-radius) !important;font-size:13.5px;
  }

  /* headings: page 23px, card 16px, subsection 14px */
  .card > header h2,
  html.layout-compact :is(.ot-bento,.quote-bento) > .card > header h2,
  html.layout-m #workflowCard > header h2,
  html.layout-m #lookupsCard > header h2{font-size:16px;}
  .settings-canvas .card h3,.role-subhead,
  .wf-block h3,
  html.layout-m #workflowCard .wf-block h3,
  html.layout-m #lookupsCard .wf-block h3,
  html.layout-m #workflowCard .wf-section > h3{font-size:14px;}

  /* Walk-In: an ordinary checkbox with its label beside it, under the Client box */
  .field.field-client-walkin,.wo-m-field.field-client-walkin,
  html.layout-compact :is(.ot-bento,.quote-bento) #field-cliente.field-client-walkin{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;}
  :is(.field,.wo-m-field).field-client-walkin > .client-col{align-self:stretch;}
  :is(.field,.wo-m-field).field-client-walkin > .client-col{order:1;}
  :is(.field,.wo-m-field).field-client-walkin > .walkin-col{order:2;flex-direction:row-reverse;justify-content:flex-end;align-items:center;gap:8px;margin-top:8px;align-self:auto;}
  :is(.field,.wo-m-field).field-client-walkin > .walkin-col > label{font-size:13px !important;color:var(--ink) !important;cursor:pointer;}
  :is(.field,.wo-m-field).field-client-walkin input.walkin-box{
    appearance:auto !important;-webkit-appearance:auto !important;width:16px !important;height:16px !important;margin:0 !important;padding:0 !important;
    border-radius:4px !important;accent-color:var(--accent);background:none !important;border:0 !important;
  }
  :is(.field,.wo-m-field).field-client-walkin input.walkin-box:checked{background:none !important;}
  :is(.field,.wo-m-field).field-client-walkin input.walkin-box:checked::after{content:none;}

  /* Control Panel: one Save bar for the whole section, at the bottom of the page (over the foot of the scrolling area) */
  .cp-savebar{grid-column:2;grid-row:2;align-self:end;position:relative;z-index:6;display:flex;align-items:center;gap:10px;margin:0 12px 12px 0;padding:12px 16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-pop);}
  .cp-savebar[hidden]{display:none;}
  .cp-savebar-text{margin-right:auto;font-size:13px;color:var(--ink-soft);}
  .cp-savebar.is-saving .btn{opacity:.6;pointer-events:none;}
  .cp-savebar-managed{display:none !important;}
  html.layout-m body:has(#cpSaveBar:not([hidden])) .cp-sheet{padding-bottom:88px;}

  /* client dialog: the title and the buttons stay in view, only the fields scroll */
  #clientModal .modal-card{display:flex;flex-direction:column;overflow:hidden;padding:0;}
  #clientModal .modal-card > h2{margin:0;padding:26px 56px 0 28px;}
  #clientModal .error-banner{margin:12px 28px 0;}
  #clientModal .item-editor-body{flex:1 1 auto;min-height:0;overflow-y:auto;margin-top:0;padding:16px 28px 18px;}
  #clientModal .item-editor-actions{flex:none;margin-top:0;padding:14px 28px;border-top:1px solid var(--line);background:var(--surface);}

  /* Roles and permissions: the access selects keep a readable width; a narrow window scrolls the table sideways */
  html.layout-m .access-node-table{table-layout:fixed;min-width:600px;}
  html.layout-m .access-node-table th:nth-child(n+2),html.layout-m .access-node-table td:nth-child(n+2){width:180px;}
  html.layout-m .rp-card:has(.access-node-table){overflow-x:auto;}

  /* Reports table: keeps its columns and scrolls sideways when the window is narrow (edge shadows show there is more);
     the Work Order number never wraps and stays in view while scrolling */
  .queue-table-scroll{
    overflow-x:auto;
    background:
      linear-gradient(to right,var(--surface) 30%,transparent) left center,
      linear-gradient(to left,var(--surface) 30%,transparent) right center,
      radial-gradient(farthest-side at 0 50%,rgba(0,0,0,.22),transparent) left center,
      radial-gradient(farthest-side at 100% 50%,rgba(0,0,0,.22),transparent) right center;
    background-repeat:no-repeat;background-size:36px 100%,36px 100%,12px 100%,12px 100%;
    background-attachment:local,local,scroll,scroll;
  }
  .queue-table-scroll{scroll-padding-left:130px;}
  table.queue-table{min-width:980px;}
  .queue-ot{white-space:nowrap;}
  table.queue-table thead th:first-child,table.queue-table tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--surface);}
  table.queue-table thead th:first-child,table.queue-table tbody td:first-child{box-shadow:1px 0 0 var(--line);}
  table.queue-table thead th:first-child{background:var(--surface-sunken);z-index:3;}
  /* a closed report list takes no room and no tab stops; the open button keeps clear of the page title */
  .report-rail.collapsed{visibility:hidden;}
  @media (max-width:980px){.report-rail.collapsed{height:0;min-height:0;}}
  .report-rail.collapsed ~ .report-viewer{padding-left:36px;}
  table.queue-table tbody tr:hover td:first-child{background:var(--bgLight2);}
}
@media (max-width:640px){.cp-savebar{display:none !important;}}

/* Control Panel > Lookup Tables (assets/lookup-tables.js): the same look as Workflow, its tabs and its blocks */
.lk-table-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;}
.lk-table-head h3{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.lk-table > .note-text{margin:0 0 10px;}
/* desktop: no panel around the section; the title on the page background, the list of tables on the left and the
   selected table in its own white card */
@media (min-width:641px){
  html.layout-m #lookupsCard{background:transparent;border:0;box-shadow:none;padding:0;}
  html.layout-m #lookupsCard > header{margin-bottom:14px;}
  html.layout-m #lookupsCard > header h2{font-size:20px;}
  html.layout-m #lookupsCard .wf-block{
    background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:14px 18px 10px;box-shadow:var(--shadow-card);margin:0 0 12px;
  }
  /* the card is as wide as its table (up to the space there is), not stretched to the edge of the page */
  html.layout-m #lookupsCard .lk-table{width:fit-content;max-width:100%;}
}
.lk-table-tools{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.lk-table-tools input[type="search"]{min-width:0;width:200px;max-width:100%;}
.lk-scroll{overflow-x:auto;max-width:100%;}
/* the list of tables on the left uses the cards of Roles and permissions; on phones it is the first view */
.lk-list{display:flex;flex-direction:column;gap:8px;}
.lk-back{display:none;}
/* Keep desktop lookup/role navigation and details inside the available viewport,
   just like the Users rail. Phones retain their list-to-detail page flow. */
@media (min-width:641px){
  html.layout-m body:is([data-cp-section="roles"],[data-cp-section="lookups"]) .cp-sheet{
    display:flex;flex-direction:column;overflow:hidden;padding-bottom:0;
  }
  html.layout-m :is(#accessNodeCard,#lookupsCard){
    display:flex;flex-direction:column;flex:1;min-height:0;margin-bottom:0;
  }
  html.layout-m #accessNodeCard{background:transparent;border:0;box-shadow:none;padding:0;}
  /* Access and roles (assets/access-admin.js): the tab bar, then the open tab's panel, which takes the rest */
  html.layout-m #accessAdminRoot{display:flex;flex-direction:column;flex:1;min-height:0;}
  html.layout-m #accessAdminRoot > :is(.aa-tabs,#aaBanner){flex:none;}
  html.layout-m #accessAdminRoot > .aa-panel:not([hidden]){display:flex;flex-direction:column;flex:1;min-height:0;}
  html.layout-m :is(#accessNodeCard,#lookupsCard) > header{flex:none;}
  html.layout-m :is(#accessNodeCard,#lookupsCard) .cp-roles-layout{
    flex:1;min-height:0;grid-template-rows:minmax(0,1fr);align-items:stretch;
  }
  html.layout-m :is(#accessNodeCard,#lookupsCard) .cp-roles-list{
    min-height:0;overflow-y:auto;padding:12px;background:var(--surface);
    border:1px solid var(--line);border-radius:22px;
    scrollbar-gutter:stable;overscroll-behavior-y:contain;
  }
  html.layout-m :is(#accessNodeCard,#lookupsCard) .role-card{flex-shrink:0;}
  html.layout-m :is(#accessNodeCard,#lookupsCard) .role-card.is-active{
    box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent),
               0 0 14px 2px color-mix(in srgb,var(--accent) 40%,transparent);
  }
  html.layout-m #accessNodeCard .cp-roles-detail{
    min-height:0;overflow:auto;padding:2px 8px 16px 2px;overscroll-behavior:contain;
  }
  html.layout-m #lookupsBody{display:flex;min-height:0;overflow:hidden;align-items:flex-start;}
  html.layout-m #lookupsCard .lk-table{
    display:flex;flex-direction:column;max-height:100%;min-height:0;margin-bottom:0;
  }
  html.layout-m #lookupsCard .lk-table-head{flex:none;}
  html.layout-m #lookupsCard .lk-scroll{min-height:0;overflow:auto;overscroll-behavior:contain;}
  html.layout-m #lookupsCard .lk-items thead{position:sticky;top:0;z-index:1;background:var(--surface);}
}
@media (max-width:640px){
  body[data-cp-section="lookups"].cp-lk-open .lk-list,
  body[data-cp-section="lookups"]:not(.cp-lk-open) #lookupsBody{display:none;}
  body[data-cp-section="lookups"].cp-lk-open .lk-back{
    display:inline-flex;align-items:center;gap:6px;margin:0 0 10px;padding:6px 10px 6px 4px;border:0;border-radius:10px;background:none;
    color:#1c6fe0;font:inherit;font-size:15px;font-weight:600;cursor:pointer;
  }
  .lk-back .icon{width:20px;height:20px;stroke:#1c6fe0;}
}
/* compact rows and columns only as wide as their content: one line per item, the table scrolls when it does not fit */
.lk-items{width:100%;font-size:12.5px;}
.lk-items th,.lk-items td{padding:4px 10px;vertical-align:middle;white-space:nowrap;}
.lk-items th{font-size:11.5px;white-space:nowrap;}
.lk-items tbody tr:last-child td{border-bottom:0;}
.lk-items tr.is-archived td{color:var(--ink-faint);}
.lk-items tr.is-archived .lk-tr{text-decoration:line-through;}
.lk-items .icon-btn.sm{width:24px;height:24px;min-width:0;padding:0;}
.lk-items .icon-btn.sm svg{width:14px;height:14px;}
.lk-order,.lk-lang,.lk-status,.lk-edit{white-space:nowrap;}
.lk-items .lk-tr{min-width:104px;}
.lk-order{padding-right:0 !important;}
.lk-items .lk-grip{width:32px;height:32px;border-color:transparent;background:transparent;cursor:grab;touch-action:none;user-select:none;}
.lk-items .lk-grip:hover:not(:disabled){background:var(--accent-wash);color:var(--accent-strong);}
.lk-items .lk-grip:active{cursor:grabbing;}
.lk-items .lk-grip:disabled{cursor:default;opacity:.35;}
.lk-items tr.lk-dragging{background:var(--accent-wash);outline:1px solid var(--accent);outline-offset:-1px;}
.lk-items tr.lk-dragging > td{opacity:.25;}
.lk-drag-preview{position:fixed;z-index:10000;pointer-events:none;table-layout:fixed;margin:0;background:var(--surface);color:var(--ink);border:1px solid var(--accent);border-radius:8px;box-shadow:0 8px 24px color-mix(in srgb,var(--accent) 25%,transparent);overflow:hidden;}
.lk-drag-preview td{border-bottom:0;}
.lk-lang abbr,.lk-items th abbr{text-decoration:none;}
.lk-status .badge{padding:2px 7px;font-size:11px;}
.lk-editor{max-width:640px;}
.lk-langs{flex-wrap:wrap;}
.lk-langs .field{min-width:130px;}
@media (max-width:640px){
  .lk-table-tools{width:100%;}
  .lk-table-tools input[type="search"]{flex:1;width:auto;}
}

/* Control Panel > Access and roles (assets/access-admin.js) */
.aa-tabs{margin-bottom:12px;}
/* Every phrase here is its own <span> (translated text next to customer names): keep them on the text baseline, or the
   global vertical-align:sub drops the words below the separators and colons between them. */
#accessAdminRoot :is(span,b,i,strong,em,small,a),.aa-review :is(span,b,i,strong,em,small,a){vertical-align:baseline;}
/* a card's description, then its first field: the same gap as between fields */
#accessAdminRoot :is(.rp-card,.aa-check) > :is(p.field-hint,p.note-text) + *{margin-top:10px;}
.aa-search{margin-bottom:8px;}
.aa-group-head{display:grid;gap:8px;margin-bottom:12px;}
.aa-status{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;}
.aa-pane-head{display:grid;gap:6px;margin:10px 0;}
.aa-access-table select,.aa-exceptions select{min-width:120px;}
.aa-fold{background:none;border:0;padding:0 4px 0 0;cursor:pointer;color:var(--ink-faint);vertical-align:middle;}
.aa-fold[aria-expanded="true"] .icon{transform:rotate(90deg);}
.aa-action{padding:10px 0;border-top:1px solid var(--line);}
.aa-action:first-of-type{border-top:0;}
.aa-action-head{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;margin-bottom:6px;}
.aa-grants{display:grid;gap:6px;}
.aa-grant{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.aa-states summary{cursor:pointer;color:var(--ink-faint);font-size:13px;}
.aa-state-list{display:flex;flex-wrap:wrap;gap:4px 12px;padding:6px 0;}
.aa-types{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:8px;}
.aa-members td:first-child,.aa-members th:first-child{width:32px;}
.aa-exceptions td{vertical-align:middle;}
.aa-exceptions .eff-chip{margin-right:6px;}
.aa-personal.is-set,.aa-personal-action.is-set{border-color:var(--warning);font-weight:600;}
.aa-person-head h3{margin:0 0 6px;}
#field-workOrderType select{max-width:320px;}
@media (max-width:640px){
  .aa-access-table select,.aa-exceptions select{min-width:0;width:100%;}
  .aa-grant select{flex:1 1 140px;}
}

/* Access administration uses the same quiet scrolling and detail sheets as Clients / Users. */
#accessAdminRoot .aa-list{scrollbar-width:none;scrollbar-gutter:auto;}
#accessAdminRoot .aa-list::-webkit-scrollbar{display:none;width:0;height:0;}
#accessAdminRoot .aa-cards > .role-card{content-visibility:auto;contain-intrinsic-size:auto 66px;}
#accessAdminRoot .aa-detail > .rp-card{margin-bottom:14px;}
#accessAdminRoot .aa-group-head{padding:16px;gap:12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);}
#accessAdminRoot .aa-group-head .wo-m-card-head{margin-bottom:0;}
#accessAdminRoot .aa-pane.rp-card{padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);}
#accessAdminRoot .aa-person-head{padding:12px 4px;}
#accessAdminRoot .aa-grant select{max-width:100%;}
.q2w-multiselect .combobox-list li{display:flex;align-items:center;gap:9px;}
.q2w-multiselect .multi-check{width:18px;height:18px;flex:none;display:grid;place-items:center;border:1px solid var(--line);border-radius:4px;}
.q2w-multiselect [aria-selected="true"] .multi-check{background:var(--accent);color:#fff;border-color:var(--accent);}
.q2w-multiselect .multi-check .icon{width:14px;height:14px;}
.q2w-confirm{z-index:10000;}
.q2w-confirm .modal-card{max-width:480px;}
.q2w-confirm #q2wConfirmMessage{white-space:pre-wrap;overflow-wrap:anywhere;}
.modal-head{display:flex;align-items:center;justify-content:space-between;gap:16px;}
@media(max-width:640px){#accessAdminRoot .aa-layout{display:flex;flex-direction:column;gap:14px;}#accessAdminRoot .aa-detail,#accessAdminRoot .aa-list{display:block;min-width:0;}#accessAdminRoot .aa-detail .effective-table{table-layout:fixed;width:100%;}#accessAdminRoot .aa-detail .effective-table td{overflow-wrap:anywhere;}.q2w-multiselect .combobox-search input{font-size:16px;}}
/* Options use the same filled highlight for keyboard focus and pointer hover. */
.combobox-list li[role="option"]:focus{outline:none;background:var(--accent-wash);box-shadow:none;}

#accessAdminRoot .aa-back{display:none;}
@media(max-width:640px){
  #accessAdminRoot .aa-panel:not(.aa-show-detail) .aa-detail{display:none;}
  #accessAdminRoot .aa-panel.aa-show-detail .aa-list{display:none;}
  #accessAdminRoot .aa-back{display:inline-flex;margin-bottom:12px;}
}

/* Access and roles, redesigned (assets/access-admin.js; docs/plans/access-and-roles-redesign-spec.md). Reuses the
   Control Panel list / detail (cp-roles-layout, role-card), cards (wo-m-card rp-card), chips (eff-chip) and badges.
   New here: the five concept tags, the draft bar, the inline-or-sheet editors (.aa-ed), the review dialog. */
:root{--aa-personal:#7a2c8f;--aa-personal-wash:#f1def6;}
:root[data-theme="dark"]{--aa-personal:#d8a6ef;--aa-personal-wash:#2f1d3a;}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--aa-personal:#d8a6ef;--aa-personal-wash:#2f1d3a;}}
.aa-nm{font-weight:inherit;}
.aa-tag{display:inline-flex;align-items:center;padding:2px 8px;border-radius:6px;font-size:11px;font-weight:700;letter-spacing:.03em;white-space:nowrap;}
.aa-tag-elig{background:var(--good-wash);color:var(--good);}
.aa-tag-assign{background:var(--warning-wash);color:var(--warning);}
.aa-tag-allow{background:var(--info-wash);color:var(--info);}
.aa-tag-personal{background:var(--aa-personal-wash);color:var(--aa-personal);}
.aa-tag-life{background:var(--neutral-wash);color:var(--neutral);}
.aa-tag-sim{background:var(--surface-sunken);color:var(--ink-faint);border:1px dashed var(--ink-faint);}
.aa-how{display:grid;gap:10px;margin-bottom:12px;}
.aa-how-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;}
.aa-concepts{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:10px;}
.aa-concept{padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);}
.aa-concept h4,.aa-rules h4{margin:8px 0 4px;font-size:14.5px;}
.aa-rules ol{margin:6px 0 0;padding-left:20px;display:grid;gap:6px;font-size:13.5px;line-height:1.5;color:var(--ink-soft);}
.aa-draftbar{position:sticky;top:0;z-index:7;display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;background:var(--surface);border:1px solid var(--warning);border-radius:12px;box-shadow:var(--shadow-pop);}
.aa-draftbar-text{margin-right:auto;font-size:13px;color:var(--ink-soft);}
.aa-draftbar-text b{color:var(--warning);}
.aa-changed{outline:2px dashed var(--warning);outline-offset:2px;}
.aa-changed-text{color:var(--warning);}
.aa-warn{color:var(--warning);}
.aa-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:200;padding:10px 16px;border-radius:12px;background:var(--ink);color:var(--paper);font-size:13.5px;font-weight:600;box-shadow:var(--shadow-pop);max-width:calc(100vw - 32px);}
.aa-initials{background:linear-gradient(135deg,#7c8cff,#4552a6);color:#fff;font-size:13px;font-weight:700;}
.aa-person-head{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;}
.aa-person-title{flex:1 1 260px;min-width:0;}
.aa-person-title h3{margin:0 0 2px;font-size:19px;}
.aa-avatar{flex:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;background:linear-gradient(135deg,#7c8cff,#4552a6);}
.aa-cards3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:14px;}
#accessAdminRoot .aa-cards3 > .rp-card{margin-bottom:0;}
#accessAdminRoot .aa-detail .rp-card{padding:16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);margin-bottom:14px;}
#accessAdminRoot .aa-detail .rp-card h4{margin:14px 0 6px;font-size:13.5px;color:var(--ink-soft);}
.aa-chips{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px;}
.aa-fieldset{border:0;padding:0;margin:8px 0 0;min-width:0;}
.aa-rows{list-style:none;margin:8px 0;padding:0;display:grid;gap:8px;}
.aa-rows.aa-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
.aa-row{display:grid;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-sunken);min-width:0;}
.aa-row-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 12px;}
.aa-row-line{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;}
.aa-row-line .link-btn{margin-left:auto;}
.aa-src-row{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;}
.aa-grant-row{padding:8px 10px;border-radius:10px;background:var(--surface);border:1px solid var(--line-soft);}
.aa-states{border:0;padding:0;margin:4px 0;min-width:0;}
.aa-states .aa-state-list{display:flex;flex-wrap:wrap;gap:0 4px;}
.aa-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 12px;align-items:end;}
.aa-exc-form{display:grid;gap:4px;margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-sunken);}
.aa-exc-form h4{margin:0 0 6px;}
.aa-new{padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.aa-eff.is-stale,.aa-verdict.is-stale{opacity:.6;}
.aa-eff-table th[scope="row"],.aa-grid-table th[scope="row"]{padding-left:calc(10px + var(--aa-depth,0) * 18px);font-weight:600;color:var(--ink);}
.aa-eff-table .eff-via{display:block;margin-top:3px;}
.aa-eff-table .link-btn{margin-left:6px;font-size:12px;}
.aa-why{margin-top:6px;padding:8px 10px;border-radius:8px;background:var(--surface-sunken);font-weight:400;font-size:12.5px;line-height:1.5;color:var(--ink-soft);}
.aa-why ul{margin:2px 0 6px;padding-left:18px;}
.aa-grid-table select{min-width:150px;max-width:100%;}
.aa-check{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:16px;align-items:start;}
.aa-check-form .field{margin-bottom:10px;}
.aa-verdict{border-width:2px !important;}
.aa-verdict h3{margin:6px 0 4px;font-size:20px;}
.aa-verdict-yes{border-color:var(--good) !important;}
.aa-verdict-no{border-color:var(--critical) !important;}
.aa-verdict-ne{border-color:var(--warning) !important;}
.aa-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;}
.aa-step{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface);}
.aa-step > div{flex:1;min-width:0;}
.aa-step-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;}
.aa-step .note-text{margin-top:4px;}
.aa-mark{flex:none;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;}
.aa-mark-yes{background:var(--good);color:#fff;}
.aa-mark-no{background:var(--critical);color:#fff;}
.aa-mark-na{background:var(--surface-sunken);color:var(--ink-faint);}
.aa-mark-ne{background:var(--warning-wash);color:var(--warning);border:1px dashed var(--warning);}
.aa-lines{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:13.5px;line-height:1.45;}
.aa-impact-plus b{color:var(--good);}
.aa-impact-minus b{color:var(--critical);}
.aa-impact-chg b{color:var(--warning);}
/* an editor: inline on a desktop; on a phone a summary button that opens it as a full-screen sheet */
.aa-ed-open,.aa-ed-head{display:none;}
/* the review: a wide dialog on a desktop, a full-screen sheet on a phone */
.aa-review-overlay{align-items:flex-start;overflow-y:auto;}
.modal-card.aa-review{max-width:860px;padding:0;display:flex;flex-direction:column;max-height:calc(100vh - 48px);overflow:hidden;}
.aa-review-head{padding:20px 24px 8px;}
.aa-review-head h2{margin:0;}
.aa-review-body{padding:0 24px 12px;overflow-y:auto;display:grid;gap:16px;}
.aa-review-body h3{margin:0;font-size:15px;display:flex;align-items:center;gap:6px;}
.aa-review-actions{padding:12px 24px 18px;border-top:1px solid var(--line-soft);justify-content:flex-end;flex-wrap:wrap;}
.aa-person-impact{margin-top:8px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-sunken);}
.aa-cannot{padding:12px;border:1px solid var(--critical);border-radius:12px;background:var(--critical-wash);}
.aa-cannot h3{color:var(--critical);}
.aa-conflict{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px;padding:8px 0;border-bottom:1px solid var(--line-soft);}
.aa-conflict-actions{display:flex;gap:6px;flex-wrap:wrap;}
@media (min-width:641px){
  html.layout-m #accessAdminRoot > :is(.aa-how,.aa-draftbar){flex:none;}
  html.layout-m #accessAdminRoot > .aa-panel{display:flex;flex-direction:column;flex:1;min-height:0;}
}
@media (max-width:900px){.aa-check{grid-template-columns:minmax(0,1fr);}}
@media (max-width:640px){
  #accessAdminRoot .aa-panel:not(.aa-show-detail) .aa-detail{display:none;}
  #accessAdminRoot .aa-panel.aa-show-detail .aa-list{display:none;}
  #accessAdminRoot .aa-back{display:inline-flex;align-items:center;gap:4px;margin-bottom:12px;min-height:44px;}
  /* the four tabs as a 2 x 2 grid: every name readable, none cut off at the edge */
  #accessAdminRoot .aa-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;overflow:visible;}
  #accessAdminRoot .aa-tabs .wo-tab{justify-content:center;text-align:center;white-space:normal;min-height:44px;}
  #accessAdminRoot .aa-check{display:flex;flex-direction:column;}
  #accessAdminRoot :is(.btn,select,input[type="text"],input[type="search"],.link-btn,.role-option){min-height:44px;}
  #accessAdminRoot .role-option input{width:22px;height:22px;}
  /* above the bottom navigation (same offset as the Work Order edit bar), so both stay usable; while typing the
     navigation hides and the bar drops to the bottom edge. The content keeps room for the bar under its last control
     (the shell already keeps room for the navigation). */
  .aa-draftbar{position:fixed;top:auto;left:8px;right:8px;bottom:calc(76px + env(safe-area-inset-bottom));margin:0;z-index:48;}
  body:has(input:focus, textarea:focus, select:focus) .aa-draftbar{bottom:calc(8px + env(safe-area-inset-bottom));}
  body:has(.aa-draftbar) #accessAdminRoot{padding-bottom:148px;}
  .aa-draftbar .btn{flex:1 1 auto;justify-content:center;}
  .aa-cards3{grid-template-columns:minmax(0,1fr);}
  /* tables become stacked rows: the record, then Their own and Colleagues' as labelled lines */
  #accessAdminRoot :is(.aa-eff-table,.aa-grid-table) thead{display:none;}
  #accessAdminRoot :is(.aa-eff-table,.aa-grid-table),#accessAdminRoot :is(.aa-eff-table,.aa-grid-table) tbody{display:block;width:100%;}
  #accessAdminRoot :is(.aa-eff-table,.aa-grid-table) tr{display:grid;gap:6px;padding:10px 0;border-bottom:1px solid var(--line-soft);}
  #accessAdminRoot :is(.aa-eff-table,.aa-grid-table) :is(td,th){display:block;padding:0 0 0 calc(var(--aa-depth,0) * 12px);border:0;}
  #accessAdminRoot :is(.aa-eff-table,.aa-grid-table) td[data-label]::before{content:attr(data-label);display:block;font-size:11.5px;color:var(--ink-faint);margin-bottom:2px;}
  #accessAdminRoot .aa-grid-table select{width:100%;min-width:0;}
  .aa-ed-open{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-sunken);color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer;}
  .aa-ed-open .icon{flex:none;width:18px;height:18px;color:var(--ink-faint);}
  .aa-ed-sum{min-width:0;overflow-wrap:anywhere;}
  .aa-ed:not(.is-open):not(.is-forced) > .aa-ed-body{display:none;}
  .aa-ed.is-open:not(.is-forced) > .aa-ed-body{position:fixed;inset:0;z-index:150;overflow-y:auto;padding:0 16px calc(24px + env(safe-area-inset-bottom));background:var(--paper);}
  .aa-ed.is-open:not(.is-forced) > .aa-ed-body > .aa-ed-head{display:flex;position:sticky;top:0;z-index:1;align-items:center;justify-content:space-between;gap:12px;margin:0 -16px 12px;padding:14px 16px;background:var(--surface);border-bottom:1px solid var(--line);}
  body.aa-sheet-open{overflow:hidden;}
  .aa-review-overlay{padding:0;}
  .modal-card.aa-review{max-width:none;width:100%;min-height:100%;max-height:none;border-radius:0;}
  .aa-review-head,.aa-review-body,.aa-review-actions{padding-left:16px;padding-right:16px;}
  .aa-review-actions{position:sticky;bottom:0;background:var(--surface);padding-bottom:calc(16px + env(safe-area-inset-bottom));}
  .aa-review-actions .btn{flex:1 1 100%;justify-content:center;min-height:44px;}
}

/* My Tasks (tasks.html): Item work assigned to the person, as cards in tabs; built from the Workflow tabs (.wf-tabs),
   the detail cards (.card, .rail-row) and the shared badges */
.tasks-page{display:flex;flex-direction:column;min-height:0;flex:1;}
.tasks-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;}
.tasks-head .note-text{margin:0;}
.tasks-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-content:start;overflow-y:auto;min-height:0;padding-bottom:12px;}
.task-card{display:flex;flex-direction:column;gap:12px;}
.task-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;}
.task-card-head h3{margin:0;font-size:15px;}
.task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.task-grid .rail-row{margin-bottom:0;}
.task-note{display:flex;align-items:center;gap:6px;margin:0;}
.task-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px;margin-top:auto;}
.task-count{color:var(--ink-faint);font-weight:400;}
.item-work-line{display:block;}
/* the tab row keeps its own height in this column layout (the phone rule gives .wo-tabs a 100% basis) */
.tasks-page .wf-tabs{flex:0 0 auto;}
@media (max-width:640px){
  .tasks-list{grid-template-columns:minmax(0,1fr);}
  .tasks-page .wf-tabs{flex-wrap:nowrap;margin-top:0;}
  html.layout-m .tasks-page .wf-tabs .wo-tab{padding:9px 14px;white-space:nowrap;}
}
.task-card{cursor:default;}
.task-card-name{margin:0;font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.item-work-blocked{color:var(--critical);font-weight:700;}

/* Item work dialogs (task-view.js): a task's details, the small command forms, an Item's Manage work. Built on the
   shared modal (.modal-overlay / .modal-card), .rail-row, .badge and .btn */
/* text and the spans inside it share one baseline here (the global vertical-align:sub would lift the text after a span) */
.tw-task span,.tw-manage span,.tw-ask span,.tw-ask p,.task-card span,.td-table span,.td-card span,.wo-prod span,.tpl-ro span,.tpl-version span,
.item-work-line,.item-work-line span,.tpl-pre span,.tpl-act span{vertical-align:baseline;}
/* a value box grows with long names (people, Teams, lists) instead of overflowing its fixed height */
.tw-task .rail-row .v,.task-card .rail-row .v{height:auto;min-height:var(--field-h);padding-top:6px;padding-bottom:6px;flex-wrap:wrap;}
.modal-card.tw-task,.modal-card.tw-manage{max-width:680px;}
.modal-card.tw-ask{max-width:520px;}
.tw-ask textarea{width:100%;min-height:84px;resize:vertical;}
/* the header (close, folio, title) stays put and only the body scrolls, so its scrollbar starts below the header */
.modal-card.tw-task,.modal-card.tw-manage{display:flex;flex-direction:column;overflow:hidden;padding:0;}
.tw-head{flex:none;position:relative;padding:30px 28px 14px;background:var(--surface-sunken);border-bottom:1px solid var(--line-soft);}
.tw-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:0 28px 30px;}
.tw-body > :first-child{margin-top:18px;}
.tw-head h2{margin-bottom:0;}
.tw-kicker{margin:0 0 4px;font-size:12.5px;color:var(--ink-soft);}
.tw-team{color:var(--ink-soft);}
.tw-task h2,.tw-manage h2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;}
.tw-blocked{display:flex;align-items:flex-start;gap:6px;margin-top:12px;}
.tw-note{display:flex;align-items:center;gap:6px;margin-top:10px;}
.tw-instructions{white-space:pre-wrap;margin:0;}
.tw-photo{display:block;max-width:220px;max-height:180px;border-radius:var(--radius-s);border:1px solid var(--line-soft);margin-top:10px;object-fit:contain;}
.tw-files{display:flex;flex-wrap:wrap;gap:8px;}
.tw-file{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-s);text-decoration:none;color:var(--ink);font-size:13px;}
.tw-file:hover{background:var(--surface-sunken);}
.tw-upload{margin-top:10px;cursor:pointer;}
.tw-near{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.tw-near li{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tw-history{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;max-height:260px;overflow-y:auto;}
.tw-event{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;font-size:13px;align-items:baseline;}
/* the global vertical-align:sub drops the bold event name and the names inside the line below their neighbours */
.tw-event *{vertical-align:baseline;}
.tw-event-when{color:var(--ink-faint);font-size:12px;}
.tw-event-who{color:var(--ink-soft);font-size:12px;text-align:right;}
.tw-actions{flex-wrap:wrap;}
.tw-check{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:6px 0;}
.tw-summary{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;}
.tw-acts{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.tw-act{border:1px solid var(--line);border-radius:var(--radius-s);padding:12px;display:flex;flex-direction:column;gap:8px;}
.tw-act-canceled{opacity:.6;}
.tw-act-head{display:flex;justify-content:space-between;align-items:center;gap:8px;}
.tw-act-name{font-weight:700;display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.tw-act-meta{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--ink-soft);}
.tw-act-block{color:var(--critical);}
.tw-act-actions{display:flex;flex-wrap:wrap;gap:6px;}
.tw-canceled{margin-top:12px;}
.tw-canceled summary{cursor:pointer;font-size:13px;color:var(--ink-soft);}
@media (max-width:640px){
  .modal-card.tw-ask{padding:24px 18px;}
  .tw-head{padding:24px 18px 12px;}
  .tw-body{padding:0 18px 24px;}
  .tw-event{grid-template-columns:minmax(0,1fr);gap:2px;}
  .tw-event-who{text-align:left;}
  .tw-actions .btn{flex:1 1 140px;justify-content:center;}
}

/* the order's Production card (board.js): counts, what runs now, legacy information, lifecycle actions */
.wo-prod-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;margin-bottom:12px;}
.wo-prod-stat{display:flex;flex-direction:column;gap:2px;padding:10px 12px;border-radius:var(--radius-s);background:var(--surface-sunken);}
.wo-prod-stat .v{font-size:17px;font-weight:700;}
.wo-prod-stat .k{font-size:12px;color:var(--ink-soft);}
.wo-prod-stat.good .v{color:var(--good);}
.wo-prod-stat.critical .v{color:var(--critical);}
.wo-prod-stat.warning .v{color:var(--warning);}
.wo-prod-active{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:13.5px;}
.wo-prod-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;}
.wo-prod p.note-text{margin:4px 0;}
@media (max-width:640px){
  .wo-prod-actions .btn{flex:1 1 150px;justify-content:center;}
}

/* Tasks Dashboard (task-dashboard.html): the Reports layout (.editor-head, .filter-toolbar, .queue-table); phones get cards */
.task-dashboard{display:flex;flex-direction:column;min-height:0;flex:1;gap:4px;}
.task-dashboard .wf-tabs{flex:0 0 auto;}
.td-search{flex:2 1 240px;}
.td-table-card{flex:1;min-height:0;display:flex;flex-direction:column;}
.td-row{cursor:pointer;}
.td-row:hover td,.td-row:focus td{background:var(--surface-sunken);}
.td-blocked{color:var(--critical);}
.td-cards{display:none;}
.td-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;flex:none;}
.td-pager-buttons{display:flex;align-items:center;gap:8px;}
.th-sort.active{color:var(--ink);}
@media (max-width:640px){
  .td-table-card{display:none;}
  .td-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .td-filters .filter-field{flex:none;min-width:0;}
  .td-filters .td-search{grid-column:1 / -1;}
  .td-filters #btnTdClear{grid-column:1 / -1;justify-self:start;}
  .td-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;}
  .td-card{cursor:pointer;}
  .task-dashboard .wf-tabs{flex-wrap:nowrap;overflow-x:auto;}
  html.layout-m .task-dashboard .wf-tabs .wo-tab{white-space:nowrap;}
}

/* Control Panel > Workflow templates (workflow-templates.js): the Lookup Tables layout, an activity list editor */
.tpl-new{margin-bottom:10px;}
.tpl-back{display:none;}
.tpl-head{display:grid;grid-template-columns:minmax(0,1fr);gap:0;}
.tpl-head textarea{width:100%;resize:vertical;}
.tpl-head-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
.tpl-versions{display:flex;flex-wrap:wrap;gap:8px;padding:12px 0;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);margin-bottom:14px;}
.tpl-version{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--radius-s);background:transparent;color:var(--ink);cursor:pointer;font:inherit;font-size:13px;}
.tpl-version.is-active{border-color:var(--accent);background:var(--accent-wash);}
.tpl-acts{display:flex;flex-direction:column;gap:12px;}
.tpl-act{border:1px solid var(--line);border-radius:var(--radius-s);padding:12px;}
.tpl-act-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.tpl-act-head .tpl-name{flex:1;min-width:0;font-weight:700;}
.tpl-act-n{color:var(--ink-faint);width:20px;}
.tpl-act-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:0 12px;}
.tpl-act textarea{width:100%;resize:vertical;}
.tpl-pre{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px;}
.tpl-pre .k{font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.tpl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px;}
.tpl-spacer{flex:1;}
.tpl-ro{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px;}
.tpl-ro .item-sub{display:block;}
.tpl-providers input[type="text"]{width:100%;}
@media (max-width:640px){
  .tpl-back{display:inline-flex;}
  body.tpl-open #tplList{display:none;}
  body:not(.tpl-open) #tplDetail{display:none;}
  .tpl-providers thead{display:none;}
  .tpl-providers tr{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;padding:8px 0;}
  .tpl-providers td{border:none;padding:0;}
}

/* Right-click field menu (field-menu.js): the clipboard and case commands, then the field's table.column (click copies) */
.field-menu{position:fixed;z-index:400;min-width:230px;max-width:340px;padding:6px;border-radius:var(--radius-s);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-pop);display:flex;flex-direction:column;}
.field-menu:focus{outline:none;}
.field-menu button.fm-info{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:3px;padding:6px 10px 8px;}
.field-menu .fm-label{font-size:12px;font-weight:700;color:var(--ink-soft);}
.field-menu .fm-db{font-family:var(--font-mono,ui-monospace,Menlo,monospace);font-size:12px;color:var(--ink);background:var(--surface-sunken);border-radius:6px;padding:4px 6px;overflow-wrap:anywhere;}
.field-menu .fm-note{font-size:11.5px;color:var(--ink-faint);}
.field-menu .fm-group{padding:4px 10px 2px;font-size:11.5px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.04em;}
.field-menu hr{border:0;border-top:1px solid var(--line-soft);margin:4px 2px;}
.field-menu button{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;padding:7px 10px;border:0;border-radius:6px;background:none;color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;}
.field-menu button:hover,.field-menu button:focus-visible{background:var(--accent-wash);outline:none;}
.field-menu button[disabled]{color:var(--ink-faint);cursor:default;background:none;}
.field-menu kbd{font:inherit;font-size:11.5px;color:var(--ink-faint);}
.field-menu-toast{position:fixed;z-index:401;left:50%;bottom:24px;transform:translateX(-50%);padding:9px 14px;border-radius:999px;background:var(--ink);color:var(--surface);font-size:13px;box-shadow:var(--shadow-pop);}
.field-menu-toast[hidden]{display:none;}