:root{
    --bg:#0c2438; --panel:#123049; --panel-line:#1e435e; --panel-line-soft:#173a53;
    --steel:#9bd3e0; --cyan:#9bd3e0; --silver:#d7dbe2; --pink:#f28fb2;
    --text:#eef3f6; --text-dim:#9fb4c2;
    /* update285: subcategorías de "El Mañana" — cada una con su propio color fijo (nunca se reciclan
       ni se generan al vuelo), para que un bloque de Rutina se identifique de un vistazo sin tener
       que leer el nombre. "Vivir" se queda con --pink hasta que tenga sus propias subcategorías. */
    --mente:#b98af0; --estudio:#f0c869; --scw:#6fc6e0; --salud:#7bd9a0; --dinero:#f0a35c;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{
    background: radial-gradient(circle at 50% -10%, #163a56 0%, var(--bg) 55%);
    color:var(--text); font-family:'Inter', sans-serif; min-height:100vh;
    padding:32px 16px 60px; display:flex; flex-direction:column; align-items:center; gap:26px;
  }
  header{ text-align:center; }
  header .callsign{ font-family:'Orbitron', sans-serif; font-weight:700; font-size:12px; letter-spacing:4px; color:var(--steel); }
  header .olivia-line{ width:56px; height:2px; margin:10px auto 0; background:var(--pink); border-radius:2px; box-shadow:0 0 6px rgba(242,143,178,.7); }
  header h1{ font-family:'Orbitron', sans-serif; font-weight:900; font-size:26px; margin-top:14px; color:var(--text); }
  header p{ color:var(--text-dim); font-size:13px; margin-top:6px; }
  header .clock{ font-family:'Orbitron', sans-serif; font-size:20px; color:var(--cyan); margin-top:10px; letter-spacing:1px; }
  header .tag{ margin-top:14px; font-size:10px; letter-spacing:3px; color:var(--text-dim); }

  .reminder-btn{
    font-family:'Inter', sans-serif; font-size:12px; font-weight:500; padding:9px 16px; border-radius:20px;
    border:1px solid var(--panel-line); background:var(--panel); color:var(--text-dim); cursor:pointer;
    display:flex; align-items:center; gap:7px; transition:all .15s ease;
  }
  .reminder-btn.on{ border-color:var(--pink); color:var(--pink); box-shadow:0 0 8px rgba(242,143,178,.35); }

  .message-card{ width:100%; max-width:480px; background:var(--panel); border:1px solid var(--panel-line); border-radius:8px; padding:16px 20px; text-align:center; }
  .message-card .greeting{ font-size:14px; color:var(--text); font-weight:500; }
  .message-card .quote{ font-size:13px; font-style:italic; color:var(--text-dim); margin-top:10px; line-height:1.5; }
  .message-card .quote .who{ color:var(--pink); font-style:normal; font-weight:500; }
  .message-card .next-msg{ margin-top:12px; background:none; border:none; color:var(--steel); font-size:11px; letter-spacing:1px; cursor:pointer; font-family:'Orbitron', sans-serif; }
  .message-card .next-msg:hover{ color:var(--cyan); }

  /* ---- shell: sidebar + main ---- */
  .app-shell{ width:100%; max-width:620px; display:flex; gap:16px; align-items:flex-start; }
  .sidebar{ display:flex; flex-direction:column; gap:8px; width:128px; flex-shrink:0; }
  .sidebar button{
    font-family:'Orbitron', sans-serif; font-size:10.5px; letter-spacing:.5px; text-align:left;
    padding:12px 14px; border-radius:8px; border:1px solid var(--panel-line); background:var(--panel);
    color:var(--text-dim); cursor:pointer; transition:all .15s ease; line-height:1.4;
  }
  .sidebar button .sub{ display:block; font-family:'Inter',sans-serif; font-size:9.5px; color:var(--text-dim); font-weight:400; margin-top:2px; letter-spacing:0; }
  .sidebar button.active-module{ background:var(--cyan); color:#0c2438; border-color:var(--cyan); box-shadow:0 0 10px rgba(155,211,224,.4); }
  .sidebar button.active-module .sub{ color:#0c2438; opacity:.75; }

  .main-col{ flex:1; min-width:0; width:100%; display:flex; flex-direction:column; align-items:center; gap:20px; }
  .module{ display:none; flex-direction:column; align-items:center; gap:20px; width:100%; min-width:0; }
  .module.active-module{ display:flex; }

  @media (max-width:520px){
    .app-shell{ flex-direction:column; }
    .sidebar{ flex-direction:row; width:100%; overflow-x:auto; }
    .sidebar button{ flex:1; text-align:center; }
  }
  @media (min-width:900px){
    .app-shell{ max-width:900px; }
    .stat-grid{ grid-template-columns:repeat(3, 1fr); }
    .run-row2{ flex-wrap:nowrap; }
  }
  @media (min-width:1280px){
    .app-shell{ max-width:1280px; }
    .stat-grid{ grid-template-columns:repeat(4, 1fr); }
    .sidebar{ width:150px; }
    .drawer-panel{ width:min(520px, 100vw); }
  }

  .tabs{ display:flex; gap:8px; background:var(--panel); border:1px solid var(--panel-line); border-radius:30px; padding:4px; max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tabs button{
    font-family:'Orbitron', sans-serif; font-size:11px; letter-spacing:1.5px; padding:9px 16px; border-radius:24px;
    border:none; background:transparent; color:var(--text-dim); cursor:pointer; transition:all .15s ease; flex-shrink:0;
  }
  .tabs button.active{ background:var(--cyan); color:#0c2438; box-shadow:0 0 10px rgba(155,211,224,.5); }

  .view{ width:100%; display:none; flex-direction:column; align-items:center; gap:20px; min-width:0; }
  .view.active{ display:flex; }

  /* update262: sub-pestañas internas de Gestión de Vulnerabilidades — no es la barra .tabs directa
     del módulo (esa sigue siendo única por módulo), así que se muestra/oculta con su propia clase. */
  .vuln-subview{ width:100%; display:none; flex-direction:column; align-items:center; gap:20px; }
  .vuln-subview.active{ display:flex; }

  .reactor-wrap{ position:relative; width:190px; height:190px; }
  svg.reactor{ width:100%; height:100%; transform:rotate(-90deg); }
  .ring-bg{ fill:none; stroke:var(--panel-line); stroke-width:9; }
  .ring-fg{ fill:none; stroke:var(--cyan); stroke-width:9; stroke-linecap:round; filter:drop-shadow(0 0 8px rgba(155,211,224,.55)); transition:stroke-dashoffset .6s ease, stroke .3s ease; }
  .ring-fg.warn{ stroke:#f2b84f; filter:drop-shadow(0 0 8px rgba(242,184,79,.55)); }
  .ring-fg.danger{ stroke:#ff6b6b; filter:drop-shadow(0 0 8px rgba(255,107,107,.55)); }
  .reactor-center{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .reactor-center .pct{ font-family:'Orbitron', sans-serif; font-size:32px; font-weight:700; color:var(--cyan); transition:color .3s ease; }
  .reactor-center .pct.warn{ color:#f2b84f; }
  .reactor-center .pct.danger{ color:#ff6b6b; }
  .reactor-center .label{ font-size:10px; letter-spacing:2px; color:var(--text-dim); margin-top:4px; }

  .status-line{ font-size:12px; text-align:center; max-width:420px; line-height:1.5; font-weight:500; }
  .status-line.ok{ color:var(--cyan); } .status-line.warn{ color:#f2b84f; } .status-line.danger{ color:#ff6b6b; }

  .wrap{ width:100%; display:flex; flex-direction:column; gap:16px; }

  .day-pills{ display:flex; gap:6px; width:100%; justify-content:center; flex-wrap:wrap; }
  .day-pills button{
    font-family:'Orbitron', sans-serif; font-size:11px; letter-spacing:1px; padding:7px 11px; border-radius:16px;
    border:1px solid var(--panel-line); background:var(--panel); color:var(--text-dim); cursor:pointer; transition:all .15s ease;
  }
  .day-pills button.today{ border-color:var(--pink); }
  .day-pills button.selected{ background:var(--cyan); color:#0c2438; border-color:var(--cyan); }
  .preview-tag{ font-size:11px; color:var(--pink); text-align:center; width:100%; }

  .hpd-toggle{ font-size:11.5px; color:var(--cyan); cursor:pointer; text-decoration:underline; display:inline-block; margin:4px 0; }
  .hpd-grid{ display:none; border:1px solid var(--panel-line); border-radius:8px; padding:10px; margin-top:6px; }
  .hpd-grid.open{ display:block; }
  .hpd-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .hpd-row:last-child{ margin-bottom:0; }
  .hpd-row .hpd-day{ flex:0 0 34px; font-size:11px; color:var(--text-dim); }
  .hpd-row input[type="time"]{ flex:1; background:var(--bg); border:1px solid var(--panel-line); border-radius:6px; padding:6px 8px; color:var(--text); font-size:12px; min-width:0; }
  .hpd-hint{ font-size:11px; color:var(--text-dim); margin-bottom:8px; }

  .block{ background:var(--panel); border:1px solid var(--panel-line); border-radius:6px; overflow:hidden; width:100%; }
  .block-head{ display:flex; justify-content:space-between; align-items:baseline; padding:14px 18px 10px; border-bottom:1px solid var(--panel-line); }
  .block-head .name{ font-family:'Orbitron', sans-serif; font-size:12.5px; letter-spacing:1.5px; color:var(--silver); }
  .block-head .window{ font-size:11px; color:var(--pink); }

  ul.habits{ list-style:none; }
  li.habit{ padding:13px 18px; border-bottom:1px solid var(--panel-line-soft); cursor:pointer; transition:background .12s ease; }
  li.habit:last-child{ border-bottom:none; }
  li.habit:hover{ background:#173a54; }
  li.habit:active{ background:#1c4460; }
  li.habit.preview{ cursor:default; opacity:.72; }
  li.habit.preview:hover{ background:none; }

  .row{ display:flex; align-items:flex-start; justify-content:space-between; gap:13px; }
  .check{ width:21px; height:21px; border-radius:5px; margin-top:1px; border:2px solid var(--text-dim); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s ease; }
  li.habit.done .check{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(155,211,224,.5); }
  .check svg{ width:12px; height:12px; opacity:0; transition:opacity .1s; }
  li.habit.done .check svg{ opacity:1; }

  .habit-btns{ display:flex; gap:7px; flex-shrink:0; margin-top:1px; }
  .hb-btn{ width:28px; height:28px; border-radius:50%; border:2px solid var(--panel-line); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:all .15s ease; padding:0; }
  .hb-btn svg{ width:13px; height:13px; opacity:.35; transition:opacity .1s; }
  .hb-done:hover{ border-color:var(--cyan); } .hb-missed:hover{ border-color:#ff6b6b; }
  li.habit.done .hb-done, .rule-row.done .hb-done{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 8px rgba(155,211,224,.5); }
  li.habit.done .hb-done svg, .rule-row.done .hb-done svg{ opacity:1; stroke:#0c2438; }
  li.habit.missed .hb-missed, .rule-row.missed .hb-missed{ background:#ff6b6b; border-color:#ff6b6b; box-shadow:0 0 8px rgba(255,107,107,.4); }
  li.habit.missed .hb-missed svg, .rule-row.missed .hb-missed svg{ opacity:1; }
  li.habit.missed .habit-info .name{ color:#ff6b6b; }
  .rule-row.missed span.rname{ color:#ff6b6b; }
  .hb-na:hover{ border-color:var(--text-dim); }
  li.habit.na .hb-na, .rule-row.na .hb-na{ background:var(--text-dim); border-color:var(--text-dim); }
  li.habit.na .hb-na svg, .rule-row.na .hb-na svg{ opacity:1; }
  li.habit.na .habit-info .name{ color:var(--text-dim); font-style:italic; }
  li.habit.na .habit-info .name::after{ content:'— no aplica'; margin-left:6px; font-size:10.5px; font-style:normal; opacity:.8; }
  .rule-row.na span.rname{ color:var(--text-dim); font-style:italic; }

  .habit-info{ flex:1; min-width:0; }
  .habit-info .top{ display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
  .habit-info .name{ font-size:14px; font-weight:500; }
  li.habit.done .habit-info .name{ color:var(--text-dim); text-decoration:line-through; }
  .habit-info .time{ font-size:11px; color:var(--steel); white-space:nowrap; flex-shrink:0; }
  .habit-info .purpose{ font-size:12px; font-style:italic; color:var(--text-dim); margin-top:4px; line-height:1.45; }
  .habit-info .streak{ font-size:11px; color:var(--pink); margin-top:5px; }

  li.habit.overdue{ background:rgba(255,90,90,.08); }
  li.habit.overdue .habit-info .time{ color:#ff6b6b; font-weight:600; }
  li.habit.overdue .habit-info .name::after{ content:'⏰ vencida'; margin-left:8px; font-size:10px; color:#ff6b6b; font-weight:500; display:inline-block; }

  .focus-tag{ font-family:'Orbitron', sans-serif; font-size:10px; letter-spacing:1.5px; color:var(--pink); padding:12px 18px 0; }
  .focus-empty{ background:var(--panel); border:1px solid var(--panel-line); border-radius:6px; padding:20px; text-align:center; color:var(--text-dim); font-size:13px; width:100%; }
  .rules-strip{ width:100%; background:var(--panel); border:1px solid var(--panel-line); border-radius:6px; overflow:hidden; }
  .rules-strip .block-head{ padding:12px 18px 8px; }
  .rule-row{ display:flex; align-items:center; justify-content:space-between; gap:11px; padding:10px 18px; border-bottom:1px solid var(--panel-line-soft); font-size:13px; }
  .rule-row:last-child{ border-bottom:none; }
  .rule-row .check{ width:18px; height:18px; }
  .rule-row.done span.rname{ color:var(--text-dim); text-decoration:line-through; }

  .dash-card{ background:var(--panel); border:1px solid var(--panel-line); border-radius:6px; padding:16px 18px; width:100%; }

  .gap-q-card{ background:rgba(255,255,255,.025); border:1px solid var(--panel-line-soft); border-radius:10px; padding:12px 14px; margin-bottom:10px; transition:border-color .15s; }
  .gap-q-card:hover{ border-color:var(--panel-line); }
  .gap-q-card-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
  .gap-q-card-num{ display:inline-block; background:var(--panel); border:1px solid var(--panel-line); color:var(--cyan); font-size:10.5px; font-weight:700; border-radius:5px; padding:2px 7px; margin-right:7px; white-space:nowrap; }
  .gap-q-card-title{ font-size:12.5px; font-weight:700; line-height:1.4; }
  .gap-q-card-req{ font-size:11px; color:var(--text-dim); white-space:pre-line; line-height:1.5; margin:9px 0 0; padding-top:9px; border-top:1px solid var(--panel-line-soft); }
  .gap-q-card-bottom{ display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:10px; }
  #finGroupsContainer{ display:flex; flex-direction:column; gap:16px; width:100%; }
  .dash-card h3{ font-family:'Orbitron', sans-serif; font-size:12px; letter-spacing:1.5px; color:var(--silver); margin-bottom:12px; }
  /* update460: contador de tareas por bloque en ITSM → HOY (pedido de Giancarlo con su captura anotada a mano). */
  .hoy-count{ display:inline-block; background:rgba(255,255,255,.08); border-radius:9px; font-size:10px; font-weight:700; padding:1px 7px; margin-left:6px; vertical-align:middle; letter-spacing:0; font-family:'Inter', sans-serif; }
  .grp-figures{ font-family:'Inter', sans-serif; font-weight:700; letter-spacing:0; font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--cyan); }
  .bar-row{ margin-bottom:12px; } .bar-row:last-child{ margin-bottom:0; }
  .bar-row .bar-top{ display:flex; justify-content:space-between; font-size:12.5px; margin-bottom:5px; }
  .bar-row .bar-top .bname{ color:var(--text); }
  .bar-row .bar-top .bval{ color:var(--cyan); font-family:'Inter', sans-serif; font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:0; font-size:12px; }
  .bar-row .bar-top .bval.over{ color:#ff6b6b; }
  .bar-track{ height:8px; border-radius:4px; background:var(--panel-line); overflow:hidden; position:relative; }
  .bar-track::after{ content:''; position:absolute; top:-2px; bottom:-2px; left:80%; width:2px; background:rgba(255,255,255,.45); }
  .bar-track.nomark::after{ display:none; }
  .bar-fill{ height:100%; background:var(--cyan); border-radius:4px; box-shadow:0 0 6px rgba(155,211,224,.5); transition:width .5s ease, background .3s ease; }
  .bar-fill.warn{ background:#f2b84f; } .bar-fill.danger{ background:#ff6b6b; }

  /* update158: los 3 cuadros resumen de Préstamos, con el mismo lenguaje visual (acento de color a
     la izquierda) que las tarjetas de préstamo de abajo, para que se vean como un mismo conjunto */
  .loan-summary-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(160px, 1fr)); gap:12px; }
  .loan-summary-box{ background:var(--panel); border:1px solid var(--panel-line); border-left:4px solid var(--acc-color, var(--cyan)); border-radius:6px; padding:16px 18px; text-align:center; }
  .loan-summary-box .num{ font-family:'Orbitron',sans-serif; font-size:23px; color:var(--acc-color, var(--cyan)); }
  .loan-summary-box .lbl{ font-size:10.5px; color:var(--text-dim); letter-spacing:1px; margin-top:5px; }

  /* update156: préstamos agrupados por categoría/dominio, cada uno como una tarjeta visualmente independiente */
  .loan-category-group{ margin-bottom:22px; } .loan-category-group:last-child{ margin-bottom:0; }
  .loan-category-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:0 2px 9px; }
  .loan-category-head .cat-name{ display:flex; align-items:center; gap:8px; font-family:'Orbitron',sans-serif; font-size:11.5px; letter-spacing:1.5px; color:var(--silver); }
  .loan-category-head .cat-dot{ width:10px; height:10px; border-radius:50%; flex-shrink:0; box-shadow:0 0 6px currentColor; }
  .loan-category-head .cat-sub{ font-size:11px; color:var(--text-dim); font-variant-numeric:tabular-nums; }
  .loan-cards-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:12px; }
  .loan-card{ background:var(--panel); border:1px solid var(--panel-line); border-left:3px solid var(--cat-color, var(--cyan)); border-radius:6px; padding:14px 16px; }
  .loan-card .loan-head{ display:flex; justify-content:space-between; align-items:center; gap:8px; margin-bottom:9px; }
  .loan-card .loan-name{ font-size:13.5px; font-weight:700; color:var(--text); }
  .loan-card .loan-cat-select{ font-size:9.5px; background:var(--bg); color:var(--text-dim); border:1px solid var(--panel-line); border-radius:10px; padding:3px 6px; cursor:pointer; }
  .loan-card .loan-figs{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--text-dim); margin-top:7px; }
  .loan-card .loan-figs b{ color:var(--cyan); font-weight:700; }
  .loan-card .loan-toggle{ font-size:10.5px; color:var(--cyan); cursor:pointer; text-decoration:underline; margin-top:11px; display:inline-block; }
  .loan-card .loan-detail{ display:none; margin-top:10px; border-top:1px solid var(--panel-line-soft); padding-top:10px; }
  .loan-card .loan-detail.open{ display:block; }

  .streak-list{ list-style:none; }
  .streak-list li{ display:flex; justify-content:space-between; align-items:center; padding:9px 0; border-bottom:1px solid var(--panel-line-soft); font-size:13px; }
  .streak-list li:last-child{ border-bottom:none; }
  .streak-list .fire{ color:var(--pink); font-family:'Orbitron', sans-serif; font-size:12px; }

  .stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
  .stat-box{ background:var(--panel); border:1px solid var(--panel-line); border-radius:6px; padding:14px 16px; text-align:center; }
  .stat-box .num{ font-family:'Orbitron', sans-serif; font-size:22px; color:var(--cyan); }
  .stat-box .lbl{ font-size:10.5px; color:var(--text-dim); letter-spacing:1px; margin-top:4px; }
  .stat-box .sub{ font-size:10.5px; color:var(--text-dim); margin-top:6px; min-height:13px; }
  .stat-box .sub.up{ color:#7fd88f; }
  .stat-box .sub.down{ color:#ff6b6b; }

  /* update209 (parte 5): tarjetas "hero" para los dos números principales de un embudo comercial
     (Pipeline / Forecast) — más grandes y con un acento de color a la izquierda, para que salten a
     la vista antes que el resto de las métricas de apoyo. */
  .hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; width:100%; }
  .hero-stat{ background:var(--panel); border:1px solid var(--panel-line); border-left:4px solid var(--cyan); border-radius:6px; padding:16px 18px; }
  .hero-stat.pink{ border-left-color:var(--pink); }
  .hero-stat .num{ font-family:'Orbitron', sans-serif; font-size:30px; line-height:1.1; color:var(--cyan); }
  .hero-stat.pink .num{ color:var(--pink); }
  .hero-stat .lbl{ font-size:11px; color:var(--text-dim); letter-spacing:1px; margin-top:6px; }
  .hero-stat .sub{ font-size:11px; color:var(--text-dim); margin-top:2px; }
  @media (max-width:640px){ .hero-grid{ grid-template-columns:1fr; } }

  .run-card, .fin-card{ background:var(--panel); border:1px solid var(--panel-line); border-radius:6px; padding:18px 20px; width:100%; }
  .run-card h3, .fin-card h3{ font-family:'Orbitron', sans-serif; font-size:12px; letter-spacing:1.5px; color:var(--silver); margin-bottom:14px; }
  .run-field, .fin-field{ margin-bottom:14px; }
  .run-field label, .fin-field label{ display:block; font-size:11.5px; color:var(--text-dim); margin-bottom:6px; letter-spacing:.5px; }
  .run-field input, .fin-field input, .fin-field select{
    width:100%; background:var(--bg); border:1px solid var(--panel-line); border-radius:5px; padding:9px 12px;
    color:var(--text); font-size:14px; font-family:'Inter', sans-serif;
  }
  /* update479, pedido explícito de Giancarlo: varios <textarea> del app (sobre todo en Documentación
     ISO, donde se le escriben instrucciones a la IA) quedaban angostos — un <textarea> suelto, sin
     esta regla, no hereda el width:100% que sí tienen los <input>/<select> de arriba, así que se
     veía con el ancho mínimo del navegador. Esta regla aplica a TODOS los <textarea> sueltos del app
     (los que ya traían su propio style="width:100%;..." en línea no cambian, porque un estilo en
     línea siempre gana sobre esta clase). */
  .run-field textarea, .fin-field textarea{
    width:100%; background:var(--bg); border:1px solid var(--panel-line); border-radius:5px; padding:9px 12px;
    color:var(--text); font-size:14px; font-family:'Inter', sans-serif; resize:vertical;
  }
  .run-row2{ display:flex; gap:10px; } .run-row2 input{ flex:1; }
  .run-toggle{ display:flex; gap:8px; margin-bottom:14px; }
  .run-toggle button{ flex:1; padding:9px; border-radius:5px; border:1px solid var(--panel-line); background:var(--bg); color:var(--text-dim); font-size:12px; cursor:pointer; transition:all .15s ease; }
  .run-toggle button.active{ background:var(--cyan); color:#0c2438; border-color:var(--cyan); }
  /* update280: bloques de "base de datos" en Comercial → Empresas — cada uno es un botón que carga
     solo las empresas de esa base de datos (en vez de cargarlas todas de una), ver loadMarketingCompanies. */
  .mkt-lista-block{ padding:10px 14px; border-radius:6px; border:1px solid var(--panel-line); background:var(--bg);
    color:var(--text-dim); font-size:12px; cursor:pointer; transition:all .15s ease; text-align:left; min-width:150px; }
  .mkt-lista-block:hover{ border-color:var(--cyan); }
  .mkt-lista-block.active{ background:var(--cyan); color:#0c2438; border-color:var(--cyan); }
  .mkt-lista-block .mkt-lista-block-nombre{ font-weight:700; margin-bottom:3px; }
  .mkt-lista-block .mkt-lista-block-count{ font-size:11px; opacity:.85; }
  .run-submit, .fin-submit{
    width:100%; padding:11px; border-radius:5px; border:none; background:var(--cyan); color:#0c2438;
    font-family:'Orbitron', sans-serif; font-size:12px; letter-spacing:1px; cursor:pointer; font-weight:700; margin-top:4px;
  }
  .run-submit.alt, .fin-submit.alt{ background:var(--pink); }
  .run-result{ margin-top:14px; text-align:center; font-size:13px; color:var(--cyan); min-height:18px; }
  .run-log, .fin-log{ list-style:none; margin-top:6px; }
  .run-log li, .fin-log li{ display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid var(--panel-line-soft); font-size:12.5px; }
  .run-log li:last-child, .fin-log li:last-child{ border-bottom:none; }
  .rl-dist, .fl-cat{ color:var(--text); } .rl-detail, .fl-detail{ color:var(--text-dim); }
  .run-empty, .fin-empty{ color:var(--text-dim); font-size:12.5px; text-align:center; padding:10px 0; }

  /* listas de solo lectura tipo "clave: valor" — Mi Perfil, política/SSO vigente, detalle de ambiente */
  .kv-list{ list-style:none; }
  .kv-list li{ display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--panel-line-soft); font-size:12.5px; }
  .kv-list li:last-child{ border-bottom:none; }
  .kv-list .kv-label{ color:var(--text-dim); flex-shrink:0; }
  .kv-list .kv-value{ color:var(--text); text-align:right; word-break:break-word; }

  /* update159: tareas/ITSM como tarjetas independientes (mismo lenguaje visual que las de Préstamos)
     en vez de una lista densa de texto corrido */
  .ticket-cards-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); gap:12px; }
  .ticket-card{ background:var(--panel); border:1px solid var(--panel-line); border-left:3px solid var(--pr-color, var(--cyan)); border-radius:6px; padding:13px 15px; display:flex; flex-direction:column; gap:6px; cursor:pointer; transition:border-color .15s ease, transform .1s ease; }
  .ticket-card:hover{ border-color:var(--cyan); }
  .ticket-card .t-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; font-size:13px; font-weight:600; color:var(--text); line-height:1.35; }
  .ticket-card .t-status{ font-size:9px; letter-spacing:.5px; padding:3px 8px; border-radius:10px; background:var(--bg); border:1px solid var(--panel-line); color:var(--text-dim); white-space:nowrap; text-transform:uppercase; flex-shrink:0; }
  .ticket-card .t-priority{ font-size:9px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:var(--pr-color, var(--text-dim)); }
  .ticket-card .t-client{ font-size:11px; color:var(--pink); }
  .ticket-card .t-desc{ font-size:11.5px; color:var(--text-dim); }
  .ticket-actions{ display:flex; gap:6px; margin-top:auto; padding-top:8px; flex-wrap:wrap; }
  .ticket-actions button{
    font-size:10.5px; padding:5px 10px; border-radius:12px; border:1px solid var(--panel-line);
    background:var(--bg); color:var(--text-dim); cursor:pointer;
  }
  .ticket-actions button:hover{ border-color:var(--cyan); color:var(--cyan); }

  .hist-table{ width:100%; max-height:340px; overflow-y:auto; }
  .hist-row{ display:grid; grid-template-columns:1fr 1fr 1fr 1fr; gap:6px; padding:8px 4px; border-bottom:1px solid var(--panel-line-soft); font-size:11.5px; }
  .hist-row.head{ color:var(--text-dim); font-family:'Orbitron', sans-serif; font-size:9.5px; letter-spacing:.5px; }
  .hist-row span{ color:var(--text); }
  .hist-row .pain{ color:#ff6b6b; }

  footer{ text-align:center; color:var(--text-dim); font-size:11.5px; max-width:480px; line-height:1.6; }
  footer strong{ color:var(--cyan); }

  /* login */
  #loginOverlay{
    position:fixed; inset:0; background:var(--bg); z-index:100;
    display:flex; align-items:center; justify-content:center; padding:20px;
  }
  #loginOverlay.hidden{ display:none; }
  .login-card{
    width:100%; max-width:340px; background:var(--panel); border:1px solid var(--panel-line);
    border-radius:10px; padding:30px 26px; text-align:center;
  }
  .login-card .callsign{ font-family:'Orbitron', sans-serif; font-weight:700; font-size:11px; letter-spacing:4px; color:var(--steel); }
  .login-card .olivia-line{ width:48px; height:2px; margin:10px auto 18px; background:var(--pink); border-radius:2px; box-shadow:0 0 6px rgba(242,143,178,.7); }
  .login-card h2{ font-family:'Orbitron', sans-serif; font-size:18px; margin-bottom:20px; }
  .login-card input{
    width:100%; background:var(--bg); border:1px solid var(--panel-line); border-radius:6px;
    padding:11px 13px; color:var(--text); font-size:14px; margin-bottom:12px; font-family:'Inter', sans-serif;
  }
  .login-card button{
    width:100%; padding:12px; border-radius:6px; border:none; background:var(--cyan); color:#0c2438;
    font-family:'Orbitron', sans-serif; font-size:12px; letter-spacing:1px; cursor:pointer; font-weight:700; margin-top:6px;
  }
  .login-card .error{ color:#ff6b6b; font-size:12px; margin-top:12px; min-height:16px; }

  /* update556, pedido explícito de Giancarlo: botoncito "ojito" para ver la contraseña del login
     SOLO mientras se mantiene presionado (ver el wiring en olivia-app.js). #loginPassEyeBtn (id, no
     clase) a propósito -- así la regla gana siempre sobre ".login-card button" de arriba (ENTRAR),
     sin tener que repetir selectores largos. */
  .login-pass-wrap{ position:relative; margin-bottom:12px; }
  .login-pass-wrap input{ margin-bottom:0; padding-right:42px; }
  #loginPassEyeBtn{
    position:absolute; right:4px; top:50%; transform:translateY(-50%);
    width:32px; height:32px; padding:0; margin:0; display:flex; align-items:center; justify-content:center;
    background:none; border:none; border-radius:6px; cursor:pointer; font-size:16px; line-height:1;
    color:var(--text-dim); touch-action:none; -webkit-tap-highlight-color:transparent; user-select:none;
  }
  #loginPassEyeBtn:hover{ color:var(--text); background:var(--panel-line); }
  #loginPassEyeBtn:active{ color:var(--cyan); }

  #appShell{ display:none; }
  #appShell.visible{ display:contents; }

  .logout-btn{
    font-family:'Inter', sans-serif; font-size:11px; color:var(--text-dim); background:none;
    border:none; cursor:pointer; text-decoration:underline;
  }
  /* ============ DRAWER REUTILIZABLE ============ */
  .drawer-overlay{
    position:fixed; inset:0; background:rgba(6,16,26,.6); backdrop-filter:blur(2px);
    opacity:0; pointer-events:none; transition:opacity .2s ease; z-index:200;
  }
  .drawer-overlay.open{ opacity:1; pointer-events:auto; }
  .drawer-panel{
    position:fixed; top:0; right:0; height:100%; width:min(440px, 100vw);
    background:var(--panel); border-left:1px solid var(--panel-line);
    box-shadow:-8px 0 24px rgba(0,0,0,.35);
    transform:translateX(100%); transition:transform .25s ease; z-index:201;
    display:flex; flex-direction:column;
  }
  .drawer-panel.open{ transform:translateX(0); }
  .drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 18px; border-bottom:1px solid var(--panel-line); flex-shrink:0;
  }
  .drawer-head span{ font-size:15px; font-weight:600; color:var(--text); padding-right:12px; }
  #drawerCloseBtn{
    background:none; border:1px solid var(--panel-line); color:var(--text-dim);
    width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; flex-shrink:0;
  }
  #drawerCloseBtn:hover{ border-color:var(--cyan); color:var(--cyan); }
  .drawer-content{ padding:18px; overflow-y:auto; flex:1; }
  @media (max-width: 640px){
    .drawer-panel{ width:100vw; }
  }

  /* ============ MODAL GRANDE (pestaña completa) — matriz de riesgos, histórico de vulns, etc. ============ */
  .bigmodal-overlay{
    position:fixed; inset:0; background:rgba(6,16,26,.82); backdrop-filter:blur(2px);
    z-index:250; display:none; align-items:flex-start; justify-content:center;
    padding:24px 16px; overflow-y:auto;
  }
  .bigmodal-overlay.open{ display:flex; }
  .bigmodal-panel{
    width:100%; max-width:1180px; background:var(--panel); border:1px solid var(--panel-line);
    border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.55); display:flex; flex-direction:column;
    min-height:60vh;
  }
  .bigmodal-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:1px solid var(--panel-line); flex-shrink:0; position:sticky; top:0;
    background:var(--panel); border-radius:14px 14px 0 0; z-index:2;
  }
  .bigmodal-head span{ font-family:'Orbitron', sans-serif; font-size:13.5px; letter-spacing:1.5px; color:var(--text); padding-right:12px; }
  #bigmodalCloseBtn{
    background:none; border:1px solid var(--panel-line); color:var(--text-dim);
    width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:15px; flex-shrink:0;
  }
  #bigmodalCloseBtn:hover{ border-color:var(--cyan); color:var(--cyan); }
  .bigmodal-content{ padding:20px; overflow-x:auto; }
  @media (max-width: 640px){
    .bigmodal-overlay{ padding:0; }
    .bigmodal-panel{ max-width:100vw; min-height:100vh; border-radius:0; }
    .bigmodal-head{ border-radius:0; }
  }

  /* matriz mensual tipo Excel (controles de riesgo, y cualquier otra grilla mes-a-mes). El ancho mínimo
     grande (que obliga scroll horizontal) solo aplica a las grillas realmente anchas — 12 meses o varias
     categorías × varias métricas — vía .matrix-table-wide; una tabla simple (pocas columnas, como el
     detalle de GAP ISO o el listado del Plan de Trabajo) usa solo .matrix-table y se ajusta a la pantalla. */
  .matrix-table{ border-collapse:collapse; font-size:11.5px; width:100%; max-width:100%; }
  .matrix-table-wide{ min-width:1400px; }
  .matrix-table th, .matrix-table td{ border:1px solid var(--panel-line); padding:6px 7px; text-align:left; vertical-align:top; }
  .matrix-table thead th{
    background:var(--bg); color:var(--text-dim); position:sticky; top:0; z-index:1;
    font-family:'Orbitron', sans-serif; font-size:9.5px; letter-spacing:.5px; text-align:center;
  }
  .matrix-table th.matrix-col-fixed, .matrix-table td.matrix-col-fixed{
    position:sticky; left:0; background:var(--panel); z-index:1; min-width:200px; max-width:260px;
  }
  .matrix-table thead th.matrix-col-fixed{ z-index:3; background:var(--bg); }
  .matrix-table td.matrix-month{ text-align:center; min-width:64px; cursor:pointer; transition:background .12s ease; }
  .matrix-table td.matrix-month:hover{ background:rgba(155,211,224,.12); }
  .matrix-table th.matrix-current, .matrix-table td.matrix-current{ background:rgba(242,143,178,.1); }
  .matrix-table tbody tr.matrix-current td{ background:rgba(242,143,178,.08); }
  .matrix-table thead th.matrix-current{ color:var(--pink); }
  .matrix-pill{ display:inline-block; min-width:20px; padding:2px 6px; border-radius:10px; font-size:10.5px; font-weight:700; }
  .matrix-pill.si{ background:rgba(120,220,150,.18); color:#7ee0a0; }
  .matrix-pill.no{ background:rgba(255,107,107,.18); color:#ff6b6b; }

  /* update313: rediseño visual + funcional del Plan de trabajo de vulnerabilidades — pedido explícito
     de Giancarlo ("visualmente no se ve muy bien... traspuesto... se ve feo. mejóralo todo
     visualmente"). Tarjetas-resumen arriba (mismo lenguaje visual que .stat-box, propio para no
     tocar esa clase compartida por otros módulos), zebra + hover en la tabla, y las 4 columnas nuevas
     de "Seguimiento semana 1-4" resaltadas como grupo propio y editables in-line por celda. */
  .vuln-plan-stats{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
  .vuln-plan-stat{
    flex:1 1 120px; background:var(--bg); border:1px solid var(--panel-line); border-radius:6px;
    padding:10px 12px; text-align:center;
  }
  .vuln-plan-stat .num{ font-family:'Orbitron', sans-serif; font-size:20px; font-weight:700; line-height:1.1; }
  .vuln-plan-stat .lbl{ font-size:9.5px; color:var(--text-dim); letter-spacing:.4px; margin-top:4px; }
  .vuln-plan-stat.sev-crit .num{ color:#ff6b6b; }
  .vuln-plan-stat.sev-alta .num{ color:#e8c15a; }
  .vuln-plan-stat.sev-ok .num{ color:#7ee0a0; }
  .vuln-plan-seg-banner{
    font-size:11px; color:var(--text-dim); background:rgba(155,211,224,.07);
    border:1px solid var(--panel-line); border-radius:6px; padding:8px 12px; margin-bottom:10px;
  }
  .vuln-plan-seg-banner strong{ color:var(--cyan); }
  .vuln-plan-seg-banner.cerrado{ background:rgba(255,107,107,.08); }
  .vuln-plan-seg-banner.cerrado strong{ color:#ff6b6b; }
  .vuln-plan-table tbody tr:hover td{ background:rgba(155,211,224,.05); }
  .vuln-plan-table tbody tr:nth-child(even) td{ background:rgba(255,255,255,.012); }
  .vuln-plan-table tbody tr:nth-child(even):hover td{ background:rgba(155,211,224,.06); }
  .vuln-plan-table th.vuln-seg-th{ background:rgba(155,211,224,.12); color:var(--cyan); }
  .vuln-plan-table td.vuln-seg-cell{
    min-width:160px; max-width:190px; cursor:pointer; font-size:10.5px; vertical-align:top;
    transition:background .12s ease;
  }
  .vuln-plan-table td.vuln-seg-cell:hover{ background:rgba(155,211,224,.14) !important; }
  .vuln-plan-table td.vuln-seg-cell.has-nota{ background:rgba(126,224,160,.07); }
  .vuln-plan-table td.vuln-seg-cell.cerrada{ cursor:default; opacity:.55; }
  .vuln-plan-table td.vuln-seg-cell.cerrada:hover{ background:transparent !important; }
  .vuln-seg-cell-text{
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
    white-space:pre-wrap; word-break:break-word;
  }
  .vuln-seg-cell-empty{ color:var(--text-dim); font-style:italic; }
  .vuln-seg-edit textarea{
    width:100%; resize:vertical; background:var(--input-bg,transparent); color:inherit;
    border:1px solid var(--cyan); border-radius:4px; padding:4px 6px; font:inherit; font-size:10.5px;
  }
  .vuln-seg-edit-actions{ display:flex; gap:4px; margin-top:4px; flex-wrap:wrap; }
  .vuln-seg-edit-actions button{
    border-radius:4px; border:1px solid var(--panel-line); background:var(--bg); color:inherit;
    font-size:9.5px; padding:2px 6px; cursor:pointer; font-weight:600;
  }
  .vuln-seg-edit-actions button.vuln-seg-save{ border-color:#7ee0a0; color:#7ee0a0; }
  .vuln-seg-edit-actions button.vuln-seg-del{ border-color:#ff6b6b; color:#ff6b6b; }

  /* update419 -- pedido explícito de Giancarlo ("se nos sale de la pantalla... hazlo responsive,
     cómodo y bonito"). La tabla tenía 18 columnas SIEMPRE visibles forzadas a min-width:1900px
     (vía .matrix-table-wide + estilo inline), obligando scroll horizontal constante incluso en
     pantallas grandes. Ahora arranca en modo COMPACTO (solo identificación/severidad/avance/
     responsable/estado) y dos grupos opcionales se revelan con un botón cada uno, solo cuando
     Giancarlo los necesita:
       .vuln-col-detalle  = Descripción APP/Server, URLs, Fuente, Descripción vulnerabilidad
                             (texto largo que de todas formas se ve completo al tocar la fila)
       .vuln-col-semanal  = Semana 1-4 (solo se usan al hacer seguimiento activo del mes)
     La preferencia se recuerda en localStorage -- si Giancarlo las deja abiertas, siguen abiertas
     la próxima vez. También se agrega una sombra lateral que avisa que hay más columnas por scroll
     (desaparece sola al llegar al final), y una sombra fija en la columna pegajosa para que se note
     que está "flotando" sobre el resto. */
  .vuln-plan-table{ min-width:980px; }
  .vuln-plan-table.vpt-mostrar-detalle{ min-width:1480px; }
  .vuln-plan-table.vpt-mostrar-semanal{ min-width:1680px; }
  .vuln-plan-table.vpt-mostrar-detalle.vpt-mostrar-semanal{ min-width:2180px; }
  .vuln-plan-table:not(.vpt-mostrar-detalle) .vuln-col-detalle,
  .vuln-plan-table:not(.vpt-mostrar-semanal) .vuln-col-semanal{ display:none; }
  .vuln-plan-table td.matrix-col-fixed, .vuln-plan-table th.matrix-col-fixed{
    box-shadow:3px 0 6px rgba(0,0,0,.28);
  }
  /* update503 -- pedido explícito de Giancarlo: todas las celdas del Plan de trabajo de
     vulnerabilidades centradas (antes las td heredaban text-align:left de .matrix-table, solo los
     th ya estaban centrados), y algunas columnas de texto largo un poco más angostas -- Aplicación
     o Sistema (columna fija), Descripción APP/Server, URLs y Descripción vulnerabilidad (Fuente se
     deja igual, no la mencionó). Semana 1-4 también un poco más angostas. Se escribe solo sobre
     .vuln-plan-table (no sobre .matrix-table en general) para no afectar otras tablas que reutilizan
     esa clase base (detalle de GAP ISO, etc.). */
  .vuln-plan-table td{ text-align:center; }
  .vuln-plan-table td.matrix-col-fixed, .vuln-plan-table th.matrix-col-fixed{ min-width:150px; max-width:190px; }
  .vuln-plan-table td:nth-child(8), .vuln-plan-table th:nth-child(8){ max-width:150px; word-break:break-word; }
  .vuln-plan-table td:nth-child(9), .vuln-plan-table th:nth-child(9){ max-width:130px; word-break:break-word; }
  .vuln-plan-table td:nth-child(11), .vuln-plan-table th:nth-child(11){ max-width:170px; word-break:break-word; }
  .vuln-plan-table td.vuln-seg-cell{ min-width:130px; max-width:155px; }
  .vuln-plan-toggles{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:10px; }
  .vuln-plan-toggles button{
    background:var(--bg); border:1px solid var(--panel-line); color:var(--text-dim);
    border-radius:6px; padding:6px 12px; font-size:11px; cursor:pointer; font-weight:600;
    transition:border-color .15s ease, color .15s ease, background .15s ease;
  }
  .vuln-plan-toggles button:hover{ border-color:var(--cyan); color:var(--cyan); }
  .vuln-plan-toggles button.activo{ border-color:var(--cyan); color:var(--cyan); background:rgba(155,211,224,.1); }
  .vuln-plan-table-wrap{ position:relative; border-radius:6px; }
  .vuln-plan-table-wrap::after{
    content:''; position:absolute; top:0; right:0; bottom:0; width:28px; pointer-events:none;
    background:linear-gradient(to right, transparent, var(--panel) 85%);
    opacity:1; transition:opacity .15s ease;
  }
  .vuln-plan-table-wrap.vpt-scroll-end::after{ opacity:0; }
  @media (max-width:640px){
    .vuln-plan-table td.matrix-col-fixed, .vuln-plan-table th.matrix-col-fixed{
      position:static; box-shadow:none; min-width:150px; max-width:190px;
    }
    .vuln-plan-table{ font-size:10.5px; min-width:760px; }
    .vuln-plan-table th, .vuln-plan-table td{ padding:5px 6px; }
    .vuln-plan-toggles{ gap:6px; }
    .vuln-plan-toggles button{ flex:1 1 auto; font-size:10px; padding:6px 8px; }
  }

  /* update189: tabla de ACTIVIDADES del costeo (Costeo automático / pestaña ACTIVIDADES) — misma
     familia visual de .matrix-table, con su propia clase para no afectar otras tablas (Resumen
     comercial, Esfuerzo por fase, etc.) que reutilizan .matrix-table sin estos extras.
     update195: se generalizan como .otbl-* ("Olivia table") — el kit de piezas (píldora de rol/perfil,
     badge, botón de acción, fila en edición, fila de totales) para usar por defecto en CUALQUIER
     listado nuevo que hoy sería una <ul>/<li> simple (pedido explícito de Giancarlo: toda tabla nueva
     debe verse así, no solo Actividades) — .act-* se deja como alias por compatibilidad con el CSS
     existente, ambas clases comparten exactamente las mismas reglas. */
  .act-table td, .act-table th, .otbl-table td, .otbl-table th{ vertical-align:middle; }
  .act-table tbody tr:hover td, .otbl-table tbody tr:hover td{ background:rgba(155,211,224,.06); }
  .act-table td.act-td-fase{ color:var(--text-dim); font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px; white-space:nowrap; }
  .act-table td.act-td-acciones, .otbl-table td.otbl-td-acciones{ white-space:nowrap; text-align:right; }
  .act-pill-perfil, .otbl-pill{ background:rgba(155,211,224,.16); color:var(--cyan); }
  .act-badge, .otbl-badge{
    display:inline-block; margin-left:5px; padding:1px 6px; border-radius:8px; font-size:9px;
    font-weight:700; letter-spacing:.3px; text-transform:uppercase; background:var(--bg); color:var(--text-dim);
    border:1px solid var(--panel-line); vertical-align:middle;
  }
  .act-badge-itsm, .otbl-badge-cyan{ background:rgba(155,211,224,.16); color:var(--cyan); border-color:transparent; }
  .act-entregable, .otbl-subtext{ font-size:10.5px; color:var(--text-dim); margin-top:2px; }
  .act-btn, .otbl-btn{
    background:none; border:1px solid var(--panel-line); color:var(--text-dim); border-radius:10px;
    font-size:10px; padding:3px 9px; cursor:pointer; margin-left:4px; transition:all .12s ease;
  }
  .act-btn:hover, .otbl-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
  .otbl-btn.active{ border-color:var(--cyan); color:var(--cyan); background:rgba(155,211,224,.14); }
  .act-btn-icon, .otbl-btn-icon{ padding:3px 7px; }
  .act-btn-danger:hover, .otbl-btn-danger:hover{ border-color:#ff6b6b; color:#ff6b6b; }
  .act-row-editing td, .otbl-row-highlight td{ background:rgba(155,211,224,.05); }
  .act-tfoot-total td, .otbl-tfoot-total td{
    font-family:'Orbitron', sans-serif; font-size:10px; letter-spacing:.4px; font-weight:700;
    background:var(--bg); color:var(--text);
  }
  .otbl-table td.otbl-td-nombre{ font-weight:600; }
  .otbl-empty-row td{ text-align:center; color:var(--text-dim); font-size:11.5px; padding:16px 8px; }
  .matrix-pill.blank{ background:rgba(255,255,255,.05); color:var(--text-dim); }
  /* update291 (HU-1, Camino A): un control Diario/Mensual sin Sí/No para un mes que ya llegó (o ya
     pasó) queda visualmente distinto de "sin registrar" — es lo que alimenta el resumen de
     pendientes. Un Semestral/Anual nunca usa este estado (Camino A: sin mes fijo, no hay atraso). */
  .matrix-pill.pendiente{ background:rgba(242,153,74,.20); color:#f2994a; }
  /* update300, pedido explícito de Giancarlo: marcar a mano en qué mes futuro piensa hacer un
     control Semestral/Anual (sin fecha fija) — un estado aparte de Sí/No/pendiente, nunca calculado
     solo, siempre puesto a mano con el botón 🕐 de la celda. */
  .matrix-pill.programado{ background:rgba(155,211,224,.20); color:var(--cyan); }
  .matrix-legend{ display:flex; gap:16px; flex-wrap:wrap; font-size:11px; color:var(--text-dim); margin-bottom:14px; align-items:center; }

  /* ============ MAÑANAS MILAGROSAS ============ */
  .mm-intro{ width:100%; display:flex; flex-direction:column; gap:16px; }
  .mm-phases-preview{ display:flex; flex-direction:column; gap:10px; width:100%; }
  .mm-phase-card{ background:var(--panel); border:1px solid var(--panel-line); border-radius:8px; padding:14px 16px; display:flex; align-items:center; gap:14px; }
  .mm-phase-card .ico{ font-size:20px; width:40px; height:40px; border-radius:50%; background:var(--bg); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .mm-phase-card .info{ flex:1; min-width:0; }
  .mm-phase-card .info .t{ font-family:'Orbitron', sans-serif; font-size:11.5px; letter-spacing:1px; color:var(--text); }
  .mm-phase-card .info .d{ font-size:12px; color:var(--text-dim); margin-top:4px; line-height:1.45; }
  .mm-phase-card .min{ font-family:'Orbitron', sans-serif; font-size:15px; color:var(--cyan); flex-shrink:0; }
  .mm-start-btn{
    width:100%; padding:16px; border-radius:8px; border:none; background:var(--pink); color:#33101d;
    font-family:'Orbitron', sans-serif; font-size:13px; letter-spacing:2px; font-weight:700; cursor:pointer;
    box-shadow:0 0 16px rgba(242,143,178,.35); transition:filter .15s ease;
  }
  .mm-start-btn:hover{ filter:brightness(1.08); }
  .mm-lastrun{ font-size:11.5px; color:var(--text-dim); text-align:center; }

  .mm-overlay{
    position:fixed; inset:0; background:rgba(6,16,26,.85); backdrop-filter:blur(3px);
    z-index:300; display:none; align-items:center; justify-content:center; padding:20px;
  }
  .mm-overlay.open{ display:flex; }
  .mm-panel{
    width:100%; max-width:760px; max-height:92vh; overflow-y:auto; background:var(--panel);
    border:1px solid var(--panel-line); border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.55);
    display:flex; flex-direction:column;
  }
  .mm-head{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--panel-line); flex-shrink:0; }
  .mm-steps{ display:flex; gap:6px; }
  .mm-steps span{ width:8px; height:8px; border-radius:50%; background:var(--panel-line); transition:all .2s ease; }
  .mm-steps span.done{ background:var(--cyan); }
  .mm-steps span.active{ background:var(--pink); box-shadow:0 0 6px rgba(242,143,178,.7); transform:scale(1.2); }
  .mm-close{
    background:none; border:1px solid var(--panel-line); color:var(--text-dim);
    width:30px; height:30px; border-radius:50%; cursor:pointer; font-size:14px; flex-shrink:0;
  }
  .mm-close:hover{ border-color:var(--cyan); color:var(--cyan); }
  .mm-body{ padding:22px 22px 26px; display:flex; flex-direction:column; align-items:center; gap:16px; }
  .mm-phase-title{ font-family:'Orbitron', sans-serif; font-size:15px; letter-spacing:2px; color:var(--text); text-align:center; }
  .mm-phase-sub{ font-size:11.5px; color:var(--pink); text-align:center; margin-top:-10px; letter-spacing:.5px; }
  .mm-timer{ font-family:'Orbitron', sans-serif; font-size:44px; color:var(--cyan); letter-spacing:2px; text-shadow:0 0 14px rgba(155,211,224,.4); }
  .mm-progress-track{ width:100%; height:5px; background:var(--bg); border-radius:3px; overflow:hidden; }
  .mm-progress-fill{ height:100%; background:var(--pink); width:0%; }
  .mm-media{
    width:100%; max-width:560px; border-radius:10px; overflow:hidden; border:1px solid var(--panel-line);
    background:var(--bg); position:relative; aspect-ratio:4/5; cursor:zoom-in;
  }
  .mm-media img{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; opacity:0; transition:opacity .8s ease; }
  .mm-media img.show{ opacity:1; }
  .mm-zoom-hint{ font-size:10.5px; color:var(--text-dim); text-align:center; margin-top:-10px; }

  /* update544, pedido explícito de Giancarlo: "que al darle desde el computador, por defecto se
     me haga mucho más grande" -- en Mañanas Milagrosas específicamente (no afecta Pausas
     Activas/Pomodoro/los demás overlays que comparten .mm-panel pero no usan .mm-media) las
     imágenes se ven más grandes por defecto en pantallas de escritorio, sin tener que abrir la
     lupa/lightbox para verlas bien. */
  @media (min-width:860px){
    #mmOverlay .mm-panel{ max-width:880px; }
    #mmOverlay .mm-media{ max-width:720px; }
  }

  .mm-lightbox{
    position:fixed; inset:0; background:rgba(4,10,16,.94); z-index:320; display:none;
    align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
  }
  .mm-lightbox.open{ display:flex; }
  .mm-lightbox img{ max-width:100%; max-height:100%; border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.6); }
  .mm-lightbox-close{
    position:absolute; top:18px; right:18px; background:none; border:1px solid var(--panel-line); color:var(--text);
    width:34px; height:34px; border-radius:50%; cursor:pointer; font-size:16px;
  }
  .mm-caption{ font-size:11.5px; color:var(--text-dim); text-align:center; min-height:16px; }
  .mm-text-block{ width:100%; text-align:center; font-size:13.5px; line-height:1.7; color:var(--text); }
  .mm-text-block strong{ color:var(--pink); }
  .mm-affirm-list{ list-style:none; width:100%; display:flex; flex-direction:column; gap:8px; }
  .mm-affirm-list li{ background:var(--bg); border:1px solid var(--panel-line); border-radius:6px; padding:10px 14px; font-size:13px; text-align:left; line-height:1.4; }
  .mm-commit-list{ list-style:none; width:100%; display:flex; flex-direction:column; gap:9px; max-height:260px; overflow-y:auto; padding-right:2px; }
  .mm-commit-list li{ background:var(--bg); border-left:3px solid var(--cyan); border-radius:0 6px 6px 0; padding:10px 13px; font-size:12px; line-height:1.55; text-align:left; color:var(--text-dim); }
  .mm-chapter-head{ display:flex; align-items:center; justify-content:center; gap:12px; width:100%; }
  .mm-chapter-nav{ background:none; border:1px solid var(--panel-line); color:var(--text-dim); width:26px; height:26px; border-radius:50%; cursor:pointer; flex-shrink:0; }
  .mm-chapter-nav:hover{ border-color:var(--cyan); color:var(--cyan); }
  .mm-chapter-dots{ display:flex; gap:7px; justify-content:center; }
  .mm-chapter-dots span{ width:20px; height:3px; border-radius:2px; background:var(--panel-line); cursor:pointer; }
  .mm-chapter-dots span.active{ background:var(--cyan); }
  .mm-breathe-wrap{ width:170px; height:170px; display:flex; align-items:center; justify-content:center; }
  .mm-breathe{
    width:110px; height:110px; border-radius:50%;
    background:radial-gradient(circle, rgba(155,211,224,.35), rgba(155,211,224,.04));
    border:1px solid var(--cyan); animation:mmBreathe 8s ease-in-out infinite;
  }
  @keyframes mmBreathe{ 0%,100%{ transform:scale(.7); opacity:.75; } 50%{ transform:scale(1); opacity:1; } }
  .mm-controls{ display:flex; gap:10px; width:100%; }
  .mm-controls button{
    flex:1; padding:11px; border-radius:6px; border:1px solid var(--panel-line); background:var(--bg);
    color:var(--text-dim); font-family:'Orbitron', sans-serif; font-size:10.5px; letter-spacing:1px; cursor:pointer;
  }
  .mm-controls button:hover{ border-color:var(--cyan); color:var(--cyan); }
  .mm-controls button.primary{ background:var(--cyan); color:#0c2438; border-color:var(--cyan); font-weight:700; }
  .mm-final-icon{ font-size:42px; }
  .mm-youtube-btn{
    display:block; width:100%; text-decoration:none; text-align:center; padding:13px; border-radius:6px;
    background:#ff4d4d; color:#fff; font-family:'Orbitron', sans-serif; font-size:12px; letter-spacing:1px; font-weight:700;
    box-sizing:border-box;
  }
  .mm-youtube-btn:hover{ filter:brightness(1.08); }
  @media (max-width:560px){
    .mm-panel{ max-height:100vh; border-radius:0; }
    .mm-overlay{ padding:0; }
    .mm-timer{ font-size:36px; }
    .mm-body{ padding:18px 16px 22px; }
  }

  /* ============ update342: ASISTENTE PASO A PASO DEL INFORME CISO (reusa el patrón mm-*) ============ */
  /* update427: #pwizOverlay (asistente del PPTX) reutiliza exactamente el mismo patrón visual —
     mismo selector combinado en vez de duplicar reglas. */
  #ciwOverlay .mm-panel, #pwizOverlay .mm-panel{ max-width:920px; }
  #ciwOverlay .mm-steps, #pwizOverlay .mm-steps{ gap:8px; }
  #ciwOverlay .mm-steps span, #pwizOverlay .mm-steps span{ width:auto; height:auto; border-radius:10px; padding:3px 10px; font-size:10px; font-family:'Orbitron', sans-serif; letter-spacing:.5px; color:var(--text-dim); background:var(--bg); border:1px solid var(--panel-line); }
  #ciwOverlay .mm-steps span.active, #pwizOverlay .mm-steps span.active{ background:var(--pink); color:#2a0a16; border-color:var(--pink); box-shadow:0 0 6px rgba(242,143,178,.5); transform:none; }
  #ciwOverlay .mm-steps span.done, #pwizOverlay .mm-steps span.done{ background:var(--cyan); color:#0c2438; border-color:var(--cyan); }
  #ciwOverlay .mm-body, #pwizOverlay .mm-body{ align-items:stretch; text-align:left; gap:14px; }
  #ciwOverlay .ciw-step-title, #pwizOverlay .ciw-step-title{ font-family:'Orbitron', sans-serif; font-size:14px; letter-spacing:1px; color:var(--text); }
  #ciwOverlay .ciw-step-sub, #pwizOverlay .ciw-step-sub{ font-size:11.5px; color:var(--text-dim); line-height:1.5; margin-top:-8px; }
  #ciwOverlay textarea, #pwizOverlay textarea{ width:100%; background:var(--bg); border:1px solid var(--panel-line); border-radius:6px; padding:10px; color:var(--text); font-size:12px; box-sizing:border-box; }
  #ciwOverlay textarea[readonly], #pwizOverlay textarea[readonly]{ font-family:monospace; font-size:11.5px; }

  /* update446, encontrado en pantallazo de Giancarlo: #pptxBrandOverlay y #histOverlay usan un
     <span> de título largo dentro de .mm-steps, pero la regla base .mm-steps span{width:8px;
     height:8px; border-radius:50%} está pensada para puntico de paso (1,2,3...), no para texto — el
     título se apretaba dentro de ese círculo de 8px y se partía letra por letra, empujándose encima
     del contenido de abajo ("HISTORIAL DE INFORMES" en 3 líneas montado sobre el subtítulo). Mismo
     arreglo que ya tenían #ciwOverlay/#pwizOverlay arriba: convertir el punto en una píldora de texto. */
  #pptxBrandOverlay .mm-steps span, #histOverlay .mm-steps span{ width:auto; height:auto; border-radius:10px; padding:4px 12px; font-size:11px; font-family:'Orbitron', sans-serif; letter-spacing:.5px; }
  #pptxBrandOverlay .mm-steps span.active, #histOverlay .mm-steps span.active{ color:#2a0a16; transform:none; }

  /* ============ update446: ventanita "VER HISTORIAL DE INFORMES" — grid de meses + zona de
     arrastrar-y-soltar para cargas múltiples (ver _histRender) ============ */
  #histOverlay .mm-panel{ max-width:900px; }
  #histOverlay .mm-body{ align-items:stretch; text-align:left; }
  .hist-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(104px, 1fr)); gap:10px; }
  .hist-tile{ background:var(--bg); border:1px solid var(--panel-line); border-radius:10px; padding:10px 8px; text-align:center; }
  .hist-tile-month{ font-family:'Orbitron', sans-serif; font-size:10.5px; letter-spacing:1px; color:var(--text); margin-bottom:8px; }
  .hist-badges{ display:flex; gap:5px; justify-content:center; }
  .hist-badge{ position:relative; width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:10.5px; font-weight:700; font-family:'Orbitron', sans-serif; border:1px solid var(--panel-line); color:var(--text-dim); background:transparent; transition:transform .12s ease; }
  .hist-badge.on{ cursor:pointer; }
  .hist-badge.off{ cursor:default; opacity:.35; border-style:dashed; }
  .hist-badge.on:hover{ transform:scale(1.1); }
  .hist-badge.on[data-f="docx"]{ border-color:#538DD5; color:#538DD5; box-shadow:0 0 6px rgba(83,141,213,.35); }
  .hist-badge.on[data-f="pdf"]{ border-color:var(--pink); color:var(--pink); box-shadow:0 0 6px rgba(242,143,178,.35); }
  .hist-badge.on[data-f="pptx"]{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 6px rgba(155,211,224,.35); }
  .hist-badge-del{ position:absolute; top:-6px; right:-6px; width:14px; height:14px; border-radius:50%; background:var(--panel); border:1px solid var(--panel-line); color:var(--text-dim); font-size:9px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; }
  .hist-badge-del:hover{ border-color:var(--pink); color:var(--pink); }
  .hist-dropzone{ border:2px dashed var(--panel-line); border-radius:10px; padding:20px 14px; text-align:center; cursor:pointer; transition:border-color .15s ease, background .15s ease; }
  .hist-dropzone:hover, .hist-dropzone.dragover{ border-color:var(--cyan); background:var(--panel-line-soft, rgba(255,255,255,.04)); }
  .hist-staged-row{ display:flex; align-items:center; gap:8px; padding:6px 8px; border:1px solid var(--panel-line); border-radius:6px; margin-top:6px; font-size:11px; }
  .hist-staged-row.unknown{ border-color:var(--pink); color:var(--pink); }
  .hist-staged-remove{ margin-left:auto; cursor:pointer; color:var(--text-dim); flex-shrink:0; }
  .hist-staged-remove:hover{ color:var(--pink); }

  /* ============ update447, pedido explícito de Giancarlo: "permite de alguna forma, modificar o
     editar las versiones del documento, ya que creee 6 de prueba y debo eliminarlas para dejar una
     sola" — el CONTROL DE CAMBIOS de un documento ISO ya no se muestra solo como texto fijo: cada
     versión guardada es ahora una fila editable (versión/fecha/autor/cargo/descripción) con su
     botón ✕ para eliminarla; los cambios (ediciones o eliminaciones) se aplican recién al darle
     GUARDAR ADAPTACIÓN, igual que el resto del formulario — ver _isoDocCcRowHTML/_isoDocCcListHTML. */
  .cc-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; padding:6px 8px; border:1px solid var(--panel-line); border-radius:8px; margin-bottom:6px; background:var(--bg); transition:border-color .15s ease; }
  .cc-row:hover{ border-color:var(--cyan); }
  .cc-row input{ background:transparent; border:1px solid var(--panel-line); border-radius:5px; color:var(--text); font-size:10.5px; padding:4px 6px; }
  .cc-row input.cc-version{ width:42px; text-align:center; }
  .cc-row input.cc-fecha{ width:118px; }
  .cc-row input.cc-autor{ width:96px; }
  .cc-row input.cc-cargo{ width:84px; }
  .cc-row input.cc-descripcion{ flex:1; min-width:140px; }
  .cc-row-del{ width:20px; height:20px; border-radius:50%; background:transparent; border:1px solid var(--panel-line); color:var(--text-dim); font-size:11px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; margin-left:auto; }
  .cc-row-del:hover{ border-color:var(--pink); color:var(--pink); background:rgba(242,143,178,.1); }

  /* ============ CALENDARIO / HEATMAP DE HÁBITOS ============ */
  .cal-weekdays{ display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; margin-bottom:6px; }
  .cal-weekdays span{ text-align:center; font-size:10px; color:var(--text-dim); font-weight:600; }
  .cal-grid{ display:grid; grid-template-columns:repeat(7, 1fr); gap:5px; }
  .cal-day{
    aspect-ratio:1; border-radius:6px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; cursor:pointer; position:relative;
    border:1px solid var(--panel-line); transition:transform .1s ease;
  }
  .cal-day:hover{ transform:scale(1.06); border-color:var(--cyan); }
  .cal-day.empty{ visibility:hidden; cursor:default; }
  .cal-day.future{ opacity:.3; cursor:default; }
  .cal-day .dnum{ font-size:12px; font-weight:600; color:var(--text); }
  .cal-day .dnote{ position:absolute; top:3px; right:4px; width:5px; height:5px; border-radius:50%; background:var(--pink); }
  .cal-legend-box{ width:12px; height:12px; border-radius:3px; display:inline-block; }

  /* ============ RUTINA — agenda semanal de hábitos (update282, Fase 2 de subcategorías en update285)
     ============ Grilla días×horas tipo Teams. Cada bloque se colorea por su subcategoría dentro de
     "El Mañana" (mente/estudio/scw/salud/dinero); "Vivir" se queda en rosado hasta que tenga las
     suyas. Las horas de la izquierda ya no son una grilla de altura fija: cada hora del día se
     dibuja tan alta como haga falta para que quepan legibles todas las actividades que se solapan
     en ella ese día (ver _rutinaBuildHourScale en el JS) — por eso las líneas se dibujan como divs
     puestos a mano en vez de un fondo CSS repetido de alto fijo. */
  .rutina-toolbar{ display:flex; justify-content:flex-end; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:10px; width:100%; }
  .rutina-legend{ display:flex; gap:12px; font-size:10px; color:var(--text-dim); flex-wrap:wrap; row-gap:4px; }
  .rutina-legend span{ display:inline-flex; align-items:center; gap:5px; }
  .rutina-legend i{ width:10px; height:10px; border-radius:3px; display:inline-block; }
  .rutina-legend .rl-sep{ width:1px; align-self:stretch; background:var(--panel-line); margin:0 2px; }
  .rutina-scroll{ width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--panel-line); border-radius:8px; }
  .rutina-grid{ display:flex; min-width:800px; position:relative; }
  .rutina-hours-col{ flex:0 0 44px; position:relative; border-right:1px solid var(--panel-line); }
  .rutina-hour-label{ position:absolute; left:0; right:4px; font-size:9px; color:var(--text-dim); text-align:right; transform:translateY(-6px); }
  .rutina-gridline{ position:absolute; left:0; right:0; height:1px; background:var(--panel-line); pointer-events:none; }
  .rutina-gridline.half{ background:var(--panel-line-soft); }
  .rutina-day-col{ flex:1 1 0; min-width:100px; border-right:1px solid var(--panel-line-soft); position:relative; }
  .rutina-day-col:last-child{ border-right:none; }
  .rutina-day-head{ text-align:center; font-size:10px; font-weight:700; letter-spacing:1px; padding:8px 4px; border-bottom:1px solid var(--panel-line); color:var(--text-dim); }
  .rutina-day-head.today{ color:var(--cyan); }
  .rutina-day-body{ position:relative; cursor:copy; }
  .rutina-day-col.drag-over{ background:rgba(155,211,224,.10); }
  /* update285: relleno sólido por subcategoría (antes era casi transparente, "se ve como un
     contorno" — reportado por Giancarlo) + sombra suave para que cada bloque se despegue de la
     grilla y se lea de un vistazo, no solo si uno se detiene a mirar el borde. */
  .rutina-block{
    position:absolute; left:2px; right:2px; border-radius:7px; padding:3px 7px; overflow:hidden;
    border-left:4px solid var(--scw); background:rgba(111,198,224,.30); cursor:grab;
    transition:filter .12s ease, transform .12s ease; box-shadow:0 1px 4px rgba(0,0,0,.28);
    touch-action:none; user-select:none; -webkit-user-select:none;
  }
  .rutina-block:hover{ filter:brightness(1.18); transform:translateY(-1px); box-shadow:0 3px 8px rgba(0,0,0,.35); }
  .rutina-block.personal{ border-left-color:var(--pink); background:rgba(242,143,178,.30); }
  .rutina-block.sub-mente{ border-left-color:var(--mente); background:rgba(185,138,240,.30); }
  .rutina-block.sub-estudio{ border-left-color:var(--estudio); background:rgba(240,200,105,.30); }
  .rutina-block.sub-scw{ border-left-color:var(--scw); background:rgba(111,198,224,.30); }
  .rutina-block.sub-salud{ border-left-color:var(--salud); background:rgba(123,217,160,.30); }
  .rutina-block.sub-dinero{ border-left-color:var(--dinero); background:rgba(240,163,92,.30); }
  .rutina-block.open-ended{ border-style:dashed; background:rgba(159,180,194,.16); }
  .rutina-block .rb-name{ font-size:9.5px; font-weight:700; color:var(--text); line-height:1.25; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .rutina-block .rb-time{ font-size:8.5px; color:var(--text-dim); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  /* update284: arrastrar y soltar (HU-4 revisada, ver claude/historias-usuario-rutina-semanal.md) —
     el bloque original se atenúa mientras se arrastra, y una copia "fantasma" sigue al puntero/dedo.
     update285: la misma mecánica sirve para arrastrar una ficha de categoría desde el panel de
     resumen (ver .rutina-chip) y soltarla en la grilla para crear una actividad nueva ya categorizada. */
  .rutina-dragging-source{ opacity:.35; }
  .rutina-drag-ghost{
    position:fixed; z-index:9999; pointer-events:none; border-radius:7px; padding:3px 7px;
    border-left:4px solid var(--cyan); background:var(--panel); box-shadow:0 4px 16px rgba(0,0,0,.4);
    opacity:.92; transform:rotate(-1deg);
  }
  .rutina-rules{ margin-top:16px; width:100%; }
  .rutina-rule-chip{ display:inline-flex; align-items:baseline; gap:6px; background:var(--bg); border:1px solid var(--panel-line); border-radius:14px; padding:5px 10px; font-size:11px; margin:0 6px 6px 0; }
  .rutina-rule-chip .rr-days{ font-size:9px; color:var(--text-dim); }

  /* ============ RUTINA — resumen de equilibrio + paleta arrastrable (update285, HU-5) ============
     "Para yo saber y así mismo ir organizando y creando más actividades" — Giancarlo pidió ver, en
     porcentaje del tiempo agendado, cuánto está yendo a El Mañana vs. Vivir (y por categoría dentro
     de El Mañana), y poder arrastrar una de esas categorías directo a la grilla para crear ahí una
     actividad nueva ya clasificada, sin pasar primero por tocar un hueco vacío. */
  .rutina-summary-wrap{ display:flex; gap:16px; flex-wrap:wrap; width:100%; margin-top:18px; align-items:flex-start; }
  .rutina-summary{ flex:2 1 300px; background:var(--panel); border:1px solid var(--panel-line); border-radius:8px; padding:14px 16px; }
  .rutina-summary h3{ font-size:11px; letter-spacing:1px; color:var(--text-dim); margin-bottom:10px; }
  .rs-row{ display:flex; align-items:center; gap:8px; margin-bottom:6px; }
  .rs-row .rs-dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
  .rs-row .rs-label{ font-size:11.5px; color:var(--text); flex:1; }
  .rs-row.rs-sub .rs-label{ font-size:10.5px; color:var(--text-dim); padding-left:12px; }
  .rs-row .rs-bar-wrap{ flex:2; height:6px; border-radius:3px; background:var(--bg); overflow:hidden; min-width:60px; }
  .rs-row .rs-bar{ height:100%; border-radius:3px; }
  .rs-row .rs-nums{ font-size:10.5px; color:var(--text-dim); flex:0 0 auto; min-width:88px; text-align:right; white-space:nowrap; }
  .rs-row .rs-nums b{ color:var(--text); }
  .rutina-summary .rs-empty{ font-size:11px; color:var(--text-dim); }
  .rutina-palette{ flex:1 1 180px; background:var(--panel); border:1px solid var(--panel-line); border-radius:8px; padding:14px 16px; }
  .rutina-palette h3{ font-size:11px; letter-spacing:1px; color:var(--text-dim); margin-bottom:4px; }
  .rutina-palette .rp-hint{ font-size:9.5px; color:var(--text-dim); margin-bottom:10px; line-height:1.4; }
  .rutina-chip{
    display:flex; align-items:center; gap:7px; padding:7px 10px; border-radius:7px; margin-bottom:6px;
    border-left:4px solid var(--scw); background:rgba(111,198,224,.16); cursor:grab; font-size:11px;
    color:var(--text); touch-action:none; user-select:none; -webkit-user-select:none; transition:filter .1s ease;
  }
  .rutina-chip:hover{ filter:brightness(1.25); }
  .rutina-chip.personal{ border-left-color:var(--pink); background:rgba(242,143,178,.16); }
  .rutina-chip.sub-mente{ border-left-color:var(--mente); background:rgba(185,138,240,.16); }
  .rutina-chip.sub-estudio{ border-left-color:var(--estudio); background:rgba(240,200,105,.16); }
  .rutina-chip.sub-scw{ border-left-color:var(--scw); background:rgba(111,198,224,.16); }
  .rutina-chip.sub-salud{ border-left-color:var(--salud); background:rgba(123,217,160,.16); }
  .rutina-chip.sub-dinero{ border-left-color:var(--dinero); background:rgba(240,163,92,.16); }
  @media (max-width:520px){ .rutina-summary-wrap{ flex-direction:column; } }

  /* ============ RESPONSIVE: resguardo para la tabla Tabulator en pantallas angostas ============ */
  #masterTable{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .pm-grid{ display:grid; grid-template-columns:1fr; gap:12px; width:100%; }
  @media (min-width:700px){ .pm-grid{ grid-template-columns:1fr 1fr; } }
  @media (min-width:1100px){ .pm-grid{ grid-template-columns:1fr 1fr 1fr; } }
  .pm-card{ background:var(--bg); border:1px solid var(--panel-line); border-radius:8px; padding:14px; }
  @media (max-width:520px){
    .stat-grid{ grid-template-columns:1fr; }
  }

  /* ===================== ACTIVIDADES DE PROYECTO — cronograma (update226) ===================== */
  .pa-project-card{ width:100%; }
  .pa-timeline{ position:relative; margin-top:10px; padding-left:16px; border-left:2px solid var(--panel-line); display:flex; flex-direction:column; gap:12px; }
  .pa-timeline-item{ position:relative; display:flex; gap:10px; align-items:flex-start; padding:2px 0; }
  .pa-timeline-item:hover{ opacity:0.85; }
  .pa-timeline-dot{ position:absolute; left:-21px; top:5px; width:10px; height:10px; border-radius:50%; border:2px solid var(--panel); }
  .pa-timeline-body{ flex:1; min-width:0; }
  .pa-timeline-top{ display:flex; justify-content:space-between; align-items:center; gap:8px; font-size:12.5px; }
  .pa-timeline-top span:first-child{ font-weight:600; }
  .pa-import-mini{ margin-top:14px; padding-top:12px; border-top:1px dashed var(--panel-line); }
  .pa-import-toggle{ background:none; border:1px solid var(--panel-line); color:var(--text-dim); font-family:'Inter', sans-serif; font-size:11px; padding:6px 12px; border-radius:14px; cursor:pointer; }
  .pa-import-toggle:hover{ border-color:var(--cyan); color:var(--cyan); }

  /* ===================== TABLERO DEL PROYECTO — Kanban (update476) ===================== */
  .pa-view-toggle{ display:flex; gap:6px; margin-bottom:12px; }
  .pa-view-toggle button{ background:none; border:1px solid var(--panel-line); color:var(--text-dim); font-family:'Inter', sans-serif; font-size:11px; font-weight:600; padding:6px 14px; border-radius:14px; cursor:pointer; }
  .pa-view-toggle button:hover{ border-color:var(--cyan); color:var(--cyan); }
  .pa-view-toggle button.active{ background:var(--cyan); border-color:var(--cyan); color:#06131a; }
  .kanban-board{ display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; align-items:flex-start; }
  .kanban-col{ flex:1 1 0; min-width:240px; background:rgba(255,255,255,0.02); border:1px solid var(--panel-line); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:8px; min-height:80px; transition:background-color 0.15s, border-color 0.15s; }
  .kanban-col.kb-drag-over{ background:rgba(79,195,247,0.08); border-color:var(--cyan); }
  .kanban-col-header{ display:flex; justify-content:space-between; align-items:center; font-size:11.5px; font-weight:700; letter-spacing:0.03em; color:var(--text-dim); padding:2px 4px 6px; border-bottom:1px solid var(--panel-line); margin-bottom:2px; }
  .kanban-card{ background:var(--panel); border:1px solid var(--panel-line); border-left:3px solid var(--pr-color, var(--cyan)); border-radius:8px; padding:9px 10px; cursor:grab; font-size:12px; display:flex; flex-direction:column; gap:5px; }
  .kanban-card:active{ cursor:grabbing; }
  .kanban-card.kb-dragging{ opacity:0.4; }
  .kanban-card-title{ font-weight:600; line-height:1.3; }
  .kanban-card-meta{ font-size:10.5px; color:var(--text-dim); display:flex; flex-wrap:wrap; gap:4px 8px; }
  .kanban-card-sub{ font-size:10px; color:var(--cyan); }
  .kanban-card select{ width:100%; background:var(--bg); border:1px solid var(--panel-line); border-radius:6px; color:var(--text); font-size:10.5px; padding:3px 4px; font-family:'Inter', sans-serif; }
  .kanban-col-empty{ font-size:11px; color:var(--text-dim); opacity:0.7; padding:10px 4px; text-align:center; }
  /* update486 — el tablero HOY/PENDIENTES de Lista de Pendientes (Inicio) es un widget compacto de
     2 columnas dentro de .app-shell (max-width:620px total, sidebar incluido) — no el tablero
     Kanban de ITSM, que vive en su propia pantalla ancha y sí se beneficia del scroll horizontal
     con sus 3+ columnas. Dos columnas de 240px mínimo (494px con el gap) NUNCA caben lado a lado
     dentro de los ~470-480px que le quedan a esta tarjeta — no solo en celular, también en
     escritorio, porque .app-shell está topado en 620px — así que, a diferencia del tablero de
     ITSM, este SIEMPRE se apila verticalmente (HOY arriba, PENDIENTES abajo), sin media query.
     Se verificó con captura de pantalla antes/después (ver claude/cambios.md, update486). */
  #pendRapidosKanban .kanban-board{ flex-direction:column; overflow-x:visible; }
  /* flex:0 0 auto + min-height:auto son necesarios, no cosméticos: .kanban-col trae min-height:80px
     (pensado para el tablero en fila, para que una columna vacía no colapse) y flex:1 1 0 (para
     repartirse el ancho en fila) — en columna, esos dos mismos valores quitan la protección por
     defecto de flexbox contra encoger un ítem por debajo de su contenido, y cada columna queda
     fija en 80px reales sin importar cuántas tarjetas tenga adentro, encimándose visualmente con
     la columna siguiente (bug real, reproducido y corregido en update486). */
  #pendRapidosKanban .kanban-col{ min-width:0; width:100%; flex:0 0 auto; min-height:auto; }
  .pa-import-form{ margin-top:10px; max-width:340px; }

  /* ===================== PLAN DE AUDITORÍA 2026 — tarjetas + filtros (update230) ===================== */
  .plan-filters{ display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:16px; padding-bottom:14px; border-bottom:1px solid var(--panel-line); }
  .plan-filters .fin-field{ flex:1; min-width:170px; margin-bottom:0; }
  .plan-filters-count{ font-size:11px; color:var(--text-dim); white-space:nowrap; margin-left:auto; align-self:center; }
  .plan-filters-clear{ background:none; border:1px solid var(--panel-line); color:var(--text-dim); font-family:'Inter', sans-serif; font-size:11px; padding:8px 12px; border-radius:6px; cursor:pointer; white-space:nowrap; }
  .plan-filters-clear:hover{ border-color:var(--cyan); color:var(--cyan); }
  .plan-grid{ display:grid; grid-template-columns:1fr; gap:12px; width:100%; }
  @media (min-width:760px){ .plan-grid{ grid-template-columns:1fr 1fr; } }
  @media (min-width:1200px){ .plan-grid{ grid-template-columns:1fr 1fr 1fr; } }
  .plan-card{ background:var(--bg); border:1px solid var(--panel-line); border-left:3px solid var(--panel-line); border-radius:8px; padding:14px; }
  .plan-card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
  .plan-card-name{ font-weight:700; font-size:13px; color:var(--text); margin-bottom:4px; }
  .plan-badge{ display:inline-block; padding:2px 8px; border-radius:10px; font-size:10px; font-weight:700; white-space:nowrap; }
  .plan-card-estado{ margin-top:9px; }
  .plan-card-meta{ margin-top:10px; padding-top:10px; border-top:1px dashed var(--panel-line); font-size:11px; color:var(--text-dim); display:flex; flex-direction:column; gap:3px; }
  .plan-card-meta b{ color:var(--text); font-weight:600; }
  .plan-edit-btn{ background:none; border:1px solid var(--panel-line); color:var(--text-dim); border-radius:6px; padding:4px 9px; cursor:pointer; font-size:12px; flex-shrink:0; }
  .plan-edit-btn:hover{ border-color:var(--cyan); color:var(--cyan); }
  /* update407 — pedido explícito de Giancarlo: la tarjeta completa es clicable (abre el detalle de
     la auditoría de ese proveedor), no solo el lápiz ✎ de editar. */
  .plan-card-clickable{ transition:border-color .12s, box-shadow .12s; }
  .plan-card-clickable:hover{ border-color:var(--cyan); box-shadow:0 0 0 1px var(--cyan) inset; }

  /* ===================== update404: modal de evaluación de proveedores (pestañas) =====================
     Pedido explícito de Giancarlo: "no que me la muestre en la parte de abajo, sino que me abra un
     modal... con una pestañita... que sea muy visual, muy organizado, buena letra, que los colores
     ayuden". Cada pregunta/respuesta pasa de un bloque apilado a una fila con el texto a la
     izquierda y la respuesta (con un borde de color según su estado) a la derecha. */
  .eval-qlist{ display:flex; flex-direction:column; }
  .eval-qrow{
    display:flex; gap:16px; flex-wrap:wrap; align-items:flex-start;
    padding:12px 0 12px 12px; border-bottom:1px solid var(--panel-line);
  }
  .eval-qrow:last-child{ border-bottom:none; padding-bottom:4px; }
  .eval-qtext{ flex:1 1 260px; min-width:220px; }
  .eval-qanswer{ flex:0 0 260px; width:260px; display:flex; flex-direction:column; gap:6px; }
  @media (max-width:560px){ .eval-qanswer{ flex:1 1 100%; width:100%; } }
  .eval-qanswer select, .eval-qanswer input[type="text"]{
    width:100%; background:var(--bg); border:1px solid var(--panel-line); border-radius:5px;
    padding:7px; color:var(--text); font-size:12.5px; font-family:'Inter', sans-serif;
  }
  .eval-critico-tag{ color:#ff6b6b; font-size:9.5px; border:1px solid #ff6b6b55; border-radius:4px; padding:1px 5px; margin-left:6px; white-space:nowrap; }

  /* ===================== BANDEJA DE CORREO ENTRANTE — pre-tareas (update231) ===================== */
  .inbox-bell-btn{ position:relative; }
  .inbox-bell-badge{
    position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; border-radius:9px;
    background:#ff6b6b; color:#fff; font-size:10px; font-weight:700; display:flex; align-items:center;
    justify-content:center; padding:0 4px; box-shadow:0 0 6px rgba(255,107,107,.6);
  }
  @keyframes inboxBellPulse{ 0%{ box-shadow:0 0 0 0 rgba(255,107,107,.55);} 70%{ box-shadow:0 0 0 9px rgba(255,107,107,0);} 100%{ box-shadow:0 0 0 0 rgba(255,107,107,0);} }
  .inbox-bell-btn.has-new{ animation: inboxBellPulse 1.6s ease-out 3; border-color:#ff6b6b; color:#ff6b6b; }

  /* update568, pedido explícito de Giancarlo (Mescontable → Presupuesto, "PENDIENTE POR PAGAR ESTE
     MES"): clic en una fila lleva a GASTOS con la categoría (y el valor sugerido) ya puestos — este
     destello solo confirma visualmente que el formulario de "REGISTRAR GASTO" es el que se acaba de
     rellenar solo, para que no pase desapercibido entre el resto de la pantalla. */
  .fin-pendiente-row{ cursor:pointer; }
  .fin-pendiente-row:hover{ background:rgba(155,211,224,.08); }
  @keyframes finPrefillFlash{ 0%{ box-shadow:0 0 0 0 rgba(155,211,224,.65);} 70%{ box-shadow:0 0 0 10px rgba(155,211,224,0);} 100%{ box-shadow:0 0 0 0 rgba(155,211,224,0);} }
  .fin-card-prefill-flash{ animation: finPrefillFlash 1.1s ease-out; }
  .inbox-item{ background:var(--bg); border:1px solid var(--panel-line); border-radius:8px; padding:14px; margin-bottom:12px; }
  .inbox-item-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:wrap; }
  .inbox-item-from{ font-weight:700; font-size:13px; color:var(--text); }
  .inbox-item-email{ font-size:11px; color:var(--text-dim); }
  .inbox-item-date{ font-size:10.5px; color:var(--text-dim); white-space:nowrap; }
  .inbox-item-subject{ font-size:12.5px; color:var(--cyan); margin-top:6px; font-weight:600; }
  .inbox-item-snippet{ font-size:11.5px; color:var(--text-dim); margin-top:5px; line-height:1.45; }
  .inbox-item-actions{ display:flex; gap:8px; margin-top:12px; flex-wrap:wrap; align-items:center; }
  .inbox-item-actions select{ flex:1; min-width:160px; }

  /* update311: buscador tipo autocompletar sobre un <select> existente (ver makeSearchableSelect) —
     CLIENTE/PROYECTO/RESPONSABLE en HOY, CATEGORÍA/CUENTA en Gastos, etc. */
  .searchable-select-dropdown{ position:absolute; top:100%; left:0; right:0; z-index:60; max-height:230px;
    overflow-y:auto; background:var(--panel); border:1px solid var(--panel-line); border-radius:5px;
    margin-top:3px; box-shadow:0 6px 18px rgba(0,0,0,.35); }
  .searchable-select-opt{ padding:8px 12px; font-size:13px; color:var(--text); cursor:pointer; }
  .searchable-select-opt:hover{ background:var(--bg); color:var(--cyan); }
  .searchable-select-empty{ padding:8px 12px; font-size:12px; color:var(--text-dim); }
  /* update340: encabezado de grupo (optgroup) dentro del dropdown de búsqueda — ver makeSearchableSelect.
     No es clickeable (no tiene .searchable-select-opt), solo separa visualmente p.ej. "cuentas" de
     "tarjetas de crédito" dentro de un mismo buscador/lista, sin partirlo en dos selectores distintos. */
  .searchable-select-group-header{ padding:6px 12px 4px; font-size:10px; font-weight:700; letter-spacing:.04em;
    color:var(--cyan); text-transform:uppercase; border-top:1px solid var(--panel-line); }
  .searchable-select-group-header:first-child{ border-top:none; }
  /* update564, pedido explícito de Giancarlo (Mescontable → Gastos): botón "×" opcional (ver
     makeSearchableSelect, opts.clearable) para borrar de un clic la categoría elegida por error, sin
     tener que seleccionar y borrar el texto a mano. Solo aparece cuando el campo tiene algo elegido. */
  .searchable-select-clear{ position:absolute; right:8px; top:50%; transform:translateY(-50%);
    width:18px; height:18px; display:flex; align-items:center; justify-content:center;
    border-radius:50%; background:var(--panel-line); color:var(--text-dim); font-size:13px;
    line-height:1; cursor:pointer; user-select:none; }
  .searchable-select-clear:hover{ background:var(--pink); color:#fff; }

  /* update310: chips de filtro rápido por mes — NEGOCIOS GANADOS (Gerencial), mismo patrón visual
     que .mb-cat-chip (categorías de Market Buga). */
  .ger-neg-chip{ font-family:'Inter', sans-serif; font-size:10px; padding:3px 9px; border-radius:10px; border:1px solid var(--panel-line); background:transparent; color:var(--text-dim); cursor:pointer; transition:all .15s ease; }
  .ger-neg-chip.active{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 6px rgba(155,211,224,.3); }

  /* ===================== MI MARKET BUGA (maqueta visual, update224) ===================== */
  .mb-cat-row{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px; }
  .mb-cat-chip{ font-family:'Inter', sans-serif; font-size:11px; padding:7px 13px; border-radius:16px; border:1px solid var(--panel-line); background:var(--panel); color:var(--text-dim); cursor:pointer; transition:all .15s ease; }
  .mb-cat-chip.active{ border-color:var(--cyan); color:var(--cyan); box-shadow:0 0 6px rgba(155,211,224,.3); }
  .mb-prod-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
  .mb-prod-card{ background:var(--panel); border:1px solid var(--panel-line); border-radius:8px; padding:14px 12px; display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
  .mb-prod-icon{ font-size:30px; }
  .mb-prod-nombre{ font-size:11.5px; font-weight:600; color:var(--text); line-height:1.3; min-height:29px; }
  .mb-prod-unidad{ font-size:10px; color:var(--text-dim); }
  .mb-prod-precio{ font-family:'Orbitron', sans-serif; font-size:13px; color:var(--cyan); margin-top:2px; }
  .mb-prod-add{ width:100%; margin-top:6px; font-family:'Inter', sans-serif; font-size:11px; font-weight:600; padding:7px; border-radius:6px; border:1px solid var(--panel-line); background:var(--bg); color:var(--text); cursor:pointer; }
  .mb-prod-add:hover{ border-color:var(--cyan); color:var(--cyan); }
  .mb-qty-row{ display:flex; align-items:center; gap:8px; width:100%; margin-top:6px; }
  .mb-qty-btn{ width:26px; height:26px; border-radius:6px; border:1px solid var(--panel-line); background:var(--bg); color:var(--text); cursor:pointer; font-size:13px; line-height:1; }
  .mb-qty-num{ flex:1; text-align:center; font-family:'Orbitron', sans-serif; font-size:12px; }
  .mb-cart-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid var(--panel-line-soft); font-size:12px; }
  .mb-cart-item:last-child{ border-bottom:none; }
  .mb-pay-option{ display:flex; align-items:flex-start; gap:8px; padding:10px 12px; border:1px solid var(--panel-line); border-radius:6px; margin-bottom:8px; cursor:pointer; font-size:12px; }
  .mb-pay-option.selected{ border-color:var(--cyan); background:rgba(155,211,224,.06); }
  .mb-verif-ok{ color:#7fd88f; }
  .mb-verif-pending{ color:var(--text-dim); font-style:italic; }
  .mb-roadmap-item{ display:flex; gap:8px; align-items:flex-start; padding:8px 0; border-bottom:1px solid var(--panel-line-soft); font-size:12px; color:var(--text-dim); }
  .mb-roadmap-item:last-child{ border-bottom:none; }
  .mb-roadmap-item .mb-rm-tag{ flex-shrink:0; font-size:9px; letter-spacing:.5px; font-family:'Orbitron', sans-serif; color:var(--pink); border:1px solid var(--pink); border-radius:10px; padding:2px 7px; margin-top:1px; }

  /* ---- Vista previa del cliente (fuera de la identidad visual de Olivia a propósito — update226:
     "no va a tener los colores de Cyberwall... colores más adecuados, un blanquito con un verde,
     para comida, que muestre frescura") — tokens propios, con nombre 'mbp-*' para no chocar con
     las variables --bg/--panel/etc. de Olivia. ---- */
  .mb-preview-launch{ text-align:center; padding:34px 20px; }
  .mb-preview-launch .mb-prod-icon{ font-size:44px; margin-bottom:10px; }
  .mb-preview-open-btn{
    font-family:'Inter', sans-serif; font-weight:700; font-size:13px; padding:13px 26px; border-radius:24px;
    border:none; background:#1fa971; color:#fff; cursor:pointer; margin-top:14px; box-shadow:0 4px 14px rgba(31,169,113,.35);
  }
  .mb-preview-open-btn:hover{ background:#178a5c; }

  .mb-preview-overlay{
    position:fixed; inset:0; background:rgba(10,20,16,.78); z-index:400; display:none;
    align-items:center; justify-content:center; padding:24px;
  }
  .mb-preview-overlay.open{ display:flex; }
  .mb-preview-exit{
    position:absolute; top:20px; left:20px; font-family:'Inter', sans-serif; font-size:12px; font-weight:600;
    background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.3); color:#fff; border-radius:20px;
    padding:9px 16px; cursor:pointer; display:flex; align-items:center; gap:6px;
  }
  .mb-preview-exit:hover{ background:rgba(255,255,255,.22); }
  .mb-preview-label{
    position:absolute; top:24px; right:24px; font-family:'Orbitron', sans-serif; font-size:9.5px; letter-spacing:1.5px;
    color:rgba(255,255,255,.65);
  }

  .mbp-frame{
    --mbp-bg:#f4fbf6; --mbp-surface:#ffffff; --mbp-border:#dcefe0; --mbp-text:#183326; --mbp-text-dim:#5c7568;
    --mbp-green:#1fa971; --mbp-green-dark:#147a52; --mbp-green-soft:#eafaf1; --mbp-accent:#f59e0b;
    width:100%; max-width:400px; height:min(760px, 92vh); background:var(--mbp-bg); border-radius:30px;
    overflow:hidden; display:flex; flex-direction:column; box-shadow:0 30px 80px rgba(0,0,0,.5);
    font-family:'Inter', sans-serif; color:var(--mbp-text);
  }
  .mbp-header{
    background:var(--mbp-green); color:#fff; padding:16px 18px 14px; display:flex; align-items:center; justify-content:space-between; flex-shrink:0;
  }
  .mbp-header .mbp-brand{ font-weight:800; font-size:15px; display:flex; align-items:center; gap:7px; }
  .mbp-header .mbp-icons{ display:flex; align-items:center; gap:14px; }
  .mbp-icon-btn{ position:relative; background:none; border:none; color:#fff; font-size:19px; cursor:pointer; padding:2px; line-height:1; }
  .mbp-icon-badge{
    position:absolute; top:-6px; right:-8px; background:var(--mbp-accent); color:#fff; font-size:9.5px; font-weight:700;
    border-radius:9px; min-width:16px; height:16px; display:flex; align-items:center; justify-content:center; padding:0 3px;
  }
  .mbp-body{ flex:1; overflow-y:auto; padding:14px 16px 18px; }
  .mbp-cat-row{ display:flex; gap:7px; overflow-x:auto; padding-bottom:10px; margin-bottom:4px; }
  .mbp-cat-chip{
    flex-shrink:0; font-size:11px; font-weight:600; padding:7px 14px; border-radius:16px; border:1px solid var(--mbp-border);
    background:var(--mbp-surface); color:var(--mbp-text-dim); cursor:pointer;
  }
  .mbp-cat-chip.active{ background:var(--mbp-green); color:#fff; border-color:var(--mbp-green); }
  .mbp-prod-grid{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
  .mbp-prod-card{ background:var(--mbp-surface); border:1px solid var(--mbp-border); border-radius:14px; padding:12px 10px; display:flex; flex-direction:column; align-items:center; gap:5px; text-align:center; box-shadow:0 1px 3px rgba(24,51,38,.05); }
  .mbp-prod-icon{ font-size:28px; }
  .mbp-prod-nombre{ font-size:11px; font-weight:700; line-height:1.25; min-height:27px; }
  .mbp-prod-unidad{ font-size:9.5px; color:var(--mbp-text-dim); }
  .mbp-prod-precio{ font-weight:800; font-size:12.5px; color:var(--mbp-green-dark); margin-top:1px; }
  .mbp-add-btn{ width:100%; margin-top:5px; font-size:11px; font-weight:700; padding:6px; border-radius:8px; border:none; background:var(--mbp-green-soft); color:var(--mbp-green-dark); cursor:pointer; }
  .mbp-add-btn:hover{ background:var(--mbp-green); color:#fff; }
  .mbp-qty-row{ display:flex; align-items:center; gap:6px; width:100%; margin-top:5px; }
  .mbp-qty-btn{ width:24px; height:24px; border-radius:7px; border:none; background:var(--mbp-green); color:#fff; cursor:pointer; font-size:13px; line-height:1; }
  .mbp-qty-num{ flex:1; text-align:center; font-weight:700; font-size:12px; }

  .mbp-cart-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:10px 0; border-bottom:1px solid var(--mbp-border); font-size:12px; }
  .mbp-cart-item:last-child{ border-bottom:none; }
  .mbp-totals-row{ display:flex; justify-content:space-between; font-size:12.5px; padding:5px 0; color:var(--mbp-text-dim); }
  .mbp-totals-row.total{ color:var(--mbp-text); font-weight:800; font-size:14.5px; padding-top:10px; border-top:1px dashed var(--mbp-border); margin-top:6px; }
  .mbp-pay-option{ display:flex; align-items:flex-start; gap:8px; padding:11px 12px; border:1.5px solid var(--mbp-border); border-radius:12px; margin-bottom:8px; cursor:pointer; font-size:12px; background:var(--mbp-surface); }
  .mbp-pay-option.selected{ border-color:var(--mbp-green); background:var(--mbp-green-soft); }
  .mbp-big-btn{ width:100%; font-weight:800; font-size:13px; padding:13px; border-radius:14px; border:none; background:var(--mbp-green); color:#fff; cursor:pointer; margin-top:6px; }
  .mbp-big-btn:hover{ background:var(--mbp-green-dark); }
  .mbp-big-btn:disabled{ background:#c8dcd0; cursor:not-allowed; }
  .mbp-section-title{ font-size:11px; font-weight:800; letter-spacing:.5px; color:var(--mbp-text-dim); text-transform:uppercase; margin:14px 0 8px; }
  .mbp-section-title:first-child{ margin-top:0; }

  .mbp-profile-card{ background:var(--mbp-surface); border:1px solid var(--mbp-border); border-radius:14px; padding:18px; text-align:center; margin-bottom:14px; }
  .mbp-profile-avatar{ width:56px; height:56px; border-radius:50%; background:var(--mbp-green-soft); color:var(--mbp-green-dark); display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; margin:0 auto 10px; }
  .mbp-profile-name{ font-weight:800; font-size:14px; }
  .mbp-profile-detail{ font-size:11.5px; color:var(--mbp-text-dim); margin-top:2px; }
  .mbp-order-row{ background:var(--mbp-surface); border:1px solid var(--mbp-border); border-radius:12px; padding:11px 13px; margin-bottom:8px; font-size:11.5px; }
  .mbp-order-row .mbp-order-top{ display:flex; justify-content:space-between; font-weight:700; margin-bottom:3px; }

  .mbp-nav{ display:flex; border-top:1px solid var(--mbp-border); background:var(--mbp-surface); flex-shrink:0; }
  .mbp-nav-btn{ flex:1; background:none; border:none; padding:10px 4px 9px; text-align:center; cursor:pointer; color:var(--mbp-text-dim); font-family:'Inter', sans-serif; }
  .mbp-nav-btn .mbp-nav-icon{ font-size:18px; display:block; }
  .mbp-nav-btn .mbp-nav-lbl{ font-size:9.5px; font-weight:700; margin-top:2px; display:block; }
  .mbp-nav-btn.active{ color:var(--mbp-green-dark); }