/* ==========================================================================
   CARGA DE PRECIOS  (módulo `precios-carga`)
   ==========================================================================
   🔴 ESTE ARCHIVO SE LLAMABA `precios-module.css` Y ASÍ PISÓ EL DE OTRO MÓDULO.
   `precios-module.css` es el de MATERIAL DE VENTA, cuyo id interno también es
   `precios`. Al crear un archivo con ese nombre para este módulo, Material de
   Venta se quedó sin estilos y sus solapas y botones aparecieron crudos.
   Este módulo se llama `precios-carga`, así que su CSS se llama igual.
   ==========================================================================
   La pantalla del administrativo (subir la lista mensual) y el paso del
   vendedor que elige el plan y ve el valor.

   🔵 Todo sale de las variables de `theme.css`: petróleo `--color-primary`,
   terracota `--color-accent`, bordes de tarjeta de 2px y las sombras del
   sistema. Ni un color escrito a mano — si mañana cambia la marca, cambia
   theme.css y esto acompaña solo.

   Antes el módulo no tenía CSS propio: los desplegables y el botón de
   "Seleccionar archivo" salían con el estilo crudo del navegador, que no se
   parece a ninguna otra pantalla del sistema.
   ========================================================================== */

/* 🔵 A TODO EL ANCHO, A PROPÓSITO.
   Acá lo que se mira son tablas: la grilla de precios tiene 8 columnas y 52
   filas. Con el panel angosto había que deslizar en horizontal para ver los
   planes de la derecha, que es justo lo que hay que comparar contra el PDF.
   El resto de los módulos son formularios y listas, donde una medida cómoda
   de lectura tiene sentido; este no. */
.precios-grilla-panel { width: 100%; max-width: none; }

.pg-intro {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 1.3rem;
}

/* --- La tarjeta de carga ------------------------------------------------- */

.pg-caja {
  background: var(--color-surface);
  border: 2px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.3rem;
}

.pg-caja-titulo {
  display: flex;
  align-items: center;
  gap: 0.5rem;

  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}
.pg-caja-titulo .icon-svg { width: 18px; height: 18px; }

/* --- Los tres selectores de arriba --------------------------------------- */

/* Cinco campos: prepaga, mes y año arriba; tipo y zona abajo. La zona ocupa
   las dos columnas que le quedan libres, porque es la única de texto libre y
   con una sola columna no entra ni el nombre de una provincia larga. */
.pg-form {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.7fr 1.4fr 1.6fr;
  gap: 0.9rem 1rem;
}

/* Por debajo de 1250px los cinco campos en una fila quedan ilegibles: pasan a
   dos filas, y la zona —la única de texto libre— se queda con lo que sobra. */
@media (max-width: 1250px) {
  .pg-form { grid-template-columns: 2fr 1.5fr 1fr; }
  .pg-form .campo-zona { grid-column: 2 / -1; }
}

.pg-form .campo,
.pg-selector .campo { display: block; }

.pg-form .campo > span,
.pg-selector .campo > span {
  display: block;
  margin-bottom: 0.35rem;

  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* 🔴 EL `input` TAMBIÉN, NO SOLO EL `select`.
   La primera versión estilaba únicamente los desplegables, así que el campo
   de zona salía angosto, con el borde fino del navegador y la mitad del texto
   de ayuda cortado: al lado de los otros cuatro parecía un error. */
.pg-form select,
.pg-form input[type="text"],
.pg-selector select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.62rem 0.75rem;

  font-family: inherit;
  font-size: 0.93rem;
  color: var(--color-text);

  background: var(--form-campo-fondo);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}
.pg-form select,
.pg-selector select { cursor: pointer; }

.pg-form input[type="text"]::placeholder {
  color: var(--color-text-muted);
  opacity: 0.75;
}
.pg-form select:focus,
.pg-form input[type="text"]:focus,
.pg-selector select:focus {
  outline: none;
  border-color: var(--form-campo-foco);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.pg-selector select:disabled {
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* --- El archivo ----------------------------------------------------------
   🔴 El `<input type="file">` crudo es lo que más desentonaba: cada navegador
   lo dibuja distinto y ninguno se parece al resto del sistema. Se esconde el
   control y se estiliza la etiqueta, que es la única forma de tener un botón
   propio sin JavaScript de por medio. */

.pg-archivo {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--color-border);
}

.pg-archivo-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;

  padding: 0.62rem 1.1rem;

  background: var(--boton-fondo);
  color: #fff;
  border: 0;
  border-radius: var(--radius-sm);
  box-shadow: var(--boton-firma);
  margin-bottom: 7px;

  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.pg-archivo-btn:hover {
  background: var(--boton-fondo-hover);
  box-shadow: var(--boton-firma-hover);
}
.pg-archivo-btn .icon-svg { width: 16px; height: 16px; }
.pg-archivo input[type="file"] { display: none; }

.pg-nombre {
  font-size: 0.88rem;
  color: var(--color-text);
  font-weight: 600;
  word-break: break-all;
}
.pg-leyendo {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--color-primary);
}

/* --- La vista previa ------------------------------------------------------ */

.pg-previa {
  margin-top: 1.4rem;
  padding: 1.2rem 1.3rem;

  background: var(--color-surface);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.pg-previa h3 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-primary);
}

.pg-total {
  margin: 1rem 0;
  padding: 0.75rem 0.95rem;

  background: var(--color-primary-soft);
  border-radius: var(--radius-sm);

  font-size: 1rem;
  color: var(--color-text);
}
.pg-total strong { font-size: 1.25rem; color: var(--color-primary); }

/* --- Las tablas ----------------------------------------------------------- */

.pg-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.87rem;

  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.pg-tabla th,
.pg-tabla td {
  padding: 0.55rem 0.75rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}
.pg-tabla thead th {
  background: var(--color-surface-alt);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}
.pg-tabla tbody tr:last-child td { border-bottom: none; }
.pg-precio { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

.pg-nota {
  margin-top: 0.7rem;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* --- Listas cargadas ------------------------------------------------------ */

.pg-cargadas { margin-top: 1.8rem; }
.pg-cargadas h3 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text);
}

/* Borrar es destructivo: va en terracota, el color que el sistema reserva
   para lo que no se puede deshacer. */
.pg-cargadas .btn-mini {
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
  background: var(--color-surface);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.pg-cargadas .btn-mini:hover:not(:disabled) {
  background: var(--color-accent);
  color: #fff;
}
.pg-cargadas .btn-mini:disabled { opacity: 0.55; cursor: default; }

/* --- El paso del vendedor: el valor encontrado ---------------------------
   Es LO ÚNICO que el vendedor tiene que mirar de ese paso, así que va grande
   y en petróleo. Debajo, chiquito, el renglón exacto de la lista del que
   salió: si el número lo sorprende, lo coteja contra el PDF sin preguntar. */

.pg-selector { margin-top: 1.1rem; }
.pg-selector .campo { margin-bottom: 1rem; }

.pg-precio-hallado {
  margin-top: 1.2rem;
  padding: 1.1rem 1.25rem;

  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow);
}
.pg-precio-hallado > span {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.pg-precio-hallado > strong {
  display: block;
  margin: 0.2rem 0 0.35rem;
  font-size: 1.75rem;
  line-height: 1.15;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}
.pg-precio-hallado > small {
  display: block;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-text-muted);
}

@media (max-width: 800px) {
  .pg-form { grid-template-columns: 1fr; }
  .pg-archivo { flex-direction: column; align-items: stretch; }
  .pg-archivo-btn { justify-content: center; }
  .pg-tabla { font-size: 0.82rem; }
  .pg-precio-hallado > strong { font-size: 1.45rem; }
}

/* --- La verificación ------------------------------------------------------ */

.pg-chequeo {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;

  padding: 1rem 1.15rem;
  margin: 1.2rem 0;

  border: 2px solid;
  border-radius: var(--radius-md);
}
.pg-chequeo .icon-svg { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.pg-chequeo strong { display: block; font-size: 1rem; }
.pg-chequeo span { display: block; font-size: 0.85rem; margin-top: 0.15rem; }

.pg-chequeo-ok {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}
.pg-chequeo-mal {
  background: var(--color-danger-soft);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.pg-problemas {
  margin: 0.55rem 0 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  line-height: 1.5;
}
.pg-problemas li { margin-bottom: 0.25rem; }

.pg-verif-bloque { margin-top: 1.2rem; }

.pg-sub {
  margin: 0 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--color-text);
}

.pg-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.pg-tab {
  padding: 0.48rem 0.9rem;
  background: var(--color-surface);
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text);
  cursor: pointer;
}
.pg-tab-on {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* La tabla con la forma del PDF. El encabezado y la primera columna quedan
   fijos: en la fila 40 hay que seguir sabiendo de qué categoría y de qué plan
   se trata, o compararla contra el papel es imposible. */
.pg-scroll {
  overflow: auto;
  max-height: 60vh;
  border: 1.5px solid var(--color-borde-tarjeta);
  border-radius: var(--radius-sm);
}

.pg-grilla {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.81rem;
  background: var(--color-surface);
}
.pg-grilla th,
.pg-grilla td {
  padding: 0.4rem 0.6rem;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.pg-grilla thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface-alt);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pg-grilla .pg-cat {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  text-align: left;
  font-weight: 600;
}
.pg-grilla thead .pg-cat { z-index: 3; background: var(--color-surface-alt); }
.pg-grilla .pg-n { text-align: right; font-variant-numeric: tabular-nums; }

.pg-celda-mal {
  background: var(--color-danger-soft);
  color: var(--color-danger);
  font-weight: 700;
}

/* --- El probador ---------------------------------------------------------- */

.pg-probador {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 2fr auto;
  gap: 0.7rem;
  align-items: end;
}
.pg-probador .campo { display: block; }
.pg-probador .campo > span {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.pg-probador select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.9rem;
  background: var(--form-campo-fondo);
  border: 1.5px solid var(--form-campo-borde);
  border-radius: var(--radius-sm);
}
.pg-resu {
  padding: 0.6rem 1rem;
  background: var(--color-primary-soft);
  border: 2px solid var(--color-primary);
  border-radius: var(--radius-md);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.pg-fila-ver > td { background: var(--color-surface-warm); padding: 1rem 1.1rem; }
.pg-ver { border-color: var(--color-primary) !important; color: var(--color-primary) !important; }
.pg-ver:hover { background: var(--color-primary) !important; color: #fff !important; }

@media (max-width: 800px) {
  .pg-probador { grid-template-columns: 1fr; }
  .pg-resu { text-align: center; }
}