/* RECARGALOFACILITO.COM · Material Design 3 · sistema de diseño compartido (panel y sitio público)
   Roles de color generados desde el verde de la marca (seed #1f5b49, esquema tonal). Roboto autoalojada.
   Componentes: botones, campos, tarjetas, listas, tablas, chips, pestañas, diálogos, snackbar, menús, progreso. */
@font-face { font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url(/web-assets/fonts/roboto-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url(/web-assets/fonts/roboto-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url(/web-assets/fonts/roboto-latin-700-normal.woff2) format("woff2"); }
/* 3.15.0 · Poppins (OFL) para títulos, cifras y botones: la tipografía de la nueva línea visual. Autoalojada, subconjunto latino. */
@font-face { font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url(/web-assets/fonts/poppins-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url(/web-assets/fonts/poppins-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(/web-assets/fonts/poppins-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(/web-assets/fonts/poppins-latin-700-normal.woff2) format("woff2"); }

:root {
  /* color roles (light) */
  /* 3.15.0 · los roles M3 toman la paleta de la marca (verde profundo + lima): los componentes que aún los usan quedan en la misma línea visual. */
  --md-sys-color-primary:#1f5b49;--md-sys-color-on-primary:#ffffff;--md-sys-color-primary-container:#e9f7dc;--md-sys-color-on-primary-container:#0d2b21;
  --md-sys-color-secondary:#4c635a;--md-sys-color-on-secondary:#ffffff;--md-sys-color-secondary-container:#dfeee4;--md-sys-color-on-secondary-container:#2b4a3c;
  --md-sys-color-tertiary:#406376;--md-sys-color-on-tertiary:#ffffff;--md-sys-color-tertiary-container:#c3e8fe;--md-sys-color-on-tertiary-container:#274b5d;
  --md-sys-color-error:#ba1a1a;--md-sys-color-on-error:#ffffff;--md-sys-color-error-container:#ffdad6;--md-sys-color-on-error-container:#93000a;
  --md-sys-color-surface:#f5fbf6;--md-sys-color-on-surface:#171d1a;--md-sys-color-surface-variant:#dbe5df;--md-sys-color-on-surface-variant:#3f4944;
  --md-sys-color-outline:#707974;--md-sys-color-outline-variant:#bfc9c3;
  --md-sys-color-inverse-surface:#14201b;--md-sys-color-inverse-on-surface:#ecf2ed;--md-sys-color-inverse-primary:#8fd14f;
  --md-sys-color-surface-dim:#d5dbd7;--md-sys-color-surface-bright:#f5fbf6;
  --md-sys-color-surface-container-lowest:#ffffff;--md-sys-color-surface-container-low:#eff5f0;--md-sys-color-surface-container:#e9efeb;
  --md-sys-color-surface-container-high:#e4eae5;--md-sys-color-surface-container-highest:#dee4df;
  --md-sys-color-scrim:#000000;--md-sys-color-shadow:#000000;--md-sys-color-surface-tint:#1f5b49;
  --md-sys-color-primary-fixed:#e9f7dc;--md-sys-color-primary-fixed-dim:#8fd14f;--md-sys-color-on-primary-fixed:#0d2b21;--md-sys-color-on-primary-fixed-variant:#1f5b49;
  /* colores semánticos auxiliares (estado) */
  --md-ext-success:#1d6e3c;--md-ext-success-container:#b9f0c6;--md-ext-on-success-container:#00210c;
  --md-ext-warning:#7a5600;--md-ext-warning-container:#ffe08c;--md-ext-on-warning-container:#271900;
  --md-ext-info:#3a5e8a;--md-ext-info-container:#d6e3ff;--md-ext-on-info-container:#001b3d;
  /* forma */
  --md-shape-xs:4px;--md-shape-sm:8px;--md-shape-md:12px;--md-shape-lg:16px;--md-shape-xl:28px;--md-shape-full:999px;
  /* elevación */
  --md-elev-1:0 1px 2px rgba(0,0,0,.3),0 1px 3px 1px rgba(0,0,0,.15);
  --md-elev-2:0 1px 2px rgba(0,0,0,.3),0 2px 6px 2px rgba(0,0,0,.15);
  --md-elev-3:0 1px 3px rgba(0,0,0,.3),0 4px 8px 3px rgba(0,0,0,.15);
  /* movimiento */
  --md-motion-fast:150ms cubic-bezier(.2,0,0,1);--md-motion:250ms cubic-bezier(.2,0,0,1);
  /* tipografía */
  --md-font:"Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --md-font-display:"Poppins","Roboto",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --md-font-mono:ui-monospace,"Roboto Mono",Consolas,monospace;
  /* 3.15.0 · marca: verde profundo de RECARGALOFACILITO + acento verde vivo (tarjetas con barra lateral, insignias, hero y pie oscuros) */
  --brand-deep:#0d2b21;--brand-deep-2:#1f5b49;--brand-deep-3:#2f7f62;
  --brand-accent:#8fd14f;--brand-accent-strong:#5fb52a;--brand-accent-ink:#3f7d14;--brand-accent-soft:#e9f7dc;
  --brand-ink:#14201b;--brand-muted:#5f6d66;--brand-paper:#f4f8f5;--brand-line:#e1e8e3;
  --brand-shadow:0 10px 30px rgba(13,43,33,.08),0 2px 6px rgba(13,43,33,.06);--brand-shadow-hover:0 16px 40px rgba(13,43,33,.14),0 3px 8px rgba(13,43,33,.08);
  --brand-radius:12px;--brand-radius-sm:10px;
  --brand-gradient:linear-gradient(135deg,#0d2b21 0%,#1f5b49 52%,#3f9b5e 100%);
  --brand-halftone:radial-gradient(rgba(255,255,255,.14) 1.2px,transparent 1.6px);
  --brand-pattern:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%238fd14f' stroke-opacity='.22' stroke-width='1.2'%3E%3Cpath d='M0 300 L120 60 L260 180 L420 20'/%3E%3Cpath d='M120 60 L260 420 M260 180 L60 420 M260 180 L420 300 M0 120 L120 60 M420 300 L300 420 M0 300 L60 420'/%3E%3C/g%3E%3C/svg%3E");
  color-scheme:light;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%;background:var(--md-sys-color-surface); }
body { margin:0;min-height:100vh;font-family:var(--md-font);font-size:14px;line-height:20px;letter-spacing:.25px;color:var(--md-sys-color-on-surface);background:var(--md-sys-color-surface);
  -webkit-font-smoothing:antialiased;font-synthesis:none;text-rendering:optimizeLegibility;overflow-wrap:break-word; }
[hidden],.hidden { display:none!important; }
button,input,select,textarea { font:inherit;letter-spacing:inherit;color:inherit; }
button,a,input,select,label { -webkit-tap-highlight-color:transparent; }
img,svg { max-width:100%; }
a { color:var(--md-sys-color-primary);text-decoration:none; }
a:hover { text-decoration:underline; }
:focus-visible { outline:2px solid var(--md-sys-color-primary);outline-offset:2px;border-radius:var(--md-shape-xs); }
h1,h2,h3,h4,p,ul,ol,fieldset { margin:0;padding:0;min-width:0; }
fieldset { border:0; }
legend { padding:0; }
code { font-family:var(--md-font-mono);font-size:12.5px;padding:2px 6px;border-radius:var(--md-shape-xs);background:var(--md-sys-color-surface-container-high); }
kbd { display:inline-flex;align-items:center;height:18px;padding:0 5px;border-radius:4px;background:rgba(0,0,0,.08);color:inherit;font-family:var(--md-font);font-size:10.5px;font-weight:600;letter-spacing:.4px;line-height:1;opacity:.85; }
.ui-icon { display:block;flex-shrink:0;width:24px;height:24px;fill:currentColor; }

/* ---------- escala tipográfica ---------- */
.display-small { font-size:36px;line-height:44px;font-weight:400;letter-spacing:0; }
.headline-large { font-size:32px;line-height:40px;font-weight:400;letter-spacing:0; }
.headline-medium { font-size:28px;line-height:36px;font-weight:400;letter-spacing:0; }
.headline-small { font-size:24px;line-height:32px;font-weight:400;letter-spacing:0; }
.title-large { font-size:22px;line-height:28px;font-weight:400;letter-spacing:0; }
.title-medium { font-size:16px;line-height:24px;font-weight:500;letter-spacing:.15px; }
.title-small { font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px; }
.body-large { font-size:16px;line-height:24px;font-weight:400;letter-spacing:.5px; }
.body-medium { font-size:14px;line-height:20px;font-weight:400;letter-spacing:.25px; }
.body-small { font-size:12px;line-height:16px;font-weight:400;letter-spacing:.4px; }
.label-large { font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px; }
.label-medium { font-size:12px;line-height:16px;font-weight:500;letter-spacing:.5px; }
.label-small { font-size:11px;line-height:16px;font-weight:500;letter-spacing:.5px; }
h1 { font-family:var(--md-font-display);font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.2px;color:var(--brand-ink); }
h2 { font-family:var(--md-font-display);font-size:22px;line-height:28px;font-weight:600;letter-spacing:-.1px;color:var(--brand-ink); }
h3 { font-family:var(--md-font-display);font-size:16px;line-height:24px;font-weight:600;letter-spacing:0;color:var(--brand-ink); }
h4 { font-family:var(--md-font-display);font-size:14px;line-height:20px;font-weight:600;letter-spacing:0; }
.display-small,.headline-large,.headline-medium,.headline-small,.title-large { font-family:var(--md-font-display);font-weight:600; }
p { margin-bottom:12px; }
p:last-child { margin-bottom:0; }
.muted,.footer-note,.supporting { color:var(--md-sys-color-on-surface-variant);font-size:14px;line-height:20px; }
.details { color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:16px;letter-spacing:.4px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums; }
.eyebrow { display:inline-flex;align-items:center;gap:8px;font-family:var(--md-font-display);font-size:12px;line-height:16px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--brand-accent-ink); }
.eyebrow::before { content:"";display:inline-block;width:18px;height:3px;border-radius:2px;background:var(--brand-accent); }
.eyebrow.plain::before { display:none; }
/* 3.15.0 · título con regla corta de acento debajo (secciones del sitio y cabeceras del panel) */
.title-rule { position:relative;padding-bottom:14px; }
.title-rule::after { content:"";position:absolute;left:0;bottom:0;width:44px;height:4px;border-radius:2px;background:var(--brand-accent); }
.title-rule.center::after { left:50%;transform:translateX(-50%); }
/* insignia cuadrada de acento con ícono (esquina de tarjetas) y barra lateral de acento antes del título */
.icon-badge { display:grid;place-items:center;flex-shrink:0;width:40px;height:40px;border-radius:10px;background:var(--brand-accent);color:var(--brand-deep);box-shadow:0 4px 12px rgba(95,181,42,.35); }
.icon-badge .ui-icon { width:22px;height:22px; }
.icon-badge.deep { background:var(--brand-deep-2);color:#fff;box-shadow:0 4px 12px rgba(31,91,73,.3); }
.icon-badge.soft { background:var(--brand-accent-soft);color:var(--brand-accent-ink);box-shadow:none; }
.accent-bar { position:relative;padding-left:14px; }
.accent-bar::before { content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:2px;background:var(--brand-accent); }
.brand-card { position:relative;padding:22px 24px 24px;border:1px solid var(--brand-line);border-radius:var(--brand-radius);background:#fff;box-shadow:var(--brand-shadow);transition:transform var(--md-motion),box-shadow var(--md-motion),border-color var(--md-motion); }
.brand-card:hover { transform:translateY(-3px);box-shadow:var(--brand-shadow-hover);border-color:transparent; }
.brand-card>.icon-badge { position:absolute;top:18px;right:18px; }
.brand-card.dark { background:var(--brand-gradient);color:#fff;border-color:transparent; }
.brand-card.dark h3,.brand-card.dark p,.brand-card.dark .muted { color:inherit; }
.brand-card.dark p { opacity:.86; }
.num,.amount,.balance,.tabular { font-variant-numeric:tabular-nums; }

/* ---------- botones ---------- */
button,.md-button,.receipt-link,.btn,.auth-ghost { position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:40px;max-width:100%;padding:0 22px;border:0;border-radius:var(--brand-radius-sm);
  background:var(--brand-deep-2);color:#fff;font-family:var(--md-font-display);font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;text-decoration:none;text-align:center;white-space:normal;cursor:pointer;
  overflow:hidden;padding-top:8px;padding-bottom:8px;transition:box-shadow var(--md-motion-fast),background-color var(--md-motion-fast),color var(--md-motion-fast),transform var(--md-motion-fast); }
button:active:not(:disabled),.btn:active { transform:translateY(1px) scale(.99); }
/* 3.15.0 · botón de acento (verde vivo con texto oscuro): la acción principal de una pantalla o de una banda oscura */
button.accent,.btn.accent { background:var(--brand-accent);color:var(--brand-deep);box-shadow:0 6px 18px rgba(95,181,42,.32); }
button.accent:hover,.btn.accent:hover { background:#9edc62;box-shadow:0 8px 22px rgba(95,181,42,.4); }
button.accent kbd,.btn.accent kbd { background:rgba(13,43,33,.12); }
button.ghost,.btn.ghost { background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.45); }
button.ghost:hover,.btn.ghost:hover { background:rgba(255,255,255,.2);box-shadow:none; }
button::after,.md-button::after,.receipt-link::after,.btn::after,.auth-ghost::after { content:"";position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity var(--md-motion-fast);pointer-events:none;border-radius:inherit; }
button:hover::after,.md-button:hover::after,.receipt-link:hover::after,.btn:hover::after,.auth-ghost:hover::after { opacity:.08; }
button:focus-visible::after,.md-button:focus-visible::after,.btn:focus-visible::after { opacity:.12; }
button:active::after,.md-button:active::after,.btn:active::after { opacity:.12; }
button:hover,.btn:hover,.receipt-link:hover { text-decoration:none;box-shadow:var(--md-elev-1); }
button:disabled,.btn:disabled { background:rgba(23,29,26,.12);color:rgba(23,29,26,.38);box-shadow:none;cursor:not-allowed; }
button:disabled::after { display:none; }
button .ui-icon,.btn .ui-icon,.receipt-link .ui-icon { width:18px;height:18px;margin-left:-8px; }
button kbd,.btn kbd { margin-left:2px;margin-right:-8px;background:rgba(255,255,255,.22);color:inherit; }
button.secondary,.btn.secondary,button.tonal,.receipt-link { background:var(--brand-accent-soft);color:var(--brand-deep-2); }
button.secondary kbd,.btn.secondary kbd,.receipt-link kbd { background:rgba(0,0,0,.08); }
button.outlined,.btn.outlined { background:transparent;color:var(--md-sys-color-primary);border:1px solid var(--md-sys-color-outline); }
button.outlined:hover,.btn.outlined:hover { box-shadow:none; }
button.text,.btn.text,.md-button.text { background:transparent;color:var(--md-sys-color-primary);padding:0 12px;min-height:40px; }
button.text:hover,.btn.text:hover { box-shadow:none; }
button.text kbd,button.outlined kbd { background:rgba(0,0,0,.08); }
button.danger,.btn.danger { background:var(--md-sys-color-error);color:var(--md-sys-color-on-error); }
button.elevated,.btn.elevated { background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-primary);box-shadow:var(--md-elev-1); }
button.elevated:hover { box-shadow:var(--md-elev-2); }
button.selected { background:var(--brand-deep-2);color:#fff; }
button.icon,.icon-button { width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;background:transparent;color:var(--md-sys-color-on-surface-variant);box-shadow:none!important; }
button.icon .ui-icon,.icon-button .ui-icon { width:24px;height:24px;margin:0; }
button.icon.filled { background:var(--md-sys-color-primary);color:var(--md-sys-color-on-primary); }
button.icon.tonal { background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container); }
.fab { position:fixed;right:24px;bottom:24px;z-index:30;width:56px;height:56px;min-height:56px;padding:0;border-radius:var(--md-shape-lg);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);box-shadow:var(--md-elev-3); }
.fab.extended { width:auto;padding:0 20px 0 16px;gap:12px; }
.fab .ui-icon { width:24px;height:24px;margin:0; }
.actions,.rapi-buttons { display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:16px; }
.actions.left,.receipt-actions { justify-content:flex-start; }
.actions.right { justify-content:flex-end; }
.receipt-actions { margin-top:12px; }
.actions:empty { display:none; }

/* ---------- campos (outlined text fields) ---------- */
label { display:block;margin:0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.4px; }
input,select,textarea { display:block;width:100%;max-width:100%;min-width:0;min-height:56px;padding:16px;border:1px solid var(--md-sys-color-outline);border-radius:var(--md-shape-xs);background:transparent;color:var(--md-sys-color-on-surface);font-size:16px;line-height:24px;letter-spacing:.5px;transition:border-color var(--md-motion-fast),box-shadow var(--md-motion-fast); }
input:hover,select:hover,textarea:hover { border-color:var(--md-sys-color-on-surface); }
input:focus,select:focus,textarea:focus { outline:0;border-color:var(--md-sys-color-primary);box-shadow:inset 0 0 0 1px var(--md-sys-color-primary); }
input:disabled,select:disabled,textarea:disabled,input:read-only:not([type=checkbox]):not([type=radio]):not([type=file]) { color:rgba(23,29,26,.6);border-color:rgba(23,29,26,.12);background:rgba(23,29,26,.03); }
input::placeholder,textarea::placeholder { color:var(--md-sys-color-on-surface-variant);opacity:1; }
input:user-invalid,select:user-invalid,textarea:user-invalid { border-color:var(--md-sys-color-error); }
select { padding-right:44px;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%233f4944'%3E%3Cpath d='M480-344 240-584l56-56 184 184 184-184 56 56-240 240Z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:24px;cursor:pointer; }
select:disabled { cursor:default; }
textarea { min-height:112px;resize:vertical; }
input[type=file] { min-height:0;padding:12px;border-style:dashed;font-size:14px;line-height:20px;cursor:pointer; }
input[type=file]::file-selector-button { margin-right:12px;min-height:32px;padding:0 14px;border:0;border-radius:var(--md-shape-full);background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font:inherit;font-weight:500;cursor:pointer; }
input[type=date],input[type=time],input[type=number] { font-variant-numeric:tabular-nums; }
input[type=color] { min-height:40px;padding:4px;width:64px; }
/* campo con etiqueta flotante: <div class="md-field"><input placeholder=" "><label>…</label></div> */
.md-field { position:relative;min-width:0;--md-field-bg:var(--md-sys-color-surface); }
.md-field>input,.md-field>select,.md-field>textarea { padding:16px 16px; }
.md-field>label { position:absolute;left:12px;top:16px;max-width:calc(100% - 24px);padding:0 4px;background:var(--md-field-bg);color:var(--md-sys-color-on-surface-variant);font-size:16px;line-height:24px;font-weight:400;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;pointer-events:none;transform-origin:left top;transition:transform var(--md-motion-fast),color var(--md-motion-fast),top var(--md-motion-fast); }
.md-field>input::placeholder,.md-field>textarea::placeholder { color:transparent;transition:color var(--md-motion-fast); }
.md-field>input:focus::placeholder,.md-field>textarea:focus::placeholder { color:var(--md-sys-color-on-surface-variant); }
.md-field.has-icon>input { padding-left:48px; }
.md-field.has-icon>label { left:44px; }
.md-field.has-icon>.ui-icon { position:absolute;left:12px;top:16px;color:var(--md-sys-color-on-surface-variant);pointer-events:none; }
.md-field>input:focus~label,.md-field>input:not(:placeholder-shown)~label,.md-field>select~label,.md-field>textarea:focus~label,.md-field>textarea:not(:placeholder-shown)~label,.md-field>input[type=date]~label,.md-field>input[type=time]~label,.md-field>input[type=file]~label,.md-field.floated>label { top:-8px;left:12px;transform:scale(.75);font-weight:500;max-width:calc(130% - 32px); }
.md-field>input:focus~label,.md-field>select:focus~label,.md-field>textarea:focus~label { color:var(--md-sys-color-primary); }
.md-field>input:focus~.ui-icon { color:var(--md-sys-color-primary); }
.md-field>input:user-invalid~label { color:var(--md-sys-color-error); }
.md-field>input:disabled~label,.md-field>select:disabled~label { color:rgba(23,29,26,.38); }
.md-field>.trailing { position:absolute;right:4px;top:8px;width:40px;height:40px;min-height:40px;padding:0;border-radius:50%;background:transparent;color:var(--md-sys-color-on-surface-variant);box-shadow:none!important; }
.md-field>.trailing .ui-icon { margin:0;width:24px;height:24px; }
.md-field.with-trailing>input { padding-right:52px; }
.md-field>.supporting,.field-help { display:block;margin:4px 0 0;padding:0 16px;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:16px;letter-spacing:.4px; }
.md-field>.supporting.error,.field-help.error { color:var(--md-sys-color-error); }
.md-field+.muted,.md-field+p.muted { margin:-4px 0 4px;padding:0 16px;font-size:12px;line-height:16px; }
.rapi-form,.md-form { display:grid;grid-template-columns:minmax(0,1fr);gap:16px;margin:0;min-width:0;align-items:start; }
.rapi-form>p,.md-form>p { margin:0; }
.rapi-form>.md-field+.md-field { margin-top:4px; }
.rapi-form>label:not(.check) { margin-bottom:-10px;padding:0 4px;color:var(--md-sys-color-on-surface-variant); }
.rapi-form>fieldset { margin-top:4px; }
.rapi-form.credentials input { font-variant-numeric:tabular-nums;letter-spacing:.8px; }
.form-row { display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px; }
/* casillas y radios */
input[type=checkbox],input[type=radio] { appearance:none;display:inline-grid;place-content:center;width:18px;height:18px;min-height:18px;margin:0;padding:0;border:2px solid var(--md-sys-color-on-surface-variant);border-radius:2px;background:transparent;cursor:pointer;flex-shrink:0;transition:background-color var(--md-motion-fast),border-color var(--md-motion-fast); }
input[type=radio] { border-radius:50%; }
input[type=checkbox]:checked,input[type=radio]:checked { border-color:var(--md-sys-color-primary);background:var(--md-sys-color-primary); }
input[type=radio]:checked { background:transparent; }
input[type=checkbox]:checked::before { content:"";width:12px;height:12px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960' fill='%23fff'%3E%3Cpath d='M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z'/%3E%3C/svg%3E") center/contain no-repeat; }
input[type=radio]:checked::before { content:"";width:10px;height:10px;border-radius:50%;background:var(--md-sys-color-primary); }
input[type=checkbox]:focus-visible,input[type=radio]:focus-visible { outline:2px solid var(--md-sys-color-primary);outline-offset:2px; }
input[type=checkbox]:disabled,input[type=radio]:disabled { border-color:rgba(23,29,26,.38);background:transparent;cursor:not-allowed; }
input[type=checkbox]:checked:disabled { background:rgba(23,29,26,.38);border-color:transparent; }
.check,label.check,.rapi-form>label.check { display:flex;gap:12px;align-items:flex-start;min-height:40px;padding:8px 0;color:var(--md-sys-color-on-surface);font-size:14px;line-height:20px;font-weight:400;letter-spacing:.25px;white-space:normal;cursor:pointer; }
.check input { margin-top:1px; }
.check.inline { display:inline-flex;margin:0 16px 0 0; }
.check-row { display:flex;flex-wrap:wrap;margin:0; }
.form-error,.bill-form-error { margin:0;padding:12px 16px;border-radius:var(--md-shape-sm);color:var(--md-sys-color-on-error-container);background:var(--md-sys-color-error-container);font-size:14px;line-height:20px; }
.form-error:empty,.bill-form-error:empty { display:none; }
.code-input { letter-spacing:6px;font-size:22px;font-weight:500;text-align:center;font-variant-numeric:tabular-nums; }
/* interruptor (switch) */
.switch { position:relative;display:inline-flex;align-items:center;gap:12px;min-height:40px;cursor:pointer;font-size:14px;line-height:20px;font-weight:400;color:var(--md-sys-color-on-surface); }
.switch input { width:52px;height:32px;min-height:32px;border:2px solid var(--md-sys-color-outline);border-radius:var(--md-shape-full);background:var(--md-sys-color-surface-container-highest);transition:background-color var(--md-motion-fast),border-color var(--md-motion-fast); }
.switch input::before { content:"";position:absolute;top:50%;left:6px;width:16px;height:16px;border-radius:50%;background:var(--md-sys-color-outline);transform:translateY(-50%);transition:transform var(--md-motion-fast),width var(--md-motion-fast),height var(--md-motion-fast),background-color var(--md-motion-fast); }
.switch input:checked { background:var(--md-sys-color-primary);border-color:var(--md-sys-color-primary); }
.switch input:checked::before { left:2px;width:24px;height:24px;background:var(--md-sys-color-on-primary);transform:translate(22px,-50%); }

/* ---------- tarjetas y superficies ---------- */
.card,.panel,fieldset.rapi-group,.md-card { position:relative;min-width:0;margin:0;padding:20px 24px 24px;border:1px solid var(--brand-line);border-radius:var(--brand-radius);background:#fff;color:var(--md-sys-color-on-surface);box-shadow:var(--brand-shadow); }
.card.filled,.md-card.filled { border:0;background:var(--md-sys-color-surface-container-highest); }
.card.elevated,.md-card.elevated { border:0;background:var(--md-sys-color-surface-container-low);box-shadow:var(--md-elev-1); }
.card.tonal { border:0;background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container); }
fieldset.rapi-group>legend,.card-title { position:relative;float:left;width:100%;margin:0 0 16px;padding:0 0 0 14px;color:var(--brand-ink);font-family:var(--md-font-display);font-size:16px;line-height:24px;font-weight:600;letter-spacing:0;overflow-wrap:anywhere; }
fieldset.rapi-group>legend::before,.card-title::before { content:"";position:absolute;left:0;top:3px;bottom:3px;width:4px;border-radius:2px;background:var(--brand-accent); }
fieldset.rapi-group>legend+* { clear:both; }
fieldset.rapi-group::after { content:"";display:block;clear:both; }
.rapi-group .rapi-group { margin-top:16px;padding:16px 20px 20px;border:0;background:var(--md-sys-color-surface-container-low); }
.rapi-group .rapi-group>legend { font-size:14px;line-height:20px;margin-bottom:12px; }
.panel-head { display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px; }
.panel-head h2,.panel-head .actions { margin:0; }
.grid-two { display:grid;grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);gap:24px;align-items:start; }
.grid-two>div { display:grid;gap:24px;min-width:0;align-content:start; }
.grid-two>div:empty { display:none; }
.grid-two:has(>div:empty) { grid-template-columns:minmax(0,1fr); }
.stats,.rapi-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px; }
/* 3.15.0 · tarjetas de resumen: blancas con sombra suave y barra lateral de acento; la primera, en el degradado oscuro de la marca */
.stat-card { position:relative;display:flex;flex-direction:column;gap:6px;min-width:0;padding:20px 24px 20px 28px;border:1px solid var(--brand-line);border-radius:var(--brand-radius);background:#fff;color:var(--brand-ink);box-shadow:var(--brand-shadow);overflow:hidden; }
.stat-card::before { content:"";position:absolute;left:0;top:18px;bottom:18px;width:5px;border-radius:0 4px 4px 0;background:var(--brand-accent); }
.stat-card:first-child { border-color:transparent;background:var(--brand-gradient);color:#fff; }
.stat-card:first-child::after { content:"";position:absolute;inset:0;background-image:var(--brand-halftone);background-size:14px 14px;opacity:.7;pointer-events:none;-webkit-mask-image:linear-gradient(115deg,transparent 45%,#000 100%);mask-image:linear-gradient(115deg,transparent 45%,#000 100%); }
.stat-card>* { position:relative;z-index:1; }
.stat-label { display:block;font-size:13px;line-height:18px;font-weight:500;letter-spacing:.3px;text-transform:uppercase;color:var(--brand-muted); }
.stat-card:first-child .stat-label,.stat-card:first-child .stat-note { color:#fff;opacity:.85; }
.stat-value { display:block;font-family:var(--md-font-display);font-size:28px;line-height:36px;font-weight:600;letter-spacing:-.3px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums; }
.stat-value.stat-value-text { font-size:18px;line-height:24px;font-weight:600;letter-spacing:0;overflow-wrap:break-word; }
.stat-note { margin:0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:16px;letter-spacing:.4px; }
.stat-action { display:inline-flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;min-height:32px;color:inherit;font-size:14px;line-height:20px;font-weight:500;letter-spacing:.1px;text-decoration:none; }
.stat-action:hover { text-decoration:underline; }
.summary-line { display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:12px 0;border-bottom:1px solid var(--md-sys-color-outline-variant);font-size:14px;line-height:20px; }
.summary-line>span { color:var(--md-sys-color-on-surface-variant); }
.summary-line strong { min-width:0;max-width:65%;text-align:right;overflow-wrap:anywhere;font-weight:500;font-variant-numeric:tabular-nums; }
.summary-total { margin-top:8px;padding:14px 16px;border:0;border-radius:var(--md-shape-sm);background:var(--md-sys-color-primary-container);color:var(--md-sys-color-on-primary-container);font-size:16px;line-height:24px; }
.summary-total>span,.summary-total strong { color:inherit; }
.balance { font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums; }
.nowrap { white-space:nowrap; }
.empty { display:grid;justify-items:center;gap:12px;margin:0;padding:40px 24px;text-align:center;color:var(--md-sys-color-on-surface-variant);border:1px dashed var(--md-sys-color-outline-variant);border-radius:var(--md-shape-md);background:var(--md-sys-color-surface-container-lowest); }
.empty p { max-width:440px;margin:0;font-size:14px;line-height:20px; }
.empty-icon { display:grid;place-items:center;width:56px;height:56px;border-radius:var(--md-shape-lg);background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container); }
.empty-icon .ui-icon { width:28px;height:28px; }
.loading { padding:120px 24px;text-align:center;color:var(--md-sys-color-on-surface-variant); }

/* ---------- listas ---------- */
.md-list { display:grid;gap:0;margin:0;padding:8px 0;list-style:none; }
.md-list-item { display:flex;align-items:center;gap:16px;min-height:56px;padding:8px 16px;color:var(--md-sys-color-on-surface);text-decoration:none; }
.md-list-item .ui-icon { color:var(--md-sys-color-on-surface-variant); }
.md-list-item .headline { font-size:16px;line-height:24px;letter-spacing:.5px; }
.md-list-item .supporting { font-size:14px;line-height:20px; }
.divider { height:1px;margin:8px 0;border:0;background:var(--md-sys-color-outline-variant); }

/* ---------- tablas de datos ---------- */
.rapi-grid-scroll,.data-table { max-width:100%;overflow:auto;border:1px solid var(--brand-line);border-radius:var(--brand-radius-sm);background:#fff; }
.rapi-grid { width:100%;border-collapse:collapse;font-size:14px;line-height:20px;letter-spacing:.25px;text-align:left; }
.rapi-grid th { position:sticky;top:0;z-index:1;height:52px;padding:0 16px;border-bottom:2px solid var(--brand-line);background:var(--brand-paper);color:var(--brand-muted);font-family:var(--md-font-display);font-size:11.5px;line-height:16px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;text-align:left;white-space:nowrap;vertical-align:middle; }
.rapi-grid td { height:52px;padding:10px 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);vertical-align:middle; }
.rapi-grid tbody tr:last-child td { border-bottom:0; }
.rapi-grid tbody tr:hover { background:var(--brand-paper); }
.rapi-grid tbody tr.selected { background:var(--md-sys-color-secondary-container); }
.rapi-grid td.num,.rapi-grid th.num { text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums; }
.rapi-grid td button,.rapi-grid td .receipt-link { min-height:32px;padding:0 14px;font-size:13px; }
.rapi-grid td button.icon { width:40px;height:40px;min-height:40px;padding:0; }
.rapi-grid td .actions .row-menu-button { margin-left:-2px; }
.rapi-grid td .actions { margin:0;justify-content:flex-start;gap:6px;flex-wrap:nowrap; }
.rapi-grid td .details { display:block;max-width:260px; }
.rapi-grid td input[type=checkbox] { margin:0 auto; }
.rapi-grid td select,.rapi-grid td input:not([type=checkbox]) { min-height:40px;padding:8px 12px;font-size:14px; }
.rapi-grid-footer { display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px 24px;padding:8px 4px 0;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:16px;letter-spacing:.4px; }
.rapi-grid-footer .cell { display:inline-flex;align-items:center;gap:8px; }
.rapi-grid-footer b { color:var(--md-sys-color-on-surface);font-weight:500;font-size:14px;font-variant-numeric:tabular-nums; }
.rapi-filter { display:flex;flex-wrap:wrap;align-items:flex-start;gap:16px;padding:16px;border-radius:var(--md-shape-md);background:var(--md-sys-color-surface-container-low); }
.rapi-filter>label { display:block;flex:1 1 200px;min-width:0; }
.rapi-filter .md-field { --md-field-bg:var(--md-sys-color-surface-container-low);flex:1 1 200px;min-width:0; }
.rapi-filter>button { flex:0 0 auto;margin-top:8px; }

/* ---------- chips y estados ---------- */
.chip,.status-approved,.status-rejected,.status-unknown,.status-paying,.status-reserved,.status-preparing,.status-pending { display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:0 12px;border-radius:var(--md-shape-sm);font-size:12px;line-height:16px;font-weight:500;letter-spacing:.5px;white-space:nowrap;vertical-align:middle; }
.status-approved { color:var(--md-ext-on-success-container);background:var(--md-ext-success-container); }
.status-rejected { color:var(--md-sys-color-on-error-container);background:var(--md-sys-color-error-container); }
.status-unknown,.status-paying,.status-reserved,.status-preparing,.status-pending { color:var(--md-ext-on-warning-container);background:var(--md-ext-warning-container); }
.chip.outlined { border:1px solid var(--md-sys-color-outline);background:transparent;color:var(--md-sys-color-on-surface-variant); }
.chip.selected { background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container); }
.chip-row { display:flex;flex-wrap:wrap;gap:8px; }
.badge { display:inline-grid;place-items:center;min-width:16px;height:16px;padding:0 4px;border-radius:var(--md-shape-full);background:var(--md-sys-color-error);color:var(--md-sys-color-on-error);font-size:11px;line-height:16px;font-weight:500; }

/* ---------- pestañas ---------- */
.rapi-tabs,.md-tabs { display:flex;gap:0;margin:0 0 16px;border-bottom:1px solid var(--md-sys-color-outline-variant);overflow:auto; }
.rapi-tabs button,.md-tabs button { position:relative;flex:0 0 auto;min-height:48px;padding:0 16px;border:0;border-radius:0;background:transparent;color:var(--md-sys-color-on-surface-variant);font-weight:500;box-shadow:none!important; }
.rapi-tabs button::after,.md-tabs button::after { border-radius:0; }
.rapi-tabs button.active,.md-tabs button.active { color:var(--md-sys-color-primary); }
.rapi-tabs button.active::before,.md-tabs button.active::before { content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--md-sys-color-primary); }

/* ---------- avisos en línea (notes) ---------- */
/* 3.15.0 · avisos: tarjeta blanca con barra lateral de color (info verde, error rojo, caja ámbar, novedad azul, éxito verde) */
.note { display:block;margin:0;padding:14px 16px 14px 48px;border:1px solid var(--brand-line);border-left:0;border-radius:var(--brand-radius-sm);background:#fff;color:var(--brand-ink);font-size:14px;line-height:20px;letter-spacing:.25px;position:relative;box-shadow:var(--brand-shadow);--note-color:var(--brand-deep-2); }
.note::after { content:"";position:absolute;left:0;top:0;bottom:0;width:5px;border-radius:5px 0 0 5px;background:var(--note-color); }
.note::before { color:var(--note-color); }
.note.error-note { --note-color:var(--md-sys-color-error); }
.note.cash-note { --note-color:var(--md-ext-warning); }
.note.news-note { --note-color:var(--md-ext-info); }
.note.success-note { --note-color:var(--md-ext-success); }
.note::before { content:"";position:absolute;left:16px;top:14px;width:20px;height:20px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z'/%3E%3C/svg%3E") center/contain no-repeat; }
.note p,.note small { display:block;margin:0 0 6px; }
.note strong { font-weight:500; }
.note button { margin-top:10px; }
.note button.secondary { background:var(--brand-paper);color:var(--brand-deep-2);border:1px solid var(--brand-line); }
.note.error-note strong { color:var(--md-sys-color-error); }
.note.error-note::before { -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-280q17 0 28.5-11.5T520-320q0-17-11.5-28.5T480-360q-17 0-28.5 11.5T440-320q0 17 11.5 28.5T480-280Zm-40-160h80v-240h-80v240Zm40 360q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Z'/%3E%3C/svg%3E"); }
.note.news-note strong { color:var(--md-ext-info); }
.note.success-note strong { color:var(--md-ext-success); }
/* 3.14.0 · caja cerrada: aviso ámbar con la acción Abrir caja; tarjeta de estado de la caja en Recargas */
.note.cash-note strong { color:var(--md-ext-warning); }
.note.cash-note button:not(.secondary) { background:var(--brand-accent);color:var(--brand-deep);box-shadow:0 6px 18px rgba(95,181,42,.32); }
.stat-card.stat-warn { background:var(--md-ext-warning-container);color:var(--md-ext-on-warning-container);border-color:transparent; }
.stat-card.stat-warn::before { background:var(--md-ext-warning); }
.stat-card.stat-error::before { background:var(--md-sys-color-error); }
.stat-card.stat-warn .stat-label,.stat-card.stat-warn .stat-note,.stat-card.stat-warn .stat-action { color:var(--md-ext-on-warning-container); }
.stat-card.stat-error { background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container);border-color:transparent; }
.stat-card.stat-error .stat-label,.stat-card.stat-error .stat-note,.stat-card.stat-error .stat-action { color:var(--md-sys-color-on-error-container); }
.promo-box { padding:16px;border-radius:var(--md-shape-md);background:var(--md-sys-color-surface-container-low);font-size:14px;line-height:20px; }
.promo-box strong { display:block;margin-bottom:4px;font-weight:500; }
.promo-box p { margin:0 0 4px; }
.promo-box small { color:var(--md-sys-color-on-surface-variant);font-size:12px; }
.rapi-message { display:flex;align-items:flex-start;gap:16px;padding:16px;border-radius:var(--md-shape-md);background:var(--md-sys-color-surface-container-low); }
.rapi-message::before { content:"i";display:grid;place-items:center;flex:0 0 40px;width:40px;height:40px;border-radius:50%;background:var(--md-sys-color-secondary-container);color:var(--md-sys-color-on-secondary-container);font-weight:500;font-size:18px; }
.rapi-message.ok { background:var(--md-ext-success-container);color:var(--md-ext-on-success-container); }
.rapi-message.ok::before { content:"✓";background:var(--md-ext-success);color:#fff; }
.rapi-message.error { background:var(--md-sys-color-error-container);color:var(--md-sys-color-on-error-container); }
.rapi-message.error::before { content:"!";background:var(--md-sys-color-error);color:var(--md-sys-color-on-error); }
.rapi-message.question::before { content:"?";background:var(--md-ext-warning-container);color:var(--md-ext-on-warning-container); }
.rapi-message>div { flex:1;min-width:0;overflow-wrap:anywhere; }
.rapi-message>div>p:last-child { margin-bottom:0; }
.rapi-message-title { margin:0 0 6px;font-size:16px;line-height:24px;font-weight:500;letter-spacing:.15px; }
.legal-note { margin:16px 0 0;padding:12px 16px;border-radius:var(--md-shape-sm);background:var(--md-sys-color-surface-container-low);color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:16px;letter-spacing:.4px; }
.legal-note strong { color:var(--md-sys-color-on-surface);font-weight:500; }

/* ---------- diálogos ---------- */
dialog { width:min(calc(100% - 32px),560px);max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:0;border:0;border-top:5px solid var(--brand-accent);border-radius:var(--brand-radius);background:#fff;color:var(--md-sys-color-on-surface);box-shadow:var(--md-elev-3); }
dialog::backdrop { background:rgba(13,43,33,.45);backdrop-filter:blur(2px); }
dialog.wide-dialog { width:min(calc(100% - 32px),980px); }
dialog.bill-dialog { width:min(calc(100% - 32px),900px); }
#modal-content { padding:24px; }
#modal-content .md-field,#modal-content .rapi-filter .md-field { --md-field-bg:#fff; }
#modal-content .card,#modal-content fieldset.rapi-group,#modal-content .panel { background:var(--md-sys-color-surface-container-lowest); }
#modal-content .card .md-field,#modal-content fieldset.rapi-group .md-field { --md-field-bg:var(--md-sys-color-surface-container-lowest); }
.modal-titlebar { display:flex;align-items:flex-start;gap:16px;margin:0 0 16px; }
.modal-titlebar h2 { flex:1;min-width:0;font-size:22px;line-height:30px;font-weight:600;overflow-wrap:anywhere; }
.modal-titlebar .rapi-titlebar-fill { display:none; }
.modal-close { flex-shrink:0;width:40px;height:40px;min-height:40px;margin:-4px -8px 0 0;padding:0;border-radius:50%;background:transparent;color:var(--md-sys-color-on-surface-variant);box-shadow:none!important; }
.modal-close .ui-icon { margin:0; }
#modal-content>.actions { margin-top:24px; }
#modal-content>.actions button.secondary { background:transparent;color:var(--md-sys-color-primary); }
#modal-content>.actions button.secondary:hover { box-shadow:none; }
#modal-content>.actions button.secondary::after { opacity:0; }
#modal-content>.actions button.secondary:hover::after { opacity:.08; }
#modal-content>.note { margin-top:16px; }
#modal-content .rapi-grid-scroll { max-height:360px;overflow:auto; }
#modal-content fieldset.rapi-group { margin-top:16px; }
dialog.operation-overlay { width:min(calc(100% - 32px),440px);display:none; }
dialog.operation-overlay[open] { display:block; }
.operation-overlay-card { display:flex;flex-direction:column;gap:12px;padding:24px; }
.operation-overlay-card strong { font-size:24px;line-height:32px;font-weight:400; }
.operation-progress-label { display:flex;align-items:center;gap:12px;font-weight:500; }
.operation-progress-label::before { content:"";width:24px;height:24px;flex-shrink:0;border:3px solid var(--md-sys-color-primary-container);border-top-color:var(--md-sys-color-primary);border-radius:50%;animation:progress-spin 1s linear infinite; }
.operation-progress-time { color:var(--md-sys-color-primary);font-size:22px;line-height:28px;font-variant-numeric:tabular-nums; }
.operation-deadline { margin:12px 0 0;padding:12px 16px;border-radius:var(--md-shape-sm);background:var(--md-sys-color-surface-container-high);font-size:14px; }
.operation-deadline.expired { color:var(--md-sys-color-on-error-container);background:var(--md-sys-color-error-container); }
@keyframes progress-spin { to { transform:rotate(360deg); } }

/* ---------- snackbar ---------- */
#notice { position:fixed;z-index:70;left:50%;bottom:24px;transform:translateX(-50%);max-width:min(560px,calc(100% - 32px));min-height:48px;margin:0;padding:14px 16px;border-radius:var(--md-shape-xs);background:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface);font-size:14px;line-height:20px;letter-spacing:.25px;box-shadow:var(--md-elev-3);white-space:pre-line;overflow-wrap:anywhere;animation:snack-in var(--md-motion); }
#notice:empty { display:none; }
@keyframes snack-in { from { opacity:0;transform:translate(-50%,8px); } to { opacity:1;transform:translate(-50%,0); } }
.idle-banner { position:fixed;left:50%;bottom:88px;transform:translateX(-50%);z-index:70;max-width:calc(100% - 32px);padding:12px 16px;border-radius:var(--md-shape-sm);background:var(--md-sys-color-error);color:var(--md-sys-color-on-error);font-size:14px;line-height:20px;box-shadow:var(--md-elev-3); }
.idle-banner strong { color:inherit;font-weight:500; }

/* ---------- progreso ---------- */
.loading-inline { position:relative;height:4px;margin:0 0 4px;padding:0;border-radius:var(--md-shape-full);background:var(--md-sys-color-primary-container);color:transparent;font-size:0;line-height:0;overflow:hidden;animation:md-fade .3s both; }
.loading-inline::after { content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 30%,var(--md-sys-color-primary) 30% 60%,transparent 60% 100%);background-size:250% 100%;animation:linear-progress 1.3s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes linear-progress { from { background-position:150% 0; } to { background-position:-100% 0; } }

/* ---------- menús ---------- */
.md-menu { position:absolute;z-index:50;min-width:200px;max-width:min(360px,calc(100vw - 32px));padding:8px 0;border-radius:var(--md-shape-xs);background:var(--md-sys-color-surface-container);box-shadow:var(--md-elev-2); }
.md-menu button,.md-menu a { display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 12px;border:0;border-radius:0;background:transparent;color:var(--md-sys-color-on-surface);font-weight:400;letter-spacing:.25px;text-align:left;white-space:normal;justify-content:flex-start;box-shadow:none!important; }
.md-menu button .ui-icon,.md-menu a .ui-icon { margin:0;width:24px;height:24px;color:var(--md-sys-color-on-surface-variant); }
.md-menu .divider { margin:8px 0; }
.md-menu .md-menu-head { padding:8px 16px 12px;color:var(--md-sys-color-on-surface-variant);font-size:12px;line-height:16px;letter-spacing:.4px; }
.md-menu .md-menu-head b { display:block;color:var(--md-sys-color-on-surface);font-size:14px;line-height:20px;font-weight:500; }

/* ---------- utilidades ---------- */
.wrap { width:100%;max-width:1200px;margin:0 auto;padding:0 24px; }
.flex { display:flex;gap:12px;align-items:center;flex-wrap:wrap; }
.grow { flex:1;min-width:0; }
.right { margin-left:auto; }
.visually-hidden,.skip-link:not(:focus) { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
.skip-link:focus { position:fixed;left:16px;top:16px;z-index:100;padding:12px 16px;border-radius:var(--md-shape-sm);background:var(--md-sys-color-inverse-surface);color:var(--md-sys-color-inverse-on-surface); }

/* ---------- movimiento (Material 3): entradas, ondas (ripple), diálogos, menús ---------- */
@keyframes md-rise { from { opacity:0;transform:translateY(10px); } to { opacity:1;transform:none; } }
@keyframes md-fade { from { opacity:0; } to { opacity:1; } }
@keyframes md-scale-in { from { opacity:0;transform:scale(.94); } to { opacity:1;transform:none; } }
@keyframes md-ripple { to { transform:scale(1);opacity:0; } }
@keyframes md-pop { 0% { transform:scale(.6); } 60% { transform:scale(1.15); } 100% { transform:scale(1); } }
@keyframes md-check { from { transform:scale(0) rotate(-20deg); } to { transform:scale(1) rotate(0); } }
.md-ripple { position:absolute;border-radius:50%;background:currentColor;opacity:.14;transform:scale(0);animation:md-ripple .55s cubic-bezier(.2,0,0,1) forwards;pointer-events:none;z-index:0; }
button,.btn,.drawer-item,.product-tile,.company,.notification,.md-list-item,.hero-carriers a,.mode-card { position:relative;overflow:hidden;isolation:isolate; }
button>*,.btn>*,.drawer-item>* { position:relative;z-index:1; }
button>.md-ripple,.btn>.md-ripple,.drawer-item>.md-ripple,.md-ripple { position:absolute;z-index:0; }
button:active:not(:disabled),.btn:active { transform:scale(.985);transition:transform .08s; }
.rapi-window-body>*,.page-body>*,.auth-card,.register-card,.verify-card,.customer-panel,.recharge-guide,.customer-summary { animation:md-rise .38s cubic-bezier(.05,.7,.1,1) both; }
.rapi-window-body>*:nth-child(2),.page-body>*:nth-child(2) { animation-delay:40ms; }
.rapi-window-body>*:nth-child(3),.page-body>*:nth-child(3) { animation-delay:80ms; }
.rapi-window-body>*:nth-child(4),.page-body>*:nth-child(4) { animation-delay:120ms; }
.rapi-window-body>*:nth-child(5),.page-body>*:nth-child(5) { animation-delay:160ms; }
.rapi-window-body>*:nth-child(n+6),.page-body>*:nth-child(n+6) { animation-delay:200ms; }
.stats>.stat-card,.rapi-stats>.stat-card { animation:md-rise .4s cubic-bezier(.05,.7,.1,1) both; }
.stats>.stat-card:nth-child(2),.rapi-stats>.stat-card:nth-child(2) { animation-delay:60ms; }
.stats>.stat-card:nth-child(3),.rapi-stats>.stat-card:nth-child(3) { animation-delay:120ms; }
.stats>.stat-card:nth-child(4),.rapi-stats>.stat-card:nth-child(4) { animation-delay:180ms; }
.page-header { animation:md-fade .3s both; }
.stat-card,.card,fieldset.rapi-group { transition:box-shadow var(--md-motion),transform var(--md-motion); }
.stat-card:hover { box-shadow:var(--md-elev-1); }
.company,.product-tile,.recharge-product,.hero-carriers a,.mode-card { transition:transform var(--md-motion),box-shadow var(--md-motion),border-color var(--md-motion-fast),background-color var(--md-motion-fast); }
.company:hover,.recharge-product:hover,.product-tile:hover,.hero-carriers a:hover { transform:translateY(-2px); }
dialog[open] { animation:md-scale-in .28s cubic-bezier(.05,.7,.1,1); }
dialog[open]::backdrop { animation:md-fade .25s ease-out; }
.md-menu { transform-origin:top right;animation:md-scale-in .2s cubic-bezier(.05,.7,.1,1); }
.idle-banner { animation:md-rise .3s cubic-bezier(.05,.7,.1,1); }
.rapi-bell-count.pop,.badge.pop { animation:md-pop .4s cubic-bezier(.2,0,0,1); }
input[type=checkbox]:checked::before { animation:md-check .2s cubic-bezier(.2,0,0,1); }
.rapi-tabs button::before,.md-tabs button::before { content:"";position:absolute;left:12px;right:12px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--md-sys-color-primary);transform:scaleX(0);transition:transform var(--md-motion);transform-origin:center; }
.rapi-tabs button.active::before,.md-tabs button.active::before { transform:scaleX(1); }
.switch input::before { transition:transform var(--md-motion),width var(--md-motion-fast),height var(--md-motion-fast),background-color var(--md-motion-fast); }
.note,.rapi-message,.empty { animation:md-fade .3s both; }
.md-field>label { will-change:transform; }
.rapi-grid tbody tr { transition:background-color var(--md-motion-fast); }
.drawer-item { transition:background-color var(--md-motion-fast),color var(--md-motion-fast); }

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition:none!important;scroll-behavior:auto!important; } .md-ripple { display:none; } }
@media (max-width:700px) {
  .stats,.rapi-stats { grid-template-columns:1fr;gap:12px; }
  .grid-two { grid-template-columns:1fr; }
  .card,.panel,fieldset.rapi-group { padding:16px; }
  .rapi-grid th,.rapi-grid td { padding:8px 12px; }
  .rapi-filter { padding:12px; }
  .rapi-filter>button { width:100%;margin-top:0; }
  .actions button,.rapi-buttons button { flex:1 1 140px; }
  /* Táctil: en pantallas chicas los botones de las tablas vuelven a 40px de alto (objetivo mínimo de toque). */
  .rapi-grid td .actions button,.rapi-grid td button,.rapi-grid td .receipt-link { flex:0 0 auto;min-height:40px;padding:0 16px; }
  dialog { width:calc(100% - 16px);max-height:calc(100dvh - 16px);border-radius:var(--md-shape-lg); }
  #modal-content { padding:20px 16px; }
  .modal-titlebar h2 { font-size:22px;line-height:28px; }
  .summary-line strong { max-width:60%; }
  #notice { left:16px;right:16px;bottom:16px;max-width:none;transform:none;animation:none; }
  .fab { right:16px;bottom:16px; }
}
@media print {
  #notice,.idle-banner,.fab,.modal-close { display:none!important; }
  body { background:#fff; }
}