/* ==========================================================================
   FRECU · Portadora — Componentes (equivalen a widgets Flutter)
   ========================================================================== */

svg.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
svg.ic.s16 { width: 16px; height: 16px; stroke-width: 1.8; }
svg.ic.s18 { width: 18px; height: 18px; }
svg.ic.s28 { width: 28px; height: 28px; stroke-width: 1.5; }
svg.ic.s34 { width: 34px; height: 34px; stroke-width: 1.4; }

/* ---------- FrButton ---------- */
.btn {
  --h: 58px;
  height: var(--h); padding: 0 22px; border-radius: 18px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font: 640 16px/1 var(--f-ui); font-stretch: 112%; letter-spacing: -.005em;
  position: relative; overflow: hidden; isolation: isolate; user-select: none; white-space: nowrap;
  transition: transform 420ms var(--spring-press), background var(--t-quick), box-shadow var(--t-smooth), opacity var(--t-smooth);
}
.btn::after { /* luz que sigue al dedo */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 420ms var(--e-out);
  background: radial-gradient(160px circle at var(--x, 50%) var(--y, 50%), var(--touch), transparent 70%);
}
.btn.lit::after { opacity: 1; transition-duration: 60ms; }
.btn:active, .btn.pressed { transform: scale(.965); transition-duration: 120ms; }
.btn-primary {
  background: var(--signal); color: var(--signal-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 0 rgba(0,0,0,.14), 0 10px 32px -12px rgba(var(--signal-rgb), .7);
}
.btn-primary::before { /* brillo que barre cada pocos segundos */
  content: ""; position: absolute; inset: -40% auto -40% -60%; width: 40%; z-index: -1;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); animation: sheen 6.5s var(--e-inout) infinite 1.2s;
}
@keyframes sheen { 0%, 70% { left: -60%; } 100% { left: 140%; } }
.btn-secondary { background: var(--bg-2); color: var(--tx-1); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--spec); }
.btn-ghost { background: transparent; color: var(--tx-2); --h: 48px; padding: 0 14px; }
.btn-primary::after { background: radial-gradient(160px circle at var(--x, 50%) var(--y, 50%), rgba(255,255,255,.5), transparent 70%); }
.btn-danger { background: rgba(var(--alert-rgb), .12); color: var(--alert); box-shadow: inset 0 0 0 1px rgba(var(--alert-rgb), .38); }
.btn-danger-solid { background: var(--alert); color: #1A0503; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 30px -12px rgba(var(--alert-rgb), .7); }
.btn-s { --h: 44px; padding: 0 16px; border-radius: 14px; font-size: 14.5px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .38; pointer-events: none; }
.btn .wave { display: none; width: 46px; height: 18px; }
.btn.loading .lbl, .btn.loading svg.ic { display: none; }
.btn.loading .wave { display: block; }

/* ---------- FrIconButton ---------- */
.ibtn {
  width: 48px; height: 48px; border-radius: 16px; flex: none;
  display: inline-flex; align-items: center; justify-content: center; position: relative;
  background: var(--bg-1); color: var(--tx-1);
  box-shadow: inset 0 0 0 1px var(--line-1), inset 0 1px 0 var(--spec);
  transition: transform 420ms var(--spring-press), background var(--t-quick), color var(--t-quick), box-shadow var(--t-quick);
}
.ibtn:active { transform: scale(.92); background: var(--bg-3); transition-duration: 110ms; }
.ibtn.on { color: var(--signal-fg); background: rgba(var(--signal-rgb), calc(.06 * var(--wash-k) - .06)); box-shadow: inset 0 0 0 1px rgba(var(--signal-rgb), .55), 0 0 22px -6px rgba(var(--signal-rgb), .6); }
.ibtn.danger { color: var(--alert); }
.ibtn.ghost { background: transparent; box-shadow: none; }
.ibtn.round { border-radius: 50%; }
.ibtn.s40 { width: 40px; height: 40px; border-radius: 13px; }

/* ---------- FrTextField ---------- */
.field { display: flex; flex-direction: column; gap: 9px; }
.field-l { display: flex; justify-content: space-between; color: var(--tx-3); }
.field-box {
  height: 58px; border-radius: 16px; padding: 0 16px; display: flex; align-items: center; gap: 10px; position: relative;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-1), inset 0 1px 0 var(--spec);
  transition: box-shadow var(--t-smooth) var(--e-out);
}
.field-box input { flex: 1; min-width: 0; font: 500 17px/1 var(--f-ui); color: var(--tx-1); caret-color: var(--signal-fg); }
.field-box input::placeholder { color: var(--tx-4); }
.field-box input.mono { font: 400 16px/1 var(--f-mono); font-stretch: 87.5%; letter-spacing: .02em; }
.field-box::after {
  content: ""; position: absolute; left: 16px; right: 16px; bottom: -1px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--signal-fg), transparent);
  transform: scaleX(0); transition: transform 600ms var(--e-out); opacity: .9;
}
.field.focus .field-box, .field-box:focus-within { box-shadow: var(--led-ring), inset 0 0 0 1px rgba(var(--signal-rgb), .55), inset 0 1px 0 var(--spec), 0 0 0 4px rgba(var(--signal-rgb), .07); }
.field.focus .field-box::after, .field-box:focus-within::after { transform: scaleX(1); }
.field-count { font: 400 11px/1 var(--f-mono); color: var(--tx-3); }
.field-h { font: 400 12.5px/1.45 var(--f-ui); color: var(--tx-3); }
.field.error .field-box { box-shadow: inset 0 0 0 1px rgba(var(--alert-rgb), .7), 0 0 0 4px rgba(var(--alert-rgb), .08); animation: shake 520ms var(--e-out); }
.field.error .field-h { color: var(--alert); }
@keyframes shake {
  0% { transform: translateX(0); } 15% { transform: translateX(-9px); } 30% { transform: translateX(7px); }
  45% { transform: translateX(-5px); } 60% { transform: translateX(3px); } 75% { transform: translateX(-1.5px); } 100% { transform: translateX(0); }
}

/* ---------- FrPinField (código de acceso) ---------- */
.pin { display: flex; gap: 10px; justify-content: center; }
.pin i {
  width: 64px; height: 78px; border-radius: 18px; font-style: normal; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-1), inset 0 1px 0 var(--spec);
  font-family: var(--f-dot); font-weight: 800; font-variation-settings: 'ROND' 100; font-size: 46px; color: var(--tx-1);
  transition: box-shadow var(--t-smooth), color var(--t-smooth), transform 500ms var(--spring-organic);
}
.pin i:empty::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tx-4); }
.pin i.cur { box-shadow: var(--led-ring), inset 0 0 0 1px rgba(var(--signal-rgb), .6), 0 0 0 4px rgba(var(--signal-rgb), .06); }
.pin i.cur:empty::before { width: 2px; height: 30px; border-radius: 2px; background: var(--signal-fg); animation: caret 1.05s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.pin i.pop { animation: pop 460ms var(--spring-organic); }
@keyframes pop { 0% { transform: scale(.7); opacity: .2; } 100% { transform: scale(1); opacity: 1; } }
.pin.error i { color: var(--alert); box-shadow: inset 0 0 0 1px rgba(var(--alert-rgb), .65); }
.pin.error { animation: shake 560ms var(--e-out); }
.pin.ok i { color: var(--signal-ink); background: var(--signal); box-shadow: 0 0 26px -6px rgba(var(--signal-rgb), .8); animation: okwave 700ms var(--e-out) backwards; }
.pin.ok i:nth-child(2) { animation-delay: 70ms; } .pin.ok i:nth-child(3) { animation-delay: 140ms; } .pin.ok i:nth-child(4) { animation-delay: 210ms; }
@keyframes okwave { 0% { transform: translateY(0) scale(1); background: var(--bg-2); color: var(--tx-1); } 40% { transform: translateY(-6px) scale(1.04); } 100% { transform: none; } }
.pin.busy i { animation: busy 1.1s var(--e-inout) infinite; }
.pin.busy i:nth-child(2) { animation-delay: 110ms; } .pin.busy i:nth-child(3) { animation-delay: 220ms; } .pin.busy i:nth-child(4) { animation-delay: 330ms; }
@keyframes busy { 50% { box-shadow: inset 0 0 0 1px rgba(var(--signal-rgb), .6); color: var(--signal-fg); } }
.pin.big i { width: 70px; height: 86px; font-size: 52px; }
.pin.read i { background: transparent; box-shadow: inset 0 0 0 1px var(--line-2); }

/* ---------- FrKeypad ---------- */
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.keys button {
  height: 56px; border-radius: 16px; background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line-1), inset 0 1px 0 var(--spec);
  font: 560 24px/1 var(--f-ui); font-stretch: 115%; color: var(--tx-1);
  display: flex; align-items: center; justify-content: center;
  transition: transform 380ms var(--spring-press), background var(--t-quick);
}
.keys button:active, .keys button.pressed { transform: scale(.93); background: var(--bg-3); transition-duration: 90ms; }
.keys button.fn { background: transparent; box-shadow: none; color: var(--tx-2); }

/* ---------- FrSegmented / TalkModeSwitch ---------- */
.seg {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  height: 48px; padding: 4px; border-radius: 16px; background: var(--bg-1);
  box-shadow: inset 0 0 0 1px var(--line-1);
}
.seg button { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 7px; color: var(--tx-3); transition: color var(--t-smooth); padding: 0 10px; }
.seg button.on { color: var(--tx-1); }
.seg button .t-label { letter-spacing: .06em; }
.seg-thumb {
  position: absolute; top: 4px; bottom: 4px; left: 4px; border-radius: 12px; z-index: 0;
  background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--spec), 0 4px 14px -6px rgba(0,0,0,.8);
  transition: transform 560ms var(--spring-organic), width 560ms var(--spring-organic);
}
.seg-thumb.stretch { animation: stretch 520ms var(--e-out); }
@keyframes stretch { 0% { scale: 1 1; } 35% { scale: 1.16 .86; } 100% { scale: 1 1; } }
.seg.signal button.on { color: var(--signal-ink); }
.seg.signal .seg-thumb { background: var(--signal); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 0 22px -6px rgba(var(--signal-rgb), .8); }

/* ---------- FrSwitch ---------- */
.tog { width: 54px; height: 32px; border-radius: 16px; position: relative; flex: none; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: background var(--t-smooth); }
.tog::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 13px; background: var(--tx-2);
  transition: transform 520ms var(--spring-organic), background var(--t-smooth), width 260ms var(--e-out);
}
.tog:active::after { width: 34px; }
.tog.on { background: var(--signal); box-shadow: 0 0 20px -6px rgba(var(--signal-rgb), .7); }
.tog.on::after { transform: translateX(22px); background: var(--signal-ink); }
.tog.on:active::after { transform: translateX(14px); }

/* ---------- StatusPill ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px 0 10px; border-radius: 14px;
  background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); color: var(--tx-2); white-space: nowrap;
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-fg); position: relative; flex: none; }
.pill .dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; color: inherit; opacity: 0; animation: halo 2.4s var(--e-out) infinite; }
.pill.ok { color: var(--tx-1); } .pill.ok .dot { background: var(--signal); color: var(--signal); box-shadow: var(--led-ring), 0 0 10px rgba(var(--signal-rgb), .8); }
.pill.warn { color: var(--warn); } .pill.warn .dot { background: var(--warn); color: var(--warn); }
.pill.warn .dot::after { animation-duration: 1.1s; }
.pill.alert { color: var(--alert); } .pill.alert .dot { background: var(--alert); color: var(--alert); }
.pill.off { color: var(--tx-3); } .pill.off .dot { background: var(--tx-4); } .pill.off .dot::after { display: none; }
.pill.busy .dot { background: transparent; box-shadow: inset 0 0 0 1.5px var(--warn); }
.pill.busy .dot::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid transparent; border-top-color: var(--warn); animation: spin .9s linear infinite; }
@keyframes halo { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(2.1); opacity: 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Tag ---------- */
.tag { display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px; background: var(--bg-3); color: var(--tx-2); }
.tag.s { background: rgba(var(--signal-rgb), calc(.12 * var(--wash-k))); color: var(--signal-fg); }
.tag.w { background: rgba(var(--warn-rgb), .12); color: var(--warn); }

/* ---------- Isla de estado (capsule) ---------- */
.isle-wrap { display: flex; justify-content: center; }
.isle {
  height: 36px; min-width: 36px; border-radius: 18px; padding: 0 14px 0 8px; display: inline-flex; align-items: center; gap: 9px;
  background: #000; box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 24px -10px #000;
  color: var(--tx-1); overflow: hidden; white-space: nowrap; position: relative;
  transition: width 620ms var(--spring-organic), background var(--t-smooth), box-shadow var(--t-smooth);
}
.isle canvas { width: 24px; height: 24px; flex: none; }
.isle .dot { width: 7px; height: 7px; border-radius: 50%; margin: 0 4px 0 6px; background: var(--signal-fg); box-shadow: 0 0 10px rgba(var(--signal-rgb), .8); }
.isle .in { display: inline-flex; align-items: center; gap: 9px; animation: isleIn 420ms var(--e-out); }
@keyframes isleIn { from { opacity: 0; filter: blur(6px); transform: translateY(6px); } }
.isle.warn { box-shadow: inset 0 0 0 1px rgba(var(--warn-rgb), .45), 0 0 26px -8px rgba(var(--warn-rgb), .6); }
.isle.warn .dot { background: var(--warn); box-shadow: 0 0 10px rgba(var(--warn-rgb), .8); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }
.isle.tx { background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 30px -6px rgba(var(--signal-rgb), .8); }
.isle.tx .dot { background: var(--signal-ink); box-shadow: none; animation: blink .8s steps(2) infinite; }

/* ---------- AudioRoutePill ---------- */
.route {
  height: 48px; padding: 0 12px 0 10px; border-radius: 16px; display: inline-flex; align-items: center; gap: 9px;
  background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1), inset 0 1px 0 var(--spec); color: var(--tx-1);
  transition: transform 420ms var(--spring-press);
}
.route:active { transform: scale(.96); }
.route .rl { display: flex; flex-direction: column; gap: 3px; text-align: left; }
.route .rl b { font: 600 13.5px/1 var(--f-ui); font-stretch: 105%; }
.route .rl span { color: var(--tx-3); }
.bars { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.bars i { width: 3px; border-radius: 2px; background: var(--signal-fg); height: 30%; animation: bar 900ms var(--e-inout) infinite alternate; }
.bars i:nth-child(2) { animation-delay: -300ms; animation-duration: 700ms; } .bars i:nth-child(3) { animation-delay: -600ms; animation-duration: 1100ms; }
.bars.idle i { animation: none; background: var(--tx-4); }
@keyframes bar { 0% { height: 25%; } 100% { height: 100%; } }

/* ---------- NearbyRoomTile ---------- */
.rtile {
  display: grid; grid-template-columns: 70px 1fr 40px; align-items: center; gap: 14px; width: 100%;
  padding: 10px 12px 10px 10px; border-radius: 22px; text-align: left; position: relative;
  background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1), inset 0 1px 0 var(--spec);
  transition: transform 460ms var(--spring-press), box-shadow var(--t-smooth);
}
.rtile:active { transform: scale(.975); }
.rtile.sel { box-shadow: var(--led-ring), inset 0 0 0 1px rgba(var(--signal-rgb), .5), inset 0 1px 0 var(--spec), 0 0 34px -14px rgba(var(--signal-rgb), .6); }
.rtile .chbox { height: 60px; border-radius: 15px; background: var(--bg-0); box-shadow: inset 0 0 0 1px var(--line-1); position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 6px 8px; }
.rtile .chbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.rtile .chbox b { position: relative; font-size: 24px; line-height: 1; }
.rtile .chbox small { position: absolute; top: 7px; left: 8px; }
.rtile .ri { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rtile .ri b { font: 620 16.5px/1.15 var(--f-ui); font-stretch: 106%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rtile .ri span { display: flex; align-items: center; gap: 6px; color: var(--tx-3); }
.rtile .go { width: 40px; height: 40px; border-radius: 13px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); color: var(--tx-2); box-shadow: inset 0 0 0 1px var(--line-1); }
.rtile.sel .go { background: var(--signal); color: var(--signal-ink); box-shadow: none; }

/* ---------- PermissionRow ---------- */
.perm { display: grid; grid-template-columns: 46px 1fr auto; gap: 14px; align-items: center; padding: 14px; border-radius: 20px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1), inset 0 1px 0 var(--spec); transition: box-shadow var(--t-smooth); }
.perm .pic { width: 46px; height: 46px; border-radius: 15px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-1); color: var(--tx-1); transition: all var(--t-smooth); }
.perm .pt { display: flex; flex-direction: column; gap: 4px; }
.perm .pt b { font: 620 15px/1.2 var(--f-ui); font-stretch: 106%; }
.perm .pt span { font: 400 12.5px/1.4 var(--f-ui); color: var(--tx-2); }
.perm .ps { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--tx-3); }
.perm.ok .pic { color: var(--signal-fg); box-shadow: inset 0 0 0 1px rgba(var(--signal-rgb), .45); background: rgba(var(--signal-rgb), calc(.07 * var(--wash-k))); }
.perm.ok .ps { background: var(--signal); color: var(--signal-ink); box-shadow: 0 0 16px -4px rgba(var(--signal-rgb), .8); animation: pop 500ms var(--spring-organic); }
.perm.deny { box-shadow: inset 0 0 0 1px rgba(var(--alert-rgb), .4); }
.perm.deny .pic { color: var(--alert); }
.perm.deny .ps { width: auto; padding: 0 10px; border-radius: 10px; color: var(--alert); box-shadow: inset 0 0 0 1px rgba(var(--alert-rgb), .4); }

/* ---------- StepDots ---------- */
.steps { display: flex; gap: 6px; align-items: center; }
.steps i { width: 6px; height: 6px; border-radius: 3px; background: var(--tx-4); transition: width 520ms var(--spring-organic), background var(--t-smooth); }
.steps i.on { width: 22px; background: var(--signal); box-shadow: var(--led-ring); }
.steps i.done { background: var(--tx-2); }

/* ---------- FrBanner ---------- */
.banner { display: grid; grid-template-columns: 22px 1fr 24px; gap: 10px; align-items: start; padding: 12px 12px 12px 14px; border-radius: 16px; font: 400 13px/1.45 var(--f-ui); }
.banner b { font-weight: 600; }
.banner.warn { color: var(--warn-tx); background: rgba(var(--warn-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--warn-rgb), .3); }
.banner.warn svg.ic { color: var(--warn); }
.banner.alert { color: var(--alert-tx); background: rgba(var(--alert-rgb), .08); box-shadow: inset 0 0 0 1px rgba(var(--alert-rgb), .32); }
.banner.alert svg.ic { color: var(--alert); }
.banner.info { color: var(--tx-2); background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); }
.banner .x { color: var(--tx-3); }
.banner .act { display: inline-block; margin-top: 6px; font: 600 13px/1 var(--f-ui); color: var(--tx-1); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-3); }

/* ---------- FrToast ---------- */
.toast { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 16px 0 8px; border-radius: 23px; background: var(--bg-3); box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--spec), var(--shadow-pop); font: 500 14px/1 var(--f-ui); }
.toast canvas { width: 30px; height: 30px; }
.toast .tic { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ---------- FrSheet ---------- */
.scrim { position: absolute; inset: 0; z-index: 40; background: var(--scrim); backdrop-filter: blur(6px) saturate(.8); -webkit-backdrop-filter: blur(6px) saturate(.8); }
.sheet {
  position: absolute; left: 8px; right: 8px; bottom: 8px; z-index: 41; border-radius: 40px; padding: 10px 20px 22px;
  background: linear-gradient(180deg, var(--sheet-a), var(--sheet-b) 30%);
  box-shadow: inset 0 0 0 1px var(--line-2), inset 0 1px 0 var(--spec), var(--shadow-pop);
  display: flex; flex-direction: column; gap: 18px;
}
.sheet .grab { width: 38px; height: 5px; border-radius: 3px; background: var(--bg-4); align-self: center; margin-bottom: 4px; }
.sheet .sh-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sheet .sh-h h3 { font: 680 22px/1.15 var(--f-ui); font-stretch: 118%; letter-spacing: -.01em; }
.sheet .sh-h p { font: 400 14px/1.45 var(--f-ui); color: var(--tx-2); margin-top: 6px; }

/* ---------- Opción de lista (ruta de audio, idioma) ---------- */
.opt { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px; border-radius: 18px; width: 100%; text-align: left; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1); transition: box-shadow var(--t-smooth), transform 420ms var(--spring-press); }
.opt:active { transform: scale(.98); }
.opt .oic { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line-1); }
.opt .ot { display: flex; flex-direction: column; gap: 4px; }
.opt .ot b { font: 600 15px/1.2 var(--f-ui); }
.opt .ot span { color: var(--tx-3); }
.opt .ock { width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-3); display: flex; align-items: center; justify-content: center; }
.opt.on { box-shadow: var(--led-ring), inset 0 0 0 1px rgba(var(--signal-rgb), .55), 0 0 30px -16px rgba(var(--signal-rgb), .8); }
.opt.on .oic { color: var(--signal-fg); background: rgba(var(--signal-rgb), calc(.1 * var(--wash-k))); }
.opt.on .ock { background: var(--signal); color: var(--signal-ink); box-shadow: none; }
.opt.dis { opacity: .45; }

/* ---------- Fila de ajustes ---------- */
.group { border-radius: 22px; background: var(--bg-1); box-shadow: inset 0 0 0 1px var(--line-1), inset 0 1px 0 var(--spec); overflow: hidden; }
.row { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 15px 16px; min-height: 58px; width: 100%; text-align: left; }
.row + .row { border-top: 1px solid var(--line-1); }
.row .rt { display: flex; flex-direction: column; gap: 4px; }
.row .rt b { font: 560 15px/1.25 var(--f-ui); }
.row .rt span { font: 400 12.5px/1.35 var(--f-ui); color: var(--tx-3); }
.row .rv { display: flex; align-items: center; gap: 8px; color: var(--tx-2); }

/* ---------- Loader de onda (reemplaza spinners) ---------- */
canvas.wave-loader { width: 64px; height: 22px; }

/* ---------- Avatares de firma ---------- */
canvas.sig { display: block; }