/* Atmios Gestor · complementos sobre el estilo de los paneles Atmios TV+ */
:root{--wa:#25D366;--hot:#FF8A4C}
body{padding-bottom:env(safe-area-inset-bottom)}
.top-wrap{padding-top:env(safe-area-inset-top)}
.ok-t{color:var(--ok)!important}.warn-t{color:var(--warn)!important}
.tbl td small.ok-t,.tbl td small.warn-t{font-size:12.5px}
.count{display:inline-grid;place-items:center;min-width:30px;height:26px;padding:0 9px;border-radius:99px;background:rgba(41,217,245,.1);color:var(--cyan);font-size:13.5px;font-weight:800;vertical-align:3px;margin-left:6px}
.pad-b{padding-bottom:20px!important;padding-top:6px!important}
.empty-big{text-align:center;color:var(--muted);font-size:17px;margin:10px 0}
.badge.info{background:var(--primary2);box-shadow:0 0 0 3px rgba(26,140,255,.25)}
.top-acts .btn-out.back .ic{color:var(--gold)}

/* Chip de servicio con su color */
.chip{display:inline-flex;align-items:center;gap:7px;padding:4px 11px 4px 9px;border-radius:99px;font-size:12.5px;font-weight:800;letter-spacing:.06em;
  color:var(--c);background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 40%,transparent);white-space:nowrap}
.chip::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);box-shadow:0 0 10px var(--c)}
@supports not (background:color-mix(in srgb,red 10%,transparent)){.chip{background:rgba(41,217,245,.08);border-color:var(--line2)}}
.pill.hot{color:#FFC2A3;background:rgba(255,138,76,.13);border-color:rgba(255,138,76,.45)}

/* Semáforo de vencimientos */
.tbl tr[class^="sem-"] td:first-child{position:relative}
.tbl tr.sem-red td:first-child{box-shadow:inset 4px 0 0 var(--bad)}
.tbl tr.sem-amber td:first-child{box-shadow:inset 4px 0 0 var(--hot)}
.tbl tr.sem-yellow td:first-child{box-shadow:inset 4px 0 0 var(--warn)}
.tbl tr.sem-past td:first-child{box-shadow:inset 4px 0 0 var(--dim)}
.tbl td.acts{white-space:normal;text-align:right;min-width:150px}
.tbl td.acts > *{margin:3px 0 3px 4px;vertical-align:middle}
.tbl td.acts form.inline{display:inline-block}
.tbl td .u{color:var(--text);font-weight:700}
.tbl td .chip + small{margin-top:6px}

/* Botones extra */
.btn.wa{background:linear-gradient(135deg,#2FE07A,#1DAF56);color:#03210F;box-shadow:0 10px 26px -12px rgba(37,211,102,.9)}
.btn.wa:hover{filter:brightness(1.08)}
.btn .ic.xs,.ic.xs{width:14px;height:14px}
.btn.sm span{white-space:nowrap}
.btn[disabled]{opacity:.55;pointer-events:none}

/* Notas de aviso */
.note.warn-note{border-color:rgba(246,192,74,.45);background:rgba(246,192,74,.07);color:#F4DFA8;margin:0}
.note .ic{flex:none;margin-top:1px}
.note a{font-weight:700}

/* Filtros */
.filters-card{padding:18px 20px}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.filters select{width:auto;min-width:170px;flex:0 1 auto}
.search-box{position:relative;flex:1 1 280px;min-width:0}
.search-box .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--muted);width:18px;height:18px}
.search-box input{padding-left:42px}
.seg.big a{padding:10px 16px;font-size:14.5px}
.month-nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.month-nav h2{font-size:22px}

/* Formularios en renglones */
.row-2,.row-3{display:grid;gap:14px;grid-template-columns:repeat(2,minmax(0,1fr))}
.row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.row-2 > div,.row-3 > div{min-width:0;display:flex;flex-direction:column}
.row-inline{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.row-inline input{flex:1 1 150px;width:auto}
.form .row-2 label,.form .row-3 label{margin-top:18px}
input[type=datetime-local]{-webkit-appearance:none;appearance:none;min-width:0;color-scheme:dark;height:calc(1.5em + 30px)}
input.color-in{padding:6px;height:calc(1.5em + 30px);cursor:pointer}
input.code-in{font-size:28px;letter-spacing:.4em;text-align:center}
.warn-row{border-color:rgba(246,192,74,.45)!important}
details.adv{margin-top:20px;border:1px solid var(--line2);border-radius:14px;padding:12px 16px;background:rgba(7,18,36,.5)}
details.adv summary{cursor:pointer;font-weight:700;color:var(--cyan)}

/* Mensaje estilo WhatsApp */
.msg-preview{white-space:normal;margin:12px 0;padding:14px 16px;border-radius:16px 16px 16px 4px;background:#0B3B2A;border:1px solid rgba(37,211,102,.25);color:#E7F7EE;font-size:14.5px;line-height:1.55;max-width:560px;word-break:break-word}
.msg-preview.sm{font-size:13.5px;padding:12px 14px}

/* Campo con copiar */
.cfield{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.cfield .cl{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.cfield .cv{display:flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;border-radius:12px;border:1px solid var(--line2);background:var(--input);min-width:0}
.cfield code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14.5px}
.mini-cred{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;margin-top:8px}

/* Tarjetas de servicio */
.svc-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.svc-card{border-top:3px solid var(--c);display:flex;flex-direction:column;gap:14px}
.svc-card.off{opacity:.55}
.svc-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.svc-head h2{font-size:26px;letter-spacing:.04em;color:var(--c)}
.svc-status{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:13.5px;font-weight:600}
.svc-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.svc-nums > div{padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(7,18,36,.55);text-align:center}
.svc-nums b{display:block;font-size:26px;font-weight:800;letter-spacing:-.03em}
.svc-nums span{font-size:12px;color:var(--muted)}
.svc-nums .cr b{color:var(--cyan)}
.svc-nums .cr.low{border-color:rgba(255,92,122,.45)}
.svc-nums .cr.low b{color:var(--bad)}
.cred-form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cred-form input{width:110px;flex:none;padding:9px 12px}
.cred-form small{color:var(--dim);font-size:12.5px}
.svc-links{display:flex;flex-wrap:wrap;gap:8px}
.svc-cred{border-top:1px solid var(--line);padding-top:4px}
.svc-foot{display:flex;align-items:center;gap:10px;justify-content:space-between;border-top:1px solid var(--line);padding-top:14px;margin-top:auto}
.svc-foot .mono{color:#9CC9F5;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.cred-big{font-size:40px;font-weight:800;letter-spacing:-.03em;margin:6px 0;color:var(--cyan)}
.cred-big.low{color:var(--bad)}
.cred-big small{font-size:14px;color:var(--muted);font-weight:600;letter-spacing:0}

/* Lista corta de servicios en el panel */
.svc-mini{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.svc-mini li{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(7,18,36,.55)}
.svc-mini-main{display:flex;align-items:center;gap:10px;flex:1;min-width:0;color:var(--text)}
.svc-mini-n{font-size:13px;color:var(--muted);line-height:1.3}
.svc-mini-n em{font-style:normal;color:var(--warn)}
.cred{font-weight:800;color:var(--cyan);white-space:nowrap}
.cred.low{color:var(--bad)}
.cred small{color:var(--muted);font-weight:600}
.svc-mini-acts{display:flex;gap:4px}

.stack-col .card{min-width:0}
.mini-list{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.mini-list li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(7,18,36,.5);font-size:14px}
.mini-list li small{color:var(--muted);white-space:nowrap}
.mini-list li a{display:flex;align-items:center;gap:8px;color:var(--text);min-width:0}
.mini-list.log li{font-size:13px;padding:8px 12px}
.steps-list{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:10px;color:#C9D6EA}
.steps-list a{font-weight:700}

/* Demos */
.svc-block > label:first-child{margin-top:16px!important}
.svc-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.svc-opt{position:relative;margin:0!important;cursor:pointer}
.svc-opt input{position:absolute;opacity:0;pointer-events:none}
.svc-opt span{display:flex;align-items:center;justify-content:center;gap:8px;padding:16px 8px;border-radius:16px;border:1px solid var(--line2);background:var(--input);font-weight:800;letter-spacing:.06em;color:#C9D6EA;transition:all .15s}
.svc-opt span em{font-style:normal;font-size:10.5px;padding:2px 7px;border-radius:99px;background:rgba(43,217,139,.14);color:var(--ok);letter-spacing:.04em}
.svc-opt input:checked + span{border-color:var(--c);color:#fff;background:linear-gradient(160deg,color-mix(in srgb,var(--c) 35%,transparent),var(--input));box-shadow:0 10px 26px -14px var(--c)}
.svc-opt input:focus-visible + span{box-shadow:0 0 0 4px rgba(41,217,245,.25)}
.steps{display:flex;flex-direction:column;gap:12px;margin-top:14px}
.step{display:flex;flex-direction:column;gap:8px;margin-top:14px;padding:16px 18px;border-radius:16px;border:1px solid var(--line2);background:rgba(7,18,36,.55)}
.steps .step{margin-top:0}
.step > b{display:flex;align-items:center;gap:8px;font-size:15.5px}
.step > span{color:var(--muted);font-size:14px}
.step > .btn{align-self:flex-start}
.step.api{border-color:rgba(43,217,139,.4);background:rgba(43,217,139,.06)}
.step label{margin-top:12px!important}
.conv-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px}
.conv-list li{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"chip txt pct" "bar bar bar";gap:6px 12px;align-items:center}
.conv-list li .chip{grid-area:chip}
.conv-list li span{grid-area:txt;color:var(--muted);font-size:13.5px}
.conv-list li b{grid-area:pct}
.conv-list .bar,.progress .bar{grid-area:bar;height:8px;border-radius:99px;background:var(--input);border:1px solid var(--line);overflow:hidden}
.conv-list .bar i,.progress .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--cyan));border-radius:99px;transition:width .3s}
.progress{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.progress span{color:var(--muted);font-size:13.5px}
.suggest{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:10px}
.suggest > span{color:var(--muted);font-size:13px}
.suggest.inline{margin-top:8px}

/* Renovar */
.plan-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.plan{position:relative;margin:0!important;cursor:pointer}
.plan input{position:absolute;opacity:0}
.plan span{display:flex;flex-direction:column;gap:2px;padding:14px;border-radius:16px;border:1px solid var(--line2);background:var(--input);height:100%}
.plan b{font-size:16px}
.plan small{color:var(--muted);font-size:12.5px}
.plan em{font-style:normal;font-weight:800;color:var(--cyan);margin-top:6px;font-size:18px}
.plan input:checked + span{border-color:var(--cyan);background:linear-gradient(160deg,rgba(0,102,204,.3),var(--input));box-shadow:0 10px 26px -14px rgba(0,102,204,.9)}

/* Planes editables */
.plans-edit{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.pe-head,.pe-row{display:grid;grid-template-columns:minmax(0,2fr) repeat(4,minmax(0,1fr)) 38px;gap:8px;align-items:center}
.pe-head span{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pe-row input{padding:10px 10px;font-size:14px}
.pe-f{margin:0!important;display:block;min-width:0;font-weight:400!important}
.pe-l{display:none}
.detect-res{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.detect-res li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(7,18,36,.55);font-size:13.5px}
.detect-res li code{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.detect-res li.ok{border-color:rgba(43,217,139,.45)}
.danger-zone{margin-top:6px;display:flex;justify-content:flex-end}

/* Importar */
.map-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 14px}
.map-grid > div{min-width:0;display:flex;flex-direction:column}

/* Mensajes */
.var-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vchip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 12px;border-radius:12px;border:1px solid var(--line2);background:var(--input);color:var(--cyan);font:600 13.5px var(--mono);cursor:pointer}
.vchip small{font:500 11.5px var(--font);color:var(--muted)}
.vchip:hover{border-color:var(--cyan)}
.tpl-card textarea{font-size:14px;line-height:1.5}

.sync{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:var(--muted);white-space:nowrap}
.sync.ok{color:#9BF0C8}.sync.bad{color:#FFB0BF}.sync.warn{color:#F4DFA8}
.qr{display:inline-block;padding:12px;border-radius:14px;background:#fff;margin:6px 0 12px}
.qr:empty{display:none}

/* Aviso flotante */
.toast{position:fixed;left:50%;bottom:calc(22px + env(safe-area-inset-bottom));transform:translate(-50%,30px);opacity:0;pointer-events:none;z-index:50;
  padding:12px 20px;border-radius:14px;background:#0F2A4A;border:1px solid var(--line2);color:#fff;font-weight:700;box-shadow:0 20px 50px -20px #000;transition:all .25s;max-width:calc(100vw - 32px);text-align:center}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#4A1222;border-color:rgba(255,92,122,.5)}

@media (max-width:1100px){.svc-grid{grid-template-columns:1fr}.map-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .top-acts .btn-out.back span{display:none}
  .svc-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .row-2,.row-3{grid-template-columns:1fr;gap:0}
  .filters{gap:8px}
  .filters select,.filters .search-box{flex:1 1 100%;min-width:0;width:100%}
  .filters > .btn{flex:1 1 100%}
  .seg.big{display:flex;width:100%;overflow-x:auto}
  .seg.big a{flex:1;text-align:center;padding:8px 6px;font-size:13px;white-space:nowrap}
  .svc-nums{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
  .svc-nums > div{padding:10px 4px}
  .svc-nums b{font-size:21px}
  .svc-nums span{font-size:10.5px;line-height:1.2;display:block}
  .svc-head h2{font-size:22px}
  .svc-links .btn{flex:1 1 auto}
  .svc-mini li{flex-wrap:wrap}
  .svc-mini-main{flex:1 1 100%}
  .svc-mini .cred{margin-left:24px}
  .svc-mini-acts{margin-left:auto}
  .tbl.stack td.acts > *{margin:0}
  .tbl.stack td.acts .btn.sm span{display:none}
  .tbl.stack td.acts .btn.sm{min-width:42px;height:40px;padding:0 12px}
  .tbl.stack td.acts .btn.wa.sm span,.tbl.stack td.acts .btn.primary.sm span{display:inline}
  .tbl.stack tr[class^="sem-"] td:first-child{box-shadow:none}
  .tbl.stack tr.sem-red{border-left:4px solid var(--bad)}
  .tbl.stack tr.sem-amber{border-left:4px solid var(--hot)}
  .tbl.stack tr.sem-yellow{border-left:4px solid var(--warn)}
  .tbl.stack tr.sem-past{border-left:4px solid var(--dim)}
  .tbl.stack td .chip{justify-self:end}
  .pe-head{display:none}
  .pe-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 10px;padding:12px;border:1px solid var(--line);border-radius:14px;position:relative}
  .pe-row .pe-name{grid-column:1 / -1;padding-right:48px}
  .pe-row [data-plan-del]{position:absolute;top:12px;right:12px}
  .pe-l{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;white-space:nowrap}
  .pe-name .pe-l{margin-top:2px}
  .map-grid{grid-template-columns:1fr}
  .msg-preview{font-size:14px}
  .month-nav h2{font-size:18px}
  .cfield code{font-size:13.5px}
  .conv-list li{grid-template-columns:auto 1fr auto}
  .danger-zone{justify-content:stretch}
  .danger-zone .btn{width:100%}
}

/* ---------- Estilo «glow»: letra blanca con contorno azul eléctrico (como el logo) ---------- */
.chip.glow{color:#fff;background:rgba(8,62,112,.5);border-color:rgba(41,217,245,.55);
  text-shadow:0 0 1px #0B3F86,0 0 2px #0B3F86,0 0 6px rgba(26,140,255,.95),0 0 12px rgba(41,217,245,.55)}
.chip.glow::before{background:#fff;box-shadow:0 0 2px #1A8CFF,0 0 9px #29D9F5}
.svc-card.glow .svc-head h2{color:#fff;letter-spacing:.06em;
  text-shadow:-1px -1px 0 #0A2F66,1px -1px 0 #0A2F66,-1px 1px 0 #0A2F66,1px 1px 0 #0A2F66,0 0 8px #1A8CFF,0 0 18px rgba(41,217,245,.75),0 0 34px rgba(0,102,204,.6)}
.svc-opt.glow span{color:#fff;text-shadow:0 0 1px #0B3F86,0 0 6px rgba(26,140,255,.9)}
.svc-opt.glow input:checked + span{border-color:#29D9F5;background:linear-gradient(160deg,rgba(26,140,255,.45),var(--input));
  text-shadow:-1px -1px 0 #0A2F66,1px 1px 0 #0A2F66,0 0 8px #1A8CFF,0 0 16px rgba(41,217,245,.8)}
.style-preview{display:flex;align-items:center;gap:12px;margin-top:14px;color:var(--muted);font-size:14px}

/* ---------- Que nada empuje el ancho de la pantalla ---------- */
.grid-2 > *,.stack-col > *,.svc-grid > *,.card,.content > *{min-width:0}
code,.mono{overflow-wrap:anywhere}
.hint code,.muted code{word-break:break-all}
@media (max-width:1100px){.svc-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:980px){.grid-2,.grid-2.split-l,.grid-2.split-r{grid-template-columns:minmax(0,1fr)}}

/* ---------- Barra inferior del celular (oculta en PC) ---------- */
.bnav,.more-sheet{display:none}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

@media (max-width:640px){
  /* Encabezado fijo y compacto; el menú de botones pasa abajo */
  body.app .tiles{display:none}
  body.app .top-wrap{position:sticky;top:0;z-index:20;background:rgba(5,13,28,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  body.app .topbar{padding:10px 14px}
  body.app .brand{flex-direction:row;align-items:center;gap:10px}
  body.app .brand img{width:92px}
  body.app .brand-tag{font-size:9.5px;letter-spacing:.14em;line-height:1.2;max-width:70px}
  body.app .top-acts form{display:none}
  body.app .top-acts .btn-out.back{padding:9px 12px}
  .page-head .avatar{display:none}
  .page-head h1{font-size:25px}
  .main{padding:18px 14px calc(96px + env(safe-area-inset-bottom))}
  .toast{bottom:calc(88px + env(safe-area-inset-bottom))}

  .bnav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;position:fixed;left:0;right:0;bottom:0;z-index:30;
    padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(7,19,39,.94);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
    border-top:1px solid var(--line);box-shadow:0 -10px 30px -12px rgba(0,0,0,.8)}
  .bnav a,.bnav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;padding:6px 2px;border:0;border-radius:14px;
    background:none;color:var(--muted);font:700 11px var(--font);-webkit-tap-highlight-color:transparent;cursor:pointer}
  .bnav .bi{position:relative;display:grid;place-items:center}
  .bnav .ic{width:24px;height:24px}
  .bnav .on{color:#fff;background:linear-gradient(160deg,rgba(26,140,255,.38),rgba(0,102,204,.12))}
  .bnav .on .ic{color:var(--cyan)}
  .bnav .badge{top:-7px;right:-13px;min-width:18px;height:18px;padding:0 5px;font-size:10.5px;box-shadow:0 0 0 2px rgba(7,19,39,.95)}

  .more-sheet{display:block;position:fixed;inset:0;z-index:40}
  .more-sheet[hidden]{display:none}
  .more-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6)}
  .more-panel{position:absolute;left:0;right:0;bottom:0;padding:10px 16px calc(18px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;
    background:linear-gradient(180deg,var(--card2),var(--bg2));border-top:1px solid var(--line2);animation:sheetUp .22s ease;max-height:85vh;overflow:auto}
  .more-top{position:relative;display:flex;justify-content:center;align-items:center;min-height:34px;margin-bottom:10px}
  .more-grip{width:44px;height:5px;border-radius:9px;background:var(--line2)}
  .more-x{position:absolute;right:0;top:0}
  .more-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .more-grid a{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 6px;border-radius:18px;border:1px solid var(--line);
    background:rgba(12,26,46,.8);color:#D5E1F2;font-weight:700;font-size:13px}
  .more-grid a .ic{width:24px;height:24px}
  .more-grid a.on{background:linear-gradient(160deg,var(--primary2),var(--primary) 70%);border-color:transparent;color:#fff}
  .more-grid .badge{top:-6px;right:-4px;min-width:20px;height:20px;font-size:11px}
  .more-acts{display:flex;flex-direction:column;gap:10px;margin-top:16px}
  .more-acts .btn,.more-acts form,.more-acts form .btn{width:100%}

  /* Campos de 16 px: el iPhone ya no hace zoom al tocarlos */
  input,select,textarea{font-size:16px!important}
  .cfield code{white-space:normal;word-break:break-all;font-size:13.5px}
  .diagpre{font-size:12px}

  /* Tarjetas compactas (vencimientos, clientes, demos) */
  .tbl.stack.cards tbody{gap:10px}
  .tbl.stack.cards tr{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"cli est" "svc ven" "sync sync" "acts acts";
    gap:8px 12px;padding:14px 14px 12px}
  .tbl.stack.cards td{display:block;padding:0;border:0;text-align:left;min-width:0}
  .tbl.stack.cards td::before{display:none}
  .tbl.stack.cards td > *{justify-self:auto;grid-column:auto}
  .tbl.stack.cards td small{text-align:inherit;margin-top:2px}
  .tbl.stack.cards .c-cli{grid-area:cli}
  .tbl.stack.cards .c-cli .u,.tbl.stack.cards .c-cli b{font-size:16px}
  .tbl.stack.cards .c-est{grid-area:est;text-align:right}
  .tbl.stack.cards .c-svc{grid-area:svc;display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px}
  .tbl.stack.cards .c-svc small{display:inline;margin:0}
  .tbl.stack.cards .c-ven{grid-area:ven;text-align:right;white-space:nowrap}
  .tbl.stack.cards .c-sync{grid-area:sync}
  .tbl.stack.cards .c-sync small{display:block}
  .tbl.stack.cards td.acts{grid-area:acts;display:flex;flex-wrap:nowrap;gap:8px;justify-content:flex-end;padding-top:12px;border-top:1px solid rgba(37,64,106,.45)}
  .tbl.stack.cards td.acts > *{margin:0}
  .tbl.stack.cards td.acts .btn.wa{flex:1 1 auto;min-width:0}
  .tbl.stack.cards td.acts [data-copy]{display:none}
  .tbl.stack.cards td.acts .btn.sm{height:42px}
  .tbl.stack.cards td.acts form.inline{display:flex}
  .tbl.stack.cards tr:has(td.empty){display:block}
  .tbl.stack.cards td.empty{display:block;text-align:center;padding:18px 0}
  .tbl.stack.cards td .pill{white-space:nowrap}
  .tbl.stack.cards tr.sem-red,.tbl.stack.cards tr.sem-amber,.tbl.stack.cards tr.sem-yellow,.tbl.stack.cards tr.sem-past{border-left-width:4px}

  /* Ajustes y formularios largos */
  .toggle-row{gap:12px}
  .toggle-row > span:first-child{min-width:0}
  .row-inline > *{flex:1 1 100%}
  .row-inline .btn{width:100%}
  details.adv{padding:12px}
  .qr{display:block;width:max-content;margin:6px auto 12px}
  .style-preview{flex-wrap:wrap}
  .tabs{display:flex;width:100%;overflow-x:auto}
  .tabs a{flex:1;text-align:center;white-space:nowrap}
  .svc-foot{flex-wrap:wrap}
  .svc-foot .mono{flex:1 1 100%}
  .svc-foot .btn{margin-left:auto}
  .page-head p{font-size:13.5px}
  /* Filtros en dos columnas para que ocupen menos */
  .filters-card .filters{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filters-card .filters .search-box,.filters-card .filters > .btn,.filters-card .filters .seg{grid-column:1 / -1}
  .filters-card .filters select{min-width:0;width:100%}
  .filters-card .filters select:only-of-type{grid-column:1 / -1}
  .filters-card .row-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .filters-card .row-btns .btn:first-child{grid-column:1 / -1}
  .filters-card .row-btns .btn{font-size:13.5px;padding:11px 8px}
}
@media (max-width:360px){
  .bnav a,.bnav button{font-size:10px}
  .more-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}