/* ils/assets/styles.css — Panel operacional · sin dependencias externas */
:root{
  --bg:#0b1016; --bg2:#0e141b; --surface:#131c26; --surface2:#18222e;
  --line:#243240; --line2:#2e4150;
  --ink:#e7eef4; --muted:#8696a6; --muted2:#647689;
  --green:#34d399; --amber:#f2b544; --red:#f26464; --cyan:#52b6e8;
  --accent:#34d399;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --r:14px; --r-sm:9px;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
/* Escala base de la interfaz. Como casi todo el layout está en rem,
   este valor encoge/agranda la UI completa de forma proporcional.
   ~87.5% ≈ la vista que se obtenía alejando el zoom unas 3 veces. */
html{font-size:13.5px}
@media (min-width:768px){ html{font-size:14.5px} }  /* en escritorio, algo más holgado */
body{
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(52,211,153,.07), transparent 60%),
    radial-gradient(700px 500px at 0% 0%, rgba(82,182,232,.05), transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); line-height:1.5;
  -webkit-font-smoothing:antialiased; font-size:1rem;
}
h1,h2,h3{margin:0; font-weight:650; letter-spacing:-.01em}
a{color:inherit}
.muted{color:var(--muted)}

/* ---------------- Botones ---------------- */
.btn{
  font:inherit; font-weight:600; cursor:pointer; border-radius:var(--r-sm);
  border:1px solid var(--line2); background:var(--surface2); color:var(--ink);
  padding:.55rem .9rem; transition:.15s; text-decoration:none; display:inline-flex;
  align-items:center; gap:.4rem; white-space:nowrap;
}
.btn:hover{border-color:var(--accent); color:#fff}
.btn-primary{background:linear-gradient(180deg,#3ee0a6,#23b483); color:#06231a; border-color:transparent}
.btn-primary:hover{filter:brightness(1.06); color:#06231a}
.btn-ghost{background:transparent}
.btn-sm{padding:.35rem .65rem; font-size:.82rem}

/* ---------------- Login ---------------- */
.gate{min-height:100dvh; display:grid; place-items:center; padding:1.2rem}
.gate-card{
  width:min(420px,100%); background:linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r); padding:2.2rem 1.8rem;
  text-align:center; box-shadow:var(--shadow);
}
.gate-glyph{color:var(--accent); display:flex; justify-content:center; margin-bottom:.6rem; opacity:.9}
.gate-eyebrow{margin:0; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.gate-card h1{font-size:1.5rem; margin:.3rem 0}
.gate-sub{color:var(--muted); margin:.2rem 0 1.4rem; font-size:.92rem}
.gate-card .field{text-align:left; margin-bottom:1rem}
.gate-card .btn{width:100%; justify-content:center; padding:.7rem}
.gate-err{color:var(--red); font-size:.86rem; margin:.2rem 0 .8rem}
.gate-foot{color:var(--muted2); font-size:.74rem; margin:1.2rem 0 0}

/* ---------------- Campos ---------------- */
.field{display:flex; flex-direction:column; gap:.32rem; font-size:.86rem}
.field>span{color:var(--muted); font-weight:500}
input,textarea,select{
  font-family:inherit; color:var(--ink); background:var(--bg2); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.55rem .65rem; width:100%;
  /* 16px reales: evita el zoom automático de Safari iOS al enfocar el campo.
     No usar <16px aquí o iOS hará auto-zoom. El pinch-zoom manual se conserva. */
  font-size:16px; line-height:1.4;
}
input:focus,textarea:focus,select:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(52,211,153,.15)}
textarea{resize:vertical; font-family:var(--sans)}

/* ---------------- Topbar ---------------- */
.topbar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:.7rem clamp(.8rem,3vw,1.6rem);
  background:rgba(11,16,22,.82); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.7rem; min-width:0}
.brand-mark{color:var(--accent); font-size:1.5rem; line-height:1}
.brand-text{display:flex; flex-direction:column; min-width:0}
.brand-text strong{font-size:.98rem}
.brand-text small{color:var(--muted); font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar-actions{display:flex; align-items:center; gap:.5rem; flex-shrink:0}
.chip{
  font-family:var(--mono); font-size:.78rem; color:var(--ink); background:var(--surface2);
  border:1px solid var(--line2); border-radius:999px; padding:.35rem .7rem;
}

/* ---------------- Layout ---------------- */
.wrap{max-width:1080px; margin:0 auto; padding:clamp(.8rem,3vw,1.6rem); display:flex; flex-direction:column; gap:1.1rem}
.panel{background:linear-gradient(180deg,var(--surface),var(--bg2)); border:1px solid var(--line); border-radius:var(--r); padding:1.1rem 1.2rem}
.panel-head{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}
.panel-head h2{font-size:1.02rem}
.hint{color:var(--muted2); font-size:.76rem; font-family:var(--mono)}
.head-actions{display:flex; gap:.4rem; flex-wrap:wrap}
.eyebrow{margin:0; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}

/* ---------------- Hero / instrumento ---------------- */
.hero{
  display:grid; grid-template-columns:minmax(240px,.85fr) 1.15fr; gap:1.2rem;
  background:
    linear-gradient(180deg, rgba(52,211,153,.06), transparent 40%),
    linear-gradient(180deg,var(--surface),var(--bg2));
  border:1px solid var(--line); border-radius:var(--r); padding:1.3rem 1.4rem;
}
.hero-readout{display:flex; flex-direction:column}
.afp-line{display:flex; align-items:baseline; gap:.1rem; margin:.2rem 0}
.afp-num{font-family:var(--mono); font-size:clamp(3.2rem,9vw,4.6rem); font-weight:700; line-height:.95; letter-spacing:-.03em}
.afp-pct{font-family:var(--mono); font-size:1.6rem; color:var(--muted)}
.afp-meta{display:flex; align-items:center; gap:.5rem; font-size:.92rem; color:var(--ink)}
.lamp{width:.7rem; height:.7rem; border-radius:50%; background:var(--muted); box-shadow:0 0 0 3px rgba(255,255,255,.04)}
.lamp.verde{background:var(--green); box-shadow:0 0 12px var(--green)}
.lamp.amarillo{background:var(--amber); box-shadow:0 0 12px var(--amber)}
.lamp.rojo{background:var(--red); box-shadow:0 0 12px var(--red)}
.readout-grid{display:grid; grid-template-columns:1fr 1fr; gap:.6rem 1rem; margin:1.1rem 0 0}
.readout-grid div{border-top:1px solid var(--line); padding-top:.5rem}
.readout-grid dt{color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.06em}
.readout-grid dd{margin:.15rem 0 0; font-family:var(--mono); font-size:1.05rem}
.cap-note{margin:.9rem 0 0; font-size:.78rem; color:var(--amber); border-left:2px solid var(--amber); padding-left:.6rem}

.hero-chart{margin:0; display:flex; flex-direction:column}
.hero-chart figcaption{color:var(--muted); font-size:.78rem; margin-bottom:.4rem}
.curve{flex:1; min-height:172px; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.curve svg{display:block; width:100%; height:100%}
.legend{display:flex; gap:1.2rem; margin-top:.5rem; font-size:.76rem; color:var(--muted)}
.legend .sw{display:inline-block; width:14px; height:3px; border-radius:2px; vertical-align:middle; margin-right:.35rem}
.sw-base{background:var(--muted2)}
.sw-real{background:var(--accent)}

/* ---------------- Frentes ---------------- */
.frentes{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem}
.frente{background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.7rem .8rem}
.frente .ft{display:flex; justify-content:space-between; align-items:baseline; gap:.5rem}
.frente .name{font-size:.84rem}
.frente .val{font-family:var(--mono); font-weight:700}
.bar{height:6px; border-radius:4px; background:var(--surface2); margin-top:.5rem; overflow:hidden}
.bar>span{display:block; height:100%; background:linear-gradient(90deg,#23b483,#3ee0a6); border-radius:4px; transition:width .5s}

/* ---------------- Paquetes ---------------- */
.pkgs{display:flex; flex-direction:column; gap:.55rem}
.pkg{display:grid; grid-template-columns:2rem 1fr auto; align-items:center; gap:.8rem;
  padding:.55rem .6rem; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm)}
.pkg .num{font-family:var(--mono); color:var(--muted2); font-size:.8rem}
.pkg .pn{font-size:.86rem}
.pkg .pw{font-family:var(--mono); font-size:.72rem; color:var(--muted)}
.pkg .pbar{height:5px; border-radius:3px; background:var(--surface2); margin-top:.35rem; overflow:hidden}
.pkg .pbar>span{display:block; height:100%; background:var(--accent)}
.pkg .pv{font-family:var(--mono); font-weight:700; min-width:3rem; text-align:right}

/* ---------------- Codebox ---------------- */
.codebox{
  font-family:var(--mono); font-size:.82rem; line-height:1.55; color:#cfe0ee;
  background:#070b10; border:1px solid var(--line); border-radius:var(--r-sm);
  padding:1rem 1.1rem; margin:0; white-space:pre; word-break:normal; max-height:520px; overflow:auto;
  tab-size:2; -webkit-overflow-scrolling:touch;
}
.codebox.sm{font-size:.78rem; max-height:340px}

/* ---------------- Galería / docs ---------------- */
.gallery{display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:.6rem}
.gallery figure{margin:0; position:relative; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm); overflow:hidden}
.gallery img{width:100%; height:110px; object-fit:cover; display:block; cursor:zoom-in}
.gallery figcaption{font-size:.72rem; color:var(--muted); padding:.4rem .5rem}
.gallery .tag{position:absolute; top:.35rem; left:.35rem; font-size:.64rem; background:rgba(7,11,16,.8); color:var(--accent); padding:.15rem .4rem; border-radius:5px; font-family:var(--mono)}
.docs{display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.8rem}
.docs a{display:inline-flex; align-items:center; gap:.45rem; font-size:.8rem; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.45rem .7rem; text-decoration:none}
.docs a:hover{border-color:var(--accent)}
.empty{color:var(--muted2); font-size:.85rem; font-style:italic}

/* ---------------- Tabla ---------------- */
.table-wrap{overflow:auto}
.tbl{width:100%; border-collapse:collapse; font-size:.85rem}
.tbl th,.tbl td{text-align:left; padding:.55rem .6rem; border-bottom:1px solid var(--line)}
.tbl th{text-align:center; color:var(--muted); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em}
.tbl td.mono,.tbl th.mono{font-family:var(--mono)}
.dot{display:inline-block; width:.6rem; height:.6rem; border-radius:50%; margin-right:.4rem; vertical-align:middle}
.dot.verde{background:var(--green)} .dot.amarillo{background:var(--amber)} .dot.rojo{background:var(--red)}
.row-link{cursor:pointer}
.row-link:hover td{background:rgba(52,211,153,.05)}

/* ---------------- Dos columnas ---------------- */
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.mini-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.5rem}
.mini-head h3{font-size:.88rem; color:var(--ink)}

.foot{display:flex; flex-direction:column; gap:.25rem; color:var(--muted2); font-size:.74rem; padding:.5rem 0 2rem}

/* ---------------- Modal ---------------- */
.modal{
  position:fixed; inset:0; z-index:50; background:rgba(4,7,10,.58); backdrop-filter:blur(4px);
  display:none; place-items:center;
  padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) max(1rem,env(safe-area-inset-bottom)) max(1rem,env(safe-area-inset-left));
  overflow:auto; -webkit-overflow-scrolling:touch;
}
.modal:not([hidden]){display:grid}
.modal-card{width:min(760px,100%); max-height:calc(100dvh - 2rem - env(safe-area-inset-top) - env(safe-area-inset-bottom)); display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line2); border-radius:var(--r); box-shadow:var(--shadow)}
.sm-card{width:min(440px,100%)}
.modal-head{display:flex; justify-content:space-between; align-items:center; padding:1rem 1.2rem; border-bottom:1px solid var(--line)}
.modal-head h2{font-size:1.05rem}
.x{background:none; border:none; color:var(--muted); font-size:1.6rem; cursor:pointer; line-height:1; padding:0 .2rem}
.x:hover{color:var(--ink)}
.modal-body{padding:1.1rem 1.2rem; overflow:auto; -webkit-overflow-scrolling:touch}
.modal-foot{display:flex; align-items:center; gap:.6rem; justify-content:flex-end; padding:.9rem 1.2rem; border-top:1px solid var(--line)}
.save-status{margin-right:auto; font-size:.82rem; color:var(--muted)}
.form-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.8rem; margin-bottom:.9rem}
.grp-title{font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--accent); margin:1.2rem 0 .6rem; border-top:1px solid var(--line); padding-top:.9rem}
.check{display:flex; align-items:center; gap:.5rem; font-size:.86rem; margin:.4rem 0; cursor:pointer}
.check input{width:auto}
.modal-body .field{margin-bottom:.8rem}

.afp-preview{display:flex; align-items:center; gap:.7rem; background:var(--bg2); border:1px solid var(--line); border-radius:var(--r-sm); padding:.7rem .9rem}
.afp-preview span{color:var(--muted); font-size:.8rem}
.afp-preview strong{font-family:var(--mono); font-size:1.5rem; margin-right:auto}
.prev-cap{color:var(--amber)!important; font-size:.74rem!important}

.counts{display:grid; grid-template-columns:1fr 1fr; gap:.8rem}
.counts .counter{display:flex; flex-direction:column; gap:.4rem; align-items:center; text-align:center}
.counter>span{font-size:.82rem; color:var(--muted)}
.stepper{display:flex; align-items:center; justify-content:center; gap:.4rem}
.stepper button{width:2rem; height:2rem; border-radius:var(--r-sm); border:1px solid var(--line2); background:var(--surface2); color:var(--ink); font-size:1.1rem; cursor:pointer}
.stepper button:hover{border-color:var(--accent)}
.stepper input{width:3.4rem; text-align:center; font-family:var(--mono)}
.stepper .of{color:var(--muted); font-family:var(--mono); font-size:.85rem}

.sliders{display:flex; flex-direction:column; gap:.7rem}
.sl-group{margin-bottom:.3rem}
.sl-group .gl{font-size:.72rem; color:var(--muted2); text-transform:uppercase; letter-spacing:.06em; margin:.2rem 0 .4rem}
.slider{display:grid; grid-template-columns:1fr 3.2rem; align-items:center; gap:.7rem}
.slider .sname{font-size:.82rem}
.slider input[type=range]{width:100%; accent-color:var(--accent)}
.slider .sval{font-family:var(--mono); text-align:right}
.slider.locked .sname{color:var(--muted2)}

.photo-meta{display:flex; flex-direction:column; gap:.5rem; margin-top:.5rem}
.photo-meta .pm{display:grid; grid-template-columns:1fr 9rem; gap:.5rem; align-items:center}
.photo-meta .pm .nm{font-size:.76rem; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#existingMedia{margin-top:.8rem}
.exist-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:.5rem; margin-top:.4rem}
.exist-grid figure{margin:0; position:relative}
.exist-grid img{width:100%; height:64px; object-fit:cover; border-radius:6px; border:1px solid var(--line)}
.exist-grid .del{position:absolute; top:2px; right:2px; background:rgba(7,11,16,.85); color:var(--red); border:none; border-radius:5px; cursor:pointer; font-size:.7rem; padding:.1rem .3rem}

/* ---------------- Lightbox / toast ---------------- */
.lightbox{position:fixed; inset:0; z-index:60; background:rgba(0,0,0,.9); display:none; place-items:center; padding:1.5rem}
.lightbox:not([hidden]){display:grid}
.lightbox img{max-width:100%; max-height:90dvh; border-radius:8px}
.lightbox button{position:absolute; top:1rem; right:1.2rem; background:none; border:none; color:#fff; font-size:2rem; cursor:pointer}
.toast{position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:70;
  background:var(--surface2); border:1px solid var(--accent); color:var(--ink); padding:.7rem 1.1rem;
  border-radius:var(--r-sm); box-shadow:var(--shadow); font-size:.88rem}

/* ---------------- Responsive ---------------- */
@media (max-width:760px){
  input,textarea,select{font-size:16px}
  .topbar{padding-top:max(.7rem,env(safe-area-inset-top));}
  .hero{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .brand-text small{display:none}
  .topbar-actions{gap:.35rem}
  .topbar-actions .btn-primary{padding:.5rem .7rem; font-size:.85rem}
  .modal{place-items:start center}
  .modal-card{width:100%; margin-top:.5rem}
  .modal-foot{position:sticky; bottom:0; background:var(--surface)}
  .photo-meta .pm{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* =========================================================
   Ajustes responsivos — iPhone/Safari + copy boxes + modal
   ========================================================= */
body{overflow-x:hidden}
.app-shell,.wrap,.panel,.two-col,.two-col>*{min-width:0}

/* Topbar: prevent brand collapse beside actions */
.brand{flex:1 1 auto; min-width:12rem}
.brand-text strong{
  display:block;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  line-height:1.2;
}
.topbar-actions{min-width:0}
.chip{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* Copy areas: contain long WhatsApp text without widening the page */
.codebox{
  display:block;
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:auto;
  overscroll-behavior:contain;
}
.codebox.sm{
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:normal;
  font-size:clamp(.68rem,2.55vw,.78rem);
  line-height:1.45;
  max-height:270px;
}

/* Form rows: never allow fields to overlap */
.form-row{grid-template-columns:repeat(auto-fit,minmax(min(100%,13.5rem),1fr))}
.field{min-width:0}
input,textarea,select{min-width:0}

/* Ergonomic percentage controls */
.sliders{gap:.9rem}
.sl-group{margin-bottom:.8rem}
.sl-group .gl{font-weight:700;color:var(--muted);font-size:.74rem;margin:.45rem 0 .55rem}
.slider{
  display:flex;
  flex-direction:column;
  gap:.55rem;
  padding:.7rem;
  background:var(--bg2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  margin-bottom:.55rem;
}
.slider.locked{opacity:.62}
.sline{display:flex;align-items:flex-start;justify-content:space-between;gap:.8rem}
.slider .sname{font-size:.86rem;line-height:1.35;min-width:0}
.slider .sval{font-family:var(--mono);font-weight:800;text-align:right;white-space:nowrap;color:var(--ink)}
.slider-control{
  display:grid;
  grid-template-columns:auto minmax(7rem,1fr) 4.8rem auto;
  align-items:center;
  gap:.55rem;
}
.slider-control input[type=range]{width:100%;min-width:0;accent-color:var(--accent);touch-action:pan-y;height:2.1rem;padding:0;background:transparent;border:0}
.slider-control input[type=number]{font-family:var(--mono);text-align:center;padding:.45rem .35rem}
.pct-step{
  min-width:2.55rem;
  min-height:2.25rem;
  border-radius:var(--r-sm);
  border:1px solid var(--line2);
  background:var(--surface2);
  color:var(--ink);
  font-weight:700;
  cursor:pointer;
}
.pct-step:hover{border-color:var(--accent)}
.pct-step:disabled,.slider-control input:disabled{opacity:.45;cursor:not-allowed}

@media (max-width:760px){
  .topbar{
    display:grid;
    grid-template-columns:1fr;
    gap:.65rem;
    align-items:start;
    padding:
      max(.7rem,calc(env(safe-area-inset-top) + .45rem))
      .9rem
      .75rem;
  }
  .brand{width:100%;min-width:0;align-items:flex-start}
  .brand-mark{padding-top:.1rem}
  .brand-text strong{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size:.96rem;
    line-height:1.18;
  }
  .brand-text small{
    display:block;
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
    font-size:.72rem;
    line-height:1.25;
    margin-top:.1rem;
  }
  .topbar-actions{
    width:100%;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:.45rem;
  }
  .topbar-actions .btn{justify-content:center;padding:.55rem .7rem}
  .topbar-actions .btn-primary{font-size:.86rem;min-width:0;white-space:normal;line-height:1.15}
  .chip{font-size:.72rem;padding:.45rem .55rem;align-self:stretch;display:flex;align-items:center;justify-content:center}

  .wrap{padding:.9rem;gap:.95rem}
  .panel{padding:.95rem}
  .panel-head{gap:.55rem;margin-bottom:.8rem}
  .panel-head .hint{width:100%;font-size:.7rem}
  .mini-head{align-items:flex-start;gap:.65rem}
  .mini-head h3{line-height:1.25}
  .codebox.sm{font-size:clamp(.66rem,3.05vw,.76rem);max-height:230px;padding:.85rem;line-height:1.42}

  .modal{padding:.75rem .55rem max(.75rem,env(safe-area-inset-bottom))}
  .modal-card{margin-top:0;border-radius:12px;max-height:calc(100dvh - 1.2rem - env(safe-area-inset-bottom))}
  .modal-head{padding:.85rem 1rem}
  .modal-body{padding:.9rem 1rem}
  .modal-foot{gap:.5rem;padding:.75rem 1rem;position:sticky;bottom:0;background:var(--surface);z-index:2}
  .modal-foot .btn{padding:.55rem .75rem}
  .form-row{grid-template-columns:1fr;gap:.65rem;margin-bottom:.75rem}
  .form-row.counts{grid-template-columns:1fr 1fr;gap:.65rem;margin-bottom:.75rem}
  .afp-preview{display:grid;grid-template-columns:auto 1fr;gap:.35rem .6rem;align-items:center}
  .afp-preview strong{font-size:1.35rem;margin:0;text-align:right}
  .prev-cap{grid-column:1 / -1;text-align:left}
  .slider{padding:.65rem}
  .slider-control{grid-template-columns:2.4rem minmax(0,1fr) 4.2rem 2.4rem;gap:.38rem}
  .pct-step{min-width:2.4rem;min-height:2.15rem;padding:0;font-size:.78rem}
  .slider-control input[type=number]{font-size:16px;padding:.4rem .25rem}
}

@media (max-width:390px){
  .topbar-actions{grid-template-columns:1fr 1fr}
  .chip{grid-column:1 / -1}
  .topbar-actions .btn-primary,.topbar-actions .btn-ghost{width:100%}
  .slider-control{grid-template-columns:2.25rem minmax(0,1fr) 3.7rem 2.25rem;gap:.32rem}
  .pct-step{min-width:2.25rem;font-size:.72rem}
}

/* =========================================================
   Ajustes responsivos — modal metadata row
   Objetivo: fecha y hora siempre en la misma línea en móvil,
   sin desbordes horizontales en iPhone/Safari.
   ========================================================= */
.modal-card,
.modal-body,
.modal-foot,
.form-row,
.form-row > *,
.field,
.slider,
.slider-control{
  min-width:0;
  max-width:100%;
}

.modal-card{
  overflow:hidden;
}

.modal-body{
  overflow-x:hidden;
}

.form-row.meta-row{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(12rem,1.15fr);
  align-items:end;
}

.form-row.meta-row .field{
  margin-bottom:0;
}

.meta-row input{
  min-width:0;
  max-width:100%;
}

.meta-row input[type="date"],
.meta-row input[type="time"]{
  -webkit-appearance:none;
  appearance:none;
  height:2.75rem;
  padding:.48rem .45rem;
  text-align:center;
  font-size:16px;
  line-height:1.15;
}

@media (max-width:760px){
  .form-row.meta-row{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
    column-gap:.55rem;
    row-gap:.7rem;
    margin-bottom:.85rem;
  }

  .meta-date{grid-column:1 / 2;}
  .meta-time{grid-column:2 / 3;}
  .meta-author{grid-column:1 / -1;}

  .meta-row .field > span{
    font-size:.82rem;
    line-height:1.15;
  }

  .meta-row input[type="date"],
  .meta-row input[type="time"]{
    height:2.65rem;
    padding:.42rem .32rem;
    font-size:16px;
  }

  #f_author{
    height:2.65rem;
    padding:.45rem .55rem;
    font-size:16px;
  }
}

@media (max-width:360px){
  .form-row.meta-row{
    column-gap:.4rem;
  }

  .meta-row input[type="date"],
  .meta-row input[type="time"]{
    font-size:16px;
    padding:.38rem .22rem;
  }
}

/* ============================================================
   iOS Safari — anti auto-zoom al enfocar campos (red de seguridad)
   Cualquier control editable debe medir >=16px para que Safari
   no haga zoom automático al recibir foco. No se fija maximum-scale,
   de modo que el usuario conserva el pinch-zoom manual cuando lo necesite.
   ============================================================ */
@media (max-width:767px){
  input, textarea, select,
  input[type="text"], input[type="password"], input[type="number"],
  input[type="date"], input[type="time"], input[type="search"],
  .stepper input, .slider-control input[type="number"],
  .meta-row input[type="date"], .meta-row input[type="time"]{
    font-size:16px;
  }
}


/* ---------------- Hero actions / executive controls v10 ---------------- */
html,body{width:100%;max-width:100%;overflow-x:hidden;overscroll-behavior-x:none}
.app-shell,.wrap,.panel,.hero,.hero-chart,.codebox-shell{max-width:100%;overflow-x:clip}
.wrap{padding-bottom:1.35rem}
.hero{gap:1rem;padding:1.02rem 1.12rem}
.hero-chart figcaption{font-size:.74rem;margin-bottom:.35rem}
.hero .curve{height:176px;min-height:176px;max-height:176px}
.afp-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) clamp(10.4rem,36%,13.4rem);
  align-items:start;
  gap:.78rem;
  margin:.12rem 0 .08rem;
}
.afp-main{min-width:0}
.afp-line{display:flex;align-items:flex-start;gap:.05rem;margin:0}
.afp-num{font-size:clamp(3rem,7.45vw,4.12rem);line-height:.88}
.afp-pct{font-size:1.32rem;line-height:1.12;margin-top:.32rem}
.afp-meta{margin-top:.08rem;display:flex;align-items:center;gap:.5rem;font-size:.92rem;color:var(--ink)}
.hero-report-actions{display:flex;flex-direction:column;gap:.52rem;align-self:start;padding-top:.33rem;min-width:0}
.hero-report-actions .btn{width:100%;justify-content:center;border-radius:15px;padding:.66rem .78rem;font-weight:760;letter-spacing:.005em;min-height:2.65rem;box-shadow:none}
.btn-report-day{
  color:#06241a;
  border-color:rgba(210,255,235,.52);
  background:
    radial-gradient(120% 130% at 18% 0%, rgba(255,255,255,.45), rgba(255,255,255,0) 42%),
    linear-gradient(135deg,#a7f8d5 0%,#63e6aa 48%,#2fbd82 100%);
  box-shadow:0 10px 22px rgba(48,186,130,.18), inset 0 1px 0 rgba(255,255,255,.52);
}
.btn-report-day:hover{filter:brightness(1.035);color:#06241a;transform:translateY(-1px)}
.btn-report-range{
  color:#e9f3ff;
  background:linear-gradient(180deg,rgba(23,34,49,.72),rgba(12,18,28,.72));
  border-color:rgba(105,128,163,.52);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.btn-report-range:hover{border-color:rgba(84,217,157,.72);color:#fff;transform:translateY(-1px)}
.readout-grid{margin-top:.72rem}

.executive-head{align-items:center;margin-bottom:.75rem}
.executive-head h2{font-size:1.03rem}
.executive-head .icon-btn{margin-left:auto;flex:0 0 auto}
.codebox-shell{position:relative;min-width:0}
.codebox{white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;overflow-x:hidden;max-height:470px}
.icon-btn{width:2.45rem;height:2.45rem;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;border:1px solid rgba(115,138,170,.42);background:linear-gradient(180deg,rgba(26,38,56,.72),rgba(11,17,27,.72));color:#dbeafe;cursor:pointer;transition:.15s;box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.icon-btn:hover{border-color:var(--accent);color:#fff;transform:translateY(-1px)}
.icon-btn svg{width:1.05rem;height:1.05rem}

.modal.documentary-lock .sliders,
.modal.documentary-lock .counts,
.modal.documentary-lock #f_afac{opacity:.55}
.modal.documentary-lock .slider-control input,
.modal.documentary-lock .slider-control button,
.modal.documentary-lock .stepper input,
.modal.documentary-lock .stepper button,
.modal.documentary-lock #f_afac{pointer-events:none}

@media (max-width:760px){
  .hero{padding:.98rem .95rem .92rem;gap:.76rem}
  .hero .curve{height:158px;min-height:158px;max-height:158px}
  .afp-head{grid-template-columns:minmax(0,1.04fr) minmax(8.8rem,.82fr);gap:.64rem;margin:.08rem 0 0;align-items:start}
  .afp-num{font-size:clamp(3.05rem,16.6vw,4rem)}
  .afp-pct{font-size:1.12rem;margin-top:.2rem}
  .afp-meta{margin-top:.02rem;font-size:.9rem;line-height:1.2}
  .hero-report-actions{gap:.42rem;padding-top:.38rem;align-self:start}
  .hero-report-actions .btn{min-height:2.26rem;padding:.49rem .42rem;font-size:.76rem;border-radius:13px;white-space:normal;line-height:1.1}
  .readout-grid{margin-top:.58rem}
  .executive-head{display:flex;flex-direction:row;align-items:center;gap:.75rem;flex-wrap:nowrap}
  .executive-head h2{min-width:0;font-size:1rem;line-height:1.18}
  .executive-head .icon-btn{width:2.35rem;height:2.35rem}
  .codebox{font-size:.78rem;line-height:1.48;max-height:430px;padding:.9rem .95rem}
}

@media (max-width:390px){
  .afp-head{grid-template-columns:minmax(0,1fr) minmax(8.15rem,.77fr);gap:.52rem}
  .hero-report-actions .btn{font-size:.72rem;padding:.45rem .3rem;min-height:2.18rem}
  .afp-num{font-size:3.24rem}
  .afp-pct{font-size:1.02rem}
  .afp-meta{font-size:.86rem}
}