/* [Hecho por Claude, 21/10/2026 21:32] Apps · F0 (AP-0.5). Kit móvil común de las apps.
   [Hecho por Claude, 22/10/2026 13:11] Rehecho sobre el kit Fluent 2 del ERP, como las maquetas aprobadas por AK
   (Docs/Rediseño/revisar/apps-edge-*.html): nada de paleta propia. Las secciones 1 y 2 (tokens y temas) son copia LITERAL
   de src/ErpCloud_V1.Web/wwwroot/css/erp-kit.css, sacada con un script (no a mano): si cambian allí, se vuelven a copiar.
   Modo oscuro con la clase .dark en <html> (js/theme.js), como en el ERP. Sin dependencias externas. */

/* ── 1 · Tokens ─────────────────────────────────────────────────────────────── */
html.kit-fluent {
  --fontFamilyBase: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
  --fontFamilyMonospace: Consolas, 'Courier New', Courier, monospace; --fontSizeBase100: 10px;
  --fontSizeBase200: 12px; --fontSizeBase300: 14px; --fontSizeBase400: 16px; --fontSizeBase500: 20px;
  --fontSizeBase600: 24px; --fontWeightRegular: 400; --fontWeightSemibold: 600; --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px; --borderRadiusCircular: 10000px; --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242; --colorNeutralForeground3: #616161; --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #bdbdbd; --colorNeutralForegroundOnBrand: #ffffff;
  --colorNeutralBackground1: #ffffff; --colorNeutralBackground1Hover: #f5f5f5; --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5; --colorNeutralBackground4: #f0f0f0; --colorNeutralBackground4Hover: #fafafa;
  --colorNeutralBackground4Selected: #ffffff; --colorNeutralBackground6: #e6e6e6;
  --colorSubtleBackgroundHover: #f5f5f5; --colorSubtleBackgroundPressed: #e0e0e0;
  --colorSubtleBackgroundSelected: #ebebeb; --colorNeutralStroke1: #d1d1d1; --colorNeutralStroke1Hover: #c7c7c7;
  --colorNeutralStroke2: #e0e0e0; --colorNeutralStrokeAccessible: #616161;
  --colorNeutralStrokeAccessibleHover: #575757; --colorNeutralStrokeDisabled: #e0e0e0;
  --colorBrandBackground: #0f6cbd; --colorBrandBackgroundHover: #115ea3; --colorBrandBackgroundPressed: #0c3b5e;
  --colorBrandBackground2: #ebf3fc; --colorBrandForeground1: #0f6cbd; --colorBrandForegroundLink: #115ea3;
  --colorCompoundBrandStroke: #0f6cbd; --colorBrandStroke2: #b4d6fa; --colorStrokeFocus2: #000000;
  --colorPaletteRedForeground3: #d13438; --colorStatusSuccessBackground1: #f1faf1;
  --colorStatusSuccessForeground1: #0e700e; --colorStatusSuccessForeground3: #107c10;
  --colorStatusSuccessBorder1: #9fd89f; --colorStatusWarningBackground1: #fff9f5;
  --colorStatusWarningForeground1: #bc4b09; --colorStatusWarningForeground3: #bc4b09;
  --colorStatusWarningBorder1: #fdcfb4; --colorStatusDangerBackground1: #fdf3f4;
  --colorStatusDangerForeground1: #b10e1c; --colorStatusDangerForeground3: #c50f1f;
  --colorStatusDangerBorder1: #eeacb2; --shadow4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --shadow16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
}
html.kit-fluent.dark {
  --colorNeutralForeground1: #ffffff; --colorNeutralForeground2: #d6d6d6; --colorNeutralForeground3: #adadad;
  --colorNeutralForeground4: #999999; --colorNeutralForegroundDisabled: #5c5c5c; --colorNeutralBackground1: #292929;
  --colorNeutralBackground1Hover: #3d3d3d; --colorNeutralBackground2: #1f1f1f; --colorNeutralBackground3: #141414;
  --colorNeutralBackground4: #0a0a0a; --colorNeutralBackground4Hover: #1f1f1f;
  --colorNeutralBackground4Selected: #1a1a1a; --colorNeutralBackground6: #333333;
  --colorSubtleBackgroundHover: #383838; --colorSubtleBackgroundPressed: #2e2e2e;
  --colorSubtleBackgroundSelected: #333333; --colorNeutralStroke1: #666666; --colorNeutralStroke1Hover: #757575;
  --colorNeutralStroke2: #525252; --colorNeutralStrokeAccessible: #adadad;
  --colorNeutralStrokeAccessibleHover: #bdbdbd; --colorNeutralStrokeDisabled: #424242;
  --colorBrandBackground: #115ea3; --colorBrandBackgroundHover: #0f6cbd; --colorBrandBackgroundPressed: #0c3b5e;
  --colorBrandBackground2: #082338; --colorBrandForeground1: #479ef5; --colorBrandForegroundLink: #479ef5;
  --colorCompoundBrandStroke: #479ef5; --colorBrandStroke2: #0e4775; --colorStrokeFocus2: #ffffff;
  --colorPaletteRedForeground3: #e37d80; --colorStatusSuccessBackground1: #052505;
  --colorStatusSuccessForeground1: #54b054; --colorStatusSuccessForeground3: #9fd89f;
  --colorStatusSuccessBorder1: #107c10; --colorStatusWarningBackground1: #4a1e04;
  --colorStatusWarningForeground1: #faa06b; --colorStatusWarningForeground3: #f98845;
  --colorStatusWarningBorder1: #f7630c; --colorStatusDangerBackground1: #3b0509;
  --colorStatusDangerForeground1: #dc626d; --colorStatusDangerForeground3: #eeacb2;
  --colorStatusDangerBorder1: #c50f1f; --shadow4: 0 0 2px rgba(0,0,0,0.24), 0 2px 4px rgba(0,0,0,0.28);
  --shadow16: 0 0 2px rgba(0,0,0,0.24), 0 8px 16px rgba(0,0,0,0.28);
}

/* [Hecho por Claude, 07/10/2026 13:24] F1b: el borde más suave del kit (colorNeutralStroke3), que no estaba en los puentes.
   Lo usa tailwind.erp.input.css para los border-slate-100 de las pantallas en Tailwind clásico. */
html.kit-fluent { --colorNeutralStroke3: #f0f0f0; }
html.kit-fluent.dark { --colorNeutralStroke3: #3d3d3d; }

/* ── 2 · Temas: rampa de marca por tema. Contraste ≥ 4,5:1 en todos (§3b) ──
   [Hecho por Claude, 07/10/2026 12:56] Clásico = el AZUL DEL KIT (#0f6cbd, el de los tokens de la sección 1), no BkNode:
   AK lo vio en facturas de venta (menú lateral y botones de ese azul) y es el resultado que quiere. Revierte K-2. Los
   bloques que lo cambiaban a #1A428A se han quitado; corporativo, verde y Helardy siguen igual. */
/* [Hecho por Claude, 07/10/2026 13:04] Corporativo: botones en el MARINO del menú lateral (#0B1E3F, su bg-primary) y
   texto de marca, pestaña activa y enlaces en #1A428A. Antes #2D64BF, un azul medio casi igual al azul del kit del
   Clásico: AK veía que el botón «apenas cambiaba» y no transmitía el corporativo. Contraste blanco sobre #0B1E3F 16:1;
   #1A428A sobre blanco 9,6:1. El oscuro de Corporativo no cambia. */
html.kit-fluent.theme-corporate {
  --colorBrandBackground: #0B1E3F; --colorBrandBackgroundHover: #1A428A; --colorBrandBackgroundPressed: #06122a;
  --colorBrandBackground2: #e8edf6; --colorBrandForeground1: #1A428A; --colorBrandForegroundLink: #1A428A;
  --colorCompoundBrandStroke: #1A428A; --colorBrandStroke2: #b9c8e4;
}
html.kit-fluent.theme-corporate.dark {
  --colorBrandBackground: #2D64BF; --colorBrandBackgroundHover: #3d74cf; --colorBrandBackgroundPressed: #1C417F;
  --colorBrandBackground2: #15243c; --colorBrandForeground1: #6f9ae0; --colorBrandForegroundLink: #6f9ae0;
  --colorCompoundBrandStroke: #6f9ae0; --colorBrandStroke2: #26324a;
}
html.kit-fluent.theme-green {
  --colorBrandBackground: #1d6a3b; --colorBrandBackgroundHover: #134d2a; --colorBrandBackgroundPressed: #0f2e1c;
  --colorBrandBackground2: #eaf4ee; --colorBrandForeground1: #1d6a3b; --colorBrandForegroundLink: #1d6a3b;
  --colorCompoundBrandStroke: #1d6a3b; --colorBrandStroke2: #b6d6c2;
}
html.kit-fluent.theme-green.dark {
  --colorBrandBackground: #1d6a3b; --colorBrandBackgroundHover: #24804a; --colorBrandBackgroundPressed: #134d2a;
  --colorBrandBackground2: #0f2e1c; --colorBrandForeground1: #4bbd8b; --colorBrandForegroundLink: #4bbd8b;
  --colorCompoundBrandStroke: #4bbd8b; --colorBrandStroke2: #1d3b2a;
}
/* [Hecho por Claude, 22/10/2026 14:08] Incidencia #170: se quita el tema de color Helardy. */

/* ══════════════════════════════════════════════════════════════════════════
   PIEZAS DE LAS APPS SOBRE EL KIT FLUENT 2 (las de Docs/Rediseño/revisar/apps-edge-*.html, aprobadas por AK)
   Sólo usan los tokens de arriba: ningún color, tamaño de letra ni radio propio. Letra: rampa de Fluent
   (12/16 · 14/20 · 16/22 · 20/28 · 24/32 · 40/52), pesos 400 y 600. Radio 4 px salvo insignias, avatares y barras.
   Campos a 16 px de letra: en iPhone, menos de 16 px hace zoom al tocar el campo.
   ══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html.kit-fluent body{font-family:var(--fontFamilyBase);font-size:14px;line-height:20px;color:var(--colorNeutralForeground1);
  background:var(--colorNeutralBackground2);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;-webkit-text-size-adjust:100%}
button{font:inherit;color:inherit}
a{color:inherit;text-decoration:none}
[hidden]{display:none !important}
svg.i{width:20px;height:20px;flex:none;display:block}
svg.i16{width:16px;height:16px}
svg.i24{width:24px;height:24px}
svg.i28{width:28px;height:28px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ─── Marco de la app: cabecera, contenido con scroll y barra inferior ─── */
.app{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.app-shell{height:100vh;height:100dvh}
.ab{height:56px;flex:none;display:flex;align-items:center;gap:12px;padding:0 8px 0 16px;padding-top:env(safe-area-inset-top);
  box-sizing:content-box;background:var(--colorNeutralBackground2)}
.ab .tt{flex:1;min-width:0}
.ab .tt small{display:block;font-size:12px;line-height:16px;color:var(--colorNeutralForeground3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab .tt b{display:block;font-size:20px;line-height:28px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ab.bar{background:var(--colorNeutralBackground1);border-bottom:1px solid var(--colorNeutralStroke2)}
.ab.bar .tt b{font-size:16px;line-height:22px}
.ib{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--borderRadiusMedium);color:var(--colorNeutralForeground2);background:transparent;border:0;cursor:pointer}
.ib:hover{background:var(--colorSubtleBackgroundHover)}
.ib .n{position:absolute;top:4px;right:4px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--borderRadiusCircular);
  background:var(--colorStatusDangerForeground3);color:#fff;font-size:10px;line-height:16px;font-weight:600;text-align:center;border:1px solid var(--colorNeutralBackground2)}
.logo{width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--borderRadiusMedium);background:var(--colorBrandBackground);color:var(--colorNeutralForegroundOnBrand);overflow:hidden}
.logo img{width:100%;height:100%;object-fit:contain;background:var(--colorNeutralBackground1)}
.cnt{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:4px 16px 16px;-webkit-overflow-scrolling:touch}
.cnt.top{padding-top:16px}
.cnt > *{flex:none}
.wrap{width:100%;max-width:560px;margin:0 auto}
.nv{height:64px;flex:none;display:flex;background:var(--colorNeutralBackground1);border-top:1px solid var(--colorNeutralStroke2);
  padding-bottom:env(safe-area-inset-bottom);box-sizing:content-box}
.nv a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;line-height:16px;color:var(--colorNeutralForeground3);cursor:pointer}
.nv a svg{width:24px;height:24px}
.nv a.on{color:var(--colorBrandForeground1);font-weight:600}
.nv a .f{display:none}
.nv a.on .f{display:block}
.nv a.on .rg{display:none}

/* Tipografía (rampa Fluent 2) */
.c1{font-size:12px;line-height:16px;color:var(--colorNeutralForeground3)}
.b1{font-size:14px;line-height:20px}
.b1s{font-size:14px;line-height:20px;font-weight:600}
.s2{font-size:16px;line-height:22px;font-weight:600}
.s1{font-size:20px;line-height:28px;font-weight:600}
.t3{font-size:24px;line-height:32px;font-weight:600}
.lt{font-size:40px;line-height:52px;font-weight:600;letter-spacing:-.5px}
.xxl{font-size:68px;line-height:92px;font-weight:600;letter-spacing:-1px}
.f2{color:var(--colorNeutralForeground2)}
.f3{color:var(--colorNeutralForeground3)}
.fb1{color:var(--colorBrandForeground1)}
.fw4{font-weight:400}
.tc{text-align:center}
.tr{text-align:right}
.wrapt{overflow-wrap:anywhere}

/* Tarjeta (Card de Fluent: superficie 1, shadow4, sin borde) */
.card{background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusMedium);box-shadow:var(--shadow4);padding:16px}
.card.np{padding:0;overflow:hidden}
.card.li-wrap{padding:4px 16px}
.ch{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px}
.ch h2,.ch h3{margin:0;font-size:16px;line-height:22px;font-weight:600}
.ch a,.ch button.lk{color:var(--colorBrandForegroundLink);font-size:14px;background:none;border:0;padding:0;cursor:pointer}
.row{display:flex;align-items:center;gap:8px}
.row.sb{justify-content:space-between}
.row.top{align-items:flex-start}
.row.wrapr{flex-wrap:wrap}
.g{flex:1;min-width:0}
.col{display:flex;flex-direction:column;gap:12px}
.col.g8{gap:8px}
.div{height:1px;background:var(--colorNeutralStroke2);margin:12px 0}
.m0{margin:0}
.mx{margin-left:auto;margin-right:auto}
.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.week{display:flex;justify-content:space-between;gap:4px;text-align:center}
.week > div{flex:1;min-width:0}

/* Botones (Button de Fluent, talla grande para el dedo) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 16px;border-radius:var(--borderRadiusMedium);
  border:1px solid var(--colorNeutralStroke1);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--colorNeutralBackground1Hover);border-color:var(--colorNeutralStroke1Hover)}
.btn.pri{background:var(--colorBrandBackground);border-color:transparent;color:var(--colorNeutralForegroundOnBrand)}
.btn.pri:hover{background:var(--colorBrandBackgroundHover)}
.btn.sub{background:transparent;border-color:transparent;color:var(--colorNeutralForeground2)}
.btn.sub:hover{background:var(--colorSubtleBackgroundHover)}
.btn.dan{background:var(--colorStatusDangerForeground3);border-color:transparent;color:#fff}
.btn[disabled],.btn.dis{background:var(--colorNeutralBackground3);border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);pointer-events:none;cursor:default}
.btn.xl{height:52px;font-size:16px;line-height:22px}
.btn.sm{height:32px;padding:0 12px}
.btn.blk{width:100%}
.btn.ico{width:40px;padding:0}
.btn:focus-visible,.ib:focus-visible,.nv a:focus-visible,.qa a:focus-visible,.li:focus-visible{outline:2px solid var(--colorStrokeFocus2);outline-offset:1px}

/* Insignia (Badge tint de Fluent, como los estados del ERP) */
.bd{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 6px;border:1px solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusCircular);
  background:var(--colorNeutralBackground3);color:var(--colorNeutralForeground3);font-size:12px;line-height:16px;font-weight:600;white-space:nowrap;flex:none}
.bd.lg{height:24px;padding:0 8px}
.bd svg{width:12px;height:12px}
.bd.ok{background:var(--colorStatusSuccessBackground1);border-color:var(--colorStatusSuccessBorder1);color:var(--colorStatusSuccessForeground1)}
.bd.wa{background:var(--colorStatusWarningBackground1);border-color:var(--colorStatusWarningBorder1);color:var(--colorStatusWarningForeground1)}
.bd.da{background:var(--colorStatusDangerBackground1);border-color:var(--colorStatusDangerBorder1);color:var(--colorStatusDangerForeground1)}
.bd.br{background:var(--colorBrandBackground2);border-color:var(--colorBrandStroke2);color:var(--colorBrandForeground1)}
.bd.fill{background:var(--colorBrandBackground);border-color:transparent;color:var(--colorNeutralForegroundOnBrand)}

/* Aviso (MessageBar de Fluent) */
.mb{display:flex;align-items:flex-start;gap:8px;padding:8px 12px;border:1px solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);
  background:var(--colorNeutralBackground3);color:var(--colorNeutralForeground1);overflow-wrap:anywhere}
.mb > svg{color:var(--colorNeutralForeground2)}
.mb > div{flex:1;min-width:0}
.mb b{font-weight:600}
.mb span{color:var(--colorNeutralForeground2)}
.mb.wa{background:var(--colorStatusWarningBackground1);border-color:var(--colorStatusWarningBorder1)}
.mb.wa > svg{color:var(--colorStatusWarningForeground3)}
.mb.ok{background:var(--colorStatusSuccessBackground1);border-color:var(--colorStatusSuccessBorder1)}
.mb.ok > svg{color:var(--colorStatusSuccessForeground3)}
.mb.da{background:var(--colorStatusDangerBackground1);border-color:var(--colorStatusDangerBorder1)}
.mb.da > svg{color:var(--colorStatusDangerForeground3)}
.mb .btn{margin-top:8px}

/* Lista (List de Fluent, filas de 56 px con dos líneas) */
.li{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--colorNeutralStroke2);width:100%;
  background:none;border-left:0;border-right:0;border-top:0;text-align:left;cursor:default}
button.li,a.li{cursor:pointer;font:inherit;color:inherit}
button.li[disabled]{cursor:default;opacity:.7}
.li:last-child{border-bottom:0}
.li .lt-t{flex:1;min-width:0}
.li .lt-t b{display:block;font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .lt-t b.s{font-weight:600}
.li .lt-t span{display:block;font-size:12px;line-height:16px;color:var(--colorNeutralForeground3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.li .ch-r{color:var(--colorNeutralForeground3)}
.li .r{text-align:right;flex:none}
.li .r b{display:block;font-weight:600}
.li .r span{display:block;font-size:12px;line-height:16px;color:var(--colorNeutralForeground3)}
.ic{width:40px;height:40px;flex:none;display:grid;place-items:center;border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground3);color:var(--colorNeutralForeground2)}
.ic.br{background:var(--colorBrandBackground2);color:var(--colorBrandForeground1)}
.ic.ok{background:var(--colorStatusSuccessBackground1);color:var(--colorStatusSuccessForeground1)}
.ic.wa{background:var(--colorStatusWarningBackground1);color:var(--colorStatusWarningForeground1)}
.ic.da{background:var(--colorStatusDangerBackground1);color:var(--colorStatusDangerForeground1)}
.pre{white-space:pre-line}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.steps svg{display:inline-block;vertical-align:-3px}
/* Ayuda «?» junto a una etiqueta (BP-06): círculo pequeño que no mueve a los vecinos */
.hlp{display:inline-grid;place-items:center;width:16px;height:16px;margin-left:4px;padding:0;border:1px solid var(--colorNeutralStrokeAccessible);
  border-radius:var(--borderRadiusCircular);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground2);font-size:10px;line-height:1;font-weight:600;
  vertical-align:1px;cursor:pointer}
.empty{padding:16px 0;text-align:center;color:var(--colorNeutralForeground3)}

/* Accesos rápidos */
.qa{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.qa a{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 4px;border-radius:var(--borderRadiusMedium);
  background:var(--colorNeutralBackground1);box-shadow:var(--shadow4);font-size:12px;line-height:16px;color:var(--colorNeutralForeground2);text-align:center;cursor:pointer;overflow-wrap:anywhere}
.qa a .bd{position:absolute;top:6px;right:6px}

/* Progreso (ProgressBar de Fluent) */
.pb{height:4px;border-radius:var(--borderRadiusCircular);background:var(--colorNeutralBackground6);overflow:hidden}
.pb i{display:block;height:100%;width:0;border-radius:var(--borderRadiusCircular);background:var(--colorCompoundBrandStroke);transition:width .3s}
.pb.ok i{background:var(--colorStatusSuccessForeground3)}
.pb.xl{height:8px}

/* Avatar */
.av{position:relative;width:32px;height:32px;flex:none;display:grid;place-items:center;border-radius:var(--borderRadiusCircular);
  background:var(--colorBrandBackground2);color:var(--colorBrandForeground1);font-size:12px;line-height:16px;font-weight:600}
.av.l{width:40px;height:40px;font-size:14px}
.av.xl{width:64px;height:64px;font-size:24px;line-height:32px}
.av .pr{position:absolute;right:-1px;bottom:-1px;width:10px;height:10px;border-radius:var(--borderRadiusCircular);background:var(--colorStatusSuccessForeground3);border:2px solid var(--colorNeutralBackground1)}
.av .pr.off{background:var(--colorNeutralStrokeAccessible)}

/* Pestañas (Tablist de Fluent, el mismo indicador que el ERP) */
.tl{display:flex;border-bottom:1px solid var(--colorNeutralStroke2)}
.tl button{position:relative;flex:1;display:grid;place-items:center;height:40px;color:var(--colorNeutralForeground2);background:none;border:0;cursor:pointer}
.tl button::after{content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:var(--borderRadiusCircular);background:transparent}
.tl button[aria-selected=true]{color:var(--colorNeutralForeground1);font-weight:600}
.tl button[aria-selected=true]::after{background:var(--colorCompoundBrandStroke)}

/* Campos (Field + Input outline de Fluent). Todos a la misma altura (BP-05); el texto largo, en su fila. */
.fl{display:flex;flex-direction:column;gap:4px;min-width:0}
.fl > label,.fl > .lb{font-size:14px;line-height:20px;color:var(--colorNeutralForeground1)}
.fl .req{color:var(--colorPaletteRedForeground3)}
.fl .hint{font-size:12px;line-height:16px;color:var(--colorNeutralForeground3)}
.fl .err{font-size:12px;line-height:16px;color:var(--colorStatusDangerForeground1)}
.in{display:block;width:100%;height:40px;padding:0 12px;border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);
  border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);font:inherit;font-size:16px;line-height:22px}
.in:focus{outline:0;border-bottom-color:var(--colorCompoundBrandStroke);box-shadow:inset 0 -1px 0 var(--colorCompoundBrandStroke)}
.in::placeholder{color:var(--colorNeutralForeground4)}
textarea.in{height:auto;min-height:80px;padding:8px 12px;resize:vertical}
select.in{appearance:auto}
.in[aria-invalid=true]{border-color:var(--colorStatusDangerBorder1);border-bottom-color:var(--colorStatusDangerForeground3)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tg{display:flex;flex-wrap:wrap;gap:8px}
.tg button{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 10px;border:1px solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);
  background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);cursor:pointer}
.tg button svg{width:16px;height:16px;color:var(--colorNeutralForeground2)}
.tg button[aria-pressed=true]{background:var(--colorBrandBackground2);border-color:var(--colorBrandStroke2);color:var(--colorBrandForeground1);font-weight:600}
.tg button[aria-pressed=true] svg{color:var(--colorBrandForeground1)}
.ck{display:flex;align-items:center;gap:8px;min-height:40px;cursor:pointer}
.ck input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--colorCompoundBrandStroke)}

/* Línea de tiempo del día */
.tm{display:flex;flex-direction:column}
.tm > div{position:relative;display:flex;gap:12px;align-items:flex-start;padding:0 0 16px 24px}
.tm > div:last-child{padding-bottom:0}
.tm > div::before{content:"";position:absolute;left:5px;top:6px;width:8px;height:8px;border-radius:var(--borderRadiusCircular);border:2px solid var(--colorCompoundBrandStroke);background:var(--colorCompoundBrandStroke)}
.tm > div::after{content:"";position:absolute;left:10px;top:20px;bottom:0;width:2px;background:var(--colorNeutralStroke2)}
.tm > div:last-child::after{display:none}
.tm > div.wait::before{background:var(--colorNeutralBackground1);border-color:var(--colorNeutralStroke1)}
.tm .h{width:44px;flex:none;font-weight:600}
.tm .d{flex:1;min-width:0}
.tm .d span{display:block;font-size:12px;line-height:16px;color:var(--colorNeutralForeground3)}

/* Teclado numérico (kiosco) */
.kp{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kp button{display:grid;place-items:center;height:56px;border:1px solid var(--colorNeutralStroke1);border-radius:var(--borderRadiusMedium);
  background:var(--colorNeutralBackground1);font-size:24px;line-height:32px;font-weight:600;cursor:pointer}
.kp button:active{background:var(--colorSubtleBackgroundPressed)}
.kp button.t{font-size:14px;line-height:20px;color:var(--colorNeutralForeground2)}
.kp button.pri{background:var(--colorBrandBackground);border-color:transparent;color:var(--colorNeutralForegroundOnBrand);font-size:16px;line-height:22px}
.kp.xl button{height:72px}
.pin{display:flex;justify-content:center;gap:12px;min-height:12px}
.pin i{width:12px;height:12px;border-radius:var(--borderRadiusCircular);border:1px solid var(--colorNeutralStrokeAccessible)}
.pin i.on{background:var(--colorCompoundBrandStroke);border-color:transparent}

/* Fotos (tique, justificante) */
.pics{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pic{position:relative;aspect-ratio:1;border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground6);display:grid;place-items:center;color:var(--colorNeutralForeground3);overflow:hidden}
.pic img{width:100%;height:100%;object-fit:cover}
.pic.add{background:var(--colorNeutralBackground1);border:1px dashed var(--colorNeutralStrokeAccessible);color:var(--colorBrandForeground1);cursor:pointer}
.pic .x{position:absolute;top:4px;right:4px;width:24px;height:24px;border-radius:var(--borderRadiusCircular);border:0;display:grid;place-items:center;
  background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);box-shadow:var(--shadow4);cursor:pointer}

/* Hoja inferior (diálogo en móvil) */
.sheet-bg{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.4);display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:560px;max-height:92dvh;overflow:auto;background:var(--colorNeutralBackground1);border-radius:8px 8px 0 0;box-shadow:var(--shadow16);
  padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
.sheet .ch{margin-bottom:16px}

/* Aviso flotante (Toast) */
.toast{position:fixed;left:16px;right:16px;bottom:calc(80px + env(safe-area-inset-bottom));z-index:50;max-width:528px;margin:0 auto}
.toast .mb{box-shadow:var(--shadow16)}

/* Kiosco: tableta horizontal */
.kiosk{display:grid;grid-template-columns:1fr minmax(320px,420px);gap:24px;padding:24px 32px 32px;flex:1;min-height:0}
.kiosk-l{display:flex;flex-direction:column;justify-content:center;gap:16px;min-width:0}
.kiosk-r{display:flex;flex-direction:column;gap:16px;padding:24px}
@media (max-width:760px){.kiosk{grid-template-columns:1fr;padding:16px}.xxl{font-size:40px;line-height:52px}}

/* ─── Páginas de cuenta (entrar, invitación, recuperar) · clases ap-* de F0, ahora con el kit ─── */
.ap-top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  background:var(--colorNeutralBackground1);border-bottom:1px solid var(--colorNeutralStroke2)}
.ap-top__app{display:flex;align-items:center;gap:12px;font-size:16px;line-height:22px;font-weight:600}
.ap-top__who{display:flex;align-items:center;gap:12px;min-width:0}
.ap-top__tenant{font-size:12px;line-height:16px;color:var(--colorNeutralForeground3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:45vw}
.ap-top__logout{margin:0}
.ap-main{max-width:440px;margin:0 auto;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
.ap-card{background:var(--colorNeutralBackground1);border-radius:var(--borderRadiusMedium);box-shadow:var(--shadow4);padding:24px 16px;margin-bottom:16px}
.ap-title{font-size:20px;line-height:28px;font-weight:600;margin:0 0 4px;overflow-wrap:anywhere}
.ap-sub{color:var(--colorNeutralForeground3);margin:0 0 16px}
.ap-field{display:flex;flex-direction:column;gap:4px;margin-bottom:16px}
.ap-field > span{font-size:14px;line-height:20px}
.ap-input{display:block;width:100%;height:40px;padding:0 12px;border:1px solid var(--colorNeutralStroke1);border-bottom-color:var(--colorNeutralStrokeAccessible);
  border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);font:inherit;font-size:16px}
.ap-input:focus{outline:0;border-bottom-color:var(--colorCompoundBrandStroke);box-shadow:inset 0 -1px 0 var(--colorCompoundBrandStroke)}
.ap-btn{display:flex;align-items:center;justify-content:center;width:100%;height:52px;padding:0 16px;font:inherit;font-size:16px;line-height:22px;font-weight:600;
  border-radius:var(--borderRadiusMedium);border:1px solid transparent;background:var(--colorBrandBackground);color:var(--colorNeutralForegroundOnBrand);cursor:pointer;text-decoration:none}
.ap-btn:hover{background:var(--colorBrandBackgroundHover)}
.ap-btn[disabled]{background:var(--colorNeutralBackground3);border-color:var(--colorNeutralStrokeDisabled);color:var(--colorNeutralForegroundDisabled);cursor:default}
.ap-btn--ghost{height:40px;font-size:14px;background:var(--colorNeutralBackground1);color:var(--colorNeutralForeground1);border-color:var(--colorNeutralStroke1)}
.ap-btn--ghost:hover{background:var(--colorNeutralBackground1Hover)}
.ap-btn + .ap-btn{margin-top:8px}
.ap-link{background:none;border:0;padding:0;font:inherit;color:var(--colorBrandForegroundLink);cursor:pointer}
.ap-link:hover{text-decoration:underline}
.ap-center{text-align:center;margin-top:16px}
.ap-check{display:flex;align-items:center;gap:8px;min-height:40px}
.ap-check input[type=checkbox]{width:20px;height:20px;flex:0 0 auto;margin:0}
.ap-alert{padding:8px 12px;border:1px solid var(--colorNeutralStroke2);border-radius:var(--borderRadiusMedium);background:var(--colorNeutralBackground3);margin-bottom:16px;overflow-wrap:anywhere}
.ap-alert--bad{background:var(--colorStatusDangerBackground1);border-color:var(--colorStatusDangerBorder1);color:var(--colorStatusDangerForeground1)}
.ap-alert--ok{background:var(--colorStatusSuccessBackground1);border-color:var(--colorStatusSuccessBorder1);color:var(--colorStatusSuccessForeground1)}
.ap-alert--info{background:var(--colorBrandBackground2);border-color:var(--colorBrandStroke2);color:var(--colorNeutralForeground1)}
.ap-list{list-style:none;margin:0;padding:0}
.ap-list li + li{margin-top:8px}