/* ===================== Tema «iOS» (Rete Fija, 08-oct-2026) =====================
   Pedido de Jose: «aplica el estilo iPhone o iOS como tema en este sistema». Copia adaptada de HFC (/opt/hfc/css/tema-ios.css).
   Tercer tema, además de noche y día: se activa con body.day.ios (hereda los ajustes de body.day y encima aplica estos).
   Rasgos de iOS: fondo gris agrupado #f2f2f7, tarjetas blancas sin borde con esquinas grandes y sombra suave, barra superior
   translúcida con desenfoque, tipografía del sistema (San Francisco en equipos Apple), controles segmentados, menú lateral con
   íconos de color al estilo de Ajustes.
   Diferencias con HFC: acento cobre de Rete Fija (no rojo frambuesa); colores de menú para sus 8 secciones; estilos para lo que
   HFC no tiene (barra de filtros .fx, tarjetas .ret-tile de Retenciones y Reporte Cliente, tarjetas del Evolutivo, ventanas). */
body.day.ios{
  --bg:#f2f2f7;      --surface:#ffffff;  --surface2:#f2f2f7;  --surface3:#e5e5ea;
  --border:#e5e5ea;  --text:#1c1c1e;     --muted:#6e6e73;     --dim:#aeaeb2;
  --accent:#c8742f;  --accent-ink:#a35a1c; --accent2:#e0975a; --accent2-ink:#8a4a14;
  --good:#248a3d;    --good-bg:#e4f7e9;
  --warn:#b25000;    --warn-bg:#fff0e0;
  --bad:#d70015;     --bad-bg:#ffe6e4;
  --sep:rgba(60,60,67,.14);  --fill:rgba(118,118,128,.12);  --fill2:rgba(118,118,128,.2);
  --shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.06);
  --sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue','Inter',system-ui,sans-serif;
  --mono:var(--sans);
  --r-sm:10px; --r-md:12px; --r-lg:18px;
  background:var(--bg);color:var(--text);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}
body.ios ::selection{background:var(--accent);color:#fff}

/* --- barra superior translúcida --- */
body.ios .app-header{
  background:rgba(255,255,255,.72);border-bottom:.5px solid var(--sep);
  -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
}
body.ios .app-header .ah-brand{font-weight:700;letter-spacing:-.02em;font-size:15px}
body.ios .app-header .ah-brand .mark{background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;border-radius:9px}
body.ios .badge-perfil{font-family:var(--sans);font-weight:600;letter-spacing:.01em;background:var(--accent);color:#fff}
body.ios :is(.btn-hdr,.tglTheme,.btn-menu,.btn-export){
  background:var(--fill);border:0;color:var(--text);box-shadow:none;font-family:var(--sans);
}
body.ios :is(.btn-hdr,.tglTheme,.btn-menu,.btn-export):hover{background:var(--fill2);color:var(--accent-ink);border:0}
body.ios .btn-hdr.logout:hover{color:var(--bad)}
body.ios #btn-theme{font-size:11px;font-weight:700;letter-spacing:-.01em}

/* --- menú lateral estilo Ajustes: ícono blanco sobre cuadro de color; el ítem activo se rellena con el acento --- */
body.ios .sidebar{background:rgba(255,255,255,.6);border-right:.5px solid var(--sep);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
body.ios .sb-sect{font-family:var(--sans);text-transform:none;letter-spacing:0;font-size:13px;font-weight:600;color:var(--muted)}
body.ios .sb-nav button{border-left:0;margin-left:0;font-size:14px;color:var(--text);border-radius:10px;padding:8px 10px}
body.ios .sb-nav button:hover{background:var(--fill);transform:none;color:var(--text)}
body.ios .sb-nav button .ic{color:#fff;border-radius:7px;background:#8e8e93}
body.ios .sb-nav button:hover .ic{color:#fff}
body.ios .sb-nav button[data-tab="diario"] .ic{background:#ff3b30}
body.ios .sb-nav button[data-tab="intervalos"] .ic{background:#ff9500}
body.ios .sb-nav button[data-tab="supervisores"] .ic{background:#34c759}
body.ios .sb-nav button[data-tab="asesores"] .ic{background:#007aff}
body.ios .sb-nav button[data-tab="retenciones"] .ic{background:#ff2d55}
body.ios .sb-nav button[data-tab="horas"] .ic{background:#af52de}
body.ios .sb-nav button[data-tab="objetivos"] .ic{background:#5856d6}
body.ios .sb-nav button[data-tab="reporte"] .ic{background:#30b0c7}
body.ios .sb-nav button.on{background:var(--accent);color:#fff;font-weight:600}
body.ios .sb-nav button.on .ic{box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
body.ios .sb-nav button.on::after{display:none}

/* --- títulos grandes al estilo iOS --- */
body.ios .tab-title{
  font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:-.025em;text-transform:none;color:var(--text);
  background:none;border:0;box-shadow:none;padding:0;margin:4px 0 16px;gap:10px;
}
body.ios .tab-title::before,body.ios .tab-title svg{display:none}
body.ios .tab-title .tp{color:var(--accent);font-weight:700}

/* --- filtros y controles --- */
body.ios .filtros label,body.ios .chk-dia1{font-family:var(--sans);font-size:13px;font-weight:600;color:var(--muted)}
body.ios :is(select.ctl,input.ctl){
  background:#fff;border:0;border-radius:10px;font-family:var(--sans);font-size:14px;padding:8px 12px;color:var(--text);
  box-shadow:0 0 0 .5px rgba(60,60,67,.22),0 1px 2px rgba(0,0,0,.04);
}
body.ios select.ctl.filtro-activo{box-shadow:0 0 0 2px var(--accent)}
body.ios :is(select.ctl,input.ctl):focus{outline:none;box-shadow:0 0 0 3px rgba(200,116,47,.3)}
body.ios .dias-btn{font-family:var(--sans);font-size:13px;font-weight:500;border:0;border-radius:9px;background:var(--fill);color:var(--text);padding:6px 13px}
body.ios .dias-btn:hover{background:var(--fill2);color:var(--text)}
body.ios .dias-btn.on{background:var(--accent);color:#fff;font-weight:600}
/* control segmentado */
body.ios .vista-tgl{background:var(--fill);border:0;border-radius:9px;padding:2px}
body.ios .vista-tgl button{border-radius:7px;color:var(--text);font-weight:500;font-size:13px}
body.ios .vista-tgl button.on{background:#fff;color:var(--text);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
body.ios .fecha-multi-btn{background:#fff;border:0;border-radius:10px;font-family:var(--sans);font-size:14px;padding:8px 12px;
  box-shadow:0 0 0 .5px rgba(60,60,67,.22),0 1px 2px rgba(0,0,0,.04);color:var(--text)}
/* barra de filtros alineada (css/filtros-fx.css): sin borde, relleno gris como los controles de iOS */
body.ios .filtros.fx{border:0;box-shadow:0 1px 3px rgba(0,0,0,.06)}
body.ios .filtros.fx .fld > label:not(.fx-chk){font-size:11px;letter-spacing:.04em}
body.ios .filtros.fx :is(select.ctl,input.ctl,button.ctl,.fx-chk,.dias-grp,.fx-seg){border:0;border-radius:10px}
body.ios .filtros.fx :is(.fx-chk,.dias-grp,.fx-seg){background:var(--fill);box-shadow:none}
body.ios .filtros.fx :is(.dias-grp,.fx-seg) .dias-btn{background:transparent}
body.ios .filtros.fx :is(.dias-grp,.fx-seg) .dias-btn.on{background:var(--accent);color:#fff}

/* --- tarjetas, paneles y gráficos: blancos, sin borde, esquinas grandes --- */
body.ios :is(.panel,.chart-card,.gauge-card){border:0;border-radius:18px;box-shadow:var(--shadow)}
body.ios .panel-head{border-bottom:.5px solid var(--sep)}
body.ios .panel-head h3{letter-spacing:-.015em}
body.ios .chart-lbl{font-family:var(--sans);text-transform:none;letter-spacing:-.01em;font-size:14px;font-weight:600;color:var(--text)}

/* tarjetas kpi-v2 (incluye .ret-tile de Retenciones y Reporte Cliente): sin franja, ícono blanco sobre su color de sistema */
body.ios .kpi-v2 :is(.kpi-card,.ret-tile){border:0;border-radius:18px;box-shadow:var(--shadow)}
body.ios .kpi-v2 :is(.kpi-card,.ret-tile)::before{display:none}
body.ios .kpi-v2 :is(.kpi-card .ico,.ret-tile .rt-ico){border-radius:8px;background:var(--kc);color:#fff}
body.ios .kpi-v2 :is(.kpi-card,.ret-tile):hover{box-shadow:0 0 0 2px color-mix(in srgb,var(--kc) 45%,transparent),0 14px 30px rgba(0,0,0,.1)}
body.ios .kpi-card .kv{letter-spacing:-.03em}
body.ios .kpi-v2 .kpi-card{--kc:#8e8e93}
body.ios .kpi-v2 .kpi-card:has(.kv.v), body.ios .kpi-v2 .kpi-card:has(.kv.verde){--kc:#34c759}
body.ios .kpi-v2 .kpi-card:has(.kv.a){--kc:#ff9500}
body.ios .kpi-v2 .kpi-card:has(.kv.r), body.ios .kpi-v2 .kpi-card:has(.kv.rojo){--kc:#ff3b30}
body.ios .kpi-v2 .kpi-card:has(.kv.cat){--kc:var(--accent)}
body.ios .kpi-v2 .ret-tile:is(.cant,.vol){--kc:#007aff}
body.ios .kpi-v2 .ret-tile.ret{--kc:#34c759}
body.ios .kpi-v2 .ret-tile:is(.noret,.alerta){--kc:#ff3b30}
body.ios .kpi-v2 .ret-tile.tipif{--kc:#af52de}
body.ios .kpi-v2 .ret-tile.tiempo{--kc:#ff9500}
body.ios .kpi-v2 .ret-tile.retencion{--kc:#ff2d55}
/* tarjetas del Evolutivo y de la ventana Salientes (.rce-kpi-card) */
body.ios .rce-kpi-card{border:0;border-radius:18px;box-shadow:var(--shadow);background:var(--surface)}
body.ios .rce-kpi-card::before{display:none}
body.ios .rce-kpi-icon{border:0;border-radius:9px;background:var(--rce-kpi-accent);color:#fff}

/* --- tablas: separadores finos, encabezado gris --- */
body.ios table.datos thead th{background:#fafafc;color:var(--muted);font-weight:600;letter-spacing:.02em;border-bottom:.5px solid var(--sep)}
body.ios table.datos tbody td{border-bottom:.5px solid var(--sep);font-family:var(--sans)}
body.ios table.datos tbody tr:hover td{background:#f7f7fa}
body.ios table.datos tr.fila-total td{background:#fafafc;border-top:1px solid rgba(60,60,67,.25)}
body.ios :is(.cond-badge,.sv){font-family:var(--sans);border-width:0}

/* --- ventanas (.co-modal) y pie del área --- */
body.ios .cmo-box{border:0;border-radius:20px;box-shadow:0 24px 64px rgba(0,0,0,.18)}
body.ios .cmo-title{font-family:var(--sans);letter-spacing:-.015em}
body.ios .cmo-close{border:0;background:var(--fill);border-radius:50%;width:28px;height:28px;padding:0}
body.ios .pie-area{border-top:.5px solid var(--sep)}

/* --- barras de desplazamiento finas --- */
body.ios ::-webkit-scrollbar{width:10px;height:10px}
body.ios ::-webkit-scrollbar-thumb{background:rgba(60,60,67,.25);border-radius:10px;border:3px solid transparent;background-clip:padding-box}

/* celular: título grande más chico y que salte de línea sin separar el período */
@media (max-width:640px){
  body.ios .tab-title{font-size:24px;flex-wrap:wrap;justify-content:flex-start;row-gap:2px}
}