/* ==========================================================================
   TeraDevs — Administrador de contenido · design system
   Separate from the public site on purpose. Mobile-first; light and dark
   themes are both designed (not inverted). No external fonts or libraries.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  --font: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --brand: #2EC4B6;            /* TeraDevs teal (the dot of the logo) */
  --brand-ink: #0B1F3A;        /* TeraDevs navy, text on brand fills: 7.7:1 */
  --brand-grad: linear-gradient(135deg, #00807F 0%, #2EC4B6 55%, #7FE3D8 100%);

  --bg: #f5f5f4;
  --surface: #ffffff;
  --surface-2: #fafaf9;
  --surface-3: #f2f2f1;
  --border: #e5e5e3;
  --border-strong: #d4d4d1;
  --text: #1c1917;
  --text-2: #57534e;           /* 7.2:1 on white */
  --text-3: #6b6560;           /* 5.4:1 on white */
  --accent: #00706F;           /* links/accents on light: 5.9:1 */
  --accent-soft: #e6f6f4;
  --focus: #00807F;

  --ok: #166534;   --ok-soft: #e8f6ec;   /* 6.0:1 on ok-soft */
  --warn: #a15c07; --warn-soft: #fff6e0;
  --bad: #b42318;  --bad-soft: #fdecea;
  --info: #1d4ed8; --info-soft: #e8efff;

  --shadow-1: 0 1px 2px rgba(28,25,23,.06), 0 1px 1px rgba(28,25,23,.04);
  --shadow-2: 0 6px 20px rgba(28,25,23,.08), 0 2px 6px rgba(28,25,23,.05);
  --shadow-3: 0 24px 60px rgba(28,25,23,.18), 0 6px 18px rgba(28,25,23,.08);
  --scrim: rgba(20,18,16,.45);

  --r-sm: 8px; --r: 10px; --r-lg: 14px; --r-xl: 18px;
  --ease: cubic-bezier(.2,.8,.2,1);
  --t-fast: 120ms; --t: 200ms; --t-slow: 320ms;

  --sidebar-w: 256px;
  --topbar-h: 60px;
  color-scheme: light;
}

/* Dark theme — designed, not inverted: warm near-black surfaces, softened text. */
:root[data-theme="dark"]{
  --bg: #121110;
  --surface: #1b1a19;
  --surface-2: #211f1e;
  --surface-3: #2a2826;
  --border: #33302e;
  --border-strong: #46423f;
  --text: #f5f4f2;
  --text-2: #c9c4bf;           /* 10:1 on surface */
  --text-3: #a39e98;           /* 6.4:1 on surface */
  --accent: #5fdccf;           /* 10:1 on surface */
  --accent-soft: #10302e;
  --ok: #4ade80;   --ok-soft: #13291b;
  --warn: #fbbf24; --warn-soft: #2e2410;
  --bad: #f87171;  --bad-soft: #351716;
  --info: #93b4ff; --info-soft: #172038;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 24px 64px rgba(0,0,0,.6);
  --scrim: rgba(0,0,0,.6);
  color-scheme: dark;
}

/* ---------- Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; min-height:100vh; background:var(--bg); color:var(--text);
  font: 400 15px/1.55 var(--font); -webkit-font-smoothing:antialiased;
}
html.theme-ready body, html.theme-ready .surface-t{ transition: background-color var(--t) var(--ease), color var(--t) var(--ease); }
img{ max-width:100%; display:block; }
a{ color:var(--accent); text-underline-offset:2px; }
a:hover{ text-decoration-thickness:2px; }
h1,h2,h3,h4{ margin:0; line-height:1.25; color:var(--text); letter-spacing:-.01em; }
h1{ font-size:1.6rem; font-weight:700; }
h2{ font-size:1.18rem; font-weight:650; }
h3{ font-size:1rem; font-weight:650; }
p{ margin:0 0 .75rem; }
p:last-child{ margin-bottom:0; }
button, input, select, textarea{ font:inherit; color:inherit; }
button{ cursor:pointer; }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:6px; }
[hidden]{ display:none !important; }
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.icon{ width:1.15em; height:1.15em; flex:none; fill:currentColor; vertical-align:-.18em; }
.icon-lg{ width:1.5em; height:1.5em; }
.muted{ color:var(--text-2); }
.small{ font-size:.86rem; }
.tiny{ font-size:.78rem; }
.mono{ font-family:var(--mono); font-size:.85em; }
.nowrap{ white-space:nowrap; }
.stack{ display:grid; gap:1rem; }
.stack-sm{ display:grid; gap:.5rem; }
.stack-lg{ display:grid; gap:1.5rem; }
.row{ display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; }
.row-between{ display:flex; gap:.75rem; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.grow{ flex:1 1 auto; min-width:0; }
.break{ overflow-wrap:anywhere; }

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:1000; padding:.6rem 1rem; border-radius:var(--r);
  background:var(--text); color:var(--surface); font-weight:600; text-decoration:none; transition: top var(--t) var(--ease);
}
.skip-link:focus{ top:12px; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg: var(--surface); --btn-fg: var(--text); --btn-bd: var(--border-strong);
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:44px; padding:.55rem 1rem; border-radius:var(--r);
  border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  font-weight:600; font-size:.94rem; line-height:1.2; text-decoration:none; white-space:nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), opacity var(--t-fast);
}
.btn:hover{ background:var(--surface-3); text-decoration:none; }
.btn:active{ transform:scale(.97); }
.btn[disabled], .btn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; transform:none; }
.btn-primary{ --btn-bg: var(--brand); --btn-fg: var(--brand-ink); --btn-bd: transparent; box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 6px 16px rgba(46,196,182,.22); }
.btn-primary:hover{ background:#ff8424; }
.btn-danger{ --btn-bg: var(--bad); --btn-fg: #fff; --btn-bd: transparent; }
:root[data-theme="dark"] .btn-danger{ --btn-fg:#1b0a09; }
.btn-danger:hover{ background:var(--bad); filter:brightness(1.08); }
.btn-ghost{ --btn-bg: transparent; --btn-bd: transparent; }
.btn-ghost:hover{ background:var(--surface-3); }
.btn-link{ --btn-bg: transparent; --btn-bd: transparent; --btn-fg: var(--accent); min-height:auto; padding:.25rem .1rem; font-weight:600; }
.btn-link:hover{ background:transparent; text-decoration:underline; }
.btn-sm{ min-height:36px; padding:.35rem .75rem; font-size:.86rem; }
.btn-icon{ width:44px; padding:0; }
.btn-icon.btn-sm{ width:36px; }
.btn-block{ width:100%; }
.btn .spinner{ width:16px; height:16px; }

/* ---------- Spinner / skeleton ---------- */
.spinner{
  width:20px; height:20px; border-radius:50%; border:2.5px solid currentColor; border-right-color:transparent;
  animation: spin .7s linear infinite; flex:none; opacity:.85;
}
@keyframes spin{ to{ transform:rotate(360deg); } }
.skeleton{
  border-radius:var(--r); background: linear-gradient(90deg, var(--surface-3) 0%, var(--surface-2) 50%, var(--surface-3) 100%);
  background-size:200% 100%; animation: shimmer 1.3s ease-in-out infinite; min-height:1rem;
}
@keyframes shimmer{ from{ background-position:100% 0; } to{ background-position:-100% 0; } }
.boot-loading{ display:grid; place-items:center; min-height:60vh; color:var(--text-3); gap:.75rem; }

/* ---------- Cards ---------- */
.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  box-shadow:var(--shadow-1); padding:1.15rem;
}
.card-header{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; margin-bottom:.9rem; }
.card-header p{ margin:.2rem 0 0; color:var(--text-2); font-size:.9rem; }
.card-link{ display:block; color:inherit; text-decoration:none; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease); }
.card-link:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-2); transform:translateY(-2px); text-decoration:none; }
.card-link:active{ transform:translateY(0) scale(.99); }
.grid-cards{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.icon-tile{
  width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none;
  background:var(--accent-soft); color:var(--accent);
}
.icon-tile .icon{ width:20px; height:20px; }

/* ---------- Badges / pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.35rem; padding:.18rem .6rem; border-radius:999px;
  font-size:.78rem; font-weight:650; line-height:1.4; background:var(--surface-3); color:var(--text-2); white-space:nowrap;
}
.badge .icon{ width:.95em; height:.95em; }
.badge-ok{ background:var(--ok-soft); color:var(--ok); }
.badge-warn{ background:var(--warn-soft); color:var(--warn); }
.badge-bad{ background:var(--bad-soft); color:var(--bad); }
.badge-info{ background:var(--info-soft); color:var(--info); }
.badge-brand{ background:var(--accent-soft); color:var(--accent); }

/* ---------- Alerts ---------- */
.alert{
  display:flex; gap:.7rem; align-items:flex-start; padding:.85rem 1rem; border-radius:var(--r);
  background:var(--info-soft); color:var(--text); border:1px solid transparent; font-size:.93rem;
}
.alert > .icon{ color:var(--info); margin-top:.15rem; }
.alert-ok{ background:var(--ok-soft); } .alert-ok > .icon{ color:var(--ok); }
.alert-warn{ background:var(--warn-soft); } .alert-warn > .icon{ color:var(--warn); }
.alert-bad{ background:var(--bad-soft); } .alert-bad > .icon{ color:var(--bad); }
.alert strong{ display:block; margin-bottom:.15rem; }
.alert p{ margin:0; }
.alert .alert-actions{ margin-top:.6rem; display:flex; gap:.5rem; flex-wrap:wrap; }

/* ---------- Forms ---------- */
.field{ display:grid; gap:.35rem; }
.field + .field{ margin-top:0; }
.label{ font-weight:600; font-size:.92rem; color:var(--text); }
.label .opt{ font-weight:500; color:var(--text-3); font-size:.85em; }
.hint{ font-size:.84rem; color:var(--text-2); overflow-wrap:anywhere; min-width:0; }
.input, .textarea, .select{
  width:100%; min-height:44px; padding:.6rem .8rem; border-radius:var(--r);
  border:1px solid var(--border-strong); background:var(--surface); color:var(--text);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background-color var(--t-fast);
}
.textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.input::placeholder, .textarea::placeholder{ color:var(--text-3); opacity:1; }
.input:hover, .textarea:hover, .select:hover{ border-color:var(--text-3); }
.input:focus, .textarea:focus, .select:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px rgba(46,196,182,.2); }
.input[disabled], .textarea[disabled], .input[readonly]{ background:var(--surface-3); color:var(--text-2); cursor:not-allowed; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"]{ border-color:var(--bad); }
.input[aria-invalid="true"]:focus, .textarea[aria-invalid="true"]:focus{ box-shadow:0 0 0 4px rgba(180,35,24,.18); }
.field-error{ display:flex; gap:.4rem; align-items:flex-start; color:var(--bad); font-size:.86rem; font-weight:550; animation: field-in var(--t) var(--ease); }
.field-error .icon{ margin-top:.12rem; }
@keyframes field-in{ from{ opacity:0; transform:translateY(-3px); } }
.counter{ font-size:.78rem; color:var(--text-3); font-variant-numeric:tabular-nums; }
.counter.near{ color:var(--warn); font-weight:600; }
.counter.over{ color:var(--bad); font-weight:700; }
.field-foot{ display:flex; justify-content:space-between; gap:.75rem; align-items:baseline; min-height:1.1rem; }
.field-foot .counter{ flex:none; }
.field-note{ display:flex; gap:.4rem; align-items:flex-start; font-size:.84rem; color:var(--warn); line-height:1.45; }
.field-note .icon{ margin-top:.12rem; }
/* Grid and flex children may shrink below their content's natural width
   (otherwise one long URL can widen a whole column on a phone). */
.stack > *, .stack-sm > *, .stack-lg > *, .editor-group > *, .field, .field-card, .lang-cols > *{ min-width:0; }
.input-group{ position:relative; display:flex; }
.input-group .input{ padding-right:3rem; }
.input-group .btn-icon{ position:absolute; right:0; top:0; height:100%; min-height:44px; border:0; background:transparent; color:var(--text-2); }
.input-group .btn-icon:hover{ color:var(--text); background:transparent; }
.select{ appearance:none; padding-right:2.4rem; background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%); background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; }

.fieldset-reset{ border:0; padding:0; margin:0; min-width:0; }
.choice-group{ display:grid; gap:.6rem; }
.checks{ display:grid; gap:.25rem; margin-top:.6rem; padding:.6rem .8rem; border:1px dashed var(--border-strong); border-radius:var(--r); }
.check{ display:flex; gap:.6rem; align-items:center; min-height:40px; cursor:pointer; }
.check input{ width:18px; height:18px; accent-color:var(--brand); flex:none; margin:0; }
.choice{
  position:relative; display:flex; gap:.75rem; align-items:flex-start; padding:.8rem .9rem; border-radius:var(--r);
  border:1px solid var(--border-strong); background:var(--surface); cursor:pointer; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.choice:hover{ border-color:var(--text-3); }
.choice input{ margin:.2rem 0 0; accent-color:var(--brand); width:18px; height:18px; flex:none; }
.choice:has(input:checked){ border-color:var(--brand); background:var(--accent-soft); box-shadow:0 0 0 1px var(--brand) inset; }
.choice:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:2px; }
.choice strong{ display:block; font-size:.94rem; }
.choice span{ font-size:.85rem; color:var(--text-2); }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{ position:relative; }
.chip input{ position:absolute; opacity:0; inset:0; margin:0; cursor:pointer; }
.chip label{
  display:inline-flex; align-items:center; gap:.4rem; min-height:40px; padding:.45rem .9rem; border-radius:999px; cursor:pointer;
  border:1px solid var(--border-strong); background:var(--surface); font-weight:600; font-size:.88rem; transition: all var(--t-fast) var(--ease);
}
.chip input:checked + label{ background:var(--accent-soft); border-color:var(--brand); color:var(--accent); }
.chip input:focus-visible + label{ outline:3px solid var(--focus); outline-offset:2px; }
.segmented{ display:inline-flex; padding:3px; border-radius:var(--r); background:var(--surface-3); border:1px solid var(--border); gap:2px; }
.segmented button{
  display:inline-flex; align-items:center; gap:.35rem; min-height:36px; padding:.3rem .7rem; border:0; border-radius:8px; background:transparent;
  color:var(--text-2); font-weight:600; font-size:.86rem; transition: background-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast);
}
.segmented button[aria-pressed="true"]{ background:var(--surface); color:var(--text); box-shadow:var(--shadow-1); }
/* Never wider than the screen (large text, wider fonts): the options shrink and their text is cut with "…". */
.segmented{ max-width:100%; }
.segmented button{ min-width:0; }
.segmented button > span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.segmented button > .icon{ flex:none; }
/* Buttons with long text may take two lines instead of overflowing the screen. */
.btn{ max-width:100%; }
@media (max-width: 600px){ .btn:not(.btn-icon){ white-space:normal; text-align:center; } }
.segmented button:hover{ color:var(--text); }

.pw-rules{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.25rem; font-size:.84rem; color:var(--text-2); }
.pw-rules li{ display:flex; gap:.4rem; align-items:center; }
.pw-rules li.ok{ color:var(--ok); }
.meter{ height:6px; border-radius:6px; background:var(--surface-3); overflow:hidden; }
.meter > span{ display:block; height:100%; width:0; background:var(--bad); border-radius:6px; transition: width var(--t) var(--ease), background-color var(--t); }

/* ---------- App shell ---------- */
.app{ min-height:100vh; }
.topbar{
  position:sticky; top:0; z-index:40; height:var(--topbar-h); display:flex; align-items:center; gap:.5rem;
  padding:0 .75rem; background:color-mix(in srgb, var(--surface) 88%, transparent); border-bottom:1px solid var(--border);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
}
.brand{ display:flex; align-items:center; gap:.6rem; color:var(--text); text-decoration:none; font-weight:700; min-width:0; }
.brand img{ width:32px; height:32px; }
.brand small{ display:block; font-size:.72rem; font-weight:600; color:var(--text-3); letter-spacing:.02em; text-transform:uppercase; }
.brand span{ line-height:1.15; }
.topbar .spacer{ flex:1; }
.topbar .report-btn .label-text{ display:none; }

.sidebar{
  position:fixed; z-index:60; inset:0 auto 0 0; width:min(86vw, 300px); background:var(--surface); border-right:1px solid var(--border);
  display:flex; flex-direction:column; transform:translateX(-102%); transition: transform var(--t-slow) var(--ease); box-shadow:var(--shadow-3);
  overflow-y:auto; overscroll-behavior:contain;
}
.sidebar.open{ transform:none; }
/* The logo block stays at the top while the menu scrolls under it (lined up with the top bar). */
.sidebar-head{ position:sticky; top:0; z-index:2; flex:none; display:flex; align-items:center; justify-content:space-between; gap:.5rem; height:var(--topbar-h); padding:0 .75rem 0 1rem; border-bottom:1px solid var(--border); background:var(--surface); }
.sidebar-head .brand small{ line-height:1.2; }
.nav{ padding:.75rem; display:grid; gap:2px; }
.nav a{
  display:flex; align-items:center; gap:.75rem; min-height:44px; padding:.55rem .75rem; border-radius:var(--r);
  color:var(--text-2); text-decoration:none; font-weight:600; font-size:.95rem; transition: background-color var(--t-fast), color var(--t-fast);
}
.nav a:hover{ background:var(--surface-3); color:var(--text); }
.nav a[aria-current="page"]{ background:var(--accent-soft); color:var(--accent); }
.nav a .icon{ width:19px; height:19px; }
.nav-section{ margin:.9rem .75rem .3rem; font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.sidebar-foot{ margin-top:auto; padding:.9rem; border-top:1px solid var(--border); display:grid; gap:.6rem; }
.scrim{ position:fixed; inset:0; z-index:55; background:var(--scrim); opacity:0; pointer-events:none; transition: opacity var(--t-slow) var(--ease); }
.scrim.show{ opacity:1; pointer-events:auto; }

.main{ padding:1.25rem 1rem 6rem; max-width:1120px; margin:0 auto; }
.page-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75rem 1rem; margin-bottom:1.25rem; }
.page-head h1:focus{ outline:none; }
.page-head p{ margin:.35rem 0 0; color:var(--text-2); max-width:62ch; }
.crumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem; font-size:.85rem; color:var(--text-3); margin-bottom:.4rem; }
.crumbs a{ color:var(--text-2); text-decoration:none; font-weight:600; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; }
.crumbs .icon{ width:.8em; height:.8em; }

.menu{ position:relative; }
.menu-panel{
  /* Above the notifications (.toasts, 200): on phones a notice at the bottom must not cover an open menu. */
  position:absolute; right:0; top:calc(100% + 6px); z-index:210; min-width:240px; padding:.4rem; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-3);
  transform-origin:top right; animation: pop-in var(--t) var(--ease);
}
.menu-panel .menu-item{
  display:flex; width:100%; align-items:center; gap:.6rem; min-height:42px; padding:.45rem .65rem; border-radius:8px; border:0;
  background:transparent; color:var(--text); text-align:left; text-decoration:none; font-weight:550; font-size:.92rem;
}
.menu-panel .menu-item:hover, .menu-panel .menu-item:focus-visible{ background:var(--surface-3); text-decoration:none; }
.menu-panel .menu-item.danger{ color:var(--bad); }
.menu-panel hr{ border:0; border-top:1px solid var(--border); margin:.35rem 0; }
.menu-panel .menu-label{ padding:.45rem .65rem .2rem; font-size:.76rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.05em; }
.menu-panel .menu-user{ padding:.55rem .65rem .65rem; }
.menu-panel .menu-user strong{ display:block; }
@keyframes pop-in{ from{ opacity:0; transform:scale(.96) translateY(-4px); } }

/* ---------- Dialogs (native <dialog>) ---------- */
dialog.dialog{
  border:0; padding:0; border-radius:var(--r-xl); background:var(--surface); color:var(--text);
  width:min(560px, calc(100vw - 2rem)); max-height:min(88vh, 860px); box-shadow:var(--shadow-3);
  overflow:hidden;
}
dialog.dialog.wide{ width:min(820px, calc(100vw - 2rem)); }
dialog.dialog::backdrop{ background:var(--scrim); }
dialog.dialog[open]{ display:flex; flex-direction:column; animation: dialog-in var(--t-slow) var(--ease); }
dialog.dialog[open]::backdrop{ animation: fade-in var(--t-slow) var(--ease); }
dialog.dialog.closing{ animation: dialog-out var(--t) var(--ease) forwards; }
dialog.dialog.closing::backdrop{ animation: fade-out var(--t) var(--ease) forwards; }
@keyframes dialog-in{ from{ opacity:0; transform: translateY(10px) scale(.98); } }
@keyframes dialog-out{ to{ opacity:0; transform: translateY(6px) scale(.98); } }
@keyframes fade-in{ from{ opacity:0; } }
@keyframes fade-out{ to{ opacity:0; } }
.dialog-head{ display:flex; align-items:flex-start; gap:.75rem; padding:1.1rem 1.15rem .8rem; border-bottom:1px solid var(--border); }
.dialog-head h2{ font-size:1.12rem; }
.dialog-head p{ margin:.25rem 0 0; color:var(--text-2); font-size:.9rem; }
.dialog-body{ padding:1.1rem 1.15rem; overflow-y:auto; overscroll-behavior:contain; }
.dialog-foot{ display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; padding:.85rem 1.15rem; border-top:1px solid var(--border); background:var(--surface-2); }

/* ---------- Toasts ---------- */
.toasts{ position:fixed; z-index:200; left:.75rem; right:.75rem; bottom:.75rem; display:grid; gap:.5rem; pointer-events:none; }
.toast{
  pointer-events:auto; display:flex; gap:.7rem; align-items:flex-start; padding:.85rem .9rem; border-radius:var(--r-lg);
  background:var(--text); color:var(--surface); box-shadow:var(--shadow-3); animation: toast-in var(--t-slow) var(--ease);
  font-size:.93rem;
}
.toast .icon{ margin-top:.12rem; }
.toast.ok .icon{ color:#4ade80; } .toast.bad .icon{ color:#fca5a5; } .toast.warn .icon{ color:#fcd34d; }
:root[data-theme="dark"] .toast.ok .icon{ color:var(--ok); }
.toast a, .toast .toast-action{ color:inherit; font-weight:700; text-decoration:underline; background:none; border:0; padding:0; }
.toast .toast-close{ margin-left:auto; background:none; border:0; color:inherit; opacity:.7; padding:.1rem; min-width:28px; min-height:28px; }
.toast.leaving{ animation: toast-out var(--t) var(--ease) forwards; }
@keyframes toast-in{ from{ opacity:0; transform: translateY(12px) scale(.98); } }
@keyframes toast-out{ to{ opacity:0; transform: translateY(8px); } }

/* ---------- Save bar ---------- */
.savebar{
  position:fixed; z-index:45; left:.75rem; right:.75rem; bottom:.75rem; display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:.7rem .8rem .7rem 1rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border-strong);
  box-shadow:var(--shadow-3); transform: translateY(140%); transition: transform var(--t-slow) var(--ease);
}
.savebar.show{ transform:none; }
.savebar .savebar-text{ flex:1 1 180px; font-weight:600; font-size:.92rem; display:flex; gap:.5rem; align-items:center; }
.savebar .dot{ width:9px; height:9px; border-radius:50%; background:var(--brand); flex:none; box-shadow:0 0 0 4px rgba(46,196,182,.18); }
.savebar .actions{ display:flex; gap:.5rem; margin-left:auto; }

/* ---------- Content editor ---------- */
.editor-group{ display:grid; gap:1rem; }
.editor-group + .editor-group{ margin-top:1.4rem; }
.group-title{ display:flex; align-items:center; gap:.6rem; font-size:.95rem; font-weight:700; color:var(--text); }
.group-title .badge{ font-weight:600; }
.field-card{ border:1px solid var(--border); border-radius:var(--r-lg); padding:1rem; background:var(--surface); display:grid; gap:.75rem; transition: border-color var(--t), box-shadow var(--t); }
.field-card.dirty{ border-color:var(--brand); box-shadow:0 0 0 1px var(--brand) inset; }
.field-card.has-error{ border-color:var(--bad); }
.field-card-head{ display:flex; justify-content:space-between; gap:.75rem; align-items:flex-start; flex-wrap:wrap; }
.field-card-head .where{ display:flex; gap:.35rem; align-items:center; font-size:.82rem; color:var(--text-3); margin-top:.2rem; }
.lang-cols{ display:grid; gap:.85rem; }
.lang-tag{ display:inline-flex; align-items:center; justify-content:center; min-width:30px; height:20px; padding:0 .4rem; border-radius:6px; background:var(--surface-3); color:var(--text-2); font-size:.7rem; font-weight:800; letter-spacing:.04em; margin-right:.35rem; }
/* Automatic translation: status, undo and "translate from…" under each language box */
.auto-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.15rem .9rem; font-size:.84rem; }
.auto-row .btn-link{ font-size:.84rem; font-weight:600; gap:.3rem; }
.auto-status{ display:inline-flex; align-items:center; gap:.4rem; color:var(--text-2); min-width:0; }
.auto-status:empty{ display:none; }
.auto-status .icon{ color:var(--info); flex:none; }
.auto-status.error .icon{ color:var(--bad); }
.auto-status .spinner{ width:14px; height:14px; border-width:2px; color:var(--info); }
.field.is-auto .input, .field.is-auto .textarea{ border-color:var(--info); box-shadow: inset 3px 0 0 var(--info); }
@media (pointer: coarse){ .auto-row .btn-link{ min-height:40px; } }
.preview-title{ font-size:1.05rem; font-weight:800; text-transform:uppercase; letter-spacing:-.01em; line-height:1.15; color:var(--text); padding:.6rem .8rem; border-radius:var(--r); background:var(--surface-2); border:1px dashed var(--border-strong); }
.preview-title em{ font-style:normal; color:var(--accent); }
.preview-box{ padding:.75rem .9rem; border-radius:var(--r); background:var(--surface-2); border:1px dashed var(--border-strong); font-size:.9rem; display:grid; gap:.35rem; }
.preview-box dt{ font-size:.76rem; font-weight:700; color:var(--text-3); text-transform:uppercase; letter-spacing:.04em; }
.preview-box dd{ margin:0 0 .35rem; }

.section-card .meta{ display:flex; gap:.5rem; flex-wrap:wrap; margin-top:.75rem; }
.section-card h2{ font-size:1.02rem; }
.section-card p{ color:var(--text-2); font-size:.9rem; margin:.3rem 0 0; }

/* ---------- Media ---------- */
.tabs{ display:flex; gap:.35rem; overflow-x:auto; padding-bottom:2px; margin-bottom:1.1rem; scrollbar-width:none; }
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  flex:none; display:inline-flex; align-items:center; gap:.45rem; min-height:42px; padding:.45rem .9rem; border-radius:999px;
  border:1px solid var(--border); background:var(--surface); color:var(--text-2); font-weight:650; font-size:.9rem; text-decoration:none;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tab:hover{ color:var(--text); border-color:var(--border-strong); text-decoration:none; }
.tab[aria-current="page"]{ background:var(--text); color:var(--surface); border-color:var(--text); }
.slot{ display:grid; gap:1rem; }
.slot-media{ position:relative; border-radius:var(--r); overflow:hidden; background:var(--surface-3); border:1px solid var(--border); }
.slot-media img{ width:100%; height:100%; object-fit:cover; }
.slot-media.r43{ aspect-ratio:4/3; }
.slot-media.r11{ aspect-ratio:1/1; }
.slot-empty{ display:grid; place-items:center; text-align:center; gap:.4rem; padding:1.2rem; color:var(--text-3); height:100%; font-size:.88rem; }
.slot-empty .icon{ width:28px; height:28px; }
.reqs{ display:grid; gap:.35rem; font-size:.84rem; color:var(--text-2); margin:0; padding:0; list-style:none; }
.reqs li{ display:flex; gap:.45rem; align-items:flex-start; }
.reqs .icon{ margin-top:.15rem; color:var(--text-3); }
.gallery{ display:grid; gap:.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
.gallery-item{ border:1px solid var(--border); border-radius:var(--r); overflow:hidden; background:var(--surface); display:flex; flex-direction:column; }
.gallery-item .thumb{ aspect-ratio:4/3; background:var(--surface-3); }
.gallery-item .thumb img{ width:100%; height:100%; object-fit:cover; }
.gallery-item .tools{ display:flex; justify-content:space-between; gap:2px; padding:.25rem; }
.gallery-item .pos{ font-size:.75rem; font-weight:700; color:var(--text-3); padding:.2rem .4rem; }
.gallery-add{
  display:grid; place-items:center; gap:.3rem; aspect-ratio:4/3; border-radius:var(--r); border:2px dashed var(--border-strong);
  background:transparent; color:var(--text-2); font-weight:650; font-size:.88rem; transition: border-color var(--t-fast), color var(--t-fast), background-color var(--t-fast);
}
.gallery-add:hover{ border-color:var(--brand); color:var(--accent); background:var(--accent-soft); }
.project-panel + .project-panel{ margin-top:1rem; }
/* Each project folds: a summary row with its card photo, then its photos and texts. */
.project-summary{ list-style:none; display:flex; align-items:center; gap:.9rem; cursor:pointer; min-height:44px; border-radius:8px; }
.project-summary::-webkit-details-marker{ display:none; }
.project-summary:focus-visible{ outline:3px solid var(--focus); outline-offset:4px; }
.project-summary .grow{ display:grid; gap:.1rem; flex:1; min-width:0; }
.project-summary h2{ font-size:1.08rem; }
.project-summary > .icon{ color:var(--text-3); transition: transform var(--t) var(--ease); }
.project-panel[open] > .project-summary > .icon{ transform: rotate(180deg); }
.project-thumb{ flex:none; width:68px; aspect-ratio:4 / 3; border-radius:8px; overflow:hidden; background:var(--surface-3); display:grid; place-items:center; color:var(--text-3); }
.project-thumb img{ width:100%; height:100%; object-fit:cover; }
.project-body{ display:grid; gap:1.1rem; margin-top:1.1rem; padding-top:1.1rem; border-top:1px solid var(--border); }

.dropzone{
  display:grid; place-items:center; text-align:center; gap:.5rem; padding:1.5rem 1rem; border-radius:var(--r-lg);
  border:2px dashed var(--border-strong); background:var(--surface-2); color:var(--text-2); cursor:pointer;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.dropzone:hover, .dropzone.over{ border-color:var(--brand); background:var(--accent-soft); }
.dropzone .icon{ width:34px; height:34px; color:var(--accent); }
.dropzone strong{ color:var(--text); }
.frames{ display:grid; gap:.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); align-items:end; }
.frame{ display:grid; gap:.3rem; }
.frame .box{ border-radius:8px; overflow:hidden; background:var(--surface-3); border:1px solid var(--border); }
.frame .box img{ width:100%; height:100%; object-fit:cover; }
.frame .cap{ font-size:.76rem; font-weight:650; color:var(--text-3); text-align:center; }
.progress{ height:8px; border-radius:8px; background:var(--surface-3); overflow:hidden; }
.progress > span{ display:block; height:100%; width:0; background:var(--brand-grad); transition: width var(--t) linear; }

/* ---------- Lists / tables ---------- */
.table-wrap{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface); }
table.table{ width:100%; border-collapse:collapse; font-size:.92rem; }
.table th{ text-align:left; font-size:.76rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-3); padding:.7rem 1rem; background:var(--surface-2); border-bottom:1px solid var(--border); }
.table td{ padding:.8rem 1rem; border-bottom:1px solid var(--border); vertical-align:middle; }
.table tr:last-child td{ border-bottom:0; }
/* Tables with a row menu (Usuarios): nothing cut off, or the actions menu of the
   last rows loses its bottom items. The header cells round their own corners. */
.table-wrap.responsive{ overflow:visible; }
.table-wrap.responsive table.table{ border-collapse:separate; border-spacing:0; }
.table-wrap.responsive thead th:first-child{ border-top-left-radius:calc(var(--r-lg) - 1px); }
.table-wrap.responsive thead th:last-child{ border-top-right-radius:calc(var(--r-lg) - 1px); }
.list-cards{ display:grid; gap:.75rem; }
/* Usuarios: cards below 1100 px (two per row from 720 px); the table above, with each e-mail on one line. */
@media (max-width: 1099px){ .users-table{ display:none !important; } }
@media (min-width: 1100px){ .users-cards{ display:none !important; } }
.users-cards{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 320px), 1fr)); align-items:start; }
.users-table td:first-child{ min-width:15rem; }
.users-table .person .grow{ min-width:0; }
.users-table .person-email{ max-width:22rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; word-break:normal; }
.person{ display:flex; gap:.75rem; align-items:center; min-width:0; }
.avatar{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex:none; font-weight:700; font-size:.9rem; background:var(--accent-soft); color:var(--accent); }
.kv{ display:grid; grid-template-columns: auto 1fr; gap:.35rem 1rem; font-size:.9rem; margin:0; }
.kv dt{ color:var(--text-3); font-weight:600; }
.kv dd{ margin:0; min-width:0; overflow-wrap:anywhere; }
.status-list{ list-style:none; margin:0; padding:0; display:grid; gap:.1rem; }
.status-list li{ display:flex; gap:.6rem; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid var(--border); font-size:.9rem; }
.status-list li:last-child{ border-bottom:0; }
.status-list .icon{ margin-top:.15rem; }
.ok-text{ color:var(--ok); } .warn-text{ color:var(--warn); } .bad-text{ color:var(--bad); } .muted-text{ color:var(--text-3); }
.chart-title{ margin:0; font-size:.95rem; }
.tr-note{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem; margin-top:.35rem; }
.tr-note .icon{ width:15px; height:15px; flex:none; }
.tr-note .btn-link{ font-size:.84rem; }
@media (pointer: coarse){ .tr-note .btn-link{ min-height:40px; } }
.ticket-overview{ padding:0; }
.ticket-overview > .stack{ padding:0 1.25rem 1.25rem; }
.overview-summary{ list-style:none; display:flex; align-items:center; gap:.85rem; padding:1rem 1.25rem; cursor:pointer; border-radius:var(--r-lg); }
.overview-summary::-webkit-details-marker{ display:none; }
.overview-summary .grow{ display:grid; gap:.1rem; }
.overview-summary .overview-title{ margin:0; font-size:1rem; font-weight:700; letter-spacing:0; }
.overview-controls .row{ flex-wrap:nowrap; }
.overview-controls .select{ width:auto; min-width:7rem; }
.overview-summary:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.overview-chevron{ transition: transform var(--t-fast); }
.ticket-overview[open] .overview-chevron{ transform: rotate(180deg); }
.users-toolbar{ display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; }
.users-toolbar .select{ width:auto; flex:0 1 220px; }
.users-search{ position:relative; flex:1 1 260px; min-width:0; }
.users-search .icon{ position:absolute; left:.8rem; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--text-3); pointer-events:none; }
.users-search .input{ padding-left:2.4rem; width:100%; }
@media (max-width: 560px){ .users-toolbar .select{ flex:1 1 calc(50% - .3rem); } }
/* Usuarios: state of each person, and a password shown to read aloud or copy. */
.user-flag{ display:inline-flex; align-items:center; gap:.3rem; color:var(--text-2); }
.user-flag .icon{ width:.9em; height:.9em; flex:none; }
.not-manageable{ display:inline-flex; padding:.4rem; }
.not-manageable .icon{ width:1rem; height:1rem; }
.pw-generated-box{ display:flex; flex-direction:column; gap:.6rem; }
.pw-generated{
  display:block; padding:.85rem 1rem; border-radius:var(--r); background:var(--surface-3); border:1px solid var(--border);
  font-family:var(--mono); font-size:1.3rem; font-weight:600; letter-spacing:.06em; color:var(--text);
  text-align:center; overflow-wrap:anywhere; user-select:all; -webkit-user-select:all; min-height:3.2rem;
}
.switch-row{ align-items:flex-start; gap:1rem; }
.switch-row .strong{ font-weight:600; }
/* ---------- Contact-form preview: a working copy of the site's form (light, as on the site) ---------- */
.sim-controls{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; }
.sim-stage{ position:relative; overflow:hidden; overflow:clip; border-radius:var(--r-lg); background:repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 8px, var(--surface-3) 8px, var(--surface-3) 16px); padding:0; transition: height var(--t) var(--ease); }
.sim-frame{ transform-origin: top left; transition: width var(--t) var(--ease); }
.form-sim{ background:#f5f5f5; color:#222; border-radius:14px; padding:1.4rem; font-family:'Roboto', system-ui, sans-serif; box-shadow:0 1px 3px rgba(0,0,0,.08); }
.sim-frame[data-device="desktop"] .form-sim, .sim-frame[data-device="tablet"] .form-sim{ padding:2rem; }
.sim-title{ margin:0 0 1rem; font-family:'Oswald', system-ui, sans-serif; font-size:1.2rem; text-transform:uppercase; letter-spacing:.02em; color:#0B1F3A; }
.sim-row{ display:grid; grid-template-columns:1fr; gap:0 1rem; }
/* Same rule as the site (assets/main.css): side by side above a 560 px screen. */
.sim-frame[data-device="tablet"] .sim-row, .sim-frame[data-device="desktop"] .sim-row{ grid-template-columns:1fr 1fr; }
.sim-field{ margin-bottom:.9rem; position:relative; }
.sim-field > label{ display:block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#222; margin-bottom:.35rem; }
.form-sim input, .form-sim textarea, .sim-select{ width:100%; box-sizing:border-box; border:1px solid #d9d9d9; border-radius:8px; padding:.75em .9em; font:400 14px/1.4 'Roboto', system-ui, sans-serif; color:#222; background:#fff; }
.form-sim textarea{ resize:none; min-height:80px; }
.form-sim input:focus, .form-sim textarea:focus, .sim-select:focus-visible{ border-color:#2EC4B6; box-shadow:0 0 0 4px rgba(46,196,182,.18); outline:none; }
.sim-select{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; text-align:left; cursor:pointer; }
.sim-select .icon{ width:14px; height:14px; flex:none; transition: transform var(--t-fast); color:#555; }
.sim-select.open{ border-color:#2EC4B6; border-radius:8px 8px 0 0; box-shadow:0 0 0 4px rgba(46,196,182,.18); }
.sim-select.open .icon{ transform: rotate(180deg); }
.sim-select.placeholder .sim-select-text{ color:#757575; }
.sim-list{ list-style:none; margin:0; padding:.25rem 0; border:1px solid #2EC4B6; border-top:0; border-radius:0 0 8px 8px; background:#fff; max-height:260px; overflow:auto; box-shadow:0 10px 24px rgba(0,0,0,.12); animation: fade-in 140ms var(--ease) both; }
.sim-option{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.5rem .9rem; font-size:14px; color:#222; cursor:pointer; overflow-wrap:anywhere; }
.sim-option:hover, .sim-option:focus-visible{ background:#e6f6f4; outline:none; }
.sim-option.placeholder{ color:#757575; cursor:default; }
.sim-option.placeholder:hover{ background:transparent; }
.sim-option.chosen{ background:#2EC4B6; color:#0B1F3A; font-weight:600; }
.sim-option.fallback > span:first-child::after{ content:" · ES"; font-size:.72rem; font-weight:700; color:#757575; }
.sim-tag{ flex:none; font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; padding:.1rem .45rem; border-radius:999px; }
.sim-tag.new{ background:#e8f6ec; color:#166534; }
.sim-tag.edited{ background:#e8effd; color:#1d4ed8; }
.sim-err{ display:block; color:#b3261e; font-size:.76rem; margin-top:.3rem; }
.sim-field.invalid input, .sim-field.invalid textarea, .sim-field.invalid .sim-select{ border-color:#b3261e; border-width:2px; }
.sim-submit{ width:100%; border:0; border-radius:999px; padding:.85rem 1rem; font:700 .95rem/1 'Roboto', system-ui, sans-serif; color:#0B1F3A; background:linear-gradient(135deg, #00807F 0%, #2EC4B6 55%, #7FE3D8 100%); box-shadow:0 10px 26px rgba(46,196,182,.3); cursor:pointer; }
.sim-submit:focus-visible{ outline:3px solid #0B1F3A; outline-offset:2px; }
.sim-status{ margin:.7rem 0 0; font-size:.86rem; font-weight:600; min-height:1.2em; }
.sim-status.ok{ color:#1e7e34; } .sim-status.bad{ color:#b3261e; }
.sim-note{ margin:.6rem 0 0; font-size:.76rem; color:#666; }

.section-title{ margin:0; font-size:1rem; color:var(--text-2); font-weight:700; letter-spacing:.01em; }
.incident-list .badge{ margin-left:.5rem; vertical-align:1px; }
.check-help{ align-items:flex-start; }
.check-help > span{ display:grid; gap:.1rem; }
.check-help .check-title{ font-size:.92rem; }
.check-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.check-list li{ display:flex; gap:.6rem; align-items:flex-start; font-size:.92rem; }
.check-list .icon{ flex:none; width:18px; height:18px; margin-top:.1rem; color:var(--ok); }

.empty{ display:grid; justify-items:center; text-align:center; gap:.6rem; padding:2.2rem 1rem; color:var(--text-2); }
.empty .icon-tile{ width:56px; height:56px; border-radius:16px; }
.empty .icon-tile .icon{ width:26px; height:26px; }
.empty h3{ font-size:1.02rem; }
.empty p{ max-width:44ch; margin:0; }

.lead-answers{ margin-top:.1rem; }
.small-title{ margin:1rem 0 0; font-size:.8rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--text-2); }
.report-desc{ white-space:pre-wrap; overflow-wrap:anywhere; background:var(--surface-2); border-radius:var(--r); padding:.75rem .9rem; font-size:.9rem; }
details.disclosure > summary{ cursor:pointer; font-weight:600; font-size:.88rem; color:var(--accent); list-style:none; display:inline-flex; gap:.35rem; align-items:center; min-height:32px; }
details.disclosure > summary::-webkit-details-marker{ display:none; }
details.disclosure > summary .icon{ transition: transform var(--t) var(--ease); }
details.disclosure[open] > summary .icon{ transform: rotate(180deg); }
.context-list{ margin:.5rem 0 0; font-size:.82rem; }
.faq-list details{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.faq-list details + details{ margin-top:.6rem; }
.faq-list summary{ cursor:pointer; padding:.9rem 1rem; font-weight:650; display:flex; justify-content:space-between; gap:1rem; align-items:center; list-style:none; min-height:48px; }
.faq-list summary::-webkit-details-marker{ display:none; }
.faq-list summary .icon{ transition: transform var(--t) var(--ease); color:var(--text-3); }
.faq-list details[open] summary .icon{ transform: rotate(180deg); }
.faq-list .faq-body{ padding:0 1rem 1rem; color:var(--text-2); font-size:.93rem; }
.faq-list .faq-body ol, .faq-list .faq-body ul{ padding-left:1.2rem; margin:.3rem 0 0; }

/* ---------- Auth screens ---------- */
.auth{
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:1.25rem 1rem 2rem;
  background: radial-gradient(1200px 500px at 85% -10%, rgba(46,196,182,.14), transparent 60%), radial-gradient(900px 500px at -10% 110%, rgba(11,31,58,.08), transparent 60%), var(--bg);
}
.auth-top{ display:flex; flex-wrap:wrap; justify-content:center; gap:.4rem; margin:0 auto .9rem; width:min(440px, 100%); }
.auth-top .seg-text{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.auth > .stack{ width:min(440px, 100%); }
.auth-card{ width:100%; background:var(--surface); border:1px solid var(--border); border-radius:var(--r-xl); box-shadow:var(--shadow-2); padding:1.6rem 1.3rem; animation: dialog-in var(--t-slow) var(--ease); }
.auth-brand{ display:flex; align-items:center; gap:.75rem; margin-bottom:1.3rem; }
.auth-brand img{ width:46px; height:46px; }
.auth-brand strong{ display:block; font-size:1.08rem; }
.auth-brand span{ font-size:.82rem; color:var(--text-3); font-weight:600; }
.auth-card h1{ font-size:1.35rem; margin-bottom:.35rem; }
.auth-card .lead{ color:var(--text-2); margin-bottom:1.2rem; font-size:.95rem; }
.auth-foot{ margin-top:1.2rem; text-align:center; font-size:.86rem; color:var(--text-3); }

/* ---------- First sign-in: language and appearance ---------- */
.welcome > .stack{ width:min(580px, 100%); }
.welcome .auth-card{ padding:1.6rem 1.25rem 1.4rem; }
.welcome-eyebrow{ display:inline-flex; align-items:center; gap:.4rem; margin:0 0 .5rem; padding:.25rem .6rem; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:.76rem; font-weight:700; letter-spacing:.02em; }
.welcome-eyebrow .icon{ width:14px; height:14px; }
.welcome-group{ margin-top:1.25rem; }
.welcome-legend{ display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.98rem; margin-bottom:.15rem; }
.welcome-legend .icon{ width:18px; height:18px; color:var(--accent); }
.welcome-hint{ margin:0 0 .65rem; font-size:.84rem; color:var(--text-2); }
.welcome-options{ display:grid; gap:.6rem; }
.welcome-options.two{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.welcome-options.three{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.welcome-option{ position:relative; display:flex; align-items:center; gap:.7rem; min-height:64px; padding:.75rem .8rem; border:1px solid var(--border-strong); border-radius:var(--r-lg); background:var(--surface); cursor:pointer; transition: border-color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast); }
.welcome-option:hover{ border-color:var(--text-3); }
.welcome-option input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.welcome-option:has(input:checked){ border-color:var(--brand); background:var(--accent-soft); box-shadow:0 0 0 1px var(--brand) inset; }
.welcome-option:has(input:focus-visible){ outline:3px solid var(--focus); outline-offset:2px; }
.welcome-option .opt-badge{ flex:none; width:38px; height:38px; border-radius:11px; display:grid; place-items:center; font-weight:800; font-size:.82rem; letter-spacing:.04em; background:var(--surface-3); color:var(--text-2); transition: background-color var(--t-fast), color var(--t-fast); }
.welcome-option:has(input:checked) .opt-badge{ background:var(--brand); color:var(--brand-ink); }
.welcome-option .opt-text{ min-width:0; display:grid; gap:.1rem; }
.welcome-option .opt-text strong{ font-size:.96rem; }
.welcome-option .opt-text small{ font-size:.8rem; color:var(--text-2); line-height:1.35; }
.welcome-option .opt-check{ margin-left:auto; flex:none; width:20px; height:20px; color:var(--brand); opacity:0; transform:scale(.6); transition: opacity var(--t-fast), transform var(--t-fast); }
.welcome-option:has(input:checked) .opt-check{ opacity:1; transform:none; }
.welcome-option.theme{ flex-direction:column; align-items:stretch; gap:.55rem; padding:.55rem .55rem .65rem; }
.welcome-option.theme .opt-check{ position:absolute; top:.35rem; right:.35rem; width:22px; height:22px; background:var(--surface); border-radius:50%; }
.theme-name{ display:flex; align-items:center; gap:.4rem; font-weight:700; font-size:.92rem; padding:0 .2rem; }
.theme-name .icon{ width:16px; height:16px; color:var(--text-2); flex:none; }
.theme-name small{ display:block; font-weight:500; font-size:.76rem; color:var(--text-2); }
/* Miniature of the panel in each appearance (fixed colours: it shows the theme, whatever the current one) */
.tp{ height:70px; border-radius:9px; overflow:hidden; display:grid; grid-template-columns:28% 1fr; border:1px solid rgba(0,0,0,.08); }
.tp i{ display:block; border-radius:3px; }
.tp .tp-side{ padding:7px 6px; display:grid; gap:5px; align-content:start; }
.tp .tp-main{ padding:8px; display:grid; gap:6px; align-content:start; }
.tp-light .tp-side{ background:#ffffff; border-right:1px solid #ececea; } .tp-light .tp-main{ background:#f6f5f3; }
.tp-light .tp-side i{ height:5px; background:#e2e1de; } .tp-light .tp-main i{ height:6px; background:#e2e1de; }
.tp-dark .tp-side{ background:#1b1917; border-right:1px solid #2c2926; } .tp-dark .tp-main{ background:#121110; }
.tp-dark .tp-side i{ height:5px; background:#3a3633; } .tp-dark .tp-main i{ height:6px; background:#34302d; }
.tp .tp-side i:first-child{ width:70%; background:#2EC4B6; }
.tp .tp-main i.w60{ width:60%; } .tp .tp-main i.w40{ width:40%; }
.tp .tp-main i.card{ height:20px; border-radius:5px; }
.tp-light .tp-main i.card{ background:#ffffff; border:1px solid #ececea; } .tp-dark .tp-main i.card{ background:#1d1b19; border:1px solid #2c2926; }
.tp-auto{ position:relative; display:block; height:70px; border-radius:9px; overflow:hidden; border:1px solid rgba(0,0,0,.08); }
.tp-auto > .tp{ position:absolute; inset:0; border:0; border-radius:0; height:auto; }
.tp-auto > .tp-dark{ clip-path: polygon(62% 0, 100% 0, 100% 100%, 38% 100%); }
.welcome-actions{ margin-top:1.4rem; display:grid; gap:.6rem; }
.welcome-actions .btn{ min-height:48px; font-size:1rem; }
.welcome-note{ margin:0; text-align:center; font-size:.8rem; color:var(--text-3); }
@media (min-width: 560px){ .welcome .auth-card{ padding:2rem 2rem 1.7rem; } }
@media (max-width: 440px){
  .welcome-options.two{ grid-template-columns:1fr; }
  .welcome-option.theme{ padding:.45rem .45rem .55rem; }
  .tp, .tp-auto{ height:54px; }
  .theme-name{ font-size:.84rem; justify-content:center; text-align:center; }
  .theme-name > .icon:first-child, .theme-name small{ display:none; }
}
@media (max-width: 370px){
  .welcome-options.three{ grid-template-columns:1fr; }
  .welcome-option.theme{ flex-direction:row; align-items:center; min-height:0; }
  .tp, .tp-auto{ width:84px; flex:none; height:50px; }
  .theme-name{ justify-content:flex-start; text-align:left; font-size:.92rem; padding-right:2rem; }
  .theme-name > .icon:first-child{ display:inline-block; }
  .theme-name small{ display:block; }
  .welcome-option.theme .opt-check{ top:50%; right:.7rem; transform:translateY(-50%); }
}

/* ---------- Dashboard ---------- */
.hello{ display:flex; gap:1rem; align-items:center; }
.dash-grid{ display:grid; gap:1rem; }
.dash-grid > *{ min-width:0; } /* long unbreakable text must not widen the column on phones */

/* ---------- Monthly report (owner) ---------- */
.report-preview{ display:grid; gap:.75rem; padding:1.25rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); border-top:4px solid var(--brand); }
.report-eyebrow{ font-size:.78rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.report-headline{ font-size:1.35rem; line-height:1.25; margin:0; }
.report-preview .badge{ justify-self:start; }
.report-preview.report-technical{ border-top-color:var(--info); }
.report-preview .report-eyebrow{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; }
.report-preview .report-eyebrow .badge{ letter-spacing:.02em; }
.report-tabs{ justify-self:start; max-width:100%; }
.report-summary{ font-size:1rem; line-height:1.6; margin:0; }
.report-preview .kpi-num{ font-size:1.35rem; }
.report-section h4{ margin:.4rem 0 .2rem; font-size:1rem; }
.report-section ul{ margin:.2rem 0 0; padding-left:1.2rem; display:grid; gap:.25rem; }
/* Recipient tags (own names: .chip is the radio pill of the report dialog) */
.tag-list{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; }
.tag{ display:inline-flex; align-items:center; gap:.35rem; padding:.3rem .35rem .3rem .7rem; border-radius:999px; background:var(--surface-2); border:1px solid var(--border); font-size:.88rem; max-width:100%; overflow-wrap:anywhere; }
.tag-fixed{ padding-right:.7rem; background:var(--accent-soft); border-color:transparent; }
.tag-x{ display:inline-grid; place-items:center; width:28px; height:28px; border:0; border-radius:50%; background:transparent; color:var(--text-2); cursor:pointer; flex:none; }
.tag-x:hover, .tag-x:focus-visible{ background:var(--surface-3); color:var(--text); }
.add-row{ display:flex; gap:.5rem; align-items:flex-end; flex-wrap:wrap; }
.add-row .field{ flex:1 1 220px; margin:0; }

/* ---------- Monitoring (owner) ---------- */
.kpi-grid{ display:grid; gap:.75rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.kpi{ display:flex; flex-direction:column; gap:.2rem; padding:1rem 1.1rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); min-width:0; }
.kpi-num{ display:flex; align-items:center; gap:.45rem; font-size:clamp(1.15rem, 3.6vw, 1.45rem); font-weight:800; line-height:1.15; overflow-wrap:break-word; }
.kpi-num .icon{ flex:none; }
@media (max-width: 560px){ .kpi-grid > .kpi:first-child{ grid-column: 1 / -1; } .uptime-tiles > .kpi:first-child{ grid-column: auto; } .kpi-grid, .uptime-tiles, .kpi-compact{ grid-template-columns: 1fr 1fr; } }
.kpi-label{ font-size:.82rem; color:var(--text-2); }
.kpi-ok .kpi-num{ color:var(--ok); } .kpi-bad .kpi-num{ color:var(--bad); } .kpi-warn .kpi-num{ color:var(--warn); }
.log-filters{ display:grid; gap:.6rem .75rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); align-items:end; margin-bottom:.9rem; }
.log-filters .field{ margin:0; }

.log-filters .log-search{ grid-column: 1 / -1; }
.kv-tight{ grid-template-columns: minmax(7rem, 42%) minmax(0, 1fr); }
.log-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.log-item{ display:grid; gap:.35rem; padding:.8rem .9rem; border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2); min-width:0; }
.log-message{ color:var(--text-2); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:.82rem; }
.log-item .kv code, .code-line code{ font-size:.82rem; }
.log-pager{ margin-top:.8rem; }
.code-line{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.6rem .75rem; border-radius:var(--r); background:var(--surface-2); border:1px dashed var(--border-strong); }
.code-line code{ flex:1 1 220px; min-width:0; }
.table-compact td, .table-compact th{ padding:.5rem .75rem; }
.table .num{ text-align:right; font-variant-numeric: tabular-nums; white-space:nowrap; }
.table tbody th{ text-align:left; font-weight:600; color:var(--text); text-transform:none; letter-spacing:0; font-size:.88rem; background:transparent; border-bottom:1px solid var(--border); padding:.5rem .75rem; }
.quick{ display:grid; gap:.75rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.quick a{ display:flex; align-items:center; gap:.8rem; padding:.95rem; }
.quick a strong{ display:block; font-size:.95rem; }
.quick a span:not(.icon-tile){ font-size:.82rem; color:var(--text-2); }
.intro-steps{ list-style:none; padding:0; margin:0; display:grid; gap:.75rem; counter-reset: step; }
.intro-steps li{ display:flex; gap:.75rem; align-items:flex-start; }
.intro-steps li::before{ counter-increment: step; content: counter(step); flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-weight:800; font-size:.85rem; background:var(--brand); color:var(--brand-ink); }
.intro-card{ background: linear-gradient(135deg, var(--accent-soft), var(--surface) 70%); }
.intro-actions{ margin-top:1.1rem; }


/* ==========================================================================
   Polish — motion, card headers, form grids, switches, save bar
   Motion uses only opacity/transform (compositor-only, no layout work) and
   is switched off by prefers-reduced-motion (see the end of this file).
   ========================================================================== */
@keyframes rise-in{ from{ opacity:0; transform:translateY(8px); } }
/* backwards, not both: the start state covers the delay, and once finished nothing keeps
   filling — a filled transform would leave each block as its own layer and trap open
   menus under the notifications. */
.main.view-enter > *{ animation: rise-in 260ms var(--ease) backwards; }
.main.view-enter > :nth-child(2){ animation-delay:35ms; }
.main.view-enter > :nth-child(3){ animation-delay:70ms; }
.main.view-enter > :nth-child(n+4){ animation-delay:105ms; }
/* Content that arrives after loading: a light cascade. */
.stack-lg > .card, .stack-lg > .card-group, .dash-grid > .stack-lg > *, .grid-cards > *, .overview > *{ animation: rise-in 280ms var(--ease) both; }
.stack-lg > :nth-child(2), .grid-cards > :nth-child(2), .overview > :nth-child(2){ animation-delay:40ms; }
.stack-lg > :nth-child(3), .grid-cards > :nth-child(3), .overview > :nth-child(3){ animation-delay:80ms; }
.stack-lg > :nth-child(n+4), .grid-cards > :nth-child(n+4){ animation-delay:120ms; }

/* Loading placeholder: appears only if loading takes a moment. */
.page-loading{ display:grid; gap:.8rem; min-height:0; place-items:stretch; padding:.25rem 0; animation: fade-in 200ms 150ms both; }
.page-loading .skeleton{ height:14px; border-radius:7px; }
.page-loading .sk-title{ width:min(240px, 60%); height:22px; }
.page-loading .sk-line{ width:min(520px, 90%); }
.page-loading .sk-block{ height:120px; border-radius:var(--r-lg); }

/* Cards */
.card{ transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.card-head{ display:flex; flex-wrap:wrap; gap:.6rem .85rem; align-items:flex-start; margin-bottom:1.1rem; }
.card-head > .grow{ flex:1 1 220px; }
.card-head.title-only{ align-items:center; }
.card-head .icon-tile{ width:40px; height:40px; border-radius:12px; }
.card-head .icon-tile .icon{ width:19px; height:19px; }
.card-head h2{ font-size:1.08rem; }
.card-head p{ margin:.2rem 0 0; color:var(--text-2); font-size:.9rem; max-width:70ch; }
.card-head > .badge{ margin-left:auto; flex:none; align-self:center; }
@media (max-width: 559px){ .card-head > .badge{ margin-left:calc(40px + .85rem); align-self:flex-start; } }
.form-grid + .hint{ margin-top:.75rem; }
.card-foot{
  display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between;
  margin:1.2rem -1.15rem -1.15rem; padding:.85rem 1.15rem; border-top:1px solid var(--border);
  background:var(--surface-2); border-radius:0 0 var(--r-lg) var(--r-lg);
}
.card-foot .row{ margin-left:auto; }
.icon-tile.ok{ background:var(--ok-soft); color:var(--ok); }
.icon-tile.warn{ background:var(--warn-soft); color:var(--warn); }
.icon-tile.info{ background:var(--info-soft); color:var(--info); }

/* Form grids: fields line up row by row whatever their hints say. */
.form-grid{ display:grid; gap:1rem 1.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); align-items:start; }
.form-grid > *{ min-width:0; }
.form-grid > .field{ align-content:start; }
.form-grid > .span-all{ grid-column: 1 / -1; }
.field-group{ margin-top:1.25rem; padding-top:1.15rem; border-top:1px dashed var(--border-strong); }
.subhead{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.5rem 1rem; margin-bottom:.85rem; }
.subhead h3{ font-size:.98rem; }
.subhead p{ margin:.15rem 0 0; font-size:.86rem; color:var(--text-2); }
.help-box{ margin-top:.9rem; padding:.75rem .9rem; border-radius:var(--r); background:var(--surface-2); border:1px solid var(--border); }
.help-box ol{ margin:.5rem 0 0; padding-left:1.2rem; display:grid; gap:.3rem; font-size:.88rem; color:var(--text-2); }
.inline-ok{ display:flex; gap:.55rem; align-items:flex-start; padding:.7rem .85rem; border-radius:var(--r); background:var(--ok-soft); color:var(--text); font-size:.9rem; }
.inline-ok > .icon{ color:var(--ok); margin-top:.15rem; }

/* Overview tiles (state at a glance) */
.overview{ display:grid; gap:.75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.overview-item{ display:flex; gap:.75rem; align-items:center; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-1); min-width:0; }
.overview-item .icon-tile{ width:38px; height:38px; border-radius:11px; }
.overview-item strong{ display:block; font-size:.92rem; }
.overview-item .grow > span{ display:block; font-size:.82rem; color:var(--text-2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Switch (input type=checkbox role=switch) */
.switch{ position:relative; display:inline-flex; flex:none; width:44px; height:26px; margin-top:.05rem; }
.switch input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; z-index:1; }
.switch .track{ width:100%; height:100%; border-radius:999px; background:var(--border-strong); transition: background-color var(--t) var(--ease); }
.switch .thumb{ position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28); transition: transform var(--t) var(--ease); pointer-events:none; }
.switch input:checked ~ .track{ background:var(--brand); }
.switch input:checked ~ .thumb{ transform:translateX(18px); }
.switch input:focus-visible ~ .track{ outline:3px solid var(--focus); outline-offset:2px; }
.switch input:disabled{ cursor:progress; }
.switch input:disabled ~ .track, .switch input:disabled ~ .thumb{ opacity:.65; }

/* Rules list (automatic alerts) */
.rule-list{ list-style:none; margin:0; padding:0; }
.rule{ display:flex; gap:.9rem; align-items:flex-start; padding:.8rem .2rem; border-top:1px solid var(--border); transition: background-color var(--t-fast); }
.rule:first-child{ border-top:0; padding-top:.2rem; }
.rule label{ cursor:pointer; font-weight:600; }
.rule .badge{ margin-left:.4rem; vertical-align:1px; }
.rule.off label, .rule.off .small{ color:var(--text-3); }
.finding-list{ margin:.5rem 0; padding-left:1.1rem; font-size:.88rem; }
.steps{ margin:.3rem 0 .6rem; padding-left:1.2rem; display:grid; gap:.2rem; }

/* Contact-form options (Sitio web → Formulario de contacto) */
.svc-list{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.svc-list > *{ min-width:0; }
.svc-row{ border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); padding:.7rem .9rem .9rem; transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease); }
.svc-row:focus-within{ border-color:var(--border-strong); box-shadow:var(--shadow-1); background:var(--surface); }
.svc-row.is-new{ animation: rise-in 260ms var(--ease) both; border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
.svc-row-head{ display:flex; align-items:center; gap:.6rem; margin-bottom:.55rem; }
.svc-row-head strong{ font-size:.92rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.svc-title.empty{ color:var(--text-3); font-weight:600; }
.svc-num{ display:grid; place-items:center; width:26px; height:26px; border-radius:8px; background:var(--accent-soft); color:var(--accent); font-size:.8rem; font-weight:800; font-variant-numeric:tabular-nums; flex:none; }
.svc-actions{ display:flex; gap:.15rem; margin-left:auto; }
.svc-actions .btn-icon{ width:36px; min-height:36px; color:var(--text-2); }
.svc-actions .btn-icon:hover:not([disabled]){ color:var(--text); }
.svc-actions [data-act="del"]:hover:not([disabled]){ color:var(--bad); background:var(--bad-soft); }
.svc-fields{ display:grid; gap:.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items:start; }
.svc-fields > .field{ align-content:start; }
.svc-link{ margin-top:.5rem; padding-inline:.4rem; color:var(--accent); }
.svc-preview{ margin-top:1rem; padding:1rem; border-radius:var(--r-lg); background:var(--surface-2); border:1px dashed var(--border-strong); }
.tips{ list-style:none; margin:1rem 0 0; padding:0; display:grid; gap:.5rem; font-size:.86rem; color:var(--text-2); }
.tips li{ display:flex; gap:.5rem; align-items:flex-start; }
.tips .icon{ color:var(--info); margin-top:.15rem; flex:none; }
/* Contact form questions (Formulario de contacto) */
.fb-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.fb-list > *{ min-width:0; }
.fb-row{ container-type:inline-size; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-2); transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), background-color var(--t) var(--ease); }
.fb-row.open, .fb-row:focus-within{ border-color:var(--border-strong); background:var(--surface); box-shadow:var(--shadow-1); }
.fb-row.is-new{ animation: rise-in 260ms var(--ease) both; border-color:color-mix(in srgb, var(--brand) 45%, var(--border)); }
.fb-row.dragging{ box-shadow:var(--shadow-2, var(--shadow-1)); border-color:var(--brand); background:var(--surface); position:relative; z-index:2; }
.fb-row-head{ display:flex; align-items:center; gap:.55rem; padding:.55rem .6rem .55rem .35rem; min-height:60px; }
.fb-grip{ flex:none; display:grid; place-items:center; width:28px; height:40px; border-radius:8px; color:var(--text-3); cursor:grab; touch-action:none; }
.fb-grip:hover{ color:var(--text); background:var(--surface-3); }
.fb-row.dragging .fb-grip{ cursor:grabbing; color:var(--brand); }
.fb-type{ flex:none; display:grid; place-items:center; width:34px; height:34px; border-radius:10px; background:var(--accent-soft); color:var(--accent); }
.fb-type .icon{ width:18px; height:18px; }
.fb-summary{ flex:1; min-width:0; display:grid; gap:.15rem; }
.fb-label{ font-size:.94rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.fb-label.empty{ color:var(--text-3); }
.fb-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .5rem; font-size:.8rem; color:var(--text-2); }
.fb-chips{ display:inline-flex; flex-wrap:wrap; gap:.3rem; }
.fb-chip{ display:inline-flex; align-items:center; gap:.25rem; padding:.05rem .5rem; border-radius:999px; font-size:.72rem; font-weight:700; line-height:1.5; }
.fb-chip .icon{ width:11px; height:11px; }
.fb-chip.req{ background:var(--accent-soft); color:var(--accent); }
.fb-chip.opt{ background:var(--surface-3); color:var(--text-2); }
.fb-chip.fixed{ background:var(--info-soft); color:var(--info); }
.fb-actions{ display:flex; gap:.1rem; flex:none; }
.fb-actions .btn-icon{ width:36px; min-height:36px; color:var(--text-2); }
.fb-actions .btn-icon:hover:not([disabled]){ color:var(--text); }
.fb-actions [data-act="edit"][aria-expanded="true"]{ color:var(--accent); background:var(--accent-soft); }
.fb-actions [data-act="del"]:hover:not([disabled]){ color:var(--bad); background:var(--bad-soft); }
.fb-editor{ display:grid; gap:.9rem; padding:.2rem .9rem .9rem; border-top:1px solid var(--border); padding-top:.9rem; }
.fb-pair{ display:grid; gap:.75rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items:start; }
.fb-settings{ display:grid; gap:.9rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); align-items:start; }
.fb-setting{ display:grid; gap:.35rem; align-content:start; }
.fb-setting .hint{ margin:0; font-size:.8rem; color:var(--text-2); }
.fb-switch{ display:inline-flex; align-items:center; gap:.6rem; font-weight:600; cursor:pointer; min-height:36px; }
.fb-options .row{ margin-top:.2rem; }
.fb-opts{ list-style:none; margin:.2rem 0 0; padding:0; display:grid; gap:.45rem; }
.fb-opt{ display:grid; grid-template-columns:auto 1fr auto; gap:.5rem; align-items:center; }
.fb-opt-inputs{ display:grid; gap:.4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); min-width:0; }
.fb-opt-in{ display:grid; gap:.2rem; min-width:0; }
.fb-opt-actions{ display:flex; gap:.1rem; }
.fb-opt-actions .btn-icon{ width:34px; min-height:34px; color:var(--text-2); }
.fb-opt.invalid .input{ border-color:var(--bad); }
.fb-opt > .field-error{ grid-column: 2 / -1; }
.fb-editor-foot{ display:flex; justify-content:flex-end; }
/* Narrow rows (phones, or a narrow column): the buttons go on their own line and the question can wrap. */
@container (max-width: 470px){
  .fb-row-head{ flex-wrap:wrap; row-gap:.2rem; padding-bottom:.35rem; }
  .fb-summary{ flex-basis:calc(100% - 80px); }
  .fb-label{ white-space:normal; overflow-wrap:anywhere; }
  .fb-actions{ width:100%; justify-content:flex-end; border-top:1px dashed var(--border); padding-top:.25rem; }
  .fb-opt{ grid-template-columns:auto 1fr; }
  .fb-opt-actions{ grid-column:2; justify-content:flex-end; }
}
.fb-types{ display:grid; gap:.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.fb-type-card{ display:flex; align-items:flex-start; gap:.7rem; padding:.8rem; min-height:72px; border:1px solid var(--border-strong); border-radius:var(--r-lg); background:var(--surface); color:var(--text); text-align:left; cursor:pointer; font:inherit; transition: border-color var(--t-fast), background-color var(--t-fast), transform var(--t-fast); }
.fb-type-card:hover{ border-color:var(--brand); background:var(--accent-soft); }
.fb-type-card:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.fb-type-text{ display:grid; gap:.15rem; min-width:0; }
.fb-type-text strong{ font-size:.92rem; }
.fb-type-text span{ font-size:.8rem; color:var(--text-2); line-height:1.35; }
.fb-rcpt-add{ display:flex; gap:.5rem; align-items:flex-end; margin-top:.9rem; }
.fb-rcpt-add .field{ flex:1; min-width:0; }
/* Preview: optional mark, help, choices */
.sim-opt{ font-weight:400; text-transform:none; letter-spacing:0; color:#5c5c5c; }
.sim-legend{ display:block; font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:#222; margin-bottom:.35rem; }
.sim-help{ display:block; margin:-.15rem 0 .4rem; font-size:.76rem; color:#666; }
.sim-help:empty{ margin:0; }
/* Half-row pairs share rows (label · help · control · error), so their inputs line up. */
.sim-row{ grid-template-rows:repeat(4, auto); }
.sim-row > .sim-field{ display:grid; grid-row:span 4; grid-template-rows:subgrid; align-content:start; }
.sim-choices{ display:grid; gap:.35rem; }
.sim-choice{ display:flex; align-items:center; gap:.55rem; min-height:40px; padding:.45rem .7rem; border:1px solid #d9d9d9; border-radius:8px; background:#fff; color:#222; font-size:14px; cursor:pointer; }
.form-sim .sim-choice input{ width:18px; height:18px; margin:0; padding:0; accent-color:#2EC4B6; flex:none; }
.sim-choice:has(input:checked){ border-color:#2EC4B6; background:#e6f6f4; }
.sim-field.invalid .sim-choice{ border-color:#b3261e; }
.sim-field .sim-tag{ margin-left:.35rem; vertical-align:1px; }
/* The preview column follows the list while scrolling (the column, not the card, is the grid item). */
@media (min-width: 1024px){ .svc-side{ position:sticky; top:calc(var(--topbar-h) + 1rem); } }

/* Support tickets */
.nav-badge{ margin-left:auto; min-width:22px; height:22px; padding:0 .4rem; border-radius:999px; background:var(--brand); color:var(--brand-ink); font-size:.75rem; font-weight:800; display:inline-grid; place-items:center; animation: pop-in var(--t) var(--ease) both; }
.ticket-toolbar{ display:grid; gap:.75rem; }
.filter-tabs{ display:flex; flex-wrap:wrap; gap:.4rem; }
/* Phones: the status tabs are one row that slides (the selected one in view, a fade where there is more),
   and secondary filters wait behind «Filtros», so the list starts on the first screen. */
@media (max-width: 719px){
  .filter-tabs.scroll-row{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .filter-tabs.scroll-row::-webkit-scrollbar{ display:none; }
  .filter-tabs.scroll-row > *{ flex:none; }
  .filters-more:not(.open){ display:none !important; }
  .ticket-search.row > .filters-more{ order:2; flex-basis:100%; display:flex; flex-wrap:wrap; gap:.6rem; }
  .ticket-search.row > .filters-toggle{ order:1; flex:none; }
  .ticket-toolbar .ticket-search.row > .input{ flex:1 1 140px; min-width:0; } /* the search and «Filtros» share a line */
}
@media (max-width: 719px){
  .activity-filters{ display:grid; gap:.9rem; }
  .activity-filters > .filters-toggle{ justify-self:start; }
}
@media (min-width: 720px){
  .filters-toggle{ display:none !important; }
  .ticket-search.row > .filters-more{ display:contents; }
}
.filter-tab{ display:inline-flex; align-items:center; gap:.45rem; min-height:38px; padding:.35rem .8rem; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-2); font-weight:600; font-size:.88rem; white-space:nowrap; transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast); }
.filter-tab:hover{ color:var(--text); border-color:var(--text-3); }
.filter-tab[aria-pressed="true"]{ background:var(--accent-soft); border-color:var(--brand); color:var(--accent); }
.filter-tab .count{ min-width:22px; padding:0 .35rem; border-radius:999px; background:var(--surface-3); font-size:.76rem; font-variant-numeric:tabular-nums; text-align:center; }
.filter-tab[aria-pressed="true"] .count{ background:var(--brand); color:var(--brand-ink); }
.ticket-search .input{ max-width:420px; }
.ticket-list{ list-style:none; margin:0; padding:0; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); overflow:hidden; box-shadow:var(--shadow-1); }
.ticket-list > li + li{ border-top:1px solid var(--border); }
.ticket-row{ display:flex; align-items:center; gap:.85rem; padding:.85rem 1rem; color:inherit; text-decoration:none; transition: background-color var(--t-fast); min-width:0; }
.ticket-row:hover{ background:var(--surface-2); text-decoration:none; }
.ticket-row .icon-tile{ width:38px; height:38px; border-radius:11px; }
.ticket-main{ display:grid; gap:.15rem; min-width:0; }
.ticket-title{ display:flex; align-items:center; gap:.45rem; font-weight:600; min-width:0; }
.ticket-row.unread .ticket-title{ font-weight:800; }
.unread-dot{ width:9px; height:9px; border-radius:50%; background:var(--brand); flex:none; box-shadow:0 0 0 3px var(--accent-soft); }
.ticket-badges{ display:flex; flex-wrap:wrap; gap:.35rem; justify-content:flex-end; flex:none; }
.ticket-chevron{ color:var(--text-3); flex:none; transition: transform var(--t-fast) var(--ease); }
.ticket-row:hover .ticket-chevron{ transform:translateX(2px); }
@media (max-width: 719px){ .ticket-row{ flex-wrap:wrap; } .ticket-main{ flex:1 1 calc(100% - 60px); } .ticket-badges{ margin-left:calc(38px + .85rem); justify-content:flex-start; flex:1 1 calc(100% - 38px - .85rem); min-width:0; } .ticket-chevron{ display:none; } }
.ticket-summary{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .5rem; margin-top:-.4rem; }
.ticket-shot{ display:inline-grid; gap:.35rem; margin-top:.9rem; color:var(--accent); text-decoration:none; max-width:min(100%, 420px); }
.ticket-shot img{ border:1px solid var(--border); border-radius:var(--r); max-height:320px; width:auto; object-fit:contain; background:var(--surface-2); transition: box-shadow var(--t) var(--ease); }
.ticket-shot:hover img{ box-shadow:var(--shadow-2); }
.timeline{ list-style:none; margin:0; padding:0; display:grid; gap:.9rem; }
.timeline-empty{ padding:.25rem 0; }
.timeline-event{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; justify-content:center; text-align:center; color:var(--text-2); }
.timeline-event > .icon{ color:var(--text-3); }
.timeline-msg{ display:flex; gap:.65rem; align-items:flex-start; animation: rise-in 220ms var(--ease) both; }
.timeline-msg.from-support{ flex-direction:row-reverse; }
.timeline-msg .avatar{ width:34px; height:34px; font-size:.78rem; }
.timeline-msg.from-support .avatar{ background:var(--brand); color:var(--brand-ink); }
.bubble{ max-width:min(560px, 100%); min-width:0; padding:.7rem .9rem; border-radius:14px 14px 14px 4px; background:var(--surface-3); }
.from-support .bubble{ border-radius:14px 14px 4px 14px; background:var(--accent-soft); }
.timeline-msg.note .bubble{ background:var(--warn-soft); border:1px dashed color-mix(in srgb, var(--warn) 45%, transparent); }
.bubble-head{ display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .6rem; margin-bottom:.25rem; font-size:.88rem; }
.bubble-body{ white-space:pre-wrap; overflow-wrap:anywhere; font-size:.95rem; }
.composer{ display:grid; gap:.8rem; transition: background-color var(--t) var(--ease), border-color var(--t) var(--ease); }
.composer.is-note{ background:var(--warn-soft); border-color:color-mix(in srgb, var(--warn) 40%, var(--border)); }
.status-steps{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; }
.status-steps li{ display:grid; gap:.2rem; padding:.45rem .55rem; border-radius:var(--r); }
.status-steps li.current{ background:var(--surface-2); outline:1px solid var(--border-strong); }
.status-steps .badge{ justify-self:start; }
@media (min-width: 1024px){ .ticket-side{ position:sticky; top:calc(var(--topbar-h) + 1rem); } }

/* Two-step sign-in and Security */
.auth-alt{ margin-top:1.1rem; padding-top:.9rem; border-top:1px solid var(--border); }
.code-input{ font-family:var(--mono); font-size:1.35rem; letter-spacing:.35em; text-align:center; max-width:280px; }
.steps-intro{ margin:0; padding-left:0; list-style:none; display:grid; gap:.5rem; font-size:.92rem; color:var(--text-2); }
.steps-intro strong{ color:var(--accent); }
.qr-block{ display:flex; flex-wrap:wrap; gap:1rem 1.25rem; align-items:center; }
.qr-block .stack-sm{ flex:1 1 220px; min-width:0; }
.qr{ width:200px; height:200px; padding:10px; background:#fff; border:1px solid var(--border); border-radius:var(--r); flex:none; }
.recovery-codes{ list-style:none; margin:0; padding:.9rem; display:grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap:.5rem .9rem;
  background:var(--surface-2); border:1px dashed var(--border-strong); border-radius:var(--r); counter-reset: rc; }
.recovery-codes li{ font-family:var(--mono); font-size:1rem; letter-spacing:.05em; }
.person-list{ list-style:none; margin:.9rem 0 .4rem; padding:0; }
.person-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .75rem; padding:.6rem 0; border-top:1px solid var(--border); }
.person-row:first-child{ border-top:0; }
.person-row .avatar{ width:34px; height:34px; font-size:.78rem; }
.person-row .grow{ flex:1 1 180px; }

/* Sticky save bar for settings pages */
.save-row{
  position:sticky; bottom:.75rem; z-index:5; display:flex; flex-wrap:wrap; gap:.6rem 1rem; align-items:center; justify-content:space-between;
  padding:.7rem .8rem .7rem 1.1rem; border:1px solid var(--border); border-radius:var(--r-lg);
  background:color-mix(in srgb, var(--surface) 90%, transparent); box-shadow:var(--shadow-2);
  backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  transition: border-color var(--t) var(--ease), box-shadow var(--t) var(--ease);
}
.save-row.dirty{ border-color:color-mix(in srgb, var(--brand) 55%, var(--border)); box-shadow:0 10px 30px rgba(46,196,182,.16), var(--shadow-2); }
.save-state{ display:flex; align-items:center; gap:.5rem; font-size:.88rem; color:var(--text-2); min-width:0; }
.save-state .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); flex:none; }
.save-row.dirty .save-state{ color:var(--text); font-weight:600; }
.save-row.dirty .save-state .dot{ background:var(--brand); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 50%{ transform:scale(1.5); opacity:.55; } }
.save-row .btn{ min-height:40px; }
@media (max-width: 559px){
  /* Phones: one compact row; the state stays available to screen readers. */
  .save-row{ flex-wrap:nowrap; bottom:.5rem; padding:.5rem .5rem .5rem .9rem; }
  .save-state > span:not(.dot){ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
  .save-row .row{ flex-wrap:nowrap; margin-left:auto; }
  .save-row .btn{ padding-inline:.8rem; }
  .save-row .btn-ghost{ display:none; } /* "Descartar" stays on larger screens */
}

/* Navigation: active marker slides in */
.nav a{ position:relative; }
.nav a::before{
  content:""; position:absolute; left:-.75rem; top:9px; bottom:9px; width:3px; border-radius:0 3px 3px 0;
  background:var(--brand); transform:scaleY(0); transition: transform var(--t) var(--ease);
}
.nav a[aria-current="page"]::before{ transform:scaleY(1); }

/* Buttons: a touch of depth on the main action */
.btn-primary{ background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)); }
.btn-primary:hover{ box-shadow: 0 1px 0 rgba(0,0,0,.06), 0 10px 22px rgba(46,196,182,.3); }
@media (hover: hover){ .btn-primary:hover{ transform:translateY(-1px); } .btn-primary:active{ transform:scale(.97); } }
.card-link:focus-visible{ border-color:var(--brand); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (min-width: 560px){
  .auth-top{ position:fixed; top:.75rem; right:.75rem; width:auto; margin:0; z-index:5; }
  .auth-top .seg-text{ position:static !important; width:auto; height:auto; overflow:visible; clip:auto; }
  .main{ padding:1.6rem 1.5rem 6rem; }
  .card{ padding:1.35rem; }
  .auth-card{ padding:2rem 2rem 1.8rem; }
  .toasts{ left:auto; right:1rem; bottom:1rem; width:380px; }
  .savebar{ left:50%; right:auto; width:min(720px, calc(100vw - 2rem)); transform: translate(-50%, 140%); }
  .savebar.show{ transform: translate(-50%, 0); }
  .topbar .report-btn .label-text{ display:inline; }
}
@media (min-width: 720px){
  .lang-cols.two{ grid-template-columns: 1fr 1fr; }
  .slot.split{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items:start; }
  h1{ font-size:1.75rem; }
}
@media (min-width: 1024px){
  :root{ --topbar-h: 64px; }
  .app{ display:grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); grid-template-rows: auto 1fr; }
  .sidebar{ position:sticky; top:0; height:100vh; width:auto; transform:none; box-shadow:none; z-index:30; grid-row: 1 / span 2; }
  .sidebar .close-nav, .topbar .open-nav, .topbar .brand{ display:none; }
  .scrim{ display:none; }
  .topbar{ padding:0 1.5rem; grid-column:2; }
  .main{ grid-column:2; padding:2rem 2rem 7rem; width:100%; }
  .dash-grid{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items:start; }
  .savebar{ left: calc(50% + var(--sidebar-w) / 2); }
}
@media (max-width: 559px){
  .topbar .brand small{ display:none; }
  .topbar .brand span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
}
@media (max-width: 719px){
  .hide-sm{ display:none !important; }
  dialog.dialog, dialog.dialog.wide{ width:100%; max-width:100%; max-height:92vh; margin:auto 0 0; border-radius: var(--r-xl) var(--r-xl) 0 0; }
  dialog.dialog[open]{ animation: sheet-in var(--t-slow) var(--ease); }
  dialog.dialog.closing{ animation: sheet-out var(--t) var(--ease) forwards; }
  .dialog-foot{ padding-bottom: calc(.85rem + env(safe-area-inset-bottom)); }
  .dialog-foot .btn{ flex:1 1 auto; }
  .table-wrap.responsive table, .table-wrap.responsive thead{ display:none; }
}
@media (min-width: 720px){ .only-sm{ display:none !important; } }
@keyframes sheet-in{ from{ transform: translateY(100%); } }
@keyframes sheet-out{ to{ transform: translateY(100%); } }

/* ---------- Prospectos, Estadísticas, ticket ratings ---------- */
.row-end{ display:flex; gap:.75rem; justify-content:flex-end; flex-wrap:wrap; }
.ticket-search.row{ flex-wrap:wrap; }
.ticket-search.row .select{ width:auto; max-width:280px; flex:0 1 auto; }
.ticket-search.row .input{ flex:1 1 240px; }
.funnel + p, .funnel + p + p{ margin:.85rem 0 0; }
.strong{ font-weight:700; margin:0; }
.lead-excerpt{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:60ch; }
.trend{ font-size:.8rem; font-weight:700; color:var(--text-2); }
.trend-good{ color:var(--ok); } .trend-bad{ color:var(--bad); }
.bar-list{ list-style:none; margin:0; padding:0; display:grid; gap:.65rem; }
.bar-head{ display:flex; justify-content:space-between; gap:.75rem; font-size:.9rem; margin-bottom:.25rem; min-width:0; }
.bar-track{ display:block; height:8px; border-radius:999px; background:var(--surface-3); overflow:hidden; }
.bar-fill{ display:block; height:100%; border-radius:inherit; background:var(--brand-grad, var(--brand)); transform-origin:left; animation: bar-grow .6s var(--ease) both; }
@keyframes bar-grow{ from{ transform:scaleX(0); } }
.funnel{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.funnel li{ display:grid; grid-template-columns: 3.2rem 1fr; align-items:center; gap:.15rem .75rem; }
.funnel .bar-track{ grid-column: 1 / -1; }
.funnel-num{ font-size:1.2rem; font-weight:800; }
.stars{ display:inline-flex; gap:1px; vertical-align:middle; }
.stars .icon{ width:14px; height:14px; }
.stars .on{ color:#b47b00; } .stars .off{ color:var(--border-strong); }
.star-group{ display:inline-flex; gap:.15rem; }
.star-btn{ border:0; background:none; padding:.35rem; min-width:44px; min-height:44px; border-radius:var(--r-sm); color:var(--border-strong); cursor:pointer; transition: color var(--t-fast), transform var(--t-fast); }
.star-btn .icon{ width:26px; height:26px; }
.star-btn[aria-pressed="true"]{ color:#b47b00; }
.star-btn:hover{ transform:scale(1.08); }
.star-btn:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; }
.select-sm{ padding-top:.3rem; padding-bottom:.3rem; font-size:.85rem; min-height:36px; }
@media (forced-colors: active){ .bar-fill{ background:Highlight; } .star-btn[aria-pressed="true"], .stars .on{ color:Highlight; } }

/* ---------- Interactive charts (admin/js/charts.js) ---------- */
.chart{ margin:0; display:grid; gap:.6rem; min-width:0; }
.chart-plot{ position:relative; min-width:0; border-radius:var(--r); outline:none; touch-action:pan-y; cursor:crosshair; }
.chart-plot:focus-visible{ box-shadow:0 0 0 3px var(--focus); }
.chart-svg{ display:block; overflow:visible; }
.chart-grid{ stroke:var(--border); stroke-width:1; }
.chart-axis{ fill:var(--text-3); font-size:11px; font-family:var(--font); }
.chart-cross{ stroke:var(--border-strong); stroke-width:1; stroke-dasharray:3 3; pointer-events:none; }
.chart .tone-brand{ --tone:var(--brand); } .chart .tone-info{ --tone:var(--info); } .chart .tone-ok{ --tone:var(--ok); }
.chart .tone-warn{ --tone:var(--warn); } .chart .tone-bad{ --tone:var(--bad); } .chart .tone-muted{ --tone:var(--text-3); }
.chart-line{ fill:none; stroke:var(--tone); stroke-width:2.25; stroke-linejoin:round; stroke-linecap:round; }
.chart-area{ fill:var(--tone); opacity:.12; stroke:none; }
.chart-dot, .chart-hl{ fill:var(--surface); stroke:var(--tone); stroke-width:2; }
.chart-hl{ pointer-events:none; }
.chart-bar{ fill:var(--tone); transition: opacity var(--t-fast); }
.chart-bar.dim{ opacity:.35; }
.chart-marker{ fill:var(--bad); stroke:var(--surface); stroke-width:2; }
.chart-enter .chart-line{ stroke-dasharray:1; stroke-dashoffset:1; animation: chart-draw .8s var(--ease) forwards; }
.chart-enter .chart-area{ animation: chart-fade .8s var(--ease) both; }
.chart-enter .chart-bar{ transform-box:fill-box; transform-origin:bottom; animation: chart-grow .5s var(--ease) both; }
@keyframes chart-draw{ to{ stroke-dashoffset:0; } }
@keyframes chart-fade{ from{ opacity:0; } }
@keyframes chart-grow{ from{ transform:scaleY(0); } }
.chart-tip{ position:absolute; z-index:2; min-width:150px; max-width:240px; padding:.55rem .7rem; border-radius:var(--r); background:var(--surface); border:1px solid var(--border-strong); box-shadow:var(--shadow-2); font-size:.8rem; pointer-events:none; display:grid; gap:.25rem; }
.chart-tip strong{ font-size:.82rem; }
.chart-tip-row{ display:flex; align-items:center; gap:.45rem; }
.chart-tip-row b{ font-variant-numeric: tabular-nums; }
.chart-tip-warn{ color:var(--bad); font-weight:600; }
.chart-swatch{ width:10px; height:10px; border-radius:3px; flex:none; background:var(--tone); }
.chart-legend{ display:flex; flex-wrap:wrap; gap:.35rem; }
.chart-key{ display:inline-flex; align-items:center; gap:.4rem; min-height:32px; padding:.2rem .65rem; border-radius:999px; border:1px solid var(--border); background:var(--surface); color:var(--text); font:inherit; font-size:.82rem; cursor:pointer; transition: opacity var(--t-fast), border-color var(--t-fast); }
.chart-key:hover{ border-color:var(--border-strong); }
.chart-key[aria-pressed="false"]{ opacity:.5; }
.chart-key[aria-pressed="false"] .chart-swatch{ background:transparent; box-shadow: inset 0 0 0 2px var(--tone); }
.chart-key:focus-visible{ outline:3px solid var(--focus); outline-offset:1px; }
.chart-data summary{ cursor:pointer; font-size:.82rem; color:var(--text-2); display:inline-flex; align-items:center; gap:.3rem; }
.chart-data summary .icon{ width:14px; height:14px; transition: transform var(--t-fast); }
.chart-data[open] summary .icon{ transform:rotate(180deg); }
.chart-data .table-wrap{ max-height:260px; overflow:auto; margin-top:.5rem; }
.chart-empty{ margin:0; }
.range-row{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; justify-content:space-between; }
.chart-cards{ display:grid; gap:1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
@media (forced-colors: active){ .chart-line{ stroke:CanvasText; } .chart-bar{ fill:CanvasText; } .chart-swatch{ background:CanvasText; } }

/* ---------- "Ver como" bar (owner viewing the panel as someone else) ---------- */
.viewas-bar{ position:sticky; top:var(--topbar-h); z-index:20; display:flex; flex-wrap:wrap; align-items:center; gap:.6rem .9rem; padding:.65rem clamp(1rem, 3vw, 2rem);
  background:var(--info-soft); color:var(--text); border-bottom:2px solid var(--info); box-shadow:var(--shadow-1); animation: rise-in 240ms var(--ease) both; }
.viewas-icon{ width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; background:var(--info); color:#fff; }
.viewas-icon .icon{ width:18px; height:18px; }
:root[data-theme="dark"] .viewas-icon{ color:#0b1530; }
.viewas-bar .viewas-text{ flex:1 1 220px; display:flex; flex-wrap:wrap; align-items:baseline; gap:.15rem .6rem; min-width:0; }
.viewas-text strong{ font-size:.95rem; }
.viewas-meta, .viewas-left{ font-size:.82rem; color:var(--text-2); }
.viewas-left{ font-variant-numeric: tabular-nums; }
.viewas-actions{ display:flex; gap:.5rem; flex-wrap:wrap; flex:none; margin-left:auto; }
html.viewing-as .topbar{ box-shadow: inset 0 -2px 0 var(--info); }
@media (max-width: 560px){ .viewas-bar{ padding:.55rem 1rem; } .viewas-icon{ width:30px; height:30px; } .viewas-actions{ width:100%; margin-left:0; } .viewas-actions .btn{ flex:1 1 auto; } }

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:1ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:1ms !important; scroll-behavior:auto !important; }
  .skeleton{ animation:none; }
}
@media (forced-colors: active){
  .btn, .input, .textarea, .select, .card, .choice, .chip label{ border:1px solid CanvasText; }
  .nav a[aria-current="page"]{ outline:2px solid Highlight; }
}
@media print{
  .sidebar, .topbar, .savebar, .toasts{ display:none !important; }
}

/* ==========================================================================
   Accounts and automations (October 2026)
   ========================================================================== */

/* E-mail typo hint under a field: «¿Quisiste decir …?» */
.email-hint{ display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .5rem; margin-top:.35rem; padding:.45rem .6rem; border-radius:var(--r-sm); background:var(--warn-soft); color:var(--text); font-size:.86rem; }
.email-hint > .icon{ color:var(--warn); width:16px; height:16px; flex:none; }
.email-hint strong{ overflow-wrap:anywhere; }

/* Usuarios: status tabs, then «Revisar» tabs (only when someone matches) */
.users-tabs{ align-items:center; }
.filter-sep{ font-size:.74rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); margin:0 .15rem 0 .5rem; }
.filter-tab-review:not([aria-pressed="true"]) .count{ background:var(--warn-soft); color:var(--warn); }

/* Access requests waiting for an answer */
.requests-card{ border-color:color-mix(in srgb, var(--warn) 35%, var(--border)); }
.request-list{ list-style:none; margin:0; padding:0; display:grid; }
.request-row{ display:flex; gap:.8rem; align-items:flex-start; padding:.85rem 0; border-top:1px solid var(--border); }
.request-row:first-child{ border-top:0; padding-top:.2rem; }
.request-message{ margin:0; padding:.45rem .7rem; border-left:3px solid var(--border-strong); background:var(--surface-2); border-radius:0 var(--r-sm) var(--r-sm) 0; color:var(--text-2); white-space:pre-wrap; overflow-wrap:anywhere; }
.request-actions{ flex:none; align-self:center; }
@media (max-width: 640px){
  .request-row{ flex-wrap:wrap; }
  .request-actions{ width:100%; justify-content:flex-end; }
}

/* Temporary access (invite / change access) */
.temp-access{ padding:.8rem .9rem; border:1px solid var(--border); border-radius:var(--r); background:var(--surface-2); }
.temp-access .field{ margin-top:.2rem; }
.temp-access input[type="date"]{ max-width:14rem; }

/* «Contraseña guardada»: the message ready to send */
.share-message{ margin:0; padding:.8rem .9rem; border-radius:var(--r); background:var(--surface-2); border:1px dashed var(--border-strong); font:inherit; font-size:.9rem; line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; -webkit-user-select:all; max-height:16rem; overflow:auto; }
.share-message:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* Inicio → Accesos */
.access-list li{ align-items:center; }
.access-link{ color:var(--text); text-decoration:none; }
.access-link:hover{ color:var(--accent); text-decoration:underline; }
.access-list li > .icon:last-child{ width:14px; height:14px; margin:0; }

/* Actividad */
.activity-toolbar{ display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap:.75rem 1rem; align-items:end; }
.activity-toolbar .field{ margin:0; min-width:0; }
.activity-clear{ display:flex; align-items:flex-end; min-height:42px; }
.activity-day{ padding-top:.9rem; padding-bottom:.4rem; }
.activity-day-title{ font-size:.8rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--text-3); margin:0 0 .3rem; }
.activity-day-title::first-letter{ text-transform:uppercase; }
.activity-list{ list-style:none; margin:0; padding:0; }
.activity-row{ display:flex; gap:.75rem; align-items:center; padding:.6rem 0; border-top:1px solid var(--border); font-size:.92rem; }
.activity-row:first-child{ border-top:0; }
.activity-row .grow{ min-width:0; overflow-wrap:anywhere; }
.icon-tile-sm{ width:32px; height:32px; border-radius:10px; }
.icon-tile-sm .icon{ width:16px; height:16px; }
.tile-users{ background:color-mix(in srgb, #2563eb 12%, var(--surface)); color:color-mix(in srgb, #2563eb 70%, var(--text)); }
.tile-leads{ background:var(--ok-soft); color:var(--ok); }
.tile-security{ background:var(--warn-soft); color:var(--warn); }
.tile-settings, .tile-other, .tile-support{ background:var(--surface-3); color:var(--text-2); }

/* Mi cuenta: request state, remembered browsers */
.access-request-box{ margin-top:.45rem; }
.access-request-box p{ display:flex; gap:.3rem; align-items:center; margin:0; }
.access-request-box .icon{ width:14px; height:14px; }
.remembered{ gap:.6rem; padding:.55rem .7rem; border-radius:var(--r); background:var(--surface-2); flex-wrap:wrap; }
.remembered .icon{ width:16px; height:16px; vertical-align:-3px; }

/* Prospectos: who follows each lead up, and the automation rules */
.lead-owner{ display:inline-flex; align-items:center; gap:.3rem; color:var(--accent); font-weight:600; }
.lead-owner .icon{ width:13px; height:13px; }
.auto-rules{ display:grid; gap:.1rem; }
.auto-rule{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 15rem); gap:.4rem 1rem; align-items:center; padding:.4rem 0; border-top:1px solid var(--border); }
.auto-rule-head{ border-top:0; padding-bottom:0; }
.auto-rule label{ overflow-wrap:anywhere; }
@media (max-width: 560px){
  .auto-rule{ grid-template-columns:1fr; }
  .auto-rule-head{ display:none; }
}

/* Formulario de contacto: confirmation to the visitor */
.confirm-chips{ gap:.35rem; flex-wrap:wrap; }
.chip-btn{ font:inherit; font-size:.8rem; font-family:var(--mono, ui-monospace, monospace); padding:.2rem .5rem; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-2); cursor:pointer; }
.chip-btn:hover{ border-color:var(--brand); color:var(--accent); }
.chip-btn:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.confirm-sample{ margin-top:.6rem; padding:.8rem .9rem; border-radius:var(--r); background:var(--surface-2); white-space:pre-wrap; font-size:.9rem; line-height:1.6; overflow-wrap:anywhere; }
.row-center{ justify-content:center; }
.user-status{ justify-items:start; }

/* «Más secciones»: what else the panel has, ready to ask for */
.nav a.nav-more{ margin-top:.5rem; border:1px dashed var(--border-strong); color:var(--text-3); }
.nav a.nav-more:hover{ border-color:var(--brand); color:var(--accent); background:var(--accent-soft); }
.nav a.nav-more[aria-current="page"]{ border-style:solid; border-color:transparent; }
.quick a.quick-more{ border-style:dashed; border-color:var(--border-strong); box-shadow:none; }
.quick a.quick-more .icon-tile{ background:var(--surface-3); color:var(--text-2); }
.section-lead{ margin:.25rem 0 0; max-width:62ch; }
.section-tiles{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.section-tile{ display:flex; flex-direction:column; gap:.55rem; padding:1rem; }
.section-tile-head{ display:flex; align-items:center; gap:.75rem; }
.section-tile h3{ margin:0; font-size:.98rem; }
.section-tile p{ margin:0; }
.section-tile-foot{ margin-top:auto; padding-top:.25rem; }
.section-icon{ position:relative; background:var(--surface-3); color:var(--text-2); }
.section-lock{ position:absolute; right:-5px; bottom:-5px; width:20px; height:20px; border-radius:999px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--border); color:var(--text-3); }
.section-lock .icon{ width:11px; height:11px; }
.section-tile.is-requested{ border-color:color-mix(in srgb, var(--info) 35%, var(--border)); }
.section-tile.is-requested .section-lock{ color:var(--info); }

/* Role picker: extra sections, folded away (exceptions only) */
details.extras{ margin-top:.8rem; }
details.extras .extras-optional{ font-weight:500; color:var(--text-3); }
details.extras .extras-count{ margin-left:.25rem; }
details.extras .extras-hint{ margin:.35rem 0 0; }

/* Estadísticas: period, export, e-mail */
.stats-toolbar{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75rem 1rem; margin:-.25rem 0 .5rem; }
.stats-filter{ display:grid; gap:.3rem; }
.stats-filter .select{ width:auto; min-width:15rem; max-width:100%; }
.stats-actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.stats-range{ margin:0 0 1.1rem; }
.stats-custom{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:.6rem .75rem; margin:0 0 1rem; padding:.8rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.stats-custom .field{ margin:0; }
.stats-custom-msg{ flex-basis:100%; }
.stats-custom-msg:empty{ display:none; }
.stats-service{ display:grid; gap:.3rem; margin:0 0 .9rem; max-width:22rem; }
.select-sm{ min-height:36px; font-size:.9rem; }
.menu-item-text{ display:grid; gap:.05rem; text-align:left; }
.share-period{ display:flex; gap:.7rem; align-items:center; padding:.7rem .8rem; border-radius:var(--r); background:var(--surface-2); }
.share-period > .icon{ color:var(--accent); width:20px; height:20px; flex:none; }
.share-period > div{ display:grid; }
.share-checks{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.print-only{ display:none; }
@media (max-width: 640px){
  .stats-filter, .stats-actions{ width:100%; }
  .stats-filter .select{ width:100%; min-width:0; }
  .stats-actions > *{ flex:1 1 0; }
  .stats-actions .menu > .btn{ width:100%; }
}
@media print{
  .no-print, .page-head .row, .viewas-bar{ display:none !important; }
  .print-only{ display:block; }
  .main{ padding:0 !important; }
  .card{ box-shadow:none; break-inside:avoid; }
  .dash-grid{ display:block; }
  .dash-grid > .stack-lg > *{ margin-bottom:1rem; }
}

/* ==========================================================================
   Wiki (#/wiki) — processes and guides with real screenshots.
   A blueprint grid for the home (construction drawings), a reading column
   with numbered process steps, screenshots in a browser or phone frame.
   ========================================================================== */
:root{
  --wiki-grid: color-mix(in srgb, var(--brand) 9%, transparent);
  --wiki-bezel: #1c1917;
  --wiki-read: 70ch;
}
:root[data-theme="dark"]{
  --wiki-grid: color-mix(in srgb, var(--brand) 13%, transparent);
  --wiki-bezel: #000;
}
.wiki{ display:grid; gap:1.75rem; }

/* ---- home */
.wiki-hero{
  position:relative; overflow:hidden; display:grid; gap:1.1rem;
  padding:clamp(1.25rem, 3vw, 2.25rem); border:1px solid var(--border); border-radius:var(--r-xl);
  background:
    linear-gradient(var(--wiki-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--wiki-grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(160deg, var(--surface) 30%, var(--accent-soft) 130%);
  box-shadow:var(--shadow-1);
}
.wiki-hero::before{ content:""; position:absolute; inset:0 0 auto; height:3px; background:var(--brand-grad); }
.wiki-hero-text{ display:grid; gap:.45rem; max-width:60ch; }
.wiki-eyebrow{ display:inline-flex; align-items:center; gap:.4rem; font-size:.75rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.wiki-eyebrow .icon{ width:15px; height:15px; }
.wiki-hero h1{ margin:0; font-size:clamp(1.9rem, 4vw, 2.6rem); letter-spacing:-.025em; line-height:1.05; }
.wiki-hero h1:focus{ outline:none; }
.wiki-lead{ margin:0; color:var(--text-2); font-size:1.02rem; line-height:1.55; text-wrap:pretty; }
.wiki-search{ position:relative; max-width:44rem; }
.wiki-search-input{
  width:100%; min-height:56px; padding:.9rem 3rem .9rem 3rem; font:inherit; font-size:1.05rem; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-2);
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.wiki-search-input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px color-mix(in srgb, var(--brand) 22%, transparent), var(--shadow-2); }
.wiki-search-input::-webkit-search-cancel-button{ cursor:pointer; }
.wiki-search-icon{ position:absolute; left:1.05rem; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--text-3); pointer-events:none; }
.wiki-kbd{ position:absolute; right:1rem; top:50%; transform:translateY(-50%); font:600 .75rem/1 var(--mono); padding:.3rem .45rem; border-radius:6px; border:1px solid var(--border-strong); color:var(--text-3); background:var(--surface-2); }
.wiki-search-input:not(:placeholder-shown) ~ .wiki-kbd, .wiki-search-input:focus ~ .wiki-kbd{ display:none; }
.wiki-hero-foot{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.6rem 1rem; }
.wiki-count{ margin:0; }

.wiki-section-head{ display:flex; align-items:center; gap:.85rem; margin-bottom:.9rem; }
.wiki-section-head h2{ margin:0; font-size:1.15rem; letter-spacing:-.01em; }
.wiki-section-head p{ margin:.15rem 0 0; }
.wiki-cat-icon{ width:40px; height:40px; border-radius:12px; display:grid; place-items:center; flex:none; background:var(--surface); border:1px solid var(--border); color:var(--accent); box-shadow:var(--shadow-1); }
.wiki-cat-icon .icon{ width:19px; height:19px; }
.wiki-browse{ display:grid; gap:2.1rem; }
.wiki-card-grid{ display:grid; gap:.75rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.wiki-card{
  display:grid; grid-template-columns:auto minmax(0, 1fr) auto; align-items:start; gap:.85rem; padding:1rem;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg); color:inherit; text-decoration:none;
  transition:border-color var(--t) var(--ease), box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.wiki-card:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-2); transform:translateY(-2px); text-decoration:none; }
.wiki-card:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.wiki-card-icon{ width:38px; height:38px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.wiki-card-icon .icon{ width:18px; height:18px; }
.wiki-card-text{ display:grid; gap:.25rem; min-width:0; }
.wiki-card-text strong{ font-size:.97rem; line-height:1.3; }
.wiki-card-text > span{ font-size:.86rem; color:var(--text-2); line-height:1.45; }
.wiki-card-go{ width:16px; height:16px; color:var(--text-3); margin-top:.6rem; transition:transform var(--t) var(--ease); }
.wiki-card:hover .wiki-card-go{ transform:translateX(3px); color:var(--accent); }
.wiki-card.is-locked{ border-style:dashed; background:var(--surface-2); }
.wiki-card.is-locked .wiki-card-icon{ background:var(--surface-3); color:var(--text-3); }
.wiki-lock{ display:inline-flex !important; align-items:center; gap:.3rem; font-size:.76rem !important; font-weight:600; color:var(--text-3) !important; }
.wiki-lock .icon{ width:12px; height:12px; }
.wiki-card mark, .wiki-results mark{ background:color-mix(in srgb, var(--brand) 28%, transparent); color:inherit; border-radius:3px; padding:0 .1em; }
.wiki-empty{ display:grid; justify-items:center; gap:.4rem; text-align:center; padding:2.5rem 1rem; border:1px dashed var(--border-strong); border-radius:var(--r-lg); color:var(--text-2); }
.wiki-empty > .icon{ width:28px; height:28px; color:var(--text-3); }
.wiki-empty p{ margin:0; }

.wiki-news-row{ display:grid; gap:.85rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.wiki-news-card{
  display:grid; grid-template-rows:auto 1fr; overflow:hidden; color:inherit; text-decoration:none;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-lg);
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease), border-color var(--t);
}
.wiki-news-card:hover{ box-shadow:var(--shadow-2); transform:translateY(-2px); text-decoration:none; }
.wiki-news-card.is-new{ border-color:color-mix(in srgb, var(--brand) 55%, var(--border)); }
.wiki-news-img{ display:block; aspect-ratio:16 / 9; overflow:hidden; background:var(--surface-3); border-bottom:1px solid var(--border); }
.wiki-news-img img{ width:100%; height:100%; object-fit:cover; object-position:top left; display:block; }
.wiki-news-text{ display:grid; align-content:start; gap:.3rem; padding:.85rem .95rem 1rem; }
.wiki-news-meta{ display:flex; align-items:center; gap:.5rem; }

/* ---- article */
.wiki-article-head{ display:grid; gap:.9rem; }
.wiki-title-row{ display:flex; gap:1rem; align-items:flex-start; }
.wiki-article-icon{ width:52px; height:52px; border-radius:15px; display:grid; place-items:center; flex:none; background:var(--brand-grad); color:#fff; box-shadow:var(--shadow-2); }
.wiki-article-icon .icon{ width:24px; height:24px; }
.wiki-title-row h1{ margin:0 0 .35rem; font-size:clamp(1.6rem, 3.4vw, 2.2rem); letter-spacing:-.02em; line-height:1.12; text-wrap:balance; }
.wiki-title-row h1:focus{ outline:none; }
.wiki-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem 1.2rem; padding-top:.85rem; border-top:1px solid var(--border); }
.wiki-meta .tiny .icon{ width:13px; height:13px; vertical-align:-2px; }
.wiki-who{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:.35rem; color:var(--text-3); }
.wiki-who > .icon{ width:15px; height:15px; }
.wiki-chip{ font-size:.78rem; font-weight:600; padding:.18rem .55rem; border-radius:999px; background:var(--surface-3); color:var(--text-2); }
.wiki-device{ display:inline-flex; align-items:center; gap:.5rem; margin-left:auto; }
.wiki-device .segmented button{ min-height:34px; }

.wiki-layout{ display:grid; gap:2rem; align-items:start; }
.wiki-main{ display:grid; gap:2rem; min-width:0; }
.wiki-aside{ display:none; }
@media (min-width: 1180px){
  .wiki-layout{ grid-template-columns:minmax(0, 1fr) 250px; }
  .wiki-aside{ display:grid; gap:1rem; position:sticky; top:calc(var(--topbar-h) + 1.25rem); }
  .wiki-ask-end{ display:none !important; }
}

.wiki-body{ max-width:var(--wiki-read); font-size:1.02rem; line-height:1.75; color:var(--text); min-width:0; }
.wiki-body > * + *{ margin-top:1rem; }
.wiki-body p{ margin:0; text-wrap:pretty; }
.wiki-body h2{ margin:2.4rem 0 0; padding-bottom:.45rem; font-size:1.35rem; letter-spacing:-.015em; line-height:1.25; border-bottom:1px solid var(--border); scroll-margin-top:calc(var(--topbar-h) + 1rem); }
.wiki-body h3{ margin:1.7rem 0 0; font-size:1.08rem; scroll-margin-top:calc(var(--topbar-h) + 1rem); }
.wiki-body h2:first-child{ margin-top:0; }
.wiki-body h2:focus, .wiki-body h3:focus{ outline:none; }
.wiki-body a{ color:var(--accent); font-weight:600; text-underline-offset:3px; }
.wiki-body a .ext{ width:.8em; height:.8em; margin-left:.2em; vertical-align:-.05em; }
.wiki-body hr{ border:0; border-top:1px solid var(--border); margin:2rem 0; }
.wiki-list{ margin:0; padding-left:1.25rem; display:grid; gap:.45rem; }
.wiki-list li::marker{ color:var(--brand); }

/* A process: numbered steps on one line, like a schedule. */
.wiki-steps{ list-style:none; margin:0; padding:0; counter-reset:step; display:grid; }
.wiki-steps li{ position:relative; counter-increment:step; padding:0 0 1.15rem 2.9rem; min-height:2.2rem; }
.wiki-steps li::before{
  content:counter(step); position:absolute; left:0; top:0; width:2rem; height:2rem; border-radius:999px;
  display:grid; place-items:center; font:700 .9rem/1 var(--font); font-variant-numeric:tabular-nums;
  background:var(--surface); color:var(--accent); border:2px solid var(--brand); box-shadow:0 0 0 4px var(--bg);
}
.wiki-steps li::after{ content:""; position:absolute; left:calc(1rem - 1px); top:2.15rem; bottom:.1rem; width:2px; background:linear-gradient(var(--brand), color-mix(in srgb, var(--brand) 15%, transparent)); }
.wiki-steps li:last-child{ padding-bottom:0; }
.wiki-steps li:last-child::after{ display:none; }
.wiki-steps li > span{ display:block; padding-top:.2rem; }

/* The panel's own button names, written the way they look. */
.ui-chip{
  display:inline-flex; align-items:center; padding:.04em .48em; margin:0 .05em; border-radius:6px; white-space:nowrap;
  font-size:.86em; font-weight:650; line-height:1.55; color:var(--text);
  background:var(--surface); border:1px solid var(--border-strong); box-shadow:0 1px 0 var(--border-strong);
}

.callout{ display:grid; grid-template-columns:auto minmax(0, 1fr); gap:.85rem; padding:1rem 1.1rem; border-radius:var(--r-lg); border:1px solid transparent; }
.callout p{ margin:.15rem 0 0; font-size:.96rem; line-height:1.6; }
.callout-title{ display:block; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; }
.callout-icon{ width:32px; height:32px; border-radius:999px; display:grid; place-items:center; }
.callout-icon .icon{ width:16px; height:16px; }
.callout-tip{ background:var(--accent-soft); border-color:color-mix(in srgb, var(--brand) 25%, transparent); }
.callout-tip .callout-icon{ background:var(--brand); color:var(--brand-ink); }
.callout-tip .callout-title{ color:var(--accent); }
.callout-note{ background:var(--info-soft); }
.callout-note .callout-icon{ background:color-mix(in srgb, var(--info) 18%, transparent); color:var(--info); }
.callout-note .callout-title{ color:var(--info); }
.callout-warn{ background:var(--warn-soft); }
.callout-warn .callout-icon{ background:color-mix(in srgb, var(--warn) 20%, transparent); color:var(--warn); }
.callout-warn .callout-title{ color:var(--warn); }
.callout-important{ background:var(--bad-soft); }
.callout-important .callout-icon{ background:color-mix(in srgb, var(--bad) 18%, transparent); color:var(--bad); }
.callout-important .callout-title{ color:var(--bad); }

.wiki-table{ width:100%; border-collapse:collapse; font-size:.92rem; line-height:1.5; }
.wiki-table th, .wiki-table td{ text-align:left; vertical-align:top; padding:.6rem .75rem; border-bottom:1px solid var(--border); }
.wiki-table thead th{ font-size:.75rem; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); background:var(--surface-2); }
.wiki-table tbody th{ font-weight:650; white-space:nowrap; }
.wiki-body .table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); }
.wiki-body .table-scroll:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
.wiki-body .table-scroll tr:last-child > *{ border-bottom:0; }

/* Screenshots: a browser window on computers, a phone on phones. */
.wiki-figure{ margin:1.6rem 0 !important; display:grid; gap:.55rem; justify-items:center; }
.shot-frame{
  display:block; width:100%; padding:0; border:1px solid var(--border-strong); border-radius:12px; overflow:hidden;
  background:var(--surface-2); box-shadow:var(--shadow-2); cursor:zoom-in; font:inherit; color:inherit; text-align:left;
  transition:box-shadow var(--t) var(--ease), transform var(--t) var(--ease);
}
.shot-frame:hover{ box-shadow:var(--shadow-3); }
.shot-frame:focus-visible{ outline:3px solid var(--focus); outline-offset:3px; }
.shot-frame img{ display:block; width:100%; height:auto; background:var(--surface-3); }
.shot-bar{ display:flex; align-items:center; gap:.75rem; height:30px; padding:0 .75rem; background:var(--surface-3); border-bottom:1px solid var(--border); }
.shot-dots{ display:inline-flex; gap:5px; }
.shot-dots i{ width:9px; height:9px; border-radius:999px; background:var(--border-strong); }
.shot-dots i:first-child{ background:#f0351f; } .shot-dots i:nth-child(2){ background:#ffaa0b; } .shot-dots i:nth-child(3){ background:#4ade80; }
.shot-url{ flex:1; max-width:22rem; margin:0 auto; text-align:center; font:500 .72rem/1.9 var(--mono); color:var(--text-3); background:var(--surface); border-radius:6px; padding:0 .6rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.shot-notch{ display:none; }
.wiki-figure[data-device="mobile"] .shot-frame{
  position:relative; width:min(100%, 300px); border:10px solid var(--wiki-bezel); border-radius:38px; background:var(--wiki-bezel);
  box-shadow:0 0 0 1px var(--border-strong), var(--shadow-3);
}
.wiki-figure[data-device="mobile"] .shot-frame img{ border-radius:28px; }
.wiki-figure[data-device="mobile"] .shot-bar{ display:none; }
.wiki-figure[data-device="mobile"] .shot-notch{ display:block; position:absolute; top:7px; left:50%; transform:translateX(-50%); width:84px; height:22px; border-radius:999px; background:var(--wiki-bezel); z-index:1; }
.wiki-figure figcaption{ display:flex; gap:.4rem; align-items:flex-start; max-width:var(--wiki-read); font-size:.85rem; line-height:1.5; color:var(--text-3); text-align:center; }
.wiki-figure figcaption .icon{ width:14px; height:14px; margin-top:.2em; flex:none; }
.wiki-lightbox img{ display:block; width:100%; height:auto; border-radius:var(--r); border:1px solid var(--border); }

/* «En esta página», asking support, previous / next */
.wiki-toc{ display:grid; gap:.1rem; padding-left:.9rem; border-left:2px solid var(--border); }
.wiki-toc-title{ margin:0 0 .4rem -.9rem; padding-left:.9rem; font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-3); }
.wiki-toc a{ position:relative; display:block; padding:.3rem 0; font-size:.88rem; line-height:1.35; color:var(--text-2); text-decoration:none; }
.wiki-toc a:hover{ color:var(--text); }
.wiki-toc a.is-active{ color:var(--accent); font-weight:650; }
.wiki-toc a.is-active::before{ content:""; position:absolute; left:calc(-.9rem - 2px); top:.3rem; bottom:.3rem; width:2px; background:var(--brand); }
.wiki-ask{ display:grid; gap:.5rem; justify-items:start; padding:1.1rem; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--border); }
.wiki-ask p{ margin:0; color:var(--text-2); line-height:1.5; }
.wiki-ask-icon{ width:36px; height:36px; border-radius:11px; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.wiki-ask-icon .icon{ width:18px; height:18px; }
.wiki-ask-end{ max-width:var(--wiki-read); }
.wiki-pager{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem; max-width:var(--wiki-read); }
.wiki-pager-link{ display:grid; gap:.2rem; padding:.85rem 1rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); color:inherit; text-decoration:none; min-width:0; }
.wiki-pager-link:hover{ border-color:var(--border-strong); box-shadow:var(--shadow-1); text-decoration:none; }
.wiki-pager-link.is-next{ text-align:right; justify-items:end; }
.wiki-pager-link .icon{ width:12px; height:12px; vertical-align:-1px; }
.wiki-pager-link strong{ font-size:.92rem; overflow-wrap:anywhere; }

/* Marked text → «Preguntar a soporte» */
.ask-pop{
  position:absolute; z-index:70; display:inline-flex; align-items:center; gap:.45rem; min-height:38px; padding:.45rem .85rem;
  font:650 .86rem/1 var(--font); color:var(--bg); background:var(--text); border:0; border-radius:999px; cursor:pointer;
  box-shadow:var(--shadow-3); animation:pop-in var(--t) var(--ease) both;
}
.ask-pop .icon{ width:15px; height:15px; color:var(--brand); }
.ask-pop:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }

/* «Novedades» dialog */
.news{ display:grid; gap:1.1rem; }
.news-shot{ border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; background:var(--surface-3); max-height:300px; }
.news-shot img{ display:block; width:100%; height:auto; }
.news-text{ display:grid; gap:.45rem; }
.news-eyebrow{ display:inline-flex; align-items:center; gap:.35rem; font-size:.74rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.news-eyebrow .icon{ width:13px; height:13px; }
.news-title{ margin:0; font-size:1.3rem; letter-spacing:-.01em; }
.news-text > p{ margin:0; }
.news-label{ margin:.35rem 0 .3rem; font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3); }
.news-points{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.news-points li{ display:flex; gap:.55rem; align-items:flex-start; line-height:1.45; }
.news-points .icon{ width:16px; height:16px; color:var(--ok); flex:none; margin-top:.15em; }
.news-progress{ display:flex; align-items:center; gap:.6rem; margin-top:.4rem; }
.news-progress:has(.news-counter:empty){ display:none; }
@media (max-width: 719px){ .news-shot{ max-height:170px; } .news{ gap:.85rem; } }
.news-dots{ display:inline-flex; gap:6px; }
.news-dots span{ width:8px; height:8px; border-radius:999px; background:var(--border-strong); transition:width var(--t) var(--ease), background var(--t); }
.news-dots span.is-on{ width:22px; background:var(--brand); }

@media (max-width: 640px){
  .wiki{ gap:1.4rem; }
  .wiki-hero{ border-radius:var(--r-lg); }
  .wiki-search-input{ min-height:52px; font-size:1rem; }
  .wiki-kbd{ display:none; }
  .wiki-title-row{ gap:.8rem; }
  .wiki-article-icon{ width:44px; height:44px; border-radius:13px; }
  .wiki-device{ margin-left:0; width:100%; justify-content:space-between; }
  .wiki-body{ font-size:1rem; }
  .wiki-pager{ grid-template-columns:1fr; }
  .wiki-pager-link.is-next{ text-align:left; justify-items:start; }
  .wiki-news-row{ grid-auto-flow:column; grid-auto-columns:minmax(78%, 1fr); grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:.4rem; }
  .wiki-news-card{ scroll-snap-align:start; }
}
@media (prefers-reduced-motion: reduce){
  .wiki-card, .wiki-news-card, .shot-frame, .ask-pop{ transition:none; animation:none; }
  .wiki-card:hover, .wiki-news-card:hover{ transform:none; }
}
.wiki-figure.is-missing .shot-frame img{ visibility:hidden; min-height:180px; }
.wiki-figure.is-missing .shot-frame{ cursor:default; background:repeating-linear-gradient(45deg, var(--surface-2) 0 10px, var(--surface-3) 10px 20px); }

/* ---------- Touch targets, focus and small fixes (UX review, October 2026) ---------- */
/* Icon buttons never shrink: the ✕ of a dialog with a long intro, the ☰ of the top bar. */
.dialog-head > .btn-icon, .topbar .btn{ flex:none; }
/* Headings get focus when a screen opens (screen readers start there); the ring is for keyboard moves only. */
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus{ outline:none; }
/* Small links and toggles: at least 24 px tall. */
.chart-data summary{ min-height:24px; }
.crumbs a{ display:inline-flex; align-items:center; min-height:24px; }
/* Fingers: 44 px (Apple and Google), only on touch screens; the desktop layout doesn't change. */
@media (pointer: coarse){
  .btn-sm, .segmented button, .tab, .chip label{ min-height:44px; }
  .btn-icon.btn-sm{ width:44px; }
  .chart-data summary, details.disclosure > summary, .crumbs a{ min-height:44px; }
}
/* A row that scrolls sideways (tabs, status filters) fades at the edge that has more. */
.scroll-row.more-right{ -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.scroll-row.more-left{ -webkit-mask-image:linear-gradient(to left, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(to left, #000 calc(100% - 40px), transparent); }
.scroll-row.more-left.more-right{ -webkit-mask-image:linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image:linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 40px), transparent); }

/* ---------- Avisos al equipo (owner) ---------- */
.announce-list{ list-style:none; margin:0; padding:0; display:grid; gap:.6rem; }
.announce-item{ display:flex; gap:.75rem; align-items:flex-start; padding:.85rem .95rem; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface); transition: border-color var(--t-fast), background-color var(--t-fast); }
.announce-item:has(input:checked){ border-color:var(--brand); background:var(--accent-soft); }
.announce-item input{ width:20px; height:20px; margin:.15rem 0 0; accent-color:var(--brand); flex:none; }
.announce-item label{ display:grid; gap:.25rem; flex:1; min-width:0; cursor:pointer; }
.announce-item-head{ display:flex; justify-content:space-between; gap:.75rem; align-items:baseline; flex-wrap:wrap; }
.announce-item-body{ display:grid; gap:.35rem; flex:1; min-width:0; }
.announce-item-title{ display:inline-flex; align-items:baseline; gap:.5rem; flex-wrap:wrap; min-width:0; }
.announce-undo{ justify-self:start; }
/* A switch with its label beside it (settings saved from a card). */
.switch-line{ display:flex; align-items:flex-start; gap:.75rem; }
.switch-line > label{ flex:1; min-width:0; padding-top:.15rem; cursor:pointer; }
.announce-who{ display:inline-flex; gap:.35rem; align-items:center; color:var(--text-2); }
.announce-done{ display:inline-flex; gap:.35rem; align-items:center; color:var(--ok); }
.announce-options{ margin-bottom:.4rem; }
.announce-count{ font-weight:650; margin:0; }
.announce-people{ list-style:none; margin:0; padding:0; display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.announce-people li{ display:flex; gap:.6rem; align-items:center; min-width:0; padding:.5rem .6rem; border-radius:var(--r); background:var(--surface-2); }
.announce-people .grow{ display:grid; min-width:0; }
.announce-people .avatar{ width:32px; height:32px; font-size:.78rem; }
.announce-actions{ flex-wrap:wrap; justify-content:flex-end; margin-top:.4rem; }
.announce-history{ list-style:none; margin:0; padding:0; display:grid; }
.announce-history li{ display:flex; gap:.6rem; align-items:center; flex-wrap:wrap; padding:.7rem 0; border-top:1px solid var(--border); }
.announce-history li:first-child{ border-top:0; }
.announce-history .grow{ display:grid; gap:.15rem; flex:1 1 220px; min-width:0; }
@media (pointer: coarse){ .announce-item input{ width:24px; height:24px; } }
@media (min-width: 1100px){
  .announce-layout{ display:grid; grid-template-columns:minmax(0, 1.35fr) minmax(320px, 1fr); gap:1.25rem; align-items:start; }
  .announce-side{ position:sticky; top:calc(var(--topbar-h) + 1rem); }
}
@media (max-width: 1099px){ .announce-layout{ display:grid; gap:1.25rem; } }
@media (min-width: 720px){ .announce-bar{ display:none !important; } }
@media (max-width: 719px){ .announce-actions .btn-primary{ display:none; } .announce-layout + .card{ margin-bottom:5rem; } }
.jobs-table .group-row th{ background:var(--surface-2); font-size:.74rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-3); }
.jobs-table td{ white-space:nowrap; }