/*
 * V2 Design System — Portal Comercial VITO
 * ==========================================
 * Tokens y componentes base para el flujo V2.
 * Cargar DESPUÉS de bootstrap.min.css (BS3) y material-bootstrap-wizard.css.
 * No rompe el wizard BS3/Material Kit — neutraliza con especificidad, no !important global.
 *
 * Skill de referencia: .windsurf/skills/v2-ui-design-system/SKILL.md
 */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Primario — Cyan/Teal (identidad VITO) */
  --v2-primary:           #00bcd4;
  --v2-primary-dark:      #00838f;
  --v2-primary-light:     #b2ebf2;
  --v2-primary-bg:        #e0f7fa;
  --v2-primary-border:   #00bcd4;

  /* Secundario — Azul */
  --v2-secondary:         #1976d2;
  --v2-secondary-dark:   #0076a3;
  --v2-secondary-bg:     #e3f2fd;
  --v2-secondary-border: #3b82c6;

  /* Éxito — Verde */
  --v2-success:          #4caf50;
  --v2-success-dark:    #28a745;
  --v2-success-bg:       #d4edda;

  /* Error — Rojo */
  --v2-error:            #e74c3c;
  --v2-error-dark:      #d9534f;
  --v2-error-bg:        #f8d7da;
  --v2-error-border:    #f5c6cb;
  --v2-error-text:      #721c24;

  /* Advertencia — Amarillo */
  --v2-warning-bg:      #fff3cd;
  --v2-warning-border:  #ffeeba;
  --v2-warning-text:    #856404;

  /* Info — Azul claro */
  --v2-info-bg:         #cce5ff;
  --v2-info-border:    #b8daff;
  --v2-info-text:      #004085;

  /* Neutros */
  --v2-bg-page:        #f8f9fa;
  --v2-bg-panel:       #ffffff;
  --v2-bg-gray:       #eeeeee;
  --v2-bg-blue-tint:  #f2f8fc;
  --v2-border:        #e1e8ed;
  --v2-border-light:  #dcdcdc;
  --v2-text:          #333333;
  --v2-text-muted:    #888888;
  --v2-text-label:    #999999;
  --v2-text-faded:    #555555;

  /* Tipografía */
  --v2-font-family:    Arial, Helvetica, sans-serif;
  --v2-font-size-xs:   9.5px;
  --v2-font-size-sm:   10.5px;
  --v2-font-size-base: 11px;
  --v2-font-size-md:   12px;
  --v2-font-size-lg:   14px;
  --v2-font-size-xl:   16px;
  --v2-font-size-2xl:  18px;

  /* Espaciados */
  --v2-space-xs:   4px;
  --v2-space-sm:   8px;
  --v2-space-md:  12px;
  --v2-space-lg:  16px;
  --v2-space-xl:  20px;
  --v2-space-2xl: 25px;
  --v2-space-3xl: 30px;

  /* Bordes */
  --v2-radius-sm:    3px;
  --v2-radius-md:    4px;
  --v2-radius-lg:    6px;
  --v2-radius-xl:    8px;
  --v2-radius-2xl:  12px;
  --v2-radius-3xl:  16px;

  /* Sombras */
  --v2-shadow-sm:      0 2px 10px rgba(0,0,0,0.03);
  --v2-shadow-md:      0 2px 8px rgba(0,0,0,0.02);
  --v2-shadow-lg:      0 4px 15px rgba(0,120,200,0.04);
  --v2-shadow-popover: 0 6px 16px rgba(0,0,0,0.25);
}

/* ============================================================
   2. RESET V2 — neutralizar BS3/Material Kit solo en scope V2
   ============================================================ */

/* Neutralizar label-floating de Material Kit dentro de contenedores V2 */
.v2-scope .label-floating.control-label,
.v2-folio-field .control-label,
.v2-gray-panel .control-label {
  position: static !important;  /* !important: rompe position:absolute de Material Kit */
  transform: none !important;   /* !important: rompe translateY de Material Kit */
  font-size: var(--v2-font-size-xs);
  font-weight: bold;
  color: var(--v2-text-muted);
  text-transform: uppercase;
  margin-bottom: var(--v2-space-xs);
  float: none;
}

/* Neutralizar floats de Material Kit en layouts V2 */
.v2-gray-panel-grid {
  float: none !important;  /* !important: rompe float:left de Material Kit */
}

/* ============================================================
   3. COMPONENTES BASE
   ============================================================ */

/* ---- 3.1 Panel / Card ---- */
.v2-panel {
  background: var(--v2-bg-panel);
  border-radius: var(--v2-radius-xl);
  padding: var(--v2-space-2xl);
  box-shadow: var(--v2-shadow-sm);
  border: 1px solid var(--v2-border);
}
.v2-panel-title {
  font-size: var(--v2-font-size-lg);
  color: var(--v2-secondary-dark);
  font-weight: 500;
  margin-bottom: var(--v2-space-xl);
}

/* ---- 3.2 Badge de tarifa unitaria ---- */
.v2-unit-badge {
  font-size: var(--v2-font-size-md);
  font-weight: bold;
  color: var(--v2-success-dark);
  background-color: var(--v2-bg-panel);
  padding: var(--v2-space-sm) var(--v2-space-lg);
  border-radius: var(--v2-radius-md);
  border: 1px solid var(--v2-success-dark);
  display: inline-flex;
  align-items: center;
  gap: var(--v2-space-xs);
}
.v2-unit-badge-label {
  font-size: var(--v2-font-size-xs);
  font-weight: bold;
  color: var(--v2-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.v2-unit-badge-value {
  font-size: var(--v2-font-size-md);
  font-weight: bold;
  color: var(--v2-success-dark);
}

/* ---- 3.3 Card de cantidad + tarifa (cyan) ---- */
.v2-qty-unit-card {
  background-color: var(--v2-primary-bg);
  border: 1px solid var(--v2-primary-light);
  border-radius: var(--v2-radius-xl);
  padding: var(--v2-space-md) var(--v2-space-lg);
  margin-bottom: var(--v2-space-md);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.v2-qty-unit-card label {
  font-size: 10.5px;
  font-weight: bold;
  color: var(--v2-primary-dark);
  display: block;
  margin-bottom: var(--v2-space-xs);
}

/* ---- 3.4 Banners de validación ---- */
.v2-validation-banner {
  padding: var(--v2-space-sm) var(--v2-space-md);
  border-radius: var(--v2-radius-lg);
  font-size: var(--v2-font-size-sm);
  font-weight: bold;
  margin-bottom: var(--v2-space-md);
  display: flex;
  align-items: center;
  gap: var(--v2-space-sm);
  line-height: 1.4;
}
.v2-banner-error {
  background-color: var(--v2-error-bg);
  color: var(--v2-error-text);
  border: 1px solid var(--v2-error-border);
}
.v2-banner-warning {
  background-color: var(--v2-warning-bg);
  color: var(--v2-warning-text);
  border: 1px solid var(--v2-warning-border);
}
.v2-banner-info {
  background-color: var(--v2-info-bg);
  color: var(--v2-info-text);
  border: 1px solid var(--v2-info-border);
}

/* ---- 3.5 Switch / Toggle ---- */
.v2-switch-pill {
  position: relative;
  display: inline-block;
  width: 42px;
  height: 22px;
}
.v2-switch-pill input { opacity: 0; width: 0; height: 0; }
.v2-slider-pill {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #cccccc;
  transition: .3s;
  border-radius: 22px;
}
.v2-slider-pill:before {
  position: absolute;
  content: "";
  height: 16px; width: 16px;
  left: 3px; bottom: 3px;
  background-color: white;
  transition: .3s;
  border-radius: 50%;
}
.v2-switch-pill input:checked + .v2-slider-pill { background-color: var(--v2-success); }
.v2-switch-pill input:checked + .v2-slider-pill:before { transform: translateX(20px); }
.v2-switch-pill input:disabled + .v2-slider-pill { opacity: 0.5; cursor: not-allowed; }
.v2-switch-text {
  font-size: var(--v2-font-size-base);
  font-weight: bold;
  color: var(--v2-text-muted);
  text-transform: uppercase;
}

/* ---- 3.6 Inputs y selects ---- */
.v2-field-input {
  flex: 1;
  height: 32px;
  border: 1px solid var(--v2-border-light);
  border-radius: var(--v2-radius-md);
  padding: 0 var(--v2-space-sm);
  outline: none;
  background: var(--v2-bg-panel);
  font-size: var(--v2-font-size-base);
  font-family: var(--v2-font-family);
  color: var(--v2-text);
}
.v2-field-input:focus {
  border-color: var(--v2-primary);
}
.v2-field-select {
  width: 105px;
  height: 32px;
  border: 1px solid var(--v2-border-light);
  border-radius: var(--v2-radius-md);
  padding: 0 var(--v2-space-xs);
  outline: none;
  background: var(--v2-bg-panel);
  font-size: var(--v2-font-size-base);
  font-family: var(--v2-font-family);
  color: var(--v2-text);
}
.v2-field-select:focus {
  border-color: var(--v2-primary);
}

/* ---- 3.7 Tabla de resumen ---- */
.v2-summary-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border-radius: var(--v2-radius-2xl);
  overflow: hidden;
  box-shadow: var(--v2-shadow-md);
}
.v2-summary-table th {
  background-color: #4893cc;
  color: var(--v2-bg-panel);
  font-weight: bold;
  text-align: center;
  padding: 11px var(--v2-space-md);
  font-size: var(--v2-font-size-base);
  border: none;
}
.v2-summary-table td {
  padding: var(--v2-space-md);
  font-size: var(--v2-font-size-sm);
  border: none;
  vertical-align: middle;
}
.v2-row-light td { background-color: #e3f2fb; }
.v2-row-white td { background-color: var(--v2-bg-panel); }

/* ---- 3.8 Botones ---- */
.v2-btn-gray {
  background-color: #9e9e9e;
  color: var(--v2-bg-panel);
  border: none;
  padding: 9px 28px;
  border-radius: var(--v2-radius-md);
  font-weight: bold;
  cursor: pointer;
  font-size: var(--v2-font-size-base);
  font-family: var(--v2-font-family);
}
.v2-btn-green {
  background-color: var(--v2-success);
  color: var(--v2-bg-panel);
  border: none;
  padding: 9px 32px;
  border-radius: var(--v2-radius-md);
  font-weight: bold;
  cursor: pointer;
  font-size: var(--v2-font-size-base);
  font-family: var(--v2-font-family);
}
.v2-btn-primary {
  background-color: var(--v2-primary);
  color: var(--v2-bg-panel);
  border: none;
  padding: 9px 32px;
  border-radius: var(--v2-radius-md);
  font-weight: bold;
  cursor: pointer;
  font-size: var(--v2-font-size-base);
  font-family: var(--v2-font-family);
}

/* ---- 3.9 Gray panel (distribución) ---- */
.v2-gray-panel {
  background-color: var(--v2-bg-gray);
  border-radius: var(--v2-radius-2xl);
  padding: var(--v2-space-lg);
  margin-bottom: 15px;
  transition: opacity 0.3s ease;
}
.v2-gray-panel-title {
  grid-column: 1 / -1;
  font-size: 10.5px;
  font-weight: bold;
  color: var(--v2-secondary-dark);
  margin-bottom: var(--v2-space-sm);
  display: flex;
  align-items: center;
  gap: var(--v2-space-sm);
}
.v2-gray-panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--v2-space-md) var(--v2-space-xl);
}
.v2-panel-disabled {
  opacity: 0.4;
  pointer-events: none;
}

/* ---- 3.10 Popover / Help ---- */
.v2-help-icon {
  color: #0088cc;
  font-size: var(--v2-font-size-md);
  margin-left: var(--v2-space-xs);
  cursor: pointer;
  vertical-align: middle;
}
.v2-popover-card {
  position: absolute;
  bottom: 100%;
  left: 0;
  width: 280px;
  background-color: #d8d8d8;
  border: 1px solid #bbbbbb;
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-space-md) 14px;
  box-shadow: var(--v2-shadow-popover);
  z-index: 999;
  margin-bottom: var(--v2-space-sm);
  display: none;
  line-height: 1.45;
  color: #222222;
  font-size: 10.5px;
}
.v2-popover-card:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 25px;
  border-width: 6px;
  border-style: solid;
  border-color: #d8d8d8 transparent transparent transparent;
}

/* ============================================================
   4. LAYOUTS
   ============================================================ */

/* ---- 4.1 Split container (Portal | Oficina Virtual) ---- */
.v2-split-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0 var(--v2-space-3xl);
  max-width: 1750px;
  margin: 0 auto;
  align-items: start;
}
.v2-column-portal {
  padding-right: var(--v2-space-2xl);
  border-right: 2px dashed var(--v2-primary);
}
.v2-column-oc {
  padding-left: var(--v2-space-2xl);
}

/* ---- 4.2 Tabs ---- */
.v2-tabs-header {
  display: flex;
  gap: var(--v2-space-sm);
  margin-bottom: var(--v2-space-md);
}
.v2-tab-btn {
  font-size: 9.5px;
  font-weight: bold;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: var(--v2-radius-md);
  cursor: pointer;
  border: 1px dashed #cccccc;
  background-color: var(--v2-bg-panel);
  color: var(--v2-text-muted);
  transition: 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.v2-tab-btn.active-portal {
  background-color: var(--v2-primary-bg);
  color: var(--v2-primary-dark);
  border: 1px dashed var(--v2-primary);
}
.v2-tab-btn.active-ov {
  background-color: #212529;
  color: var(--v2-bg-panel);
  border: 1px solid #212529;
}

/* ============================================================
   5. UTILIDADES V2
   ============================================================ */
.v2-text-center { text-align: center; }
.v2-text-right  { text-align: right; }
.v2-text-muted  { color: var(--v2-text-muted); }
.v2-text-label  { color: var(--v2-text-label); font-size: var(--v2-font-size-sm); margin-bottom: var(--v2-space-sm); display: block; }
.v2-required-asterisk { color: var(--v2-error); }
.v2-mb-sm { margin-bottom: var(--v2-space-sm); }
.v2-mb-md { margin-bottom: var(--v2-space-md); }
.v2-mb-lg { margin-bottom: var(--v2-space-lg); }
.v2-mb-xl { margin-bottom: var(--v2-space-xl); }
.v2-hidden { display: none !important; }
.v2-flex { display: flex; }
.v2-flex-between { display: flex; justify-content: space-between; align-items: center; }
.v2-flex-col { display: flex; flex-direction: column; }
.v2-gap-sm { gap: var(--v2-space-sm); }
.v2-gap-md { gap: var(--v2-space-md); }

/* ============================================================
   6. RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .v2-split-container {
    grid-template-columns: 1fr;
    padding: 0 var(--v2-space-md);
  }
  .v2-column-portal {
    padding-right: 0;
    border-right: none;
    border-bottom: 2px dashed var(--v2-primary);
    padding-bottom: var(--v2-space-xl);
    margin-bottom: var(--v2-space-xl);
  }
  .v2-column-oc {
    padding-left: 0;
  }
  .v2-gray-panel-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   7. COMPONENTES ESPECÍFICOS — Pricing (service-v2-products)
   ============================================================ */

/* ---- Folio field — neutraliza Material Kit label-floating ---- */
.v2-folio-field {
  margin-bottom: var(--v2-space-lg);
}
.v2-folio-field .control-label {
  font-size: var(--v2-font-size-md);
  color: var(--v2-text-label);
  text-transform: uppercase;
  font-weight: 500;
  position: static !important;  /* !important: rompe position:absolute de Material Kit */
  display: block;
  margin-bottom: var(--v2-space-sm);
  pointer-events: auto;
  transform: none !important;   /* !important: rompe translateY de Material Kit */
  top: auto !important;
  left: auto !important;
}
.v2-folio-field.form-group {
  padding-top: 0;
  margin-top: 0;
}

/* ---- Fila de cantidad portal ---- */
.v2-folio-cant-portal-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.v2-folio-cant-portal-row .v2-folio-input {
  flex: 1;
  max-width: 100%;
  text-align: center;
}
.v2-folio-cant-portal-row.v2-es-mixto .v2-folio-input {
  flex: 0 0 38%;
  max-width: 38%;
}

/* ---- Select de portal (visible solo en modo mixto) ---- */
.v2-folio-portal-select {
  display: none !important;
}
.v2-folio-cant-portal-row.v2-es-mixto .v2-folio-portal-select,
.v2-mixto-layout .v2-folio-portal-select {
  display: block !important;
  flex: 1;
}
/* En Mixto cada campo ocupa el ancho completo para que quepan cantidad + portal.
   Se conserva el float:left de BS3: quitarlo saca la columna del flujo y el
   panel se monta sobre la fila del checkbox (ver bloque HU-239 al final). */
.v2-mixto-layout .col-sm-6 {
  width: 100%;
}

/* ---- Catálogo de integraciones ---- */
#v2-integraciones-catalog .v2-integ-em-item {
  margin-bottom: var(--v2-space-xs);
}
#v2-integraciones-catalog .cant_integracion .form-group.label-floating {
  margin-top: 18px;
  padding-top: 24px;
}
#v2-integraciones-catalog .integraciones-container {
  display: block;
  margin-top: 18px;
}
#v2-integraciones-catalog .integraciones-container > span {
  display: block;
  margin-bottom: var(--v2-space-md);
}
#v2-integraciones-catalog .integraciones-container .form-group {
  margin-top: var(--v2-space-lg);
  padding-top: var(--v2-space-sm);
}

/* ---- Distribución inline/list ---- */
.v2-dist-inline,
.v2-dist-list {
  display: block;
  font-size: 0.95em;
  margin-top: 6px;
  color: #444;
  line-height: 1.6;
}
.v2-dist-inline strong,
.v2-dist-list strong {
  color: #000;
  font-weight: bold;
}

/* ---- Card de total de folios (cyan) ---- */
.v2-folio-total-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--v2-primary-bg);
  border: 1px solid var(--v2-primary-light);
  border-radius: var(--v2-radius-xl);
  padding: var(--v2-space-md) var(--v2-space-lg);
  margin-bottom: var(--v2-space-md);
}
.v2-folio-total-card .v2-folio-total-input {
  width: 140px;
  text-align: center;
  font-weight: bold;
  font-size: var(--v2-font-size-xl);
}

/* ---- Badge de tarifa unitaria (sobreescribe el base para pricing) ---- */
.v2-folio-total-card .v2-unit-badge,
.v2-folio-pos-card .v2-unit-badge {
  font-size: var(--v2-font-size-base);
  font-weight: bold;
  color: var(--v2-primary-dark);
  background-color: var(--v2-primary-bg);
  border: 1px solid var(--v2-primary-light);
  border-radius: var(--v2-radius-lg);
  padding: var(--v2-space-sm) var(--v2-space-md);
  text-align: right;
}
.v2-folio-total-card .v2-unit-badge .v2-unit-badge-label,
.v2-folio-pos-card .v2-unit-badge .v2-unit-badge-label {
  display: block;
  font-size: 9px;
  margin-bottom: 3px;
}
/* La tarifa calculada se muestra como pastilla blanca con borde verde (mockup),
   con el mismo formato en folios (FE) y en Documento Equivalente POS. */
.v2-folio-total-card .v2-unit-badge .v2-unit-badge-value,
.v2-folio-pos-card .v2-unit-badge .v2-unit-badge-value {
  font-size: var(--v2-font-size-lg);
  display: inline-block;
  color: var(--v2-success-dark);
  background-color: #ffffff;
  border: 1px solid var(--v2-success-dark);
  border-radius: var(--v2-radius-md);
  padding: var(--v2-space-sm) var(--v2-space-md);
  white-space: nowrap;
}

/* ---- Banners de validación (sobreescribe el base para pricing) ---- */
.v2-folio-field .v2-validation-banner {
  display: none;
  padding: var(--v2-space-sm) var(--v2-space-md);
  border-radius: var(--v2-radius-lg);
  margin-bottom: var(--v2-space-sm);
  font-size: var(--v2-font-size-md);
  font-weight: 500;
}
.v2-folio-field .v2-validation-banner.v2-banner-error {
  background-color: #fff3e0;
  border: 1px solid #ffab91;
  color: #d84315;
}
.v2-folio-field .v2-validation-banner.v2-banner-warning {
  background-color: #fffde7;
  border: 1px solid #fff59d;
  color: #f57f17;
}
.v2-validation-banner i {
  margin-right: 6px;
}

/* ---- Card de DEQ POS ---- */
.v2-folio-pos-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--v2-primary-bg);
  border: 1px solid var(--v2-primary-light);
  border-radius: var(--v2-radius-xl);
  padding: 10px 14px;
  margin-top: var(--v2-space-sm);
}
.v2-folio-pos-card .v2-folio-pos-input {
  width: 140px;
  text-align: center;
  font-weight: bold;
}

/* ---- Botones de avance inhabilitados por mismatch de distribución (HU-236 C1) ---- */
.v2-btn-disabled-mismatch {
  opacity: 0.5 !important;  /* !important: sobreescribe estilos de estado de Material Kit */
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ---- Certificado digital bloqueado ---- */
.v2-cd-locked {
  cursor: not-allowed;
}
.v2-cd-locked input[type="checkbox"] {
  cursor: not-allowed;
}
.v2-cd-vigente {
  cursor: not-allowed;
  opacity: 0.7;
}
.v2-cd-vigente input[type="checkbox"] {
  cursor: not-allowed;
  pointer-events: none;
}
.v2-cd-locked::after {
  content: "🔒 Requerido para este cliente";
  display: inline-block;
  margin-left: var(--v2-space-sm);
  font-size: 10px;
  font-weight: bold;
  color: #d84315;
  text-transform: none;
}

/* ---- Título de sección V2 (reemplaza style="color:#0084CA") ---- */
.v2-section-title {
  color: var(--v2-secondary-dark);
  font-size: var(--v2-font-size-lg);
  font-weight: 500;
  margin: 0;
}
.v2-section-subtitle {
  color: var(--v2-text-muted);
  font-size: var(--v2-font-size-sm);
  margin: 0;
}
.v2-section-divider {
  border-color: var(--v2-secondary-dark);
  margin-top: var(--v2-space-sm);
  margin-bottom: var(--v2-space-md);
}

/* ---- Card de producto (caja registradora, complementarios) ---- */
.v2-product-card {
  margin-top: 15px;
  margin-bottom: 15px;
  border-radius: 10px;
  background-color: #f0f0f0;
  padding: 10px;
}

/* ---- Fila de total V2 ---- */
.v2-total-row {
  margin-top: var(--v2-space-xs);
}
.v2-total-row strong {
  color: var(--v2-text);
}

/* ---- Tabla CR (div-based, compatible con JS que renderiza divs) ---- */
.v2-cr-table {
  width: 100%;
  border-radius: var(--v2-radius-2xl);
  overflow: hidden;
  box-shadow: var(--v2-shadow-md);
}
.v2-cr-header {
  background-color: #4893cc;
  color: var(--v2-bg-panel);
  padding: 11px var(--v2-space-md);
  font-size: var(--v2-font-size-base);
  font-weight: bold;
  border-radius: var(--v2-radius-2xl);
  margin-bottom: var(--v2-space-xs);
}
.v2-cr-header b {
  color: var(--v2-bg-panel);
  font-size: var(--v2-font-size-base);
}
.v2-cr-table .table-prop-1 {
  background-color: #e3f2fb;
  padding: var(--v2-space-md);
  border-radius: var(--v2-radius-md);
  margin-bottom: 2px;
}
.v2-cr-table .table-prop-2 {
  background-color: var(--v2-bg-panel);
  padding: var(--v2-space-md);
  border-radius: var(--v2-radius-md);
  margin-bottom: 2px;
}

/* ---- Previous V2: tapado=1 (ocultar precios/totales) ---- */
/* Nota: usa :has() — requiere navegador moderno (Firefox >= 121) */
#docPropuesta[data-tapado="1"] .col-sm-2:has(#priceEmision),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#tPriceEmision),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#priceRecepcion),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#tPriceRecepcion),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#pricePortalRecepcion),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#tPricePortalRecepcion),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#priceHoras),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#tPriceHoras),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#priceRG),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#tPriceRG),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#priceRgPlantilla),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#tPriceRgPlantilla),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#priceCert),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#tPriceCert),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#priceDocEq),
#docPropuesta[data-tapado="1"] .col-sm-2:has(#tPriceDocEq) {
  display: none !important;
}
#docPropuesta[data-tapado="1"] .col-precio-header,
#docPropuesta[data-tapado="1"] .col-total-header {
  display: none !important;
}
#docPropuesta[data-tapado="1"] .factura-aliado-text {
  display: inline !important;
}
#docPropuesta[data-tapado="1"] .seccion-totales,
#docPropuesta[data-tapado="1"] #formasPagoContainer {
  display: none !important;
}
#docPropuesta[data-tapado="1"] #tabla-resumen-v2-preview .v2-col-costo-header,
#docPropuesta[data-tapado="1"] #tabla-resumen-v2-preview .v2-col-costo,
#docPropuesta[data-tapado="1"] #tabla-resumen-v2-preview tfoot {
  display: none !important;
}
#docPropuesta[data-tapado="1"] .codigo-contratacion-general {
  display: block !important;
}
/* Columna "Código Contratación" en el encabezado de la tabla de productos
   (misma estructura que detalle/propuesta.blade.php): solo con tapado=1. */
#docPropuesta[data-tapado="1"] .v2-col-codigo-header {
  display: block !important;
}
/* Sin Precio/Total la Descripción ocupa col-sm-6 para que Cantidad quede
   alineada con su encabezado (mismo criterio que la vista de consulta). */
#docPropuesta[data-tapado="1"] .table-prop-header .v2-col-desc-header {
  width: 50% !important;
}

/* ---- Previous V2: tabla agency ---- */
.table-agency p > b {
  color: #000;
  font-weight: bold;
}

/* ---- Tabla resumen V2 (sobreescribe table-bordered de BS3) ---- */
#tabla-resumen-v2 {
  border-radius: var(--v2-radius-2xl);
  overflow: hidden;
}
#tabla-resumen-v2 thead tr {
  background-color: #4893cc;
  color: var(--v2-bg-panel);
}
#tabla-resumen-v2 thead tr th {
  border: none;
  font-weight: bold;
  padding: 11px var(--v2-space-md);
  font-size: var(--v2-font-size-base);
}
#tabla-resumen-v2 tbody td {
  padding: var(--v2-space-md);
  font-size: var(--v2-font-size-sm);
  border: none;
}
#tabla-resumen-v2 tfoot td {
  padding: var(--v2-space-md);
  font-size: var(--v2-font-size-sm);
  border: none;
  font-weight: bold;
}

/* ==========================================================================
   HU-239 ajustes UI (specs/features/hu-239-ajustes-ui-planes-servicios)
   ========================================================================== */

/* Punto 4: rótulos "Cantidad total de folios a comprar" / "Tarifa unitaria calculada".
   !important: neutraliza el color de .control-label de Material Kit. */
.v2-label-primary-dark {
  color: var(--v2-primary-dark) !important;
}

/* Título de la sección de folios ("CANTIDAD TOTAL DE FOLIOS A COMPRAR" en el
   mockup): azul oscuro en mayúsculas sobre la tarjeta cyan. */
.v2-folios-section-title {
  color: var(--v2-secondary-dark);
  font-size: var(--v2-font-size-lg);
  font-weight: bold;
  text-transform: uppercase;
  margin: 0 0 var(--v2-space-sm);
}

/* Banner de instrucción de distribución (mockup .portal-dist-instruction-banner):
   fondo cian claro con acento lateral cyan, texto azul oscuro en mayúsculas y
   el total en negrita oscura. */
.v2-validation-banner.v2-banner-dist {
  background-color: #f0fafd;
  border: none;
  border-left: 3px solid var(--v2-primary);
  border-radius: 0 var(--v2-radius-md) var(--v2-radius-md) 0;
  color: var(--v2-secondary-dark);
  text-transform: uppercase;
}
.v2-banner-dist strong {
  color: #1a1a1a;
  font-weight: 800;
}

/* Puntos 1, 10 y 12: DEE SP y DEE POS solo se venden por integración, así que su
   valor es predeterminado. El select se muestra siempre (igual que el mockup:
   <select id="modDEQPOS">) con "Integración" fijo, pero bloqueado: `pointer-events:
   none` impide desplegar la lista aunque tenga una sola opción, y `appearance: none`
   quita la flecha para que no sugiera que se puede abrir.
   NO se usa el atributo `disabled`: FormData omite los controles deshabilitados y
   FoliosTransaccionesBuilder exige `v2_portal_doc_eq_*` en modo Mixto. */
.v2-folio-cant-portal-row .v2-folio-portal-select.v2-portal-predeterminado,
.v2-mixto-layout .v2-folio-portal-select.v2-portal-predeterminado {
  display: block !important;  /* !important: gana a .v2-folio-portal-select { display:none } */
  flex: 1;                    /* mismo ancho que los demás selects de portal */
  min-width: 0;
  cursor: default;
  pointer-events: none;       /* no despliega la lista aunque tenga una sola opción */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;           /* sin flecha: no sugiere que se puede desplegar */
}

/* Punto 6: la caja de total queda fuera del panel de distribución. */
.v2-panel-folios .v2-dist-panel {
  margin-top: var(--v2-space-md);
  margin-bottom: 0;
}
.v2-panel-folios .v2-dist-panel #v2_dist_fields {
  margin-left: 0;
  margin-right: 0;
}

/* Punto 9: nombre del producto centrado (horizontal + vertical) en las tablas V2
   de pre-creación (#crList), preview (#crListSelect) y vista de firma (#P-crListSelect). */
.v2-producto-row,
#P-crListSelect > .row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
/* El clearfix de .row (BS3) no debe ocupar espacio como item flex. */
.v2-producto-row::before,
.v2-producto-row::after,
#P-crListSelect > .row::before,
#P-crListSelect > .row::after {
  content: none;
}
.v2-producto-row > div:first-child,
#P-crListSelect > .row > div:first-child {
  text-align: center;
}

/* Punto 10: producto y descripción en negro (sin negrilla) en pre-creación y preview.
   !important: neutraliza el color:#666666 inline del tab-pane y el gris de main.css. */
.v2-scope .v2-producto-row,
.v2-scope .v2-producto-row > div,
.v2-scope .v2-producto-row .table-prop-desc {
  color: #000 !important;
  font-weight: normal !important;
}
.v2-scope .v2-producto-row .table-prop-desc strong {
  color: #000 !important;
}

@media (max-width: 767px) {
  .v2-producto-row,
  #P-crListSelect > .row {
    display: block;
  }
}

/* HU-239 ajustes: botón inhabilitado hasta que se marque el checkbox requerido
   (modal-validacion-servicios-v2). Mismo tratamiento visual que .v2-btn-disabled-mismatch. */
.v2-btn-disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  pointer-events: none;
}

/* ==========================================================================
   Feedback Portal Comercial (puntos 10 y 11): modo Mixto
   ========================================================================== */

/* Punto 11: al activar Mixto el panel no debe montarse sobre la fila del
   checkbox del producto. #panel-folios-v2 y #panel-doc-eq-pos-v2 son .col-sm-12
   flotados por BS3; al quitarles el float salían del flujo y el checkbox
   anterior (también flotado) quedaba debajo del panel. Se conserva el float y
   se fuerza el salto de línea. */
.v2-mixto-layout {
  clear: both;
}

/* Punto 2 del feedback: al mostrarse el select predeterminado, la card de DEE POS
   se desbordaba y tapaba el rótulo del check. La card puede envolver si no cabe,
   y el bloque label+fila crece para ocupar el espacio disponible junto al badge de
   tarifa, de modo que el select quede con el mismo ancho proporcional que los demás
   selects de portal (no una barra angosta junto al input). */
.v2-folio-pos-card {
  flex-wrap: wrap;
  gap: var(--v2-space-sm);
}
.v2-folio-pos-card > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.v2-folio-pos-card .v2-folio-cant-portal-row {
  max-width: 420px;
  min-width: 0;
}

/* El rótulo "DOCUMENTO EQUIVALENTE POS (POINT OF SALE) (PUNTO DE VENTA)" es largo:
   debe envolver en varias líneas y verse completo, no recortarse. El flex va solo
   al span del texto: Material Kit también renderiza la pastilla del toggle como
   <span class="toggle"> dentro del label, y un `label > span { flex: 1 }` la
   estiraba a todo el ancho. */
.producto-v2-doc-eq-pos .togglebutton label {
  display: flex;
  align-items: center;
  width: 100%;
}
.producto-v2-doc-eq-pos .togglebutton label > span:not(.toggle) {
  white-space: normal;
  overflow-wrap: break-word;
  flex: 1;
}
.producto-v2-doc-eq-pos .togglebutton label > span.toggle {
  flex: 0 0 auto;
}