/* css/plataforma.css — v0.542 C (18-oct-2026). Pablo: «asegúrate que todo sea fiel al formato del sistema».
   Va DESPUÉS de erp.css, controles.css y subnav.css: aquí solo vive la FORMA de cada sistema (letra, radios, botones, campos,
   interruptores, segmentados, pestañas, tarjetas, diálogos, foco); los colores siguen saliendo de css/paleta.css.
   Tres familias, por la clase que pone el script del <head> (html.plat-*):
   - Apple (macOS 26 / iOS 26, Liquid Glass; es la de omisión): letra SF, botones y segmentados en cápsula, botón secundario
     teñido sin borde, campos con radio 10, lista con flechas ⌃⌄, interruptor verde, foco con halo del acento.
   - Android (Material 3): Roboto, botones píldora (lleno y con contorno), campos con contorno radio 4 y foco de 2 px, lista con ▾,
     interruptor 52×32, segmentado con ✓, pestañas con barra de 3 px, diálogo radio 28.
   - Windows (Fluent 2): Segoe UI Variable, radio 4, botón secundario blanco con borde y letra neutra, campo con línea inferior que
     se pinta del acento al enfocar, interruptor 40×20, pestañas con barra de 3 px, diálogo con el botón principal primero.
   Selectores: A = html:not(.plat-android):not(.plat-win) · D = html.plat-android · W = html.plat-win. */

/* ---------- 1. La letra del sistema en TODO (el navegador ponía Arial a botones, listas y campos) ---------- */
/* --pf-letra vive en css/paleta.css (la leen también los documentos que se imprimen) */
body, html.erp-desk body { font-family: var(--pf-letra); }
button, input, select, textarea, optgroup, .boton { font-family: inherit; }
html:not(.plat-android):not(.plat-win) body { -webkit-font-smoothing: antialiased; }

/* ---------- 2. Títulos como oración: ningún sistema usa etiquetas chicas en MAYÚSCULAS (Apple desde iOS 14/macOS 11,
   Material 3 y Fluent 2 escriben los encabezados de tabla, secciones y cejas como oración). Los datos en mayúsculas
   (folios, rastreo) no se tocan: solo etiquetas. ---------- */
.tabla th, .lateral-grupo, .tab-h3, .flujo-rama b, .flujo-rama > .clave, .chip-nuevo, .buscar-grupo-t, .ent-puedes span,
.ent-clave span, .ent-porque span, .ent-sig span, .ent-g-sec h3, .ent-globo-ceja, .fac-fila-cab, .fac-kpi span, .fac-cubeta > span,
.ep-ve-l, .ep-sw-l, .ep-rq-de, .lateral-sub-grupo, .lateral-item.proximamente i, .submenu-titulo, html.sub-oculto .sub-muestra i {
  text-transform: none; letter-spacing: normal;
}

/* encabezado de tabla: Apple en peso regular y gris; Material en 500; Fluent en semibold (su DataGrid) */
.tabla th { font-size: .8rem; font-weight: 400; color: var(--pf-texto-3); border-bottom-width: 1px; }
html.plat-android .tabla th { font-weight: 500; color: var(--pf-texto-2); }
html.plat-win .tabla th { font-weight: 600; color: var(--pf-texto-2); }

/* ---------- 3. Botones ---------- */
/* principal = relleno del acento; secundario = cada sistema el suyo */
:is(.boton-lleno, .ciclo-primaria, .boton.ent-cta, .fo-camara, .boton.ctl-peligro) { border-width: 0; }
/* Apple (macOS 26 / iOS 26): cápsula; el secundario es «bordered»: teñido del acento, sin borde */
html:not(.plat-android):not(.plat-win) :is(.boton, .ciclo-primaria, .boton-lleno, .gr-p-cta) { border-radius: 999px; }
html:not(.plat-android):not(.plat-win) .boton:not(.ciclo-primaria):not(.boton-lleno):not(.ent-cta):not(.ctl-peligro):not(.fo-camara) {
  border-color: transparent; background: color-mix(in srgb, var(--pf-azul-claro) 12%, var(--pf-caja)); color: var(--pf-azul);
}
html:not(.plat-android):not(.plat-win) .boton:not(.ciclo-primaria):not(.boton-lleno):not(.ent-cta):not(.ctl-peligro):not(.fo-camara):hover {
  background: color-mix(in srgb, var(--pf-azul-claro) 20%, var(--pf-caja));
}
/* Material 3: píldora de 40 px; el secundario es «outlined» (contorno gris, letra del acento); letra 500 con .1px */
html.plat-android :is(.boton, .ciclo-primaria, .boton-lleno, .gr-p-cta) { border-radius: 999px; font-weight: 500; letter-spacing: .1px; }
html.plat-android .boton:not(.ciclo-primaria):not(.boton-lleno):not(.ent-cta):not(.ctl-peligro):not(.fo-camara) {
  border-color: var(--pf-borde-fuerte); background: transparent; color: var(--pf-azul);
}
html.plat-android .boton:not(.ciclo-primaria):not(.boton-lleno):not(.ent-cta):not(.ctl-peligro):not(.fo-camara):hover {
  background: color-mix(in srgb, var(--pf-azul) 8%, transparent);
}
/* Fluent 2: radio 4; el secundario es blanco con borde gris y letra NEUTRA (no del acento); letra semibold como Fluent */
html.plat-win :is(.boton, .ciclo-primaria, .boton-lleno, .gr-p-cta) { border-radius: 4px; font-weight: 600; }
html.plat-win .boton:not(.ciclo-primaria):not(.boton-lleno):not(.ent-cta):not(.ctl-peligro):not(.fo-camara) {
  border-color: var(--pf-borde); background: var(--pf-caja); color: var(--pf-titulo);
}
html.plat-win .boton:not(.ciclo-primaria):not(.boton-lleno):not(.ent-cta):not(.ctl-peligro):not(.fo-camara):hover {
  background: var(--pf-caja-suave); border-color: var(--pf-borde-fuerte);
}

/* ---------- 4. Campos y listas (de una línea, en el contenido; la banda «Ver como» y la cabecera no) ---------- */
/* Apple: radio 10, borde gris, foco con halo del acento (3 px, como macOS); la lista lleva ⌃⌄ como el menú emergente */
html:not(.plat-android):not(.plat-win) main.contenido :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]):not([type=image]), select:not([multiple]):not([size]), textarea) {
  border-radius: 10px;
}
html:not(.plat-android):not(.plat-win) main.contenido select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1.5 5L5 1.5 8.5 5M1.5 9L5 12.5 8.5 9' fill='none' stroke='%236c6c70' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 10px 14px;
}
/* Material 3: campo con contorno, radio 4, contorno gris fuerte; al enfocar 2 px del acento; la lista lleva ▾ lleno */
html.plat-android main.contenido :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]):not([type=image]), select:not([multiple]):not([size]), textarea) {
  border-radius: 4px; border-color: var(--pf-borde-fuerte);
}
html.plat-android main.contenido select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='5' viewBox='0 0 10 5'%3E%3Cpath d='M0 0h10L5 5z' fill='%23444746'/%3E%3C/svg%3E");
  background-size: 10px 5px;
}
/* Fluent 2: radio 4, borde gris claro con la línea de abajo más oscura; al enfocar, la línea de abajo se pinta del acento */
html.plat-win main.contenido :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=color]):not([type=image]), select:not([multiple]):not([size]), textarea) {
  border-radius: 4px; border-color: var(--pf-borde); border-bottom-color: var(--pf-texto-3);
}
html.plat-win main.contenido select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23424242' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* foco de los campos, uno por sistema (los :focus viejos de erp.css solo cambiaban el borde) */
main.contenido :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea):focus { outline: none; }
html:not(.plat-android):not(.plat-win) main.contenido :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea):focus {
  border-color: var(--pf-azul-claro); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pf-azul-claro) 35%, transparent);
}
html.plat-android main.contenido :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea):focus {
  border-color: var(--pf-azul); box-shadow: inset 0 0 0 1px var(--pf-azul);
}
html.plat-win main.contenido :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]), select, textarea):focus {
  border-bottom-color: var(--pf-azul-claro); box-shadow: inset 0 -1px 0 var(--pf-azul-claro);
}
/* casillas y opciones: las del sistema, del color del acento */
input[type=checkbox]:not([data-auto-envio]), input[type=radio], input[type=range], progress { accent-color: var(--pf-azul-claro); }

/* ---------- 5. Interruptor (casilla que se guarda al tocarla) ---------- */
/* Apple: proporción del UISwitch (51×31 → 46×28), verde del sistema encendido */
html:not(.plat-android):not(.plat-win) input[type=checkbox][data-auto-envio] { width: 46px; height: 28px; background: color-mix(in srgb, var(--pf-borde-fuerte) 60%, var(--pf-caja)); }
html:not(.plat-android):not(.plat-win) input[type=checkbox][data-auto-envio]::after { top: 2px; left: 2px; width: 24px; height: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, .2), 0 0 0 .5px rgba(0, 0, 0, .04); }
html:not(.plat-android):not(.plat-win) input[type=checkbox][data-auto-envio]:checked { background: var(--pf-verde); }
html:not(.plat-android):not(.plat-win) input[type=checkbox][data-auto-envio]:checked::after { transform: translateX(18px); }
/* Material 3: riel 52×32; apagado con contorno y botón chico gris; encendido del acento con botón blanco grande */
html.plat-android input[type=checkbox][data-auto-envio] { width: 52px; height: 32px; box-sizing: border-box; border: 2px solid var(--pf-borde-fuerte); background: var(--pf-caja-hover); }
html.plat-android input[type=checkbox][data-auto-envio]::after { top: 6px; left: 6px; width: 16px; height: 16px; background: var(--pf-borde-fuerte); box-shadow: none; transition: transform .15s, width .15s, height .15s, top .15s, left .15s; }
html.plat-android input[type=checkbox][data-auto-envio]:checked { border-color: var(--pf-azul); background: var(--pf-azul); }
html.plat-android input[type=checkbox][data-auto-envio]:checked::after { top: 2px; left: 2px; width: 24px; height: 24px; background: #fff; transform: translateX(20px); }
/* Fluent 2: riel 40×20; apagado con borde y botón oscuro; encendido del acento con botón blanco */
html.plat-win input[type=checkbox][data-auto-envio] { width: 40px; height: 20px; box-sizing: border-box; border: 1px solid var(--pf-texto-2); background: var(--pf-caja); }
html.plat-win input[type=checkbox][data-auto-envio]::after { top: 3px; left: 3px; width: 12px; height: 12px; background: var(--pf-texto-2); box-shadow: none; }
html.plat-win input[type=checkbox][data-auto-envio]:checked { border-color: var(--pf-azul-claro); background: var(--pf-azul-claro); }
html.plat-win input[type=checkbox][data-auto-envio]:checked::after { background: #fff; transform: translateX(20px); }

/* ---------- 6. Segmentado (2 a 4 opciones a la vista) ---------- */
/* Apple: riel gris en cápsula y la opción elegida es una cápsula blanca con sombra; letra normal, sin el acento */
html:not(.plat-android):not(.plat-win) .ctl-seg { gap: 2px; padding: 2px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--pf-texto-3) 14%, var(--pf-caja)); }
html:not(.plat-android):not(.plat-win) .ctl-seg button { min-height: 36px; border: 0; border-radius: 999px; color: var(--pf-titulo); }
html:not(.plat-android):not(.plat-win) .ctl-seg button:hover { background: color-mix(in srgb, var(--pf-caja) 50%, transparent); }
html:not(.plat-android):not(.plat-win) .ctl-seg button.activo { background: var(--pf-caja); color: var(--pf-titulo); box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .06); }
/* Material 3: botones segmentados en píldora con contorno; la elegida con fondo tonal y ✓ */
html.plat-android .ctl-seg { border-radius: 999px; border-color: var(--pf-borde-fuerte); }
html.plat-android .ctl-seg button { border-left-color: var(--pf-borde-fuerte); color: var(--pf-titulo); font-weight: 500; }
html.plat-android .ctl-seg button.activo { background: var(--pf-azul-fondo); color: var(--pf-titulo); }
html.plat-android .ctl-seg button.activo::before { content: '✓'; margin-right: 6px; }
/* Fluent 2: grupo de botones de radio 4; el elegido con el acento */
html.plat-win .ctl-seg { border-radius: 4px; border-color: var(--pf-borde); }
html.plat-win .ctl-seg button.activo { background: var(--pf-azul-fuerte); color: #fff; }
/* los grupos de valores rápidos y de filtros con la misma regla de forma */
html:not(.plat-android):not(.plat-win) :is(.ctl-rapidos button, .fac-pill, .clima-modo button) { border-radius: 999px; }
html.plat-android :is(.ctl-rapidos button, .fac-pill, .fac-cat span) { border-radius: 8px; }
html.plat-win :is(.ctl-rapidos button, .fac-pill, .fac-cat span, .clima-modo button) { border-radius: 4px; }

/* ---------- 7. Pestañas de una página (2 a 5 vistas; con más van al menú, kratfel-navegacion) ---------- */
/* Apple: no hay pestañas de carpeta; las vistas hermanas son un control segmentado (macOS: arriba al centro del contenido) */
html:not(.plat-android):not(.plat-win) .pestanas:not(.pestanas-en-menu) {
  width: fit-content; max-width: 100%; box-sizing: border-box; gap: 2px; padding: 2px; border: 0; border-radius: 999px;
  background: color-mix(in srgb, var(--pf-texto-3) 14%, var(--pf-caja));
}
html:not(.plat-android):not(.plat-win) .pestanas:not(.pestanas-en-menu) .pestana {
  display: inline-flex; align-items: center; min-height: 36px; box-sizing: border-box; padding: 0 16px; margin: 0; border: 0;
  border-radius: 999px; color: var(--pf-titulo); font-size: .9rem; font-weight: 400;
}
html:not(.plat-android):not(.plat-win) .pestanas:not(.pestanas-en-menu) .pestana:hover { background: color-mix(in srgb, var(--pf-caja) 50%, transparent); }
html:not(.plat-android):not(.plat-win) .pestanas:not(.pestanas-en-menu) .pestana.activa {
  background: var(--pf-caja); color: var(--pf-titulo); padding-bottom: 0; box-shadow: 0 1px 3px rgba(0, 0, 0, .14), 0 0 0 .5px rgba(0, 0, 0, .06);
}
/* Material 3 (pestañas primarias) y Fluent 2 (TabList): texto sobre la línea, la elegida con barra de 3 px del acento */
:is(html.plat-android, html.plat-win) .pestanas:not(.pestanas-en-menu) { gap: 0; border-bottom: 1px solid var(--pf-borde-suave); }
:is(html.plat-android, html.plat-win) .pestanas:not(.pestanas-en-menu) .pestana {
  position: relative; display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 16px; margin: 0;
  border: 0; border-radius: 0; background: none; color: var(--pf-texto-2); font-size: .9rem;
}
html.plat-android .pestanas:not(.pestanas-en-menu) .pestana { font-weight: 500; }
:is(html.plat-android, html.plat-win) .pestanas:not(.pestanas-en-menu) .pestana:hover { background: var(--pf-caja-hover); color: var(--pf-titulo); }
:is(html.plat-android, html.plat-win) .pestanas:not(.pestanas-en-menu) .pestana.activa { background: none; padding-bottom: 0; }
html.plat-android .pestanas:not(.pestanas-en-menu) .pestana.activa { color: var(--pf-azul); }
html.plat-win .pestanas:not(.pestanas-en-menu) .pestana.activa { color: var(--pf-titulo); font-weight: 600; }
:is(html.plat-android, html.plat-win) .pestanas:not(.pestanas-en-menu) .pestana.activa::after {
  content: ''; position: absolute; left: 12px; right: 12px; bottom: 0; height: 3px; background: var(--pf-azul-claro);
}
html.plat-android .pestanas:not(.pestanas-en-menu) .pestana.activa::after { border-radius: 3px 3px 0 0; }
html.plat-win .pestanas:not(.pestanas-en-menu) .pestana.activa::after { left: 16px; right: 16px; bottom: 4px; border-radius: 2px; }

/* ---------- 8. Chips, tarjetas, avisos y listas que se abren ---------- */
html:not(.plat-android):not(.plat-win) .chip { border-color: transparent; }   /* Apple: cápsula teñida, sin contorno */
html.plat-android .chip { border-radius: 8px; }
.tarjeta { border-color: var(--pf-borde-suave); }
html.plat-win :is(.tarjeta, .filtros:not(.tarjeta .filtros)) { border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, .08), 0 2px 4px rgba(0, 0, 0, .06); }
html.plat-win :is(.aviso-err, .aviso-ok, .aviso-ambar) { border-radius: 4px; }
html:not(.plat-android):not(.plat-win) :is(.ctl-fil-lista, .alm-res) { border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16), 0 0 0 .5px rgba(0, 0, 0, .08); }
html.plat-android :is(.ctl-fil-lista, .alm-res) { border-radius: 4px; border: 0; box-shadow: 0 2px 6px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .3); }
html.plat-win :is(.ctl-fil-lista, .alm-res) { border-radius: 8px; box-shadow: 0 8px 16px rgba(0, 0, 0, .14), 0 0 2px rgba(0, 0, 0, .12); }

/* ---------- 9. Diálogo de confirmación ---------- */
/* Apple: esquinas grandes, botones en cápsula a la derecha, la acción al final */
html:not(.plat-android):not(.plat-win) .ctl-dialogo { border: 0; border-radius: 22px; box-shadow: 0 20px 60px rgba(0, 0, 0, .25), 0 0 0 .5px rgba(0, 0, 0, .1); }
/* Material 3: radio 28, título grande, botones de texto a la derecha */
html.plat-android .ctl-dialogo { border: 0; border-radius: 28px; padding: 24px; }
html.plat-android .ctl-dialogo-titulo { font-size: 1.4rem; line-height: 1.3; margin-bottom: 12px; }
html.plat-android .ctl-dialogo-botones .boton { border: 0; background: transparent; color: var(--pf-azul); padding: 0 12px; }
html.plat-android .ctl-dialogo-botones .boton:hover { background: color-mix(in srgb, var(--pf-azul) 8%, transparent); }
html.plat-android .ctl-dialogo-botones .boton.ctl-peligro { color: var(--pf-rojo-texto); }
/* Fluent 2: radio 8, botones del mismo ancho y la acción principal PRIMERO (a la izquierda), como Windows */
html.plat-win .ctl-dialogo { border-radius: 8px; box-shadow: 0 32px 64px rgba(0, 0, 0, .24), 0 0 8px rgba(0, 0, 0, .2); }
html.plat-win .ctl-dialogo-botones { flex-direction: row-reverse; }
html.plat-win .ctl-dialogo-botones .boton { flex: 1 1 0; }

/* ---------- 10. Foco con teclado: el anillo de cada sistema ---------- */
html:not(.plat-android):not(.plat-win) :is(a, button, summary, [tabindex], .boton):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--pf-azul-claro) 50%, transparent); outline-offset: 1px;
}
html.plat-android :is(a, button, summary, [tabindex], .boton):focus-visible { outline: 3px solid var(--pf-azul); outline-offset: 2px; }
html.plat-win :is(a, button, summary, [tabindex], .boton):focus-visible { outline: 2px solid var(--pf-titulo); outline-offset: 2px; box-shadow: 0 0 0 1px var(--pf-caja) inset; }