/* Móvil e iPhone (también instalado como app): barra inferior con 5 accesos y hoja «Más», zonas seguras del iPhone
   (raya de inicio y muesca), botones de al menos 40-44 px para el dedo, campos a 16 px para que iOS no amplíe la
   pantalla al escribir y ventanas como hoja inferior. Va después del resto de hojas de estilo. */

/* «Más» y su hoja solo existen en el móvil. */
nav .more{display:none}
.moresheet[hidden]{display:none}

@media (max-width:900px){
  /* Barra inferior: 5 accesos fijos, con hueco para la raya de inicio del iPhone. */
  .side{padding:6px 6px calc(6px + env(safe-area-inset-bottom));padding-left:max(6px, env(safe-area-inset-left));padding-right:max(6px, env(safe-area-inset-right))}
  nav{justify-content:space-around;gap:0;overflow:visible}
  nav a.secondary{display:none}
  nav a,nav .more{flex:1 1 0;min-width:0;min-height:52px;justify-content:center;padding:6px 2px;font-size:10.5px;border-radius:12px}
  nav a span,nav .more span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
  nav .more{display:flex;flex-direction:column;align-items:center;gap:2px;position:relative;background:none;border:0;color:var(--mu);font:550 10.5px var(--font);cursor:pointer}
  nav .more.on{background:var(--orbg);color:var(--tx)}
  nav .more .count{position:absolute;top:0;right:calc(50% - 22px);margin:0;font-size:9px;background:var(--or);color:#1a0b00;border-radius:999px;font-weight:700;padding:1px 6px;font-style:normal}

  /* Hoja «Más». */
  .moresheet{position:fixed;inset:0;z-index:25;background:rgba(5,6,8,.6);display:flex;align-items:flex-end;animation:fade .15s}
  .moresheet-card{width:100%;background:var(--card);border-top:1px solid var(--line2);border-radius:20px 20px 0 0;padding:8px 12px calc(14px + env(safe-area-inset-bottom));animation:sheetup .2s ease-out}
  .moresheet-grip{width:40px;height:4px;border-radius:99px;background:var(--line2);margin:4px auto 10px}
  #morenav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  #morenav a,#morenav button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:10px 6px;border-radius:14px;background:var(--bg2);border:1px solid var(--line);color:var(--tx);font:600 13px var(--font);position:relative;cursor:pointer}
  #morenav a.on{border-color:var(--or);background:var(--orbg)}
  #morenav .count{position:absolute;top:6px;right:8px;margin:0;background:var(--or);color:#1a0b00;border-radius:999px;font-size:11px;font-weight:700;padding:1px 7px;font-style:normal}

  /* Contenido: margen para la barra inferior y la raya de inicio, y respeto a la muesca en horizontal. */
  .main{padding:calc(14px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left))}
  .fab{right:max(16px, env(safe-area-inset-right));bottom:calc(76px + env(safe-area-inset-bottom));padding:11px 16px}
  .toast{bottom:calc(84px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);text-align:center}

  /* Campos a 16 px: iOS amplía la pantalla al tocar un campo con letra más pequeña. */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{font-size:16px}

  /* Ventanas como hoja inferior, fáciles de usar con el pulgar. */
  .modal{place-items:end stretch;padding:0}
  .modal-card{width:100%;max-height:92dvh;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:sheetup .2s ease-out}
  .modal-card .foot{position:sticky;bottom:calc(-18px - env(safe-area-inset-bottom));background:var(--card);padding:10px 0 4px;margin-top:12px}

  /* Ficha a pantalla completa. */
  .drawer .panel{width:100%;padding:calc(14px + env(safe-area-inset-top)) 16px calc(24px + env(safe-area-inset-bottom));height:100dvh}
  .ficha-acts{flex-wrap:wrap}

  /* Encabezados: título y acciones uno debajo del otro. */
  .head{flex-wrap:wrap;gap:10px}
  .head .actions{flex-wrap:wrap}
}

/* Pantallas táctiles: todo lo que se toca, al menos 40-44 px de alto. */
@media (pointer:coarse){
  .btn{min-height:44px}
  .btn.sm{min-height:40px;padding-top:8px;padding-bottom:8px}
  .iconbtn{min-width:44px;min-height:44px}
  .pill,.tabs button,.fpill,.tagchip,a.chip,button.chip,.chip.link,.qrow,.linkbtn{min-height:40px}
  .tabs button,.pill{padding-top:8px;padding-bottom:8px}
  a.chip,.chip.link,.tagchip{display:inline-flex;align-items:center}
  .outcomes button{min-height:48px}
  .switch{min-height:44px}
  .objection summary,details>summary{min-height:40px;display:flex;align-items:center}
  input[type=checkbox],input[type=radio]{width:22px;height:22px}
}

@keyframes sheetup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.moresheet,.moresheet-card,.modal-card{animation:none}}

/* Comercial: selector de etapa en cada tarjeta y, en el móvil, tablero columna a columna. */
.deal-move{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--mu)}
.deal-move select{flex:1;min-width:0;padding:6px 8px;border-radius:8px}
@media (max-width:900px){
  .kanban{grid-auto-columns:86%;scroll-snap-type:x mandatory;scroll-padding:0 16px;overscroll-behavior-x:contain}
  .kanban .col{scroll-snap-align:start;min-height:120px}
}

/* Botón flotante «Ahora» compacto en el móvil (solo icono y número) para no tapar contenido. */
@media (max-width:900px){
  .fab{padding:10px 12px;gap:6px}
  .fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}

/* Más elementos táctiles: botones rápidos de tarjetas, casillas de completar, pestañas segmentadas y selects. */
@media (max-width:900px){
  .qa,.seg button,.fu-check{min-height:40px}
  .qa{padding-left:10px;padding-right:10px}
  .fu-check{min-width:40px}
  .seg button{padding-top:8px;padding-bottom:8px}
  select{font-size:16px !important}
}

/* Contactos: el resumen en una fila deslizable para llegar antes a la lista. */
@media (max-width:900px){
  .stats{display:flex;overflow-x:auto;gap:8px;scroll-snap-type:x proximity;padding-bottom:4px;margin-bottom:12px;scrollbar-width:none}
  .stats::-webkit-scrollbar{display:none}
  .stats .kpi{flex:0 0 152px;width:152px;min-width:0;scroll-snap-align:start}
}

/* Ficha en el móvil: datos arriba a todo el ancho, acciones debajo y la X de cerrar en la esquina. */
@media (max-width:900px){
  .drawer .panel{position:relative}
  .drawer .panel.ficha .top{flex-direction:column;align-items:stretch;gap:12px;padding-right:48px}
  .drawer .panel.ficha .top .kpi{display:none}
  .ficha-acts{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-start}
  .ficha-acts [data-act="close"]{position:absolute;top:calc(10px + env(safe-area-inset-top));right:10px}
  .ficha-acts [data-act="script"]{flex:1 1 100%;justify-content:center}
}

/* Contactos en el móvil: fila compacta (sector, zona, persona, estado y dos acciones). El resto, en la ficha. */
.m-row{display:none}
@media (max-width:900px){
  .crow .d-only{display:none !important}
  .crow{align-items:flex-start;gap:10px;padding:12px}
  .crow .av{width:38px;height:38px;font-size:13px;flex:none;border-radius:11px}
  .crow .title{font-size:15px;line-height:1.25}
  .m-row{display:flex;flex-direction:column;gap:4px;margin-top:3px;font-size:13px}
  .m-meta{color:var(--mu)}.m-meta b{color:var(--tx);font-weight:650}.m-ads{color:var(--green)}
  .m-who{display:flex;flex-wrap:wrap;align-items:center;gap:4px}
  .m-state{display:flex;flex-wrap:wrap;gap:4px}.m-state .tag{font-size:12px}
  .m-acts{display:flex;gap:8px;margin-top:4px}.m-acts .btn{flex:1;justify-content:center}
}
@media (max-width:900px){.m-acts .m-call{color:var(--or2);border-color:var(--or)}}

/* Guion por pasos en el móvil (en pantallas grandes se ve entero). Sin :has (iOS antiguo) se ve todo. */
.st-tabs,.st-next{display:none}
@media (max-width:900px){
  .st-tabs{display:flex;gap:4px;margin:10px 0 2px;background:var(--bg);border-radius:12px;padding:3px}
  .st-tabs input{position:absolute;opacity:0;pointer-events:none}
  .st-tabs label{flex:1;text-align:center;font-size:12.5px;font-weight:650;color:var(--mu);padding:9px 2px;border-radius:9px;cursor:pointer;min-height:40px;display:flex;align-items:center;justify-content:center}
  .st-next{display:flex;align-items:center;justify-content:center;margin-top:10px;min-height:42px;border:1px solid var(--line2);border-radius:12px;font-size:13px;font-weight:650;color:var(--tx);cursor:pointer}
  .script-steps{padding-left:0;list-style:none}
  .script-steps li>b{display:none}
  @supports selector(:has(*)){
    .script .st-p{display:none}
    .script:has(.st-r1:checked) .st-p1,.script:has(.st-r2:checked) .st-p2,.script:has(.st-r3:checked) .st-p3,.script:has(.st-r4:checked) .st-p4,.script:has(.st-r5:checked) .st-p5,.script:has(.st-r6:checked) .st-p6,.script:has(.st-r7:checked) .st-p7{display:block}
    .script:has(.st-r1:checked) .st-tabs label[for$="-1"],.script:has(.st-r2:checked) .st-tabs label[for$="-2"],.script:has(.st-r3:checked) .st-tabs label[for$="-3"],.script:has(.st-r4:checked) .st-tabs label[for$="-4"],.script:has(.st-r5:checked) .st-tabs label[for$="-5"],.script:has(.st-r6:checked) .st-tabs label[for$="-6"],.script:has(.st-r7:checked) .st-tabs label[for$="-7"]{background:var(--card2);color:var(--tx)}
  }
  .st-tabs input:focus-visible+label{outline:2px solid var(--or);outline-offset:1px}
}

/* Llamadas en el móvil: los resultados, fijos en una barra encima de la navegación (llamas, cuelgas y tocas). */
.out-s{display:none}
@media (max-width:900px){
  #view[data-v="llamadas"] .outcomes{position:fixed;left:0;right:0;bottom:calc(64px + env(safe-area-inset-bottom));z-index:9;margin:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;padding:6px max(6px, env(safe-area-inset-right)) 6px max(6px, env(safe-area-inset-left));background:rgba(18,20,25,.97);border-top:1px solid var(--line2)}
  #view[data-v="llamadas"] .outcomes button{min-height:48px;padding:4px 2px;font-size:11.5px;line-height:1.15;border-radius:10px}
  #view[data-v="llamadas"] .outcomes .out-l,#view[data-v="llamadas"] .outcomes kbd{display:none}
  #view[data-v="llamadas"] .outcomes .out-s{display:inline}
  #view[data-v="llamadas"]{padding-bottom:calc(160px + env(safe-area-inset-bottom))}
  body:has(#view[data-v="llamadas"]) .fab{display:none}
}

/* Rejillas a una columna en el móvil: minmax(0,1fr) para que el contenido largo no ensanche la página (en el iPhone
   eso hace que Safari aleje la vista o que se pueda arrastrar de lado). */
@media (max-width:900px){
  .callgrid,.hoygrid,.two,.three{grid-template-columns:minmax(0,1fr) !important}
  .callgrid>*,.hoygrid>*,.callcard,.stack{min-width:0;max-width:100%}
  .contactbar{flex-wrap:wrap}
  .contactbar .bigcall{flex:1 1 100%}
  .callhead{flex-wrap:wrap}
}

/* Legibilidad en pantallas pequeñas (iPhone 13 mini): nada por debajo de 11,5 px; etiquetas del marcador a 11 px. */
@media (max-width:900px){
  .bars small{font-size:11px}
  .score-cell span{font-size:11px !important}
  nav a,nav .more{font-size:11px !important}
  .tag,.chip,.tagchip{font-size:12px}
  .eyebrow{font-size:11.5px}
  .muted[style*="font-size:12px"],.dim{font-size:12.5px}
  .contactos-city,#city{max-width:100%}
  .pc .meta .r{flex-wrap:wrap;row-gap:4px}
  /* Hoy: la fila de contadores repite el plan del día y los contadores de la barra; en el móvil sobra. */
  #view[data-v="hoy"] .focus .sums{display:none}
  /* Hoy: en «Después», tres tareas a la vista; el resto con el botón «Ahora». */
  #view[data-v="hoy"] .actlist>.act:nth-child(n+4){display:none}
}
/* Hoy: en cada llamada recomendada, los botones debajo (el nombre usa todo el ancho). */
@media (max-width:900px){
  .lead-row{flex-wrap:wrap}
  .lead-row .grow{flex:1 1 100%;min-width:0}
  .lead-acts{flex:1 1 100%;flex-direction:row !important;align-items:stretch}
  .lead-acts .btn{flex:1;justify-content:center}
}
.sc-s{display:none}
@media (max-width:520px){.score-cell .sc-l{display:none}.score-cell .sc-s{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}}
/* Llamadas: sin avatar en la cabecera de la tarjeta (el nombre sube) y acciones en fila. */
@media (max-width:900px){
  .callhead>.av,.callhead>.avatar{display:none}
  .callhead .grow{flex:1 1 100%;min-width:0}
  .callhead h2{font-size:20px;line-height:1.2}
}
/* Últimos textos pequeños: resúmenes, formato de piezas, historial y avatares pequeños. */
@media (max-width:900px){
  .kpi span,.stats .kpi span,.grid.g4 .kpi span,.kpis6 .kpi span{font-size:12px !important}
  .thumb .fmt,.thumb .count,.net{font-size:11.5px}
  .recent-row small,.recent-row .muted,.domcheck small,.hcheck .muted{font-size:12px}
  .av.sm{font-size:11px}
  .score-cell b small{font-size:12px !important}
  .count{font-size:11px}
}
/* iOS: sin destello gris al tocar, sin zoom por doble toque en controles y sin reescalado de texto al girar. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
a,button,label,summary,select,input,textarea{-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* Rendimiento en el iPhone: sin difuminados de fondo (backdrop-filter es de lo más caro de dibujar al desplazar y
   al abrir ventanas); fondos sólidos casi iguales a la vista. */
@media (max-width:900px){
  .side,.modal,.drawer,.sheet,.palette,.moresheet,.login-card{-webkit-backdrop-filter:none !important;backdrop-filter:none !important}
  .side{background:#121419}
  .modal,.drawer,.sheet,.palette{background:rgba(5,6,8,.78)}
}