/* CuentasClaras · sistema visual base, extraído de docs/mockup.html (referencia viva) */
  :root{
    color-scheme: light;
    --surface-1:#fcfcfb; --plane:#f5f2ec;
    --ink-1:#1a1917; --ink-2:#52514e; --ink-3:#898781;
    --grid:#e7e5dd; --axisline:#c3c2b7; --hairline:rgba(11,11,11,.08);
    --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a;
    --seq-150:#b7d3f6;
    --good:#0ca30c; --warn:#fab219; --crit:#d03b3b; --good-text:#006300;
    --accent:#2a78d6; --accent-2:#1c5cab;
    --accent-wash:rgba(42,120,214,.09);
    --green-wash:rgba(27,175,122,.12);
    --warn-wash:rgba(250,178,25,.14);
    --shadow:0 2px 12px rgba(26,25,23,.06);
    --shadow-lift:0 8px 28px rgba(26,25,23,.14);
  }
  @media (prefers-color-scheme: dark){
    :root:where(:not([data-theme="light"])){
      color-scheme: dark;
      --surface-1:#1f1e1c; --plane:#141311;
      --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-3:#898781;
      --grid:#31302c; --axisline:#3d3c38; --hairline:rgba(255,255,255,.08);
      --s1:#3987e5; --s2:#d95926; --s3:#199e70;
      --seq-150:#1c5cab;
      --good-text:#0ca30c;
      --accent:#3987e5; --accent-2:#5598e7;
      --accent-wash:rgba(57,135,229,.14);
      --green-wash:rgba(25,158,112,.16);
      --warn-wash:rgba(250,178,25,.10);
      --shadow:0 2px 12px rgba(0,0,0,.3);
      --shadow-lift:0 8px 28px rgba(0,0,0,.5);
    }
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  body{font-family:system-ui,-apple-system,"Segoe UI",sans-serif; background:var(--plane); color:var(--ink-1); display:flex; justify-content:center; min-height:100vh;}
  .app{width:100%; max-width:480px; min-height:100vh; display:flex; flex-direction:column; position:relative; background:var(--plane);}

  /* ---------- header ---------- */
  header{padding:22px 20px 6px; display:flex; align-items:flex-start; justify-content:space-between;}
  .hola{font-size:22px; font-weight:800; letter-spacing:-.4px;}
  .hola small{display:block; font-weight:500; font-size:12.5px; color:var(--ink-3); margin-top:2px; letter-spacing:0;}
  .avatars{display:flex; margin-top:4px;}
  .avatar{width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:#fff; border:2.5px solid var(--plane); box-shadow:var(--shadow);}
  .avatar.a{background:linear-gradient(135deg,#2a78d6,#1c5cab);}
  .avatar.b{background:linear-gradient(135deg,#eb6834,#d95926); margin-left:-10px;}
  .streak{display:inline-flex; align-items:center; gap:5px; background:var(--warn-wash); border-radius:20px; padding:4px 11px; font-size:11.5px; font-weight:700; color:var(--ink-2); margin:6px 20px 2px; width:fit-content;}
  .demo-note{font-size:10.5px; color:var(--ink-3); text-align:center; padding:4px 20px 0;}

  main{flex:1; overflow-y:auto; padding:12px 16px 108px;}
  .view{display:none;} .view.active{display:block; animation:fade .22s ease;}
  @keyframes fade{from{opacity:0; transform:translateY(6px);} to{opacity:1;}}
  h3{font-size:13.5px; font-weight:700; color:var(--ink-2); margin:20px 4px 10px;}

  .card{background:var(--surface-1); border-radius:20px; padding:16px; margin-bottom:12px; box-shadow:var(--shadow); border:1px solid var(--hairline);}
  .btn{display:inline-flex; align-items:center; gap:8px; justify-content:center; border:none; border-radius:14px; padding:14px 18px; font-size:14.5px; font-weight:700; cursor:pointer; font-family:inherit; transition:transform .12s, filter .15s;}
  .btn:active{transform:scale(.97);}
  .btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; width:100%; box-shadow:0 4px 14px rgba(42,120,214,.3);}
  .btn-ghost{background:transparent; color:var(--accent); border:1.5px solid var(--grid);}
  .btn-sm{padding:8px 14px; font-size:12.5px; border-radius:10px;}
  label{font-size:12px; font-weight:600; color:var(--ink-2); display:block; margin:12px 0 5px;}
  input,select,textarea{width:100%; padding:12px 14px; border:1.5px solid var(--grid); border-radius:12px; font-size:15px; font-family:inherit; background:var(--surface-1); color:var(--ink-1); transition:border-color .15s;}
  input:focus,select:focus{outline:none; border-color:var(--accent);}
  .muted{color:var(--ink-3); font-size:11.5px;}

  /* ---------- nav + FAB ---------- */
  nav{position:fixed; bottom:0; width:100%; max-width:480px; background:var(--surface-1); border-top:1px solid var(--hairline); display:flex; z-index:20; padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 20px rgba(26,25,23,.06);}
  nav button{flex:1; background:none; border:none; padding:10px 2px 12px; font-size:10px; font-weight:600; color:var(--ink-3); cursor:pointer; font-family:inherit; display:flex; flex-direction:column; align-items:center; gap:3px; transition:color .15s;}
  nav button.active{color:var(--accent);}
  nav svg{width:23px; height:23px;}
  .fab-slot{flex:1; position:relative;}
  .fab{position:absolute; left:50%; top:-26px; transform:translateX(-50%); width:58px; height:58px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border:4px solid var(--plane); font-size:26px; cursor:pointer; box-shadow:var(--shadow-lift); transition:transform .15s; display:flex; align-items:center; justify-content:center;}
  .fab:active{transform:translateX(-50%) scale(.93);}

  /* ---------- hero inicio ---------- */
  .hero{background:linear-gradient(150deg,var(--accent) 0%,var(--accent-2) 100%); color:#fff; border:none; position:relative; overflow:hidden;}
  .hero::after{content:''; position:absolute; right:-40px; top:-40px; width:160px; height:160px; border-radius:50%; background:rgba(255,255,255,.08);}
  .hero .lbl{font-size:12.5px; opacity:.85; font-weight:600;}
  .hero .big{font-size:34px; font-weight:800; letter-spacing:-1px; margin:2px 0 0;}
  .hero .sub{font-size:12.5px; opacity:.85; margin-top:2px;}
  .hero-meter{height:12px; border-radius:8px; background:rgba(255,255,255,.25); overflow:hidden; margin-top:14px;}
  .hero-meter div{height:100%; border-radius:8px; background:#fff; width:0; transition:width 1s cubic-bezier(.2,.8,.2,1);}
  .hero-foot{display:flex; justify-content:space-between; font-size:11.5px; margin-top:7px; opacity:.9;}
  .mood{display:flex; align-items:center; gap:10px; background:var(--green-wash); border-radius:16px; padding:12px 14px; margin-bottom:12px; font-size:13px; line-height:1.45; color:var(--ink-2);}
  .mood b{color:var(--good-text);}
  .mood .emoji{font-size:22px;}
  .kpi-row{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:12px;}
  .tile{background:var(--surface-1); border-radius:16px; padding:13px 14px; box-shadow:var(--shadow); border:1px solid var(--hairline);}
  .tile .lbl{font-size:11px; font-weight:600; color:var(--ink-3); text-transform:uppercase; letter-spacing:.5px;}
  .tile .val{font-size:21px; font-weight:800; margin-top:3px; letter-spacing:-.4px;}
  .tile .delta{font-size:11px; font-weight:600; margin-top:3px;}
  .delta.good{color:var(--good-text);} .delta.bad{color:var(--crit);}

  /* ---------- listas ---------- */
  .mov{display:flex; align-items:center; gap:12px; padding:11px 2px; border-bottom:1px solid var(--grid);}
  .mov:last-child{border-bottom:none;}
  .mov .ico{width:42px; height:42px; border-radius:14px; background:var(--accent-wash); display:flex; align-items:center; justify-content:center; font-size:19px; flex-shrink:0;}
  .mov .info{flex:1; min-width:0;}
  .mov .t1{font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .mov .t2{font-size:11.5px; color:var(--ink-3); margin-top:1px;}
  .mov .amt{font-size:14px; font-weight:700; white-space:nowrap;}
  .mov .amt.ing{color:var(--good-text);}
  .day-lbl{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-3); margin:16px 4px 6px;}
  .chips{display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 12px;}
  .chip{font-size:12px; font-weight:600; border:1.5px solid var(--grid); border-radius:20px; padding:7px 14px; cursor:pointer; background:var(--surface-1); color:var(--ink-2); font-family:inherit; transition:all .15s;}
  .chip:active{transform:scale(.95);}
  .chip.on, .chip:hover{background:var(--accent-wash); color:var(--accent); border-color:transparent;}
  .tag{font-size:10.5px; background:var(--accent-wash); color:var(--accent); border-radius:7px; padding:2px 8px; font-weight:700;}

  /* ---------- sheet registro ---------- */
  .sheet-bg{position:fixed; inset:0; background:rgba(20,19,17,.45); opacity:0; pointer-events:none; transition:opacity .25s; z-index:30;}
  .sheet-bg.open{opacity:1; pointer-events:auto;}
  .sheet{position:fixed; bottom:0; left:50%; transform:translate(-50%,105%); width:100%; max-width:480px; background:var(--surface-1); border-radius:26px 26px 0 0; padding:10px 20px 26px; z-index:31; transition:transform .3s cubic-bezier(.2,.8,.2,1); max-height:88vh; overflow-y:auto; box-shadow:var(--shadow-lift);}
  .sheet.open{transform:translate(-50%,0);}
  .grip{width:44px; height:5px; border-radius:3px; background:var(--grid); margin:4px auto 14px;}
  .sheet h2{font-size:18px; font-weight:800; margin-bottom:2px;}
  .sheet .sub{font-size:12.5px; color:var(--ink-3); margin-bottom:14px;}
  .cam-zone{border:2px dashed var(--grid); border-radius:18px; padding:26px 16px; text-align:center; cursor:pointer; transition:all .15s; background:var(--accent-wash);}
  .cam-zone:active{transform:scale(.98);}
  .cam-zone .big-emoji{font-size:38px;}
  .cam-zone b{display:block; font-size:15px; margin-top:6px;}
  .cam-zone span{font-size:12px; color:var(--ink-3);}

  /* ---------- charts ---------- */
  .legend{display:flex; gap:14px; font-size:11.5px; font-weight:600; color:var(--ink-2); margin:2px 0 8px;}
  .legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
  #tooltip{position:fixed; pointer-events:none; background:var(--ink-1); color:var(--surface-1); font-size:11.5px; padding:7px 10px; border-radius:9px; opacity:0; transition:opacity .1s; z-index:60; white-space:nowrap; box-shadow:var(--shadow-lift);}

  /* ---------- chat ---------- */
  .chat-box{display:flex; flex-direction:column; gap:9px; margin-bottom:12px;}
  .msg{max-width:86%; padding:11px 15px; border-radius:18px; font-size:14px; line-height:1.5;}
  .msg.user{align-self:flex-end; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border-bottom-right-radius:5px;}
  .msg.ia{align-self:flex-start; background:var(--surface-1); box-shadow:var(--shadow); border:1px solid var(--hairline); border-bottom-left-radius:5px;}
  .msg.ia b{color:var(--accent);}
  .chat-input{display:flex; gap:8px; position:sticky; bottom:0;}
  .chat-input input{border-radius:24px; padding-left:18px;}
  .send{width:48px; height:48px; border-radius:50%; flex-shrink:0; padding:0;}

  /* ---------- tabla ---------- */
  table{width:100%; border-collapse:collapse; font-size:12.5px;}
  th{text-align:left; color:var(--ink-3); font-weight:700; padding:7px 4px; border-bottom:1.5px solid var(--axisline); font-size:10.5px; text-transform:uppercase; letter-spacing:.4px;}
  td{padding:9px 4px; border-bottom:1px solid var(--grid); font-variant-numeric:tabular-nums;}
  .pill{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; border-radius:8px; padding:3px 8px;}
  .pill.ok{background:var(--green-wash); color:var(--good-text);}
  .pill.new{background:var(--warn-wash); color:#8a6100;}
  .pill.miss{background:rgba(208,59,59,.1); color:var(--crit);}
  @media (prefers-color-scheme: dark){ .pill.new{color:#fab219;} }

  .spinner{width:18px; height:18px; border:2.5px solid var(--accent-wash); border-top-color:var(--accent); border-radius:50%; animation:spin .7s linear infinite; display:inline-block; vertical-align:middle;}
  @keyframes spin{to{transform:rotate(360deg);}}
  #toast{position:fixed; bottom:96px; left:50%; transform:translateX(-50%) translateY(8px); background:var(--ink-1); color:var(--surface-1); font-size:13.5px; font-weight:600; padding:12px 20px; border-radius:14px; opacity:0; transition:all .25s; z-index:70; pointer-events:none; box-shadow:var(--shadow-lift); white-space:nowrap;}
  #toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .hidden{display:none !important;}
  .steps{display:flex; flex-direction:column; gap:12px; margin-top:6px;}
  .step{display:flex; gap:12px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--ink-2);}
  .step .n{width:26px; height:26px; border-radius:50%; background:var(--accent-wash); color:var(--accent); font-weight:800; font-size:12.5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;}

  /* ---------- pantallas sin sesión (entrar, registro, unirse, PIN) ---------- */
  .app-publica{justify-content:flex-start;}
  main.publica{padding:28px 18px 40px;}
  .marca{text-align:center; margin-bottom:22px;}
  .marca-logo{font-size:44px; line-height:1;}
  .marca h1{font-size:24px; font-weight:800; letter-spacing:-.5px; margin-top:8px;}
  .marca p{font-size:13px; color:var(--ink-3); margin-top:3px;}
  .pie{text-align:center; font-size:13px; margin-top:14px;}
  .pie a, main a{color:var(--accent); text-decoration:none; font-weight:600;}
  .errores{background:rgba(208,59,59,.1); border-radius:14px; padding:12px 14px; margin-bottom:14px;}
  .errores p{font-size:13px; line-height:1.45; color:var(--crit); font-weight:600;}
  .errores p + p{margin-top:6px;}
  .codigo-input{text-transform:uppercase; letter-spacing:5px; font-weight:800; font-size:19px; text-align:center;}
  .pin-input{letter-spacing:14px; font-weight:800; font-size:22px; text-align:center; padding-left:14px;}

  /* ---------- navegación (enlaces, no botones) ---------- */
  nav .nav-item{flex:1; padding:10px 2px 12px; font-size:10px; font-weight:600; color:var(--ink-3); text-decoration:none; display:flex; flex-direction:column; align-items:center; gap:3px; transition:color .15s;}
  nav .nav-item.active{color:var(--accent);}
  nav .nav-item svg{width:23px; height:23px;}
  nav .nav-item:active{transform:scale(.97);}

  /* ---------- códigos de invitación ---------- */
  .codigo-caja{display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--accent-wash); border-radius:14px; padding:12px 14px; margin-bottom:8px;}
  .codigo{font-size:21px; font-weight:800; letter-spacing:3px; color:var(--accent); font-variant-numeric:tabular-nums;}

  /* botones que en realidad son enlaces */
  a.btn{text-decoration:none;}

  /* ---------- iconografía propia (src/Nucleo/Icono.php) ---------- */
  .marca-tile{width:62px; height:62px; border-radius:19px; margin:0 auto; color:#fff;
              background:linear-gradient(135deg,var(--accent),var(--accent-2));
              display:flex; align-items:center; justify-content:center;
              box-shadow:0 6px 18px rgba(42,120,214,.32);}
  .mood-ico{width:38px; height:38px; border-radius:13px; flex-shrink:0; color:var(--s3);
            background:var(--surface-1); display:flex; align-items:center; justify-content:center;}
  .step .n.hecho{background:var(--green-wash); color:var(--good-text);}
  .step .n svg{display:block;}
  .codigo-ico{color:var(--accent); display:flex; align-items:center;}
  .codigo-caja{gap:12px;}
  .codigo-caja .codigo{flex:1;}

  /* grilla de categorías con el icono en contenedor redondeado */
  .cat-grilla{display:grid; grid-template-columns:repeat(2,1fr); gap:12px 10px;}
  .cat{display:flex; align-items:center; gap:10px; min-width:0;}
  .cat-ico{width:38px; height:38px; border-radius:13px; flex-shrink:0; color:var(--s1);
           background:var(--accent-wash); display:flex; align-items:center; justify-content:center;}
  .cat-ico.ingreso{color:var(--s3); background:var(--green-wash);}
  .cat-nombre{font-size:12.5px; font-weight:600; color:var(--ink-2); line-height:1.25;}

  /* ---------- sheet de registro (Hito 3) ---------- */
  .tipo-toggle{display:flex; gap:6px; background:var(--plane); border-radius:14px; padding:4px; margin-top:6px;}
  .tipo-toggle .tipo{flex:1; border:none; background:none; font-family:inherit; font-size:13.5px; font-weight:700;
                     color:var(--ink-3); padding:9px 0; border-radius:11px; cursor:pointer; transition:all .15s;}
  .tipo-toggle .tipo.on{background:var(--surface-1); color:var(--accent); box-shadow:var(--shadow);}
  .tipo-toggle .tipo:active{transform:scale(.97);}

  .monto-campo{display:flex; align-items:center; gap:6px; border:1.5px solid var(--grid); border-radius:12px;
               padding:6px 14px; background:var(--surface-1); transition:border-color .15s;}
  .monto-campo:focus-within{border-color:var(--accent);}
  .monto-campo .signo{font-size:24px; font-weight:800; color:var(--ink-3);}
  .monto-campo input{border:none; padding:8px 0; font-size:30px; font-weight:800; letter-spacing:-.8px;
                     background:none; font-variant-numeric:tabular-nums;}
  .monto-campo input:focus{outline:none;}

  .cat-chips{display:flex; gap:7px; overflow-x:auto; padding:2px 2px 6px;
             scrollbar-width:none; -webkit-overflow-scrolling:touch;}
  .sheet .cat-chips{margin:0 -20px; padding-left:20px; padding-right:20px;}
  .cat-chips::-webkit-scrollbar{display:none;}
  .cat-chip{display:flex; align-items:center; gap:7px; flex-shrink:0; cursor:pointer; border:1.5px solid var(--grid);
            border-radius:20px; padding:6px 13px 6px 8px; background:var(--surface-1); transition:all .15s;}
  .cat-chip input{position:absolute; opacity:0; width:0; height:0;}
  .cat-chip-ico{color:var(--ink-3); display:flex; transition:color .15s;}
  .cat-chip-txt{font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;}
  .cat-chip.on{border-color:transparent; background:var(--accent-wash);}
  .cat-chip.on .cat-chip-ico, .cat-chip.on .cat-chip-txt{color:var(--accent);}
  .cat-chip:active{transform:scale(.96);}

  .detalles-toggle{display:flex; align-items:center; justify-content:space-between; width:100%; margin-top:16px;
                   background:none; border:none; font-family:inherit; font-size:13px; font-weight:700;
                   color:var(--accent); padding:8px 0; cursor:pointer;}
  .detalles-toggle .chevron{display:flex; transition:transform .2s;}
  .detalles-toggle.abierto .chevron{transform:rotate(45deg);}

  .foto-zona{display:flex; align-items:center; gap:12px; margin-top:14px; padding:13px 14px; cursor:pointer;
             border:2px dashed var(--grid); border-radius:16px; background:var(--accent-wash); transition:all .15s;}
  .foto-zona:active{transform:scale(.98);}
  .foto-zona.con-foto{border-style:solid; border-color:transparent; background:var(--green-wash);}
  .foto-ico{color:var(--accent); display:flex; flex-shrink:0;}
  .foto-zona.con-foto .foto-ico{color:var(--good-text);}
  .foto-txt{display:flex; flex-direction:column; gap:1px; font-size:13.5px;}
  .foto-txt b{font-weight:700;}
  .foto-txt .muted{font-size:11.5px;}

  .sheet-acciones{display:flex; gap:10px; align-items:center; margin-top:18px;}
  .sheet-acciones .btn-ghost{text-decoration:none;}
  .btn-peligro{background:transparent; color:var(--crit); border:1.5px solid var(--grid); margin-top:14px;}

  /* ---------- lista de movimientos ---------- */
  a.mov{text-decoration:none; color:inherit;}
  a.mov:active{background:var(--plane); border-radius:12px;}
  .mov .ico.ingreso{background:var(--green-wash); color:var(--s3);}
  .mov .ico{color:var(--s1);}
  .mov-foto{color:var(--ink-3); display:flex; flex-shrink:0; margin-right:2px;}
  .vacio{text-align:center; padding:28px 18px;}
  .vacio p{font-size:14px; line-height:1.5;}
  .vacio .muted{margin-top:6px;}
  .comprobante{padding:0; overflow:hidden;}
  .comprobante img{display:block; width:100%; height:auto; max-height:340px; object-fit:cover;}

  /* la fila de movimiento es un enlace: sus partes son span, hay que apilarlas */
  .mov .info{display:flex; flex-direction:column; gap:1px; min-width:0;}
  .mov .t1, .mov .t2{display:block;}

  /* ---------- gráficos (src/Nucleo/Grafico.php) ---------- */
  /* El color de dato es de entidad fija: gastos serie 1, ingresos serie 2.
     El texto nunca lleva color de serie; siempre tintas. */
  .g-barras, .g-lineas{display:block; overflow:visible;}
  .g-etiqueta{font-size:11px; font-weight:600; fill:var(--ink-2);}
  .g-valor{font-size:11.5px; font-weight:700; fill:var(--ink-1); font-variant-numeric:tabular-nums;}
  .g-tick{font-size:9.5px; font-weight:600; fill:var(--ink-3);}
  .g-pista{fill:var(--grid);}
  .g-barra{fill:var(--s1);}
  .g-barra.excedida{fill:var(--crit);}
  .g-marca{stroke:var(--ink-1); stroke-width:2; stroke-linecap:round; opacity:.55;}
  .g-rejilla{stroke:var(--grid); stroke-width:1;}
  .g-linea{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .g-punto{stroke:var(--surface-1); stroke-width:2;}
  .g-serie1{stroke:var(--s1);} circle.g-serie1{fill:var(--s1);}
  .g-serie2{stroke:var(--s2);} circle.g-serie2{fill:var(--s2);}
  .g-tocable{cursor:pointer;}
  .legend i.g-fondo1{background:var(--s1);}
  .legend i.g-fondo2{background:var(--s2);}

  .tabla-datos{margin-top:12px;}
  .tabla-datos summary{font-size:12px; font-weight:700; color:var(--accent); cursor:pointer; padding:4px 0;}
  .tabla-datos table{margin-top:6px;}

  .hero-link{color:#fff; text-decoration:underline;}
  .mood.aviso{background:var(--warn-wash);}
  .mood.aviso .mood-ico{color:var(--warn);}

  /* ---------- movimientos: filtros y paginación ---------- */
  a.chip{text-decoration:none; display:inline-flex; align-items:center; gap:6px;}
  .chip-ico svg{flex-shrink:0;}
  .paginacion{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px;}
  .paginacion .btn{text-decoration:none;}

  /* ---------- presupuestos ---------- */
  .mes-nav{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px;}
  .mes-nav span{font-size:14px; font-weight:700; text-transform:capitalize;}
  .mes-nav .btn{text-decoration:none; min-width:44px;}
  .presu{display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--grid);}
  .presu:last-of-type{border-bottom:none;}
  .presu-ico{width:38px; height:38px; border-radius:13px; flex-shrink:0; color:var(--s1);
             background:var(--accent-wash); display:flex; align-items:center; justify-content:center;}
  .presu-info{flex:1; min-width:0;}
  .presu-info label{margin:0; font-size:13px; color:var(--ink-1); font-weight:600;}
  .presu-info .muted{display:block; font-size:11px; margin-top:1px;}
  .presu-campo{display:flex; align-items:center; gap:3px; border:1.5px solid var(--grid); border-radius:10px;
               padding:4px 9px; width:118px; flex-shrink:0; transition:border-color .15s;}
  .presu-campo:focus-within{border-color:var(--accent);}
  .presu-campo .signo{font-size:13px; font-weight:700; color:var(--ink-3);}
  .presu-campo input{border:none; padding:4px 0; font-size:15px; font-weight:700; text-align:right;
                     background:none; font-variant-numeric:tabular-nums;}
  .presu-campo input:focus{outline:none;}

  /* ---------- tooltip de gráficos ---------- */
  #tooltip{position:fixed; pointer-events:none; background:var(--ink-1); color:var(--surface-1);
           font-size:11.5px; line-height:1.4; padding:7px 10px; border-radius:9px; opacity:0;
           transition:opacity .1s; z-index:60; white-space:nowrap; box-shadow:var(--shadow-lift);}
  #tooltip b{display:block; font-weight:700;}