/* Rediseño · frente hoja. Clases con prefijo .hoja-prov-. Solo var(--…); sin colores hex ni position fixed/sticky.
   La superposición es el <dialog> nativo (showModal); su animación viene de .anim-hoja (estilos.css). */
.hoja-prov::backdrop { background: var(--velo); }
.hoja-prov-dialogo, .hoja-prov-panel {
  box-sizing: border-box; width: 100%; max-width: 520px; background: var(--fondo); color: var(--texto);
  border: 0; border-radius: var(--r-hoja) var(--r-hoja) 0 0; padding: var(--e-3) var(--e-4) 0;
}
/* Altura estable (no salta al cambiar de pestaña) y siempre por debajo de la zona segura de arriba; dvh para Safari con barras. */
.hoja-prov-dialogo { margin: auto auto 0; height: min(85dvh, 640px); max-height: calc(100dvh - var(--safe-top) - var(--e-6)); overflow: hidden; }
.hoja-prov-dialogo[open] { display: flex; flex-direction: column; gap: var(--e-3); }
.hoja-prov-panel { display: flex; flex-direction: column; gap: var(--e-3); margin: 0 auto; padding-bottom: calc(var(--e-4) + var(--safe-bottom)); border: 1px solid var(--borde-suave); }
.hoja-prov-dialogo:focus { outline: none; }
/* Pantallas altas: la hoja abre al ~70 % y deja ver el formulario de fondo (el buscador queda arriba, lejos del teclado). */
@media (min-height: 760px) { .hoja-prov-dialogo { height: min(70dvh, 640px); } }
.hoja-prov-asa { align-self: center; flex: none; width: 40px; height: 5px; margin-bottom: var(--e-1); border-radius: var(--r-pildora); background: var(--borde); }
.hoja-prov-encabezado { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex: none; }
.hoja-prov-titulo { margin: 0; font-family: var(--fuente-titulos); font-size: 1.25rem; line-height: 1.2; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.hoja-prov-buscador { position: relative; flex: none; }
.hoja-prov-buscador[hidden], .hoja-prov-tabs[hidden] { display: none; }
.hoja-prov-lupa { position: absolute; left: var(--e-4); top: 50%; transform: translateY(-50%); color: var(--texto-suave); display: inline-flex; pointer-events: none; }
input.hoja-prov-campo { width: 100%; box-sizing: border-box; min-height: var(--h-campo); font-size: 16px; border-radius: var(--r-campo); border-color: var(--borde-medio); transition: border-color var(--dur-corta) var(--ease); }
.hoja-prov-buscador input.hoja-prov-campo { padding-left: 48px; }
input.hoja-prov-campo:focus { border-color: var(--color-primario); }
.hoja-prov-tabs { flex: none; }
.hoja-prov-tabs .seg-op[aria-checked="true"] { box-shadow: var(--sombra-1); }
/* Lista que se desplaza por dentro; el relleno de abajo deja la última fila por encima del indicador de inicio. */
.hoja-prov-cuerpo {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  display: flex; flex-direction: column; gap: var(--e-3); padding: var(--e-1) 0 calc(var(--e-4) + var(--safe-bottom));
}
.hoja-prov-cuerpo > * { flex: none; }
.hoja-prov-lista { background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1); overflow: hidden; }
.hoja-prov-fila { min-height: var(--h-fila); padding: var(--e-2) var(--e-4); gap: var(--e-3); border-radius: 0; box-shadow: none; }
.hoja-prov-lista > .hoja-prov-fila:last-child { border-bottom: 0; }
.hoja-prov-fila:active { transform: scale(.985); box-shadow: none; background: var(--relleno); }
.hoja-prov-fila[aria-pressed="true"] { background: var(--relleno); background: color-mix(in srgb, var(--color-primario) 8%, var(--tarjeta)); }
.hoja-prov-fila .lista-fila-titulo { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-prov-detalle { display: flex; min-width: 0; font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hoja-prov-hist { flex: 0 1 auto; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.hoja-prov-fact { flex: 0 100 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: pre; }
.hoja-prov-fact-si { color: var(--exito-texto); font-weight: 600; }
.hoja-prov-marca { flex: none; display: inline-flex; color: var(--exito-texto); }
.hoja-prov-mas { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1.5px dashed var(--color-primario); border-radius: 50%; color: var(--color-primario); }
/* «Agregar» es una fila destacada propia, con tinte suave de la marca. */
.hoja-prov-agregar { border: 1px solid var(--borde-medio); border-radius: var(--r-tarjeta); box-shadow: var(--sombra-1); padding: var(--e-2) var(--e-4); color: var(--color-primario); background: var(--tarjeta); background: color-mix(in srgb, var(--color-primario) 6%, var(--tarjeta)); }
.hoja-prov-agregar:active { background: var(--relleno); background: color-mix(in srgb, var(--color-primario) 12%, var(--tarjeta)); }
.hoja-prov-agregar .lista-fila-titulo { color: var(--color-primario); font-weight: 700; }
.hoja-prov-etiqueta { font-weight: 600; }
.hoja-prov-aviso { margin: 0; color: var(--error); min-height: 0; }
.hoja-prov-aviso:empty { display: none; }
.hoja-prov-vacio-caja { display: flex; flex-direction: column; align-items: center; gap: var(--e-2); padding: var(--e-5) var(--e-4); text-align: center; }
.hoja-prov-vacio-icono { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: var(--relleno); color: var(--texto-suave); }
.hoja-prov-vacio, .hoja-prov-estado { margin: 0; color: var(--texto-suave); text-align: center; overflow-wrap: anywhere; }
.hoja-prov-estado { padding: var(--e-5) var(--e-4); }
.hoja-prov-cuerpo .mensaje-error { margin: 0; border-radius: var(--r-campo); }
/* Botones de la hoja: un solo renglón, alto de 48 px y mismo acabado que el resto. */
.hoja-prov-boton { min-height: var(--h-campo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: var(--r-campo); transition: transform var(--dur-corta) var(--ease), background-color var(--dur-corta) var(--ease); }
.hoja-prov-boton:active { transform: scale(.97); }
/* El .boton-claro base es para la barra de marca; aquí el fondo es claro. */
.hoja-prov .boton-claro, .hoja-prov-panel .boton-claro { background: var(--tarjeta); color: var(--color-primario); border-color: var(--borde-medio); }
@media (prefers-reduced-motion: reduce) { .hoja-prov-boton:active, .hoja-prov-fila:active { transform: none; } }

/* ---------- Ronda 3: proporciones ---------- */
/* Filas sin historial («Otro», «Agregar proveedor nuevo»): 52 px; con historial: 60 px; título y detalle siempre en un renglón cada uno */
.hoja-prov-fila { min-height: 52px; padding-top: var(--e-1); padding-bottom: var(--e-1); }
.hoja-prov-fila:has(.hoja-prov-detalle) { min-height: 60px; }
.hoja-prov-fila .lista-fila-titulo { font-size: 1rem; line-height: 1.25; }
.hoja-prov-fila .lista-fila-detalle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hoja-prov-fila .lista-fila-icono, .hoja-prov-mas { width: 36px; height: 36px; }
.hoja-prov-agregar { min-height: 52px; }