/* ============================================================================
 * Autor: Marcelo Alejandro Zúñiga Reátegui
 * Proyecto: LILBRU
 * Módulo: pantalla «Ficha del producto» (entrega 1, parte 3): secciones cortas, tablas, diálogo y crear un producto
 * Fecha/Hora: 2026-10-16
 * Versión: 1.0.0
 * Aviso Legal: Código de propiedad exclusiva. Prohibida su reproducción o distribución sin autorización.
 * ============================================================================ */
/* Todo sale de las variables del tema. Tamaños de letra solo de la rampa de DESIGN.md (30, 26, 18, 15, 14, 13, 12).
   Todo lo que se toca mide 44 px o más. Prefijo pro- (F-034); las tablas reusan las de catalogo.css (cat-). Sin barras
   gruesas de color al costado. */

a.pro-volver { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--marca); }
a.pro-volver::before { content: "\2190"; margin-right: 6px; }

/* ---- cabecera: nombre, código, el estado (el mismo del catálogo) y la sede ---- */
.pro-cabecera { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 8px 16px; margin: 0 0 10px; }
.pro-cabecera-izq { min-width: 0; flex: 1 1 320px; }
.pro-cabecera-izq .pagina-titulo { margin-bottom: 2px; overflow-wrap: anywhere; }
.pro-cabecera-der { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.pro-cabecera-der .badge { font-size: 14px; padding: 6px 12px; }
.pro-sede select { min-height: 44px; }
.pro-aviso { flex: 1 1 100%; margin: 4px 0 0; padding: 10px 14px; border-radius: 8px; background: var(--alerta-fondo); color: var(--alerta); font-size: 14px; max-width: none; }

/* ---- índice de secciones (en el celular ahorra bajar a ciegas) ---- */
.pro-indice { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.pro-indice a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 999px; background: var(--tarjeta);
  box-shadow: inset 0 0 0 1px var(--borde); color: var(--tinta); font-size: 14px; font-weight: 600; text-decoration: none; }
.pro-indice a:hover { box-shadow: inset 0 0 0 1px var(--marca); color: var(--marca); }

/* ---- secciones ---- */
.pro-seccion { margin-bottom: 14px; scroll-margin-top: 12px; }
.pro-seccion-cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-bottom: 8px; }
.pro-seccion-cab h2 { margin: 0; }
/* Pulido 17-oct (regla 3 de la guía visual): el encabezado de cada sección es una banda con el tinte del estilo y el
   título en el color principal, como las tarjetas del Resumen y de Cajas. Sale en los 13 estilos por sus variables. */
.pro-seccion > .pro-seccion-cab { margin: calc(var(--pad-tarjeta) * -1) calc(var(--pad-tarjeta) * -1) 12px; padding: 6px var(--pad-tarjeta);
  min-height: 44px; box-sizing: border-box; background: var(--marca-claro); border-bottom: 1px solid var(--marca-borde); border-radius: 10px 10px 0 0; }
.pro-seccion > .pro-seccion-cab h2 { color: var(--marca); }
.pro-nota-igv { margin: 0 0 6px; font-size: 13px; }
.pro-acciones { display: flex; flex-wrap: wrap; gap: 8px; }
.pro-acciones button, .pro-acciones .boton { min-height: 44px; }
.pro-acciones a.boton { display: inline-flex; align-items: center; box-sizing: border-box; }
.pro-subtitulo { margin: 14px 0 6px; font-size: 15px; font-weight: 700; color: var(--tinta); max-width: none; }
.pro-nota { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--tinta); max-width: 72ch; }
.pro-suave { color: var(--tinta-suave); }
.pro-sin { color: var(--tinta-suave); font-style: italic; }
.pro-igv { display: inline-block; margin-left: 2px; padding: 1px 6px; border-radius: 8px; background: var(--gris-fondo); color: var(--tinta-suave);
  font-size: 12px; font-weight: 600; font-style: normal; white-space: nowrap; vertical-align: middle; }

/* ---- datos: rótulo a la izquierda, valor a la derecha ---- */
.pro-datos { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; gap: 0; margin: 0; }
.pro-datos dt, .pro-datos dd { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.pro-datos dt { color: var(--tinta-suave); padding-right: 12px; }
.pro-datos dd { color: var(--tinta); overflow-wrap: anywhere; }
.pro-lista { list-style: none; margin: 0; padding: 0; }
.pro-lista li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 0; border-bottom: 1px solid var(--borde); font-size: 14px; color: var(--tinta); }

/* ---- precio y costo: una cifra por línea ---- */
.pro-cifra { display: grid; grid-template-columns: minmax(150px, 220px) 1fr; align-items: baseline; gap: 4px 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); font-size: 14px; }
.pro-cifra-rotulo { color: var(--tinta-suave); }
.pro-cifra-valor { color: var(--tinta); font-variant-numeric: tabular-nums; }
.pro-cifra-valor strong { font-size: 15px; }
.pro-igv-pregunta { margin-top: 12px; padding: 10px 14px; border: 1px dashed var(--borde); border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pro-igv-pregunta p { margin: 0; font-size: 14px; color: var(--tinta); }
.pro-igv-hecho { margin: 10px 0 0; font-size: 13px; }
/* Parte C (feedback F): el interruptor del IGV, dos posiciones que se ven. */
.pro-igv-switch { display: inline-flex; border: 1px solid var(--borde); border-radius: 999px; overflow: hidden; }
.pro-igv-switch button { min-height: 44px; padding: 6px 16px; border-radius: 0; background: var(--tarjeta); color: var(--tinta); font-size: 14px; box-shadow: none; filter: none; }
.pro-igv-switch button + button { border-left: 1px solid var(--borde); }
.pro-igv-switch button[aria-pressed="true"] { background: var(--marca); color: var(--sobre-marca); font-weight: 700; }
.pro-igv-switch button:focus-visible { outline: 2px solid var(--marca); outline-offset: -2px; }
.pro-enlace-apagado { font-size: 13px; }
/* La conversión de unidad y la equivalencia dentro de la ventana de edición. */
.pro-bloque-unidad { grid-column: 1 / -1; padding: 10px 12px; border: 1px dashed var(--borde); border-radius: 8px; display: flex; flex-direction: column; gap: 10px; }
.pro-bloque-unidad .pro-subtitulo { margin: 0; }
.pro-eq { display: flex; flex-direction: column; gap: 10px; }

/* ---- tablas (sobre .cat-tabla) ---- */
.pro-tabla td.cat-num strong { font-weight: 700; }
.pro-tabla th { white-space: normal; }
.pro-tabla .cat-col-producto { min-width: 0; }
.pro-tabla tr.pro-fila-actual td { background: var(--marca-claro); }
@media (max-width: 760px) { .pro-tabla tr.pro-fila-actual td { background: transparent; } .pro-tabla tr.pro-fila-actual { background: var(--marca-claro); } }
.pro-tabla tr.pro-inactiva td { color: var(--tinta-suave); }
.pro-codigos { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--tinta-suave); }
.pro-codigo .cat-codigo { margin-right: 4px; }
.pro-col-fecha { white-space: nowrap; }
.pro-kardex td.pro-col-fecha { white-space: normal; }
.pro-tabla td.pro-entra { color: var(--ok); font-weight: 600; }
.pro-tabla td.pro-sale { color: var(--tinta); font-weight: 600; }
.pro-col-accion { text-align: right; }
/* El precio de una presentación y su rótulo del IGV: el rótulo baja a su propia línea para que la tabla no se desborde. */
.pro-tabla td.pro-col-precio { white-space: normal; }
.pro-tabla td.pro-col-precio .pro-igv { display: table; margin: 3px 0 0 auto; }
.pro-dato-texto { flex: 1 1 160px; }
.pro-filtros { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 4px 0 8px; }
.pro-kardex { font-size: 13px; }
.pro-kardex th, .pro-kardex td { padding: 8px 6px; }
.pro-kardex th { white-space: normal; }
.pro-kardex td.pro-col-fecha .cat-cat { white-space: nowrap; }
/* Kardex corto por omisión; «Ver más columnas» muestra quién, valor, costo promedio después y valor del saldo. */
.pro-kardex:not(.pro-k-todas) .pro-k-mas { display: none; }
.pro-filtros #k-columnas { align-self: flex-end; }

/* ---- ventas por día: barras simples en SVG propio, sin librerías ni cálculos ---- */
.pro-grafico { display: flex; align-items: stretch; gap: 6px; height: 140px; margin-top: 10px; border-bottom: 1px solid var(--borde); }
.pro-grafico-max { width: 28px; flex: none; font-size: 12px; color: var(--tinta-suave); text-align: right; font-variant-numeric: tabular-nums; }
.pro-barras { flex: 1; min-width: 0; width: 100%; height: 100%; display: block; }
.pro-barras rect { fill: var(--marca); }
.pro-grafico-eje { display: flex; justify-content: space-between; margin: 4px 0 0 34px; font-size: 12px; color: var(--tinta-suave); }

/* ---- botones chicos y enlaces dentro de una lista ---- */
button.pro-chico { min-height: 44px; padding: 6px 12px; font-size: 13px; }
button.pro-enlace { min-height: 44px; padding: 4px 4px; background: transparent; color: var(--marca); box-shadow: none; filter: none;
  font-size: 13px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
button.pro-enlace:hover { color: var(--tinta); box-shadow: none; filter: none; }
button.pro-peligro { color: var(--rojo); }

/* ---- archivar, al final y fuera del camino ---- */
.pro-archivar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 18px 0 8px; padding: 14px 0 0; border-top: 1px solid var(--borde); }
.pro-archivar .pro-nota { margin: 0; }

/* ---- formularios (crear y el diálogo) ---- */
.pro-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.pro-ancho, .pro-form > .pro-nota, .pro-form > .pro-subtitulo, .pro-form > .pro-lista, .pro-form > .pro-agregar-codigo, .pro-form > .pro-casilla { grid-column: 1 / -1; }
.pro-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; color: var(--tinta); min-width: 0; }
.pro-campo textarea { font: inherit; font-size: 15px; resize: vertical; }
.pro-campo input, .pro-campo select, .pro-campo textarea { min-height: 44px; font-size: 15px; font-weight: 400; box-sizing: border-box; width: 100%; }
.pro-ayuda { font-size: 12px; font-weight: 400; color: var(--tinta-suave); }
.pro-casilla { display: flex; align-items: flex-start; gap: 10px; min-height: 44px; font-size: 14px; color: var(--tinta); }
.pro-casilla input { width: 20px; height: 20px; margin-top: 2px; flex: none; }
.pro-casilla small { display: block; font-size: 12px; color: var(--tinta-suave); }
.pro-agregar-codigo { display: grid; grid-template-columns: 1fr minmax(0, 200px) auto; gap: 10px; align-items: end; }
.pro-mensaje { grid-column: 1 / -1; font-size: 14px; min-height: 0; }
.pro-mensaje.pro-error { padding: 8px 12px; border-radius: 8px; background: var(--rojo-fondo); color: var(--rojo); }
.pro-botones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
.pro-botones button, .pro-botones .boton { min-height: 44px; }
.pro-crear .pagina-titulo { margin-top: 0; }
.pro-dialogo { width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); padding: 0; border: 1px solid var(--borde); border-radius: 10px;
  background: var(--tarjeta); color: var(--tinta); }
.pro-dialogo::backdrop { background: var(--velo-modal, rgba(13, 31, 25, .5)); }
.pro-dialogo-cuerpo { display: flex; flex-direction: column; gap: 14px; padding: 22px 20px 20px; margin: 0; }
.pro-dialogo h2 { margin: 0; font-size: 18px; line-height: 1.3; overflow-wrap: anywhere; }
.pro-dialogo [hidden], .pro-crear [hidden] { display: none; }

@media (max-width: 760px) {
  .pro-datos, .pro-cifra { grid-template-columns: 1fr; }
  .pro-datos dt { padding-bottom: 0; border-bottom: 0; font-size: 13px; }
  .pro-cifra-rotulo { font-size: 13px; }
  .pro-form { grid-template-columns: 1fr; }
  .pro-agregar-codigo { grid-template-columns: 1fr; }
  .pro-cabecera-der { width: 100%; }
  .pro-tabla td.cat-col-estado { grid-column: 1 / -1; }
  .pro-tabla td.pro-col-accion { grid-column: 1 / -1; text-align: left; }
  .pro-tabla td.pro-col-precio .pro-igv { margin-left: 0; }
  .pro-archivar { flex-direction: column; align-items: stretch; }
}