/* Pampa — hoja de estilos. Lenguaje nativo iOS, solo modo claro. Tokens = design/gen2.py */
:root{
  --gbg:#F2F2F7; --cell:#FFFFFF; --sep:#C6C6C8; --label:#000000; --grey:#8A8A8E; --grey3:#C7C7CC; --fill:#E5E5EA;
  --blue:#0A7AFF; --red:#FF3B30; --amber:#F0A000; --gold:#F6B40E; --cel:#74ACDF; --tile:#2C7BC4;
  --bar:#0B1521; --bar-on:#4DA3FF; --bar-off:#7C8AA0; --del:#C0392B; --ins:#0A5BD3; --green:#34C759; --navbg:#F9F9F9;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue","Segoe UI",Roboto,sans-serif;
  --body:16px; --tab:83px; --nav:44px;
}
*{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;overscroll-behavior:none}
body{margin:0;height:100%;background:var(--gbg);color:var(--label);font:17px/1.3 var(--font);-webkit-font-smoothing:antialiased;color-scheme:light}
a{color:var(--blue);text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
input,select{font:inherit;color:inherit}
.g{display:inline-block;flex:none;vertical-align:middle} .g svg{width:100%;height:100%;display:block}
mark{background:#FFF1B8;color:inherit;border-radius:2px;padding:0 1px}
del{color:var(--del);text-decoration:line-through;text-decoration-thickness:1.5px}
ins{color:var(--ins);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.scroll{overflow:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none} .scroll::-webkit-scrollbar{display:none}
.hidden{display:none !important}

/* ---- app shell ---- */
#app{height:100%;display:flex;flex-direction:column}
.panes{flex:1;min-height:0;display:grid;grid-template-columns:1fr}
.pane{display:flex;flex-direction:column;min-height:0;min-width:0;background:var(--gbg)}
.pane.master{display:none}
.pane .content{flex:1;min-height:0}
@media (min-width:900px){
  .panes.split{grid-template-columns:375px minmax(0,1fr)}
  .panes.split .pane.master{display:flex;border-right:1px solid var(--sep)}
  .panes.split .pane.detail .wrap{max-width:820px}
}
.wrap{padding:16px 16px 32px;display:flex;flex-direction:column;gap:24px}
.wrap.tight{gap:18px}

/* ---- barra de navegación ---- */
.nav{background:var(--navbg);border-bottom:1px solid var(--sep);flex:none;padding-top:env(safe-area-inset-top)}
.nav .bar{height:var(--nav);display:grid;grid-template-columns:minmax(60px,auto) minmax(0,1fr) minmax(60px,auto);align-items:center;padding:0 12px}
.nav .back{display:flex;align-items:center;color:var(--blue);font-size:17px;min-width:0;margin-left:-6px;height:44px}
.nav .back span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .title{font-size:17px;font-weight:600;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav .right{display:flex;align-items:center;justify-content:flex-end;gap:14px;color:var(--blue)}
.nav .right button,.nav .right a{display:flex;align-items:center;justify-content:center;min-width:32px;height:44px;color:var(--blue);font-size:17px}
.nav .large{padding:0 16px 8px}
.nav .large h1{margin:0;font-size:34px;font-weight:700;letter-spacing:.3px;line-height:1.2}
.nav .large .sub{font-size:15px;color:var(--grey)}
.nav .under{padding:0 16px 10px;display:flex;flex-direction:column;gap:8px}
.menu-btn{display:inline-flex;align-items:center;gap:2px;color:var(--blue);font-size:17px;white-space:nowrap}

/* ---- listas agrupadas ---- */
.group .hd{padding:0 16px 7px;font-size:13px;color:var(--grey);text-transform:uppercase;letter-spacing:.2px}
.group .box{background:var(--cell);border-radius:10px;overflow:hidden}
.group .ft{padding:7px 16px 0;font-size:13px;color:var(--grey);line-height:1.35}
.row{display:flex;align-items:center;min-height:44px;padding:8px 16px;position:relative;color:var(--label);width:100%;text-align:left;gap:0}
.row.tall{min-height:58px}
.row .lead{flex:none;display:flex;align-items:center;margin-right:12px}
.row .main{flex:1;min-width:0}
.row .t{font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .t.two{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25}
.row .s{font-size:15px;color:var(--grey);line-height:1.3;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .tr{flex:none;font-size:17px;color:var(--grey);margin-left:10px;display:flex;align-items:center;gap:8px}
.row .chev{flex:none;margin-left:6px;color:var(--grey3)}
.row .sepl{position:absolute;left:16px;right:0;bottom:0;height:1px;background:var(--sep)}
.row.lead-sep .sepl{left:62px}
.row.last .sepl{display:none}
.row.blue .t{color:var(--blue)} .row.red .t{color:var(--red)} .row.center .t{text-align:center}
.row.sel{background:#D9D9DE}
.row:active{background:#E5E5EA}
.row .t b{font-weight:600}
.tile{width:34px;height:34px;border-radius:8px;background:var(--tile);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:-.2px;flex:none}
.tile.s3{font-size:12px}
.stile{width:29px;height:29px;border-radius:7px;display:flex;align-items:center;justify-content:center;flex:none}
.check{color:var(--blue);font-size:20px;font-weight:600;line-height:1}

/* ---- inicio ---- */
.today{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--grey);margin:-4px 0 2px}
.hbar{display:flex;height:10px;border-radius:999px;overflow:hidden;gap:2px;background:var(--fill)}
.hbar i{display:block;min-width:4px}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:8px;font-size:13px;color:var(--grey)}
.legend span{display:inline-flex;align-items:center;gap:5px} .legend i{width:8px;height:8px;border-radius:50%;display:inline-block}
.dotnew{width:10px;height:10px;border-radius:50%;background:var(--blue);display:inline-block;margin:0 2px} .dotnew.off{background:transparent}

/* ---- controles ---- */
.seg{display:flex;gap:2px;padding:2px;border-radius:9px;background:var(--fill)}
.seg button{flex:1;display:flex;align-items:center;justify-content:center;height:28px;border-radius:7px;font-size:13px;font-weight:500;color:var(--label)}
.seg button.on{background:var(--cell);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}
.sw{width:51px;height:31px;border-radius:999px;background:var(--fill);position:relative;flex:none;transition:background .15s}
.sw::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.06);transition:left .15s}
.sw.on{background:var(--green)} .sw.on::after{left:22px}
.search{display:flex;align-items:center;gap:10px}
.search .field{flex:1;display:flex;align-items:center;gap:6px;height:36px;padding:0 8px;border-radius:10px;background:var(--fill)}
.search input{flex:1;min-width:0;height:36px;background:transparent;border:0;outline:0;font-size:17px;color:var(--label)}
.search input::placeholder{color:var(--grey)}
.search .cancel{color:var(--blue);font-size:17px;white-space:nowrap}
.btn{display:flex;align-items:center;justify-content:center;height:50px;border-radius:12px;font-size:17px;font-weight:600;width:100%}
.btn.filled{background:var(--blue);color:#fff} .btn.gray{background:var(--fill);color:var(--label)} .btn.black{background:#000;color:#fff} .btn.bordered{background:var(--cell);border:1px solid var(--sep)}

/* ---- barra de pestañas (cromo EFB) ---- */
.tabbar{height:calc(var(--tab) + env(safe-area-inset-bottom));flex:none;background:var(--bar);display:flex;align-items:flex-start;padding:0 8px env(safe-area-inset-bottom)}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding-top:8px;color:var(--bar-off);font-size:10px;font-weight:500;position:relative;height:60px}
.tabbar a.on{color:var(--bar-on);font-weight:600}
.tabbar .badge{position:absolute;top:4px;left:calc(50% + 7px);min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;border:1.5px solid var(--bar)}

/* ---- toolbar ---- */
.toolbar{height:44px;flex:none;background:var(--navbg);border-top:1px solid var(--sep);display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--blue)}
.toolbar .pn{display:flex;align-items:center;gap:2px;font-size:17px;color:var(--blue);min-width:0}
.toolbar .pn span{white-space:nowrap}
.toolbar .acts{display:flex;gap:30px}
.toolbar button{display:flex;align-items:center;color:var(--blue);height:44px}

/* ---- lectura ---- */
.sechead{padding:12px 16px}
.sechead h2{margin:0;font-size:22px;font-weight:700;line-height:1.2}
.sechead .l1{font-size:15px;color:var(--grey);margin-top:6px;line-height:1.35}
.sechead .l2{font-size:13px;color:var(--grey);margin-top:2px;line-height:1.35}
.sechead .l2 .warn{color:var(--amber)}
.segwrap{padding:0 16px 16px}
.body{background:var(--cell);border-radius:10px;padding:16px 16px 4px}
.body p{margin:0 0 12px;font-size:var(--body);line-height:1.5}
.body .l1{margin-left:20px} .body .l2{margin-left:40px} .body .l3{margin-left:60px}
.body b.term{font-weight:600}
.body a.sig{color:var(--label);border-bottom:1px dotted var(--blue)}
.body .note{font-size:13px;color:var(--grey);margin:0 0 12px}
.body p.dp{color:var(--del);text-decoration:line-through} .body p.ip{color:var(--ins);text-decoration:underline;text-underline-offset:3px}
.hit{padding:10px 16px;position:relative;display:block;color:var(--label)}
.hit .h{display:flex;align-items:baseline;gap:8px}
.hit .h .t{font-size:17px;flex:1;min-width:0} .hit .h .p{font-size:13px;color:var(--grey);white-space:nowrap}
.hit .sn{font-size:15px;color:var(--grey);line-height:1.35;margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.az{position:absolute;right:2px;top:12px;display:flex;flex-direction:column;align-items:center;gap:1px}
.az button{color:var(--blue);font-size:11px;font-weight:600;line-height:1.15;padding:0 3px}
.az button.on{background:var(--blue);color:#fff;border-radius:6px}
.empty{padding:40px 24px;text-align:center;color:var(--grey);font-size:15px;line-height:1.4}
.empty .sun{width:64px;height:64px;margin:0 auto 12px;opacity:.5}
.empty-detail{flex:1;display:flex;align-items:center;justify-content:center}

/* ---- bienvenida (primera apertura / terminos nuevos) ---- */
.login{flex:1;display:flex;flex-direction:column;background:var(--gbg)}
.login .brand{display:flex;flex-direction:column;align-items:center;gap:8px;padding:calc(56px + env(safe-area-inset-top)) 16px 20px}
.login .brand .icon{width:100px;height:100px}
.login .brand h1{margin:10px 0 0;font-size:28px;font-weight:700}
.login .brand .sub{font-size:15px;color:var(--grey)}

/* ---- hoja de acciones ---- */
.sheet-bg{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{width:100%;max-width:520px;padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
.sheet .box{background:rgba(249,249,249,.96);border-radius:14px;overflow:hidden}
.sheet .box button{display:block;width:100%;height:57px;font-size:20px;color:var(--blue);border-bottom:1px solid var(--sep);text-align:center}
.sheet .box button:last-child{border-bottom:0}
.sheet .box button.on{font-weight:600}
.sheet .box .h{min-height:44px;padding:10px 16px;display:flex;align-items:center;justify-content:center;text-align:center;line-height:1.35;font-size:13px;color:var(--grey);border-bottom:1px solid var(--sep)}
.sheet .cancel{margin-top:8px;background:#fff;border-radius:14px;height:57px;width:100%;font-size:20px;font-weight:600;color:var(--blue)}

/* ---- toast ---- */
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 20px + env(safe-area-inset-bottom));transform:translateX(-50%);background:rgba(0,0,0,.82);color:#fff;padding:9px 16px;border-radius:999px;font-size:14px;z-index:60;opacity:0;pointer-events:none;transition:opacity .2s;white-space:nowrap}
.toast.show{opacity:1}
.offline{background:#FFF4D6;color:#8A5A00;font-size:12.5px;text-align:center;padding:5px 10px;border-bottom:1px solid var(--sep)}
.progress{position:absolute;left:0;right:0;top:0;height:2px;background:var(--blue);transform-origin:left;transform:scaleX(0);transition:transform .3s;z-index:5;opacity:.85}
/* legal */
.legal-note{padding:0 16px;font-size:13px;color:var(--grey);line-height:1.4;margin-top:-8px}
.login .brand .sub{text-align:center;padding:0 24px;line-height:1.35}