/* RM — sistema visual unificado ("A": claro, tarjetas redondeadas, menu en pildora, acento dorado/negro).
   Se carga DESPUES del CSS propio de cada pagina para sobreescribir sus tokens y componentes. */

:root{
  --rmu-bg:#ECEAE4; --rmu-card:#FFFFFF; --rmu-soft:#F5F4F0; --rmu-soft2:#EFEDE7; --rmu-ink:#211E1A; --rmu-mute:#948C7D; --rmu-sub:#6B6459;
  --rmu-pbg:#17161A; --rmu-pfg:#FFFFFF; --rmu-gold:#FFC21A; --rmu-navy:#2A4D7A;
  --rmu-shadow:0 1px 3px rgba(33,30,26,.06);
  /* tokens de las paginas (todas comparten estos nombres) */
  --bg-page:#ECEAE4; --bg-header:transparent;
}
html:not(.rmu-keepblack){ --black:#ECEAE4; }
html[data-tema="noche"]{
  --rmu-bg:#0F0E0C; --rmu-card:#1A1815; --rmu-soft:#26231F; --rmu-soft2:#2E2A25; --rmu-ink:#F3EFE7; --rmu-mute:#8A8376; --rmu-sub:#B2AB9E;
  --rmu-pbg:#F3EFE7; --rmu-pfg:#17161A; --rmu-shadow:0 1px 3px rgba(0,0,0,.4);
}
html, body{ background:var(--rmu-bg) !important; background-image:none !important; }

/* ---------- Tarjetas ---------- */
.card, .panel, .stat-tile, .app-card, .order-card, .hist-item, .eq-card, .modal-box, .hero, .box{
  border-radius:22px; box-shadow:var(--rmu-shadow);
}
.card, .panel, .order-card, .hist-item, .eq-card{ border-color:transparent; }

/* ---------- Botones: principal negro en pildora, secundario gris ---------- */
.btn-gold, .btn-primary, .btn.btn-primary, .box button{
  background:var(--rmu-pbg) !important; color:var(--rmu-pfg) !important; border:none !important; border-radius:999px !important;
  box-shadow:none !important; text-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.btn-ghost, .order-toggle, .push-btn, .ajuste-btn{
  background:var(--rmu-soft2) !important; color:var(--rmu-ink) !important; border:none !important; border-radius:999px !important;
  box-shadow:none !important; text-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important;
}
.btn-gold:hover, .btn-primary:hover, .btn-ghost:hover{ filter:brightness(1.12); }
.btn, .link-btn, .icon-btn{ border-radius:999px; }

/* ---------- Campos ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), select, textarea{
  border-radius:14px; background:var(--rmu-soft); border-color:transparent;
}

/* ---------- Chips / pestañas internas ---------- */
.chip, nav.subtabs button, .hist-chip, .filter-chip{ border-radius:999px; }
.chip[aria-pressed="true"], nav.subtabs button.active, nav.subtabs button[aria-current="page"], .hist-chip.active, .filter-chip.active{
  background:var(--rmu-pbg) !important; color:var(--rmu-pfg) !important; border-color:var(--rmu-pbg) !important;
}

/* ---------- Tablas ---------- */
table thead th{ background:var(--rmu-soft); }
table thead th:first-child{ border-radius:12px 0 0 12px; }
table thead th:last-child{ border-radius:0 12px 12px 0; }

/* ---------- Encabezados propios de cada pagina ---------- */
header, header.top{ background:transparent !important; box-shadow:none !important; border:none !important; }

/* ---------- Menu superior en pildora (escritorio) ---------- */
#rm-hotzone{ display:none !important; }
.rmu-pill{ display:contents; }
.rmu-user{ display:contents; }
.rmu-av, .rmu-who{ display:none; }
@media (min-width:860px){
  body{ margin-left:0 !important; }
  #rm-topbar{
    position:sticky !important; top:0 !important; left:auto !important; bottom:auto !important; width:auto !important; z-index:150;
    display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:space-between; gap:16px;
    background:color-mix(in srgb, var(--rmu-bg) 88%, transparent) !important; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    border:none !important; box-shadow:none !important; transform:none !important; overflow:visible !important;
    padding:16px 28px !important; flex-wrap:nowrap !important;
  }
  #rm-topbar > a:first-child{
    background:var(--rmu-card) !important; border-radius:999px; padding:8px 20px !important; margin:0 !important; width:auto !important; box-shadow:var(--rmu-shadow);
  }
  .rmu-pill{
    display:flex; align-items:center; gap:2px; background:var(--rmu-card); border-radius:999px; padding:6px; box-shadow:var(--rmu-shadow);
  }
  #rm-topbar .rmu-pill .rmnav-item{ display:inline-flex !important; flex-direction:row !important; width:auto !important; }
  #rm-topbar .rmu-pill a[data-rmnav]{
    width:auto !important; padding:9px 16px !important; border-radius:999px !important; font-size:13px !important; font-weight:600 !important;
    color:#5E584E !important; background:transparent; white-space:nowrap;
  }
  #rm-topbar .rmu-pill a[data-rmnav]:hover{ background:var(--rmu-soft); }
  #rm-topbar .rmu-pill a[data-rmnav].rm-nav-active{ background:var(--rmu-pbg) !important; color:var(--rmu-pfg) !important; }
  /* submenus: de nuevo desplegable flotante bajo cada opcion */
  #rm-topbar .rmnav-menu{
    position:absolute !important; top:100% !important; left:0 !important; width:auto !important; min-width:210px !important;
    max-height:none !important; overflow:visible !important; padding:6px !important; margin:0 !important; margin-top:-2px !important;
    border-radius:18px !important; box-shadow:0 16px 36px rgba(33,30,26,.18) !important;
    opacity:0 !important; visibility:hidden !important; transform:translateY(-6px) !important;
  }
  #rm-topbar .rmnav-item:hover .rmnav-menu, #rm-topbar .rmnav-item:focus-within .rmnav-menu{
    opacity:1 !important; visibility:visible !important; transform:none !important;
  }
  .rmu-cfg{ display:flex; align-items:center; background:var(--rmu-card); border-radius:999px; padding:6px; box-shadow:var(--rmu-shadow); }
  #rm-topbar .rmu-cfg .rmnav-item{ display:inline-flex !important; }
  #rm-topbar .rmu-cfg a[data-rmnav]{
    width:38px !important; height:38px !important; padding:0 !important; border-radius:50% !important; justify-content:center;
    color:#5E584E !important; background:transparent;
  }
  #rm-topbar .rmu-cfg a[data-rmnav]:hover{ background:var(--rmu-soft); }
  #rm-topbar .rmu-cfg a[data-rmnav].rm-nav-active{ background:var(--rmu-pbg) !important; color:var(--rmu-pfg) !important; }
  #rm-topbar .rmu-cfg .rmnav-menu{ left:auto !important; right:0 !important; }
  .rmu-user{
    display:flex; align-items:center; gap:10px; background:var(--rmu-card); border-radius:999px; padding:6px 8px 6px 6px; box-shadow:var(--rmu-shadow);
  }
  .rmu-av{ display:flex; width:38px; height:38px; border-radius:50%; background:var(--rmu-navy); color:#fff; font-weight:700; font-size:14px; align-items:center; justify-content:center; }
  .rmu-who{ display:block; font-size:13px; line-height:1.2; color:var(--rmu-ink); }
  .rmu-who small{ display:block; color:var(--rmu-mute); font-size:11.5px; }
  #rm-logout-btn{
    margin:0 !important; width:auto !important; padding:8px 14px !important; border:none !important; background:var(--rmu-soft) !important;
    color:var(--rmu-ink) !important; border-radius:999px !important; font-size:12px !important; font-weight:600;
  }
}

/* Pantallas medianas: se compacta la barra para que logo, menu, engrane y sesion quepan sin salirse */
@media (min-width:860px) and (max-width:1279px){
  #rm-topbar{ gap:10px; padding:16px 18px !important; }
  #rm-topbar .rmu-pill a[data-rmnav]{ padding:9px 10px !important; font-size:12.5px !important; }
  #rm-topbar > a:first-child{ padding:6px 14px !important; }
  .rmu-who, .rmu-chev{ display:none !important; }
  .rmu-user{ padding:6px !important; }
}
@media (min-width:860px) and (max-width:1023px){
  #rm-topbar > a:first-child{ display:none !important; }
  #rm-topbar .rmu-pill a[data-rmnav]{ padding:8px 8px !important; font-size:12px !important; }
}
/* ---------- Riel de iconos a la izquierda ---------- */
#rmu-rail{ display:none; }
@media (min-width:1100px){
  #rmu-rail{
    display:flex; flex-direction:column; gap:8px; position:fixed; left:22px; top:104px; z-index:140;
    background:var(--rmu-card); border-radius:999px; padding:10px 8px; box-shadow:var(--rmu-shadow);
  }
  #rmu-rail a{ width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#7A7468; text-decoration:none; }
  #rmu-rail a:hover{ background:var(--rmu-soft); }
  #rmu-rail a.on{ background:var(--rmu-pbg); color:var(--rmu-pfg); }
  body.rmu-has-rail{ padding-left:96px; }
}

/* Etiquetas flotantes: fuera del flujo y solo para dispositivos con mouse. */
.rmu-tooltip{ display:none; }
@media screen and (hover:hover) and (pointer:fine){
  #rmu-rail{ z-index:400; overflow:visible; }
  #rmu-rail a{ position:relative; }
  .rmu-tooltip{
    display:block; position:absolute; z-index:10000; pointer-events:none;
    padding:8px 12px; border-radius:8px; white-space:nowrap; font:500 13px/1.3 Arial,Helvetica,sans-serif;
    background:var(--rmu-pbg); color:var(--rmu-pfg); box-shadow:0 4px 14px rgba(0,0,0,.2);
    opacity:0; transition:opacity .12s ease, transform .12s ease;
  }
  #rmu-rail .rmu-rail-tooltip{
    left:calc(100% + 16px); top:50%; transform:translate(-4px,-50%);
  }
  #rmu-rail a:hover .rmu-rail-tooltip, #rmu-rail a:focus-visible .rmu-rail-tooltip{ opacity:1; transform:translate(0,-50%); }
}
@media screen and (min-width:860px) and (hover:hover) and (pointer:fine){
  #rm-topbar .rmu-tooltip-anchor{ position:relative; overflow:visible; }
  #rm-topbar .rmu-top-tooltip{ top:calc(100% + 10px); right:0; transform:translateY(-4px); }
  #rm-topbar .rmu-tooltip-anchor:hover > .rmu-top-tooltip,
  #rm-topbar .rmu-tooltip-anchor:focus-visible > .rmu-top-tooltip{ opacity:1; transform:translateY(0); }
  #rm-topbar .rmu-trigger[aria-expanded="true"] > .rmu-top-tooltip{ display:none; }
}
@media screen and (max-width:859px){
  .rmu-top-tooltip{ display:none; }
}
@media screen and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:reduce){
  .rmu-tooltip{ transition:none; }
  #rm-topbar .rmu-top-tooltip{ transform:none; }
  #rmu-rail .rmu-rail-tooltip{ transform:translate(0,-50%); }
}

/* ---------- Movil (<860px): barra inferior con hojas; se oculta el menu superior anterior ---------- */
#rmu-mnav{ display:none; }
/* ---------- Movil (Propuesta A, oct-2026): la pildora del menu de escritorio flotando abajo + hojas que suben ---------- */
@media (max-width:859px){
  #rm-topbar{ display:none !important; }
  body.rmu-has-mnav{ padding-bottom:calc(112px + env(safe-area-inset-bottom,0px)); }
  #rmu-mnav{ display:block; font-family:'Inter',sans-serif; }
  .rmu-nav{ position:fixed; left:12px; right:12px; bottom:calc(10px + env(safe-area-inset-bottom,0px)); height:68px; background:var(--rmu-card); border-radius:999px; box-shadow:0 10px 30px rgba(33,30,26,.18); z-index:300; }
  .rmu-nav-in{ display:flex; align-items:center; height:100%; padding:0 8px; gap:2px; }
  .rmu-ni{ flex:1 1 0; min-width:0; height:52px; border-radius:999px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; color:var(--rmu-mute); font-size:10.5px; font-weight:600; background:none; border:none; font-family:inherit; padding:0; text-decoration:none; cursor:pointer; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
  .rmu-ni svg{ display:block; flex:none; }
  .rmu-ni.on{ flex:1.5 1 0; flex-direction:row; gap:7px; background:var(--rmu-pbg); color:var(--rmu-pfg); font-size:13px; font-weight:700; }
  .rmu-ni.on svg{ width:18px; height:18px; }
  .rmu-fab{ flex:none; width:52px; height:52px; margin:0 3px; border-radius:50%; border:none; background:var(--rmu-gold); color:#17161A; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px rgba(255,194,26,.4); transition:transform .3s cubic-bezier(.34,1.4,.5,1); cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .rmu-fab svg{ stroke-width:2.8; }
  #rmu-mnav.open .rmu-fab{ transform:rotate(45deg); }
  .rmu-shade{ position:fixed; inset:0; background:rgba(23,22,26,.45); z-index:290; opacity:0; pointer-events:none; transition:opacity .25s; }
  #rmu-mnav.open .rmu-shade, #rmu-mnav.mas .rmu-shade{ opacity:1; pointer-events:auto; }
  .rmu-sheet{ position:fixed; left:0; right:0; bottom:0; z-index:295; background:var(--rmu-bg); border-radius:30px 30px 0 0; padding:10px 16px calc(98px + env(safe-area-inset-bottom,0px)); transform:translateY(105%); pointer-events:none; transition:transform .38s cubic-bezier(.2,.9,.25,1); max-height:calc(100vh - 40px); overflow:auto; box-shadow:0 -10px 30px rgba(23,22,26,.18); }
  .rmu-sheet:before{ content:""; display:block; width:40px; height:5px; border-radius:3px; background:var(--rmu-mute); opacity:.45; margin:0 auto 14px; }
  #rmu-mnav.open #rmu-sheet-new, #rmu-mnav.mas #rmu-sheet-more{ transform:none; pointer-events:auto; }
  .rmu-sheet h4{ margin:0 4px 14px; font-family:'Oswald',sans-serif; font-size:26px; font-weight:600; letter-spacing:0; text-transform:none; color:var(--rmu-ink); }
  .rmu-row{ display:flex; align-items:center; gap:14px; background:var(--rmu-card); color:var(--rmu-ink); border-radius:20px; padding:14px 16px; margin-bottom:10px; width:100%; border:none; font-family:inherit; text-align:left; text-decoration:none; cursor:pointer; box-shadow:var(--rmu-shadow); }
  .rmu-row i{ width:46px; height:46px; border-radius:15px; background:var(--rmu-soft); color:var(--rmu-ink); display:flex; align-items:center; justify-content:center; flex:none; }
  .rmu-row.dk{ background:var(--rmu-pbg); color:var(--rmu-pfg); }
  .rmu-row.dk i{ background:var(--rmu-gold); color:#17161A; }
  .rmu-row.dk small{ color:inherit; opacity:.7; }
  .rmu-row b{ display:block; font-size:15px; } .rmu-row small{ display:block; font-size:12px; color:var(--rmu-mute); margin-top:2px; }
  .rmu-grp{ background:var(--rmu-card); border-radius:20px; padding:14px 16px; margin-bottom:10px; box-shadow:var(--rmu-shadow); }
  .rmu-gh{ font-size:15px; font-weight:700; color:var(--rmu-ink); text-decoration:none; display:block; }
  .rmu-sub{ margin-top:12px; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--rmu-mute); font-weight:700; }
  .rmu-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
  .rmu-chips a{ padding:8px 13px; border-radius:999px; background:var(--rmu-soft2); color:var(--rmu-ink); font-size:12.5px; font-weight:600; text-decoration:none; }
  /* titulos de cada pagina: grandes, como en la app */
  .view-head h2, main > h1, .page-title{ font-family:'Oswald',sans-serif !important; font-size:30px !important; font-weight:600 !important; letter-spacing:.005em; line-height:1.05; }
  /* pestanas internas (Dashboard / Ingreso / Inventario / Historial / Creditos...): segmentado blanco con la activa en negro */
  nav.tabs{ background:var(--rmu-card); border-radius:999px; padding:5px !important; box-shadow:var(--rmu-shadow); gap:2px !important; }
  nav.tabs button{ border-radius:999px !important; border:none !important; }
  nav.tabs button[aria-current="page"], nav.tabs button.active{ background:var(--rmu-pbg) !important; color:var(--rmu-pfg) !important; }
  /* en escritorio las pestanas viven en el menu de arriba; en el celular se muestran como segmentado deslizable */
  html body header nav#tabs.tabs{ display:flex !important; width:100%; margin:12px 0 0 !important; overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; }
  html body header nav#tabs.tabs::-webkit-scrollbar{ display:none; }
  html body header nav#tabs.tabs button{ flex:none; padding:9px 14px !important; font-size:13px !important; }
  /* logo de cada pagina: pildora blanca con "RM" dorado, como en Inicio */
  header .top-inner{ flex-wrap:wrap; }
  header .brand{ display:inline-flex !important; align-items:center; gap:8px; background:var(--rmu-card); border-radius:999px; padding:5px 14px 5px 5px; box-shadow:var(--rmu-shadow); }
  header .brand-mark{ width:auto !important; min-width:38px; height:26px !important; padding:0 9px; border-radius:999px !important; background:var(--rmu-gold) !important; color:#17161A !important; font-family:'Oswald',sans-serif; font-size:13px !important; box-shadow:none !important; border:none !important; display:flex; align-items:center; justify-content:center; }
  header .brand-mark svg{ width:16px !important; height:16px !important; color:#17161A; stroke:#17161A; }
  header .brand-text h1{ font-family:'Inter',sans-serif !important; font-size:13px !important; font-weight:800 !important; letter-spacing:0 !important; color:var(--rmu-ink) !important; margin:0; }
  header .brand-text p{ display:none !important; }
  /* cifras de las tarjetas: que quepan completas en dos columnas */
  .stat-tile .value, .stat-tile .val{ font-size:clamp(17px, 5.2vw, 22px) !important; overflow-wrap:anywhere; }
}

/* ---------- Movil: proporciones — nada se sale del cuadro ---------- */
@media (max-width:859px){
  html, body{ max-width:100%; overflow-x:hidden; }
  main{ padding-left:14px !important; padding-right:14px !important; max-width:100% !important; }
  fieldset{ min-width:0; max-width:100%; margin-left:0; margin-right:0; }
  .field, .two-col > *, .field-grid > *, .form-grid > *, .hist-grid > *, .dash-grid > *, .cal-cols > *{ min-width:0; }
  .two-col, .field-grid, .form-grid, .hist-grid, .two-col-cards, .movimientos-grid, .cal-cols, .qp-bank-grid, .qp-bottom-grid, .qp-client-grid{ grid-template-columns:minmax(0,1fr) !important; }
  input, select, textarea{ max-width:100%; min-width:0; }
  input[type="date"], input[type="time"], input[type="datetime-local"]{ width:100%; min-width:0; -webkit-appearance:none; appearance:none; min-height:44px; }
  input:not([type="checkbox"]):not([type="radio"]), select, textarea{ font-size:16px; }
  .card, .panel{ padding-left:16px; padding-right:16px; }
  .table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .modal-box, .modal, .rdm, .sheet{ max-width:calc(100vw - 24px) !important; }
  .modal-box{ width:calc(100vw - 24px); max-height:88vh; overflow:auto; }
  h1, h2{ overflow-wrap:anywhere; }
  .stat-row{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
  img, canvas, svg{ max-width:100%; }
  .btn, button{ max-width:100%; }
  .view-head, .card-head{ flex-wrap:wrap; gap:10px; }
  .segmented{ flex-wrap:wrap; }
  .seg-opt{ flex:1 1 calc(50% - 8px); min-width:0; }
  .seg-opt label{ width:100%; }
}

/* ---------- Movil: las tablas anchas pasan a tarjetas (rm-ui.js les pone la clase rmu-cards y las etiquetas) ---------- */
@media (max-width:859px){
  .table-wrap{ overflow-x:visible !important; }
  table.rmu-cards{ display:block; width:100% !important; min-width:0 !important; max-width:100%; }
  table.rmu-cards thead{ display:none; }
  table.rmu-cards tbody{ display:block; }
  table.rmu-cards tr{ display:block; box-sizing:border-box; max-width:100%; background:var(--rmu-soft); border-radius:16px; padding:8px 14px; margin:0 0 10px; border:none !important; }
  table.rmu-cards td{
    display:flex; justify-content:space-between; align-items:center; gap:14px; padding:7px 0 !important; border:none !important;
    text-align:right; background:transparent !important; min-height:0; width:auto !important; white-space:normal !important; min-width:0 !important; overflow-wrap:anywhere;
  }
  table.rmu-cards td[data-label]::before{ content:attr(data-label); color:var(--rmu-mute); font-size:11.5px; font-weight:600; text-align:left; flex:none; max-width:42%; }
  table.rmu-cards td[data-label=""]::before{ display:none; }
  table.rmu-cards td[data-label=""]{ justify-content:flex-start; }
  table.rmu-cards td.rmu-full{ display:block; text-align:center; }
  table.rmu-cards td .link-btn, table.rmu-cards td .btn{ white-space:normal; }
}

/* ---------- Usuario (arriba a la derecha): boton con menu de apariencia y cerrar sesion ---------- */
.rmu-user{ position:relative; display:flex !important; align-items:center; }
.rmu-trigger{
  display:flex; align-items:center; gap:10px; background:var(--rmu-card); border:0; border-radius:999px;
  padding:6px 12px 6px 6px; cursor:pointer; color:inherit; font:inherit; box-shadow:var(--rmu-shadow);
}
.rmu-trigger:focus-visible{ outline:2px solid var(--rmu-navy); outline-offset:2px; }
.rmu-chev{ color:var(--rmu-mute); transition:transform .2s ease; }
.rmu-trigger[aria-expanded="true"] .rmu-chev{ transform:rotate(180deg); }
.rmu-menu{
  position:absolute; right:0; top:calc(100% + 10px); min-width:272px; background:var(--rmu-card);
  border-radius:16px; box-shadow:0 16px 36px rgba(0,0,0,.18); padding:14px; z-index:300;
}
.rmu-menu[hidden]{ display:none; }
.rmu-menu-h{ font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--rmu-mute); font-weight:600; margin-bottom:8px; }
.rmu-tema{ display:flex; gap:4px; background:var(--rmu-soft); border-radius:999px; padding:4px; }
.rmu-tema button{
  flex:1; border:0; background:transparent; color:var(--rmu-ink); font:600 12.5px 'Inter',system-ui,sans-serif;
  padding:8px 6px; border-radius:999px; cursor:pointer;
}
.rmu-tema button[aria-pressed="true"]{ background:var(--rmu-navy); color:#FFFFFF; }
.rmu-tema button:focus-visible{ outline:2px solid var(--rmu-navy); outline-offset:2px; }
.rmu-menu-sep{ height:1px; background:var(--rmu-soft2); margin:12px 0; }
.rmu-menu #rm-logout-btn{ width:100% !important; text-align:center; }

/* ---------- Campana y panel de notificaciones ---------- */
.rmu-notif-detalle{ white-space:pre-wrap; font-size:12.5px; line-height:1.45; background:var(--rmu-soft); border-radius:10px; padding:8px 10px; margin:6px 0 2px; }
.rmu-acciones{ display:flex; align-items:center; gap:8px; }
.rmu-bell-wrap{ position:relative; display:flex; align-items:center; justify-content:center; background:var(--rmu-card); border-radius:999px; padding:6px; box-shadow:var(--rmu-shadow); }
.rmu-bell{ position:relative; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:50%; color:var(--rmu-ink); background:transparent; cursor:pointer; }
.rmu-bell:hover{ background:var(--rmu-soft); }
.rmu-bell-count{ display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 4px; box-sizing:border-box; border-radius:999px; background:#D92D20; color:#fff; font:700 10px system-ui,sans-serif; }
.rmu-bell > .rmu-bell-count{ position:absolute; top:0; right:0; }
.rmu-bell-count[hidden]{ display:none !important; }
.rmu-notif-overlay{ position:fixed; inset:0; z-index:1000; background:rgba(20,18,15,.28); }
.rmu-notif-overlay[hidden]{ display:none; }
.rmu-notif-panel{ position:absolute; top:76px; right:24px; width:min(430px,calc(100vw - 28px)); max-height:min(78vh,760px); overflow:auto; padding:18px; box-sizing:border-box; border-radius:22px; background:var(--rmu-card); color:var(--rmu-ink); box-shadow:0 18px 55px rgba(0,0,0,.24); }
.rmu-notif-panel>header{ position:sticky; top:-18px; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:4px 0 14px; background:var(--rmu-card) !important; color:var(--rmu-ink); font-size:18px; }
.rmu-notif-close{ border:0; background:var(--rmu-soft); color:var(--rmu-ink); border-radius:50%; width:34px; height:34px; font-size:24px; cursor:pointer; }
.rmu-notif-body{ display:grid; gap:12px; }
.rmu-notif-body>p{ text-align:center; color:var(--rmu-sub); padding:22px 8px; }
.rmu-notif-card{ display:grid; gap:7px; padding:15px; border-radius:16px; background:var(--rmu-soft); font-size:13px; line-height:1.45; overflow-wrap:anywhere; }
.rmu-notif-kind{ color:var(--rmu-sub); font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:700; }
.rmu-notif-client{ font-size:16px; font-weight:750; }
.rmu-notif-tag{ justify-self:start; padding:3px 9px; border-radius:999px; background:#E6F4EA; color:#1E6535; font-weight:700; }
.rmu-notif-note{ color:var(--rmu-sub); }
.rmu-notif-actions{ display:flex; flex-wrap:wrap; gap:7px; margin-top:6px; }
.rmu-notif-actions button,.rmu-notif-payform button{ border:0; border-radius:999px; padding:9px 12px; background:var(--rmu-pbg); color:var(--rmu-pfg); font:600 12px system-ui,sans-serif; cursor:pointer; }
.rmu-notif-actions button:disabled,.rmu-notif-payform button:disabled{ opacity:.55; cursor:wait; }
.rmu-notif-payform{ display:grid; gap:8px; padding-top:8px; }
.rmu-notif-payform[hidden]{ display:none; }
.rmu-notif-payform small{ color:var(--rmu-sub); line-height:1.4; }
.rmu-notif-recent{ margin-top:8px; padding:12px; border-radius:14px; background:var(--rmu-soft); }
.rmu-notif-recent summary{ cursor:pointer; font-weight:700; }
.rmu-notif-recent>div{ margin-top:9px; font-size:12px; }
.rmu-mobile-notifs{ width:100%; display:flex; align-items:center; gap:12px; padding:12px; border:0; border-radius:14px; background:var(--rmu-soft); color:var(--rmu-ink); text-align:left; }
.rmu-mobile-notifs>span:nth-child(2){ flex:1; display:grid; gap:3px; }
.rmu-mobile-notifs small{ color:var(--rmu-sub); }
html[data-tema="noche"] .rmu-notif-tag{ background:#193924; color:#9DD9AD; }
@media (min-width:860px){ .rmu-notif-overlay{ background:transparent; } }
@media (max-width:859px){
  .rmu-bell-wrap{ display:none !important; }
  .rmu-notif-panel{ top:auto; right:0; bottom:0; width:100%; max-height:86vh; padding:18px 16px calc(18px + env(safe-area-inset-bottom)); border-radius:22px 22px 0 0; }
  .rmu-notif-panel>header{ top:-18px; }
}


/* ---------- Modo noche: barra superior sin rectangulo + brillo azul ---------- */
@keyframes rmuGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(110,151,209,.28), 0 0 16px rgba(110,151,209,.16), 0 1px 3px rgba(0,0,0,.5); }
  50%{ box-shadow:0 0 0 1px rgba(110,151,209,.45), 0 0 26px rgba(110,151,209,.30), 0 1px 3px rgba(0,0,0,.5); } }
@keyframes rmuActive{ 0%,100%{ box-shadow:0 0 12px rgba(110,151,209,.45); } 50%{ box-shadow:0 0 22px rgba(110,151,209,.80); } }
@media (min-width:860px){
  html[data-tema="noche"][data-tema] #rm-topbar,
  html[data-tema="noche"][data-tema] #rm-topbar:hover,
  html[data-tema="noche"][data-tema] #rm-topbar:focus-within{
    background:transparent !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
    border:none !important; box-shadow:none !important;
  }
  html[data-tema="noche"] #rm-topbar > a:first-child,
  html[data-tema="noche"] .rmu-pill,
  html[data-tema="noche"] .rmu-cfg,
  html[data-tema="noche"] .rmu-user{
    background:linear-gradient(180deg,#1E1C19,#171512) !important; animation:rmuGlow 4.5s ease-in-out infinite;
  }
  html[data-tema="noche"] #rm-topbar .rmu-cfg a[data-rmnav]{ color:#B9B2A5 !important; }
  html[data-tema="noche"] #rm-topbar .rmu-cfg a[data-rmnav]:hover{ background:rgba(110,151,209,.14) !important; color:#EAF1FB !important; }
  html[data-tema="noche"] #rm-topbar .rmu-cfg a[data-rmnav].rm-nav-active{ background:linear-gradient(135deg,#7BA3DC,#4F78B5) !important; color:#fff !important; }
  html[data-tema="noche"] #rm-topbar .rmu-pill a[data-rmnav]{ color:#B9B2A5 !important; transition:background .25s, color .25s, box-shadow .25s, text-shadow .25s; }
  html[data-tema="noche"] #rm-topbar .rmu-pill a[data-rmnav]:hover{
    background:rgba(110,151,209,.14) !important; color:#EAF1FB !important; text-shadow:0 0 10px rgba(140,180,235,.8);
    box-shadow:inset 0 0 0 1px rgba(110,151,209,.35), 0 0 14px rgba(110,151,209,.35);
  }
  html[data-tema="noche"] #rm-topbar .rmu-pill a[data-rmnav].rm-nav-active{
    background:linear-gradient(135deg,#7BA3DC,#4F78B5) !important; color:#fff !important; animation:rmuActive 3.2s ease-in-out infinite;
  }
  html[data-tema="noche"] .rmu-av{ background:linear-gradient(135deg,#7BA3DC,#4F78B5); box-shadow:0 0 14px rgba(110,151,209,.6); }
  html[data-tema="noche"] #rm-logout-btn:hover{ box-shadow:0 0 14px rgba(110,151,209,.4); }
  html[data-tema="noche"] #rm-topbar .rmnav-menu{
    border:1px solid rgba(110,151,209,.3) !important; box-shadow:0 16px 36px rgba(0,0,0,.6), 0 0 24px rgba(110,151,209,.18) !important;
  }
}
html[data-tema="noche"] #rmu-rail{ background:linear-gradient(180deg,#1E1C19,#171512); animation:rmuGlow 4.5s ease-in-out infinite; }
html[data-tema="noche"] #rmu-rail a:hover{ background:rgba(110,151,209,.14); color:#EAF1FB; box-shadow:0 0 12px rgba(110,151,209,.4); }
html[data-tema="noche"] #rmu-rail a.on{ background:linear-gradient(135deg,#7BA3DC,#4F78B5); color:#fff; animation:rmuActive 3.2s ease-in-out infinite; }
@media (prefers-reduced-motion:reduce){ html[data-tema="noche"] * { animation:none !important; } }

/* ---------- Animaciones tactiles (movil y escritorio; se apagan con "reducir movimiento") ---------- */
@media (prefers-reduced-motion:no-preference){
  @keyframes rmuPage{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes rmuRip{ from{ transform:scale(0); opacity:.28; } to{ transform:scale(1); opacity:0; } }
  @keyframes rmuPop{ 0%{ transform:scale(.6); } 60%{ transform:scale(1.18); } 100%{ transform:scale(1); } }
  body{ animation:rmuPage .35s ease both; }
  .rmu-rip{ position:absolute; border-radius:50%; background:currentColor; pointer-events:none; transform:scale(0); animation:rmuRip .45s ease-out forwards; z-index:0; }
  .rmu-rv{ opacity:0; transform:translateY(16px) scale(.985); }
  .rmu-rv.rmu-rv-in{ opacity:1; transform:none; transition:opacity .3s ease var(--rv-d,0ms), transform .38s cubic-bezier(.16,1,.3,1) var(--rv-d,0ms); }
  /* respuesta al presionar */
  button:active, .btn:active, .btn-chip:active, .tab-btn:active, .stat-tile:active, .app-card:active, .mec-widget:active, #rd .m:active, .rmu-nav a:active{
    transform:scale(.96); transition:transform .1s ease;
  }
  .stat-tile, .app-card, .mec-widget, #rd .m{ cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease; }
  /* barra inferior: el icono activo "salta" */
  .rmu-nav .on svg, .rmu-nav a.on svg{ animation:rmuPop .45s cubic-bezier(.34,1.56,.64,1); }
  .rmu-nav a, .rmu-nav button{ transition:background .25s ease, color .25s ease, transform .2s ease; }
  /* hoja "Mas" y modales: entrada suave */
  .modal-overlay{ animation:rmuPage .22s ease both; }
  .modal-box{ animation:rmuModal .38s cubic-bezier(.34,1.3,.5,1) both; }
  @keyframes rmuModal{ from{ opacity:0; transform:translateY(24px) scale(.95); } to{ opacity:1; transform:none; } }
  /* pestanas y segmentados */
  .tab-btn, .segmented button, .subtabs button{ transition:background .28s ease, color .28s ease, transform .2s ease, box-shadow .28s ease; }
  /* filas de tablas-tarjeta al aparecer */
  table.rmu-cards tbody tr{ transition:transform .2s ease, box-shadow .2s ease; }
}
@media (prefers-reduced-motion:no-preference){
  .rmu-fab:active{ transform:scale(.92); }
  #rmu-mnav.open .rmu-fab:active{ transform:rotate(45deg) scale(.92); }
}

/* ---------- Celular: rendimiento (oct-2026) ---------- */
/* Sin desvanecido de toda la pagina al abrir y sin desenfoques (blur) — son de lo mas pesado para el procesador del telefono. */
@media (max-width:859px), (pointer:coarse){
  body{ animation:none !important; }
  *, *::before, *::after{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
  .am-rise{ animation:none !important; opacity:1 !important; transform:none !important; }
}

/* Numero de avisos sobre el boton "Mas" de la barra inferior (celular) */
#rmu-mas{ position:relative; }
.rmu-mas-count{ position:absolute; top:2px; right:50%; margin-right:-20px; }

/* Notificacion nueva: la campana se balancea y el numero da un salto (rm-ui.js -> animarCampana) */
@keyframes rmu-campana { 0%{transform:rotate(0)} 15%{transform:rotate(16deg)} 30%{transform:rotate(-13deg)} 45%{transform:rotate(9deg)} 60%{transform:rotate(-6deg)} 75%{transform:rotate(3deg)} 100%{transform:rotate(0)} }
@keyframes rmu-salto { 0%{transform:scale(.4)} 55%{transform:scale(1.25)} 100%{transform:scale(1)} }
.rmu-bell.rmu-ring svg, #rmu-mas.rmu-ring svg{ transform-origin:50% 8%; animation:rmu-campana .7s cubic-bezier(.36,.07,.19,.97); }
.rmu-bell-count.rmu-ring{ animation:rmu-salto .38s cubic-bezier(.34,1.56,.64,1); }
@media (prefers-reduced-motion: reduce){ .rmu-ring, .rmu-ring svg{ animation:none !important; } }