/* ============================================================
   CRM · Ventas Corporativas — Fiat Venezuela
   vista-cotizaciones.css · Estilos exclusivos de la vista "Cotizaciones"
   Todas las reglas cuelgan de .v-cotiza. No se toca nada global.
   Lo que la vista pinta dentro del modal compartido también va
   envuelto en .v-cotiza, por eso el prefijo alcanza.
   ============================================================ */

.v-cotiza { display: block; min-width: 0; }
.v-cotiza > * + * { margin-top: 14px; }

.v-cotiza .ct-nota {
  font-size: 11.5px;
  color: var(--suave);
  font-weight: 500;
}
.v-cotiza .ct-conteo {
  font-size: 12px;
  font-weight: 600;
  color: var(--marca);
  background: rgba(0, 54, 95, .07);
  border-radius: 999px;
  padding: 3px 11px;
  white-space: nowrap;
}

/* ---------------- Filtros del listado ---------------- */
.v-cotiza .ct-filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px 12px;
}

/* ---------------- Tabla del listado ---------------- */
.v-cotiza .ct-tabla { min-width: 760px; }
.v-cotiza .ct-tabla tbody tr:focus-visible { outline-offset: -2px; }

/* ---------------- Formulario + vista previa ---------------- */
.v-cotiza .ct-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
@media (max-width: 980px) {
  .v-cotiza .ct-grid { grid-template-columns: minmax(0, 1fr); }
}

.v-cotiza .ct-form { display: flex; flex-direction: column; gap: 12px; }

.v-cotiza .ct-previa-caja { position: sticky; top: calc(var(--barra) + 14px); }
@media (max-width: 980px) {
  .v-cotiza .ct-previa-caja { position: static; }
}
.v-cotiza .ct-previa-vacia {
  font-size: 12.5px;
  color: var(--suave);
  text-align: center;
  padding: 26px 12px;
}
.v-cotiza .ct-pie-acciones {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* ---------------- Las dos cifras clave ---------------- */
.v-cotiza .ct-claves {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.v-cotiza .ct-clave {
  border: 1px solid var(--linea);
  border-radius: var(--radio-sm);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #FBFCFD;
}
.v-cotiza .ct-clave span {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--suave);
}
.v-cotiza .ct-clave b {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.4px;
  color: var(--marca);
}
.v-cotiza .ct-clave--cuota { border-color: rgba(0, 141, 212, .4); background: rgba(0, 141, 212, .06); }
.v-cotiza .ct-clave--cuota b { color: var(--cyan-tinta); }

/* ---------------- Desglose ---------------- */
.v-cotiza .ct-desg { font-size: 12.5px; }
.v-cotiza .ct-desg__sub {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--suave);
  padding: 10px 0 4px;
  border-bottom: 1px dashed var(--linea);
  margin-bottom: 2px;
}
.v-cotiza .ct-desg__fila {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.v-cotiza .ct-desg__fila span { color: var(--texto); min-width: 0; }
.v-cotiza .ct-desg__fila b { font-weight: 600; white-space: nowrap; }
.v-cotiza .ct-desg__fila--suma {
  border-top: 1px solid var(--linea);
  font-weight: 600;
}
.v-cotiza .ct-desg__fila--clave {
  background: rgba(47, 158, 91, .08);
  border-radius: var(--radio-sm);
  padding: 6px 8px;
  margin: 2px -8px;
}
.v-cotiza .ct-desg__fila--clave b { color: var(--ok-tinta); font-size: 13.5px; }
.v-cotiza .ct-desg__fila--total {
  border-top: 2px solid var(--marca);
  margin-top: 4px;
  padding-top: 7px;
  font-weight: 700;
}
.v-cotiza .ct-desg__fila--total b { color: var(--marca); font-size: 14px; }

/* ---------------- Detalle en el modal ---------------- */
.v-cotiza.ct-det { display: flex; flex-direction: column; gap: 12px; }
.v-cotiza.ct-det > * + * { margin-top: 0; }
.v-cotiza .ct-det__cab {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.v-cotiza .ct-det__correlativo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.2px;
  color: var(--marca);
}
.v-cotiza .ct-det__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 14px;
  margin: 0;
}
.v-cotiza .ct-det__dato dt {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--suave);
}
.v-cotiza .ct-det__dato dd { margin: 1px 0 0; font-size: 12.5px; }
.v-cotiza .ct-det__anulada {
  font-size: 12.5px;
  color: var(--peligro);
  background: rgba(192, 57, 43, .08);
  border: 1px solid rgba(192, 57, 43, .25);
  border-radius: var(--radio-sm);
  padding: 8px 10px;
}
.v-cotiza .ct-det__notas {
  font-size: 12px;
  color: var(--suave);
  border-left: 3px solid var(--linea);
  padding-left: 10px;
}

/* ---------------- Bloque interno (SOLO GERENCIA) ----------------
   Rotulado sin ambigüedad: fondo oscuro y candado. Este bloque solo
   existe cuando la gerencia lo pide explícitamente. */
.v-cotiza .ct-interno {
  margin-top: 14px;
  border: 2px solid #7C2D12;
  border-radius: var(--radio-sm);
  overflow: hidden;
}
.v-cotiza .ct-interno__cab {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1F2937;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  padding: 8px 12px;
}
.v-cotiza .ct-interno__cab svg { width: 15px; height: 15px; flex: 0 0 15px; }
.v-cotiza .ct-interno .ct-desg { padding: 6px 12px 4px; }
.v-cotiza .ct-interno .ct-desg__fila--total { border-top-color: #7C2D12; }
.v-cotiza .ct-interno .ct-desg__fila--total b { color: #7C2D12; }
.v-cotiza .ct-interno__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px 10px;
  font-size: 11px;
  color: #7C2D12;
  background: rgba(124, 45, 18, .06);
}

/* ---------------- Anulación ---------------- */
.v-cotiza .ct-anular-aviso {
  font-size: 12.5px;
  color: var(--texto);
  background: rgba(224, 140, 27, .1);
  border: 1px solid rgba(224, 140, 27, .3);
  border-radius: var(--radio-sm);
  padding: 9px 11px;
  margin-bottom: 12px;
}

/* ---------------- Parámetros (gerencia) ---------------- */
.v-cotiza.ct-par > * + * { margin-top: 10px; }
.v-cotiza .ct-par__ayuda { font-size: 12px; color: var(--suave); }
.v-cotiza .ct-par__tabla { min-width: 520px; }
.v-cotiza .ct-par__celda { width: 150px; }
.v-cotiza .ct-par__celda .entrada { height: 30px; font-size: 12.5px; }

/* ============================================================
   Menos botones y móvil (contrato del portal §7.2 y §7.3)
   Una acción principal por fila (según el estado) y el resto en
   «⋯ Más acciones». A ≤ 768 px cada fila es una tarjeta: cliente
   como título, total como dato clave, estado en pastilla y lo
   demás en gris. La clase global .tabla--tarjetas la pule el
   armazón; aquí va la jerarquía propia de una proforma.
   ============================================================ */
.v-cotiza .ct-acc {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}
.v-cotiza .ct-c-acc { width: 1%; white-space: nowrap; }
.v-cotiza .ct-det__vincular { margin-top: 6px; }
.v-cotiza .ct-vacio .estado { padding: 34px 16px; }

@media (max-width: 768px) {
  .v-cotiza .cab-vista__acciones { display: flex; gap: 8px; width: 100%; }
  .v-cotiza .cab-vista__acciones > .btn { flex: 1 1 auto; }
  .v-cotiza .btn, .v-cotiza .select, .v-cotiza .entrada,
  .v-cotiza .campo input, .v-cotiza .campo select { min-height: 44px; }
  .v-cotiza .btn--icono { width: 44px; }
  .v-cotiza .ct-nota--escritorio { display: none; }
  .v-cotiza .ct-filtros { grid-template-columns: 1fr 1fr; gap: 10px; }
  .v-cotiza .ct-filtros > .campo:first-child,
  .v-cotiza .ct-filtros > .campo:nth-child(4) { grid-column: 1 / -1; }

  /* ---- listado como tarjetas ---- */
  .v-cotiza .tabla-scroll:has(> .tabla--tarjetas) { overflow: visible; background: none; }
  .v-cotiza .tabla--tarjetas.ct-tabla,
  .v-cotiza .tabla--tarjetas.ct-tabla-cli,
  .v-cotiza .tabla--tarjetas.ct-par__tabla { display: block; min-width: 0; }
  .v-cotiza .tabla--tarjetas thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }
  .v-cotiza .tabla--tarjetas tbody { display: block; }
  .v-cotiza .tabla--tarjetas tbody tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--linea);
  }
  .v-cotiza .tabla--tarjetas tbody tr:last-child { border-bottom: 0; }
  .v-cotiza .tabla--tarjetas tbody td {
    display: block; min-width: 0; width: auto; padding: 0; border: 0;
    font-size: 12.5px; white-space: normal; text-align: left;
  }
  .v-cotiza .tabla--tarjetas .truncar { white-space: normal; overflow: visible; }

  /* jerarquía de la proforma */
  .v-cotiza .ct-tabla td.ct-c-cliente { order: 1; font-size: 15px; font-weight: 600; color: var(--texto); }
  .v-cotiza .ct-tabla td.ct-c-estado  { order: 2; justify-self: end; align-self: start; }
  .v-cotiza .ct-tabla td.ct-c-total   { order: 3; font-family: var(--tipo-titulo); font-size: 18px; font-weight: 600; color: var(--marca); }
  .v-cotiza .ct-tabla td.ct-c-total .menor { font-family: var(--tipo-texto); font-size: 12px; font-weight: 600; color: var(--cyan-tinta); }
  .v-cotiza .ct-tabla td.ct-c-modalidad { order: 4; justify-self: end; align-self: start; }
  .v-cotiza .ct-tabla td.ct-c-version { order: 5; grid-column: 1 / -1; color: var(--suave); }
  .v-cotiza .ct-tabla td.ct-c-version .menor { display: inline; }
  .v-cotiza .ct-tabla td.ct-c-version .menor::before { content: ' · '; }
  .v-cotiza .ct-tabla td.ct-c-corr,
  .v-cotiza .ct-tabla td.ct-c-fecha,
  .v-cotiza .ct-tabla td.ct-c-vend { order: 6; font-weight: 500; color: var(--suave); font-size: 12px; }
  .v-cotiza .ct-tabla td.ct-c-corr { grid-column: 1; }
  .v-cotiza .ct-tabla td.ct-c-fecha { justify-self: end; }
  .v-cotiza .ct-tabla td.ct-c-vend { order: 7; grid-column: 1 / -1; }
  .v-cotiza .ct-tabla td.ct-c-vend::before { content: 'Vendedor: '; }
  .v-cotiza .ct-tabla td.ct-c-acc { order: 8; grid-column: 1 / -1; width: auto; margin-top: 6px; }
  .v-cotiza .ct-tabla .ct-acc { justify-content: stretch; }
  .v-cotiza .ct-tabla .ct-acc__principal { flex: 1 1 auto; }

  /* buscador de clientes y parámetros: rótulo pequeño sobre cada dato */
  .v-cotiza .ct-par__tabla td[data-rotulo]::before {
    content: attr(data-rotulo);
    display: block; margin-bottom: 1px;
    font-size: 11px; font-weight: 600; color: var(--suave);
  }
  /* buscador de clientes: nombre arriba, datos en gris, «Elegir» a la derecha */
  .v-cotiza .ct-tabla-cli tbody tr { gap: 2px 12px; padding: 12px 0; cursor: pointer; }
  .v-cotiza .ct-tabla-cli td { grid-column: 1; color: var(--suave); font-size: 12px; }
  .v-cotiza .ct-tabla-cli td.ct-cli-nombre { order: -2; font-size: 14.5px; color: var(--texto); }
  .v-cotiza .ct-tabla-cli td.ct-cli-cod { order: -1; }
  .v-cotiza .ct-tabla-cli td.ct-cli-rif::before { content: 'RIF '; }
  .v-cotiza .ct-tabla-cli td.ct-cli-tel::before { content: 'Tel. '; }
  .v-cotiza .ct-tabla-cli td.ct-vacia { display: none; }
  .v-cotiza .ct-tabla-cli td.ct-cli-acc { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .v-cotiza .ct-tabla-cli td.ct-cli-acc .btn { min-width: 84px; }
  .v-cotiza .ct-par__tabla tbody tr { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .v-cotiza .ct-par__tabla td.ct-par__nombre { grid-column: 1 / -1; }
  .v-cotiza .ct-par__celda { width: auto; }
  .v-cotiza .ct-par__celda .entrada { height: 44px; font-size: 16px; }

  /* formulario de proforma nueva */
  .v-cotiza .ct-form .fila-campos > * { flex-basis: 140px; }
  .v-cotiza .ct-pie-acciones .btn { flex: 1 1 auto; }
  .v-cotiza .ct-claves { grid-template-columns: 1fr; }   /* una cifra por fila: un monto no se parte */
  .v-cotiza .ct-desg__fila { font-size: 12.5px; }
  .v-cotiza .ct-desg__fila span { overflow-wrap: anywhere; }
  .v-cotiza .ct-det__datos { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 420px) {
  .v-cotiza .ct-det__datos { grid-template-columns: 1fr; }
  .v-cotiza .ct-form .fila-campos > * { flex-basis: 100%; }
}

/* Pie del detalle (fuera de .v-cotiza: el pie es del modal compartido).
   En el teléfono el modal ya trae su X: «Cerrar» sobra y la acción
   principal ocupa el ancho. */
@media (max-width: 600px) {
  .ct-det-cerrar { display: none; }
  .ct-det-prim { flex: 1 1 100%; order: 3; min-height: 44px; }
  .modal__pie .acciones + .btn:not(.ct-det-prim) { flex: 1 1 auto; min-height: 44px; }
}

/* ---------------- Listado: control explícito ----------------
   El correlativo es un botón (teclado y lectores); la fila completa sigue
   respondiendo al ratón. En teléfono la fila es tarjeta (.tabla--tarjetas). */
.v-cotiza .ct-enlace {
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  font-weight: 600;
  color: var(--cyan-tinta);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-variant-numeric: tabular-nums;
}
.v-cotiza .ct-enlace:hover { color: var(--marca); }
.v-cotiza .ct-barra-movil { display: flex; gap: 8px; flex-wrap: wrap; }
.v-cotiza .ct-desg__fila b,
.v-cotiza .ct-clave b { font-variant-numeric: tabular-nums; }

/* Hoja de filtros (navegación móvil): una columna y campos de 48 px */
.v-cotiza.ct-hoja-filtros { display: flex; flex-direction: column; gap: 16px; }
.v-cotiza.ct-hoja-filtros > * + * { margin-top: 0; }
.v-cotiza.ct-hoja-filtros .campo > label { font-size: 14px; line-height: 20px; font-size-adjust: none; }
.v-cotiza.ct-hoja-filtros .campo input,
.v-cotiza.ct-hoja-filtros .campo select {
  height: 48px;
  font-size: 16px;
  font-size-adjust: none;
  border-color: var(--borde-control, #7B8797);
  border-radius: 8px;
}

/* El cálculo anterior queda a la vista, atenuado, mientras llega el nuevo */
.v-cotiza .ct-previa--obsoleta { opacity: .5; transition: opacity .14s ease-out; }

/* La acción fija se retira con el atributo hidden (pie de revisión a la vista) */
.v-cotiza .accion-movil[hidden] { display: none !important; }

/* ---------------- Teléfono (600 px o menos) ---------------- */
@media (max-width: 600px) {
  .v-cotiza > * + * { margin-top: 16px; }
  .v-cotiza .cab-vista h1 { font-size: 24px; line-height: 30px; font-weight: 600; }
  .v-cotiza .cab-vista p { font-size: 14px; line-height: 20px; font-size-adjust: none; }
  .v-cotiza .tarjeta__cab h2 { font-family: var(--tipo-titulo); font-size: 20px; line-height: 26px; font-weight: 600; font-size-adjust: none; }
  .v-cotiza .tarjeta__cuerpo { padding: 16px; }
  .v-cotiza .btn { height: auto; min-height: 48px; font-size: 16px; line-height: 20px; font-size-adjust: none; border-radius: 8px; white-space: normal; }
  .v-cotiza .btn svg { width: 18px; height: 18px; flex: 0 0 18px; }
  .v-cotiza .ct-barra-movil .btn { flex: 1 1 auto; }
  .v-cotiza .btn--icono { width: 48px; }
  /* correlativo de la tarjeta: blanco táctil completo */
  .v-cotiza .ct-tabla td.ct-c-corr .ct-enlace { min-height: 44px; }
  .v-cotiza .ct-nota { font-size: 14px; line-height: 20px; font-size-adjust: none; }
  .v-cotiza .ct-conteo { font-size: 14px; font-size-adjust: none; }

  /* formulario en una columna */
  .v-cotiza .ct-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .v-cotiza .ct-form { gap: 16px; }
  .v-cotiza .fila-campos { flex-direction: column; gap: 16px; }
  .v-cotiza .fila-campos > * { flex: 0 0 auto; }
  .v-cotiza .ct-previa-caja { position: static; }
  .v-cotiza .campo > label,
  .v-cotiza .campo__rotulo { font-size: 14px; line-height: 20px; font-weight: 600; font-size-adjust: none; }
  .v-cotiza .campo input,
  .v-cotiza .campo select,
  .v-cotiza .select,
  .v-cotiza .entrada {
    height: 48px;
    font-size: 16px;
    font-size-adjust: none;
    border-color: var(--borde-control, #7B8797);
    border-radius: 8px;
  }
  .v-cotiza .campo textarea,
  .v-cotiza textarea.entrada {
    height: auto;
    min-height: 120px;
    font-size: 16px;
    line-height: 24px;
    font-size-adjust: none;
  }
  .v-cotiza .campo__ayuda { font-size: 14px; line-height: 20px; font-size-adjust: none; }
  .v-cotiza .ct-pie-acciones { flex-direction: column; align-items: stretch; }
  .v-cotiza .ct-pie-acciones .btn { width: 100%; }
  .v-cotiza .ct-previa-vacia { font-size: 14px; line-height: 20px; font-size-adjust: none; }

  /* cifras clave: una por fila (regla de 768 px), con letra de teléfono */
  .v-cotiza .ct-clave span { font-size: 12px; line-height: 16px; letter-spacing: 0; font-size-adjust: none; }
  .v-cotiza .ct-clave b { font-size: 22px; line-height: 28px; overflow-wrap: anywhere; }

  /* desglose: rótulo flexible y monto de ancho intrínseco */
  .v-cotiza .ct-desg { font-size: 14px; line-height: 20px; font-size-adjust: none; }
  .v-cotiza .ct-desg__sub { font-size: 12px; line-height: 16px; letter-spacing: .3px; font-size-adjust: none; }
  .v-cotiza .ct-desg__fila { padding: 6px 0; }
  .v-cotiza .ct-desg__fila span { flex: 1 1 auto; }
  .v-cotiza .ct-desg__fila b { flex: 0 0 auto; text-align: right; }
  .v-cotiza .ct-desg__fila--clave { margin: 2px 0; }

  /* detalle (hoja) */
  .v-cotiza .ct-det__correlativo { font-size: 20px; line-height: 26px; }
  .v-cotiza .ct-det__datos { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .v-cotiza .ct-det__dato dt { font-size: 12px; line-height: 16px; letter-spacing: .3px; font-size-adjust: none; }
  .v-cotiza .ct-det__dato dd { font-size: 16px; line-height: 24px; font-size-adjust: none; overflow-wrap: anywhere; }
  .v-cotiza .ct-det__anulada,
  .v-cotiza .ct-det__notas,
  .v-cotiza .ct-anular-aviso,
  .v-cotiza .ct-par__ayuda { font-size: 14px; line-height: 20px; font-size-adjust: none; }
  .v-cotiza .ct-interno__cab,
  .v-cotiza .ct-interno__pie { font-size: 14px; line-height: 20px; font-size-adjust: none; }
  /* acciones del pie del detalle (PDF, emitir, anular, convertir): 48 px */
  #modalPie [data-det] { min-height: 48px; font-size: 16px; font-size-adjust: none; }
}