/*
 * Ajuste visual basado en seis capturas proporcionadas.
 * Mantiene la lógica y los estilos específicos de la pantalla de pago intactos.
 * Solo afecta al flujo de certificados que muestra la nota de navegadores.
 */
:root {
  --reference-blue: #337fca;
  --reference-gray: #eeeeee;
  --reference-heading: #cccccc;
  --reference-border: #ededed;
}
html, body {
  margin: 0;
  background: #fff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  line-height: 1.16;
  color: #0c0c0c;
}
body, .browser-shell { min-height: 100vh; }
.browser-shell { width: 100%; }
/* Cabecera visible, alineada como la referencia aportada por el usuario. */
.browser-bar { display: none; }
.top-logo {
  display: flex;
  height: 121px;
  width: 100%;
  padding: 0;
  margin: 0;
  align-items: flex-start;
  justify-content: center;
  background: white;
}
.top-logo .brand-wrap {
  width: min(1000px, calc(100% - 24px));
  height: 121px;
  margin: 0 auto;
  padding-left: 9px;
  justify-content: flex-start;
  align-items: flex-start;
}
.top-logo .brand-mark {
  width: 197px;
  height: 78px;
  margin-top: 16px;
  animation: none;
}
.top-logo .brand-mark img {
  width: 197px;
  height: 78px;
  object-fit: contain;
  filter: none;
}

.page-frame { min-height: 100vh; padding-bottom: 0; }
.main-card {
  width: min(1152px, calc(100% - 40px));
  min-height: 0;
  margin: 0 auto 24px;
  padding: 11px 10px 29px;
  background: #fff;
  border: 3px solid var(--reference-border);
  border-radius: 11px;
  box-shadow: none;
}
.site-footer {
  min-height: 43px;
  height: 43px;
  margin-top: auto;
  border-top: 1px solid #ebebeb;
  color: #000;
  font: italic 700 11px Arial, Helvetica, sans-serif;
}
/* Encabezado y contenido de las vistas antiguas (no incluye la pasarela). */
#appRoot:has(> .browser-badge) > .card-panel {
  border: 0;
  border-radius: 0;
  padding: 0 10px;
  background: transparent;
  box-shadow: none;
}
#appRoot:has(> .browser-badge) .step-title {
  font: 700 17px/1.25 Arial, Helvetica, sans-serif;
  color: var(--reference-blue);
  padding: 0;
  margin: 6px 0 15px;
}
#appRoot:has(> .browser-badge) a { color: #287dc8; }
#appRoot:has(> .browser-badge) .browser-badge {
  background: var(--reference-gray);
  border: 0;
  border-radius: 5px;
  margin: 30px 0 0;
  padding: 9px 10px;
  font: 16px/1.18 Arial, Helvetica, sans-serif;
  color: #050505;
}
#appRoot:has(> .browser-badge) .browser-badge strong {
  font-family: Arial, Helvetica, sans-serif;
  font-weight: 700;
  text-decoration: underline;
  font-style: italic;
}
#appRoot:has(> .browser-badge) .btn {
  height: 25px;
  min-height: 25px;
  border-radius: 4px;
  padding: 2px 13px;
  font: 400 13px/19px Arial, Helvetica, sans-serif;
  color: #337fcc;
  border: 1px solid #ccc;
  background: linear-gradient(#fff, #e5e5e5);
  box-shadow: 0 1px 1px rgba(0,0,0,.07);
  transition: none;
}
#appRoot:has(> .browser-badge) .btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
#appRoot:has(> .browser-badge) input:not([type='radio']):not([type='checkbox']),
#appRoot:has(> .browser-badge) select {
  min-width: 0;
  height: 25px;
  padding: 2px 5px;
  border: 1px solid #cecece;
  border-radius: 4px;
  background: #fff;
  font: 12px Arial, Helvetica, sans-serif;
  box-shadow: none;
}
/* Paso 1: términos. */
#appRoot:has(> .browser-badge) .text-block {
  border: 0;
  border-radius: 5px;
  margin: 0;
  background: var(--reference-gray);
  padding: 10px 11px 9px;
  font: 13px/1.33 Arial, Helvetica, sans-serif;
  color: #050505;
}
#appRoot:has(> .browser-badge) .text-block p { margin: 0 0 9px; }
#appRoot:has(> .browser-badge) .text-block p strong { font-weight: 400; }
#appRoot:has(> .browser-badge) .text-block ol {
  margin: 0;
  padding-left: 20px;
}
#appRoot:has(> .browser-badge) .text-block li {
  padding-left: 0;
  margin: 0 0 12px;
}
#appRoot:has(> .browser-badge) .text-block li:last-child { margin-bottom: 9px; }
#appRoot:has(> .browser-badge) .text-block li::marker { color: var(--reference-blue); }
#appRoot:has(> .browser-badge) .check-block { margin: 19px 0 20px; }
#appRoot:has(> .browser-badge) .check-label {
  gap: 5px;
  font: 13px Arial, Helvetica, sans-serif;
}
#appRoot:has(> .browser-badge) .check-label input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #428bca;
}
#appRoot:has(> .browser-badge) .action-row { gap: 3px; margin-top: 0; }
/* Paso 2: criterios de búsqueda, en barras y filas independientes. */
#appRoot:has(> .browser-badge) .official-search-panel { padding-bottom: 0; }
#appRoot:has(> .browser-badge) .official-search-box {
  border: 0;
  padding: 0;
  margin: 0;
  background: none;
}
#appRoot:has(> .browser-badge) .search-header {
  border: 0;
  border-radius: 5px;
  background: var(--reference-gray);
  padding: 11px 10px 10px;
  color: #000;
  font: 13px/1 Arial, Helvetica, sans-serif;
  margin-bottom: 10px;
}
#appRoot:has(> .browser-badge) .search-option-box {
  border: 0;
  padding: 0;
}
#appRoot:has(> .browser-badge) .search-label-row {
  min-height: 35px;
  border: 0;
  border-radius: 5px;
  padding: 11px 10px 9px;
  background: var(--reference-heading);
  font: 700 13px/1 Arial, Helvetica, sans-serif;
  color: #000;
}
#appRoot:has(> .browser-badge) .search-input-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  padding: 14px 3px 15px;
}
#appRoot:has(> .browser-badge) .field-inline,
#appRoot:has(> .browser-badge) .full-width-input {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  width: auto;
  gap: 14px;
}
#appRoot:has(> .browser-badge) .field-inline label,
#appRoot:has(> .browser-badge) .full-width-input label {
  color: #575757;
  white-space: normal;
  font: 13px/1.2 Arial, Helvetica, sans-serif;
}
#appRoot:has(> .browser-badge) .field-inline select { width: 126px; }
#appRoot:has(> .browser-badge) .field-inline.large-field { flex: 0 0 auto; }
#appRoot:has(> .browser-badge) .field-inline.large-field input { width: 178px; }
#appRoot:has(> .browser-badge) .full-width-input input { width: 395px; }
#appRoot:has(> .browser-badge) .search-option-box:nth-child(3) .full-width-input label { width: 370px; }
#appRoot:has(> .browser-badge) .search-option-box:nth-child(4) .full-width-input label { width: 690px; }
#appRoot:has(> .browser-badge) .search-option-box:nth-child(4) .full-width-input input { width: 178px; }
#appRoot:has(> .browser-badge) .search-button {
  min-width: 84px;
  width: auto;
  height: 25px;
  gap: 6px;
}
#appRoot:has(> .browser-badge) .search-back-row { padding: 5px 0 0; }
#appRoot:has(> .browser-badge) .back-button { min-width: 98px; width: auto; }
/* Paso 3: resultado y selección. */
#appRoot:has(> .browser-badge) .result-box {
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
}
#appRoot:has(> .browser-badge) .result-box .table-wrap {
  overflow-x: auto;
  background: #fff;
  border: 1px solid #d6d6d6;
  border-radius: 0;
}
#appRoot:has(> .browser-badge) .result-table {
  width: 100%;
  font: 11.5px/1.1 Arial, Helvetica, sans-serif;
  border-collapse: collapse;
}
#appRoot:has(> .browser-badge) .result-table th {
  background: linear-gradient(#fff, #e9e9e9);
  color: #337fcc;
  font: 700 12px/1.1 Arial, Helvetica, sans-serif;
  text-transform: none;
  text-align: center;
  height: 35px;
  padding: 2px 5px;
  border: 1px solid #d9d9d9;
}
#appRoot:has(> .browser-badge) .result-table td {
  border: 1px solid #ededed;
  padding: 7px 5px;
  font-size: 11px;
  font-weight: 400;
  height: 47px;
  text-align: left;
}
#appRoot:has(> .browser-badge) .result-table .btn-small {
  display: block;
  height: 21px;
  min-height: 21px;
  padding: 0 7px;
  margin: auto;
  color: #111;
  font-size: 11px;
}
#appRoot:has(> .browser-badge) .selection-row { margin-top: 10px; }
/* Paso 4: panel de la matrícula y resumen de cantidades. */
#appRoot:has(> .browser-badge) .note-box {
  margin: 3px 0 9px;
  font: 13px/1.18 Arial, Helvetica, sans-serif;
  color: #000;
}
#appRoot:has(> .browser-badge) .summary-box {
  background: transparent;
  border: 0;
  padding: 0 12px;
  margin: 0;
}
#appRoot:has(> .browser-badge) .summary-grid {
  max-width: 850px;
  width: 100%;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 2px 18px;
  background: #eee;
  border: 0;
  border-radius: 5px;
  padding: 15px 38px;
  margin: 0 auto 32px;
  font: 12px/1.24 Arial, Helvetica, sans-serif;
}
#appRoot:has(> .browser-badge) .summary-grid strong {
  font-size: 14px;
  font-weight: 700;
}
#appRoot:has(> .browser-badge) .amount-table {
  max-width: 846px;
  margin: 0 auto 8px;
  background: #fff;
  font: 11px/1.1 Arial, Helvetica, sans-serif;
  border-collapse: collapse;
}
#appRoot:has(> .browser-badge) .amount-table th {
  padding: 4px 8px;
  background: linear-gradient(#fff, #e9e9e9);
  border: 1px solid #d8d8d8;
  color: #337fcc;
  text-align: center;
  font: 700 12px/1.1 Arial, Helvetica, sans-serif;
}
#appRoot:has(> .browser-badge) .amount-table td {
  padding: 6px 7px;
  border: 1px solid #e8e8e8;
  text-align: left;
}
#appRoot:has(> .browser-badge) .footer-note {
  flex-direction: column;
  justify-content: flex-start;
  gap: 2px;
  margin: 10px 0 8px;
  font: 13px/1 Arial, Helvetica, sans-serif;
}
#appRoot:has(> .browser-badge) .footer-note strong { padding-left: 14px; }
#appRoot:has(> .browser-badge) .cb-row { gap: 4px; margin: 10px 0 0; }
/* Pantallas de consulta: dispositivos pequeños sin desbordamientos. */
@media (max-width: 1050px) {
  #appRoot:has(> .browser-badge) .search-input-row { gap: 12px; }
  #appRoot:has(> .browser-badge) .search-option-box:nth-child(4) .full-width-input label { width: 49vw; }
  #appRoot:has(> .browser-badge) .search-option-box:nth-child(3) .full-width-input label { width: 34vw; }
  #appRoot:has(> .browser-badge) .full-width-input input { width: min(35vw, 395px); }
}
@media (max-width: 720px) {
  .main-card { width: calc(100% - 20px); margin: 10px auto 16px; padding: 10px 7px 15px; }
  #appRoot:has(> .browser-badge) > .card-panel { padding: 0 4px; }
  #appRoot:has(> .browser-badge) .search-input-row,
  #appRoot:has(> .browser-badge) .field-inline,
  #appRoot:has(> .browser-badge) .full-width-input { width: 100%; flex-direction: column; align-items: stretch; }
  #appRoot:has(> .browser-badge) .search-option-box:nth-child(4) .full-width-input label,
  #appRoot:has(> .browser-badge) .search-option-box:nth-child(3) .full-width-input label,
  #appRoot:has(> .browser-badge) .field-inline.large-field input,
  #appRoot:has(> .browser-badge) .field-inline select,
  #appRoot:has(> .browser-badge) .full-width-input input,
  #appRoot:has(> .browser-badge) .search-option-box:nth-child(4) .full-width-input input { width: 100%; }
  #appRoot:has(> .browser-badge) .search-button { align-self: flex-start; }
  #appRoot:has(> .browser-badge) .browser-badge { font-size: 13px; }
  #appRoot:has(> .browser-badge) .summary-grid { grid-template-columns: 1fr; padding: 14px; }
  #appRoot:has(> .browser-badge) .summary-grid div:nth-child(2n) { margin-bottom: 8px; }
  #appRoot:has(> .browser-badge) .result-table { min-width: 700px; }
  #appRoot:has(> .browser-badge) .amount-table { min-width: 580px; }
  #appRoot:has(> .browser-badge) .summary-box { overflow-x: auto; }
  .site-footer { text-align: center; padding: 0 8px; }
}
/* Información y paginador de la pantalla de resultados. */
#appRoot:has(> .browser-badge) .result-intro {
  margin: 0 0 14px;
  font: 13px/1.2 Arial, Helvetica, sans-serif;
}
#appRoot:has(> .browser-badge) .table-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 30px;
  background: #f4f4f4;
  border: 1px solid #eee;
  border-top: 0;
  color: #999;
  font-size: 11px;
}
#appRoot:has(> .browser-badge) .table-pager .pager-disabled,
#appRoot:has(> .browser-badge) .table-pager .pager-page {
  min-width: 23px;
  text-align: center;
  line-height: 20px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background: linear-gradient(#fff, #e6e6e6);
}
#appRoot:has(> .browser-badge) .table-pager .pager-disabled { color: #c6c6c6; }
#appRoot:has(> .browser-badge) .table-pager .pager-page { color: #111; font-weight: 700; }
#appRoot:has(> .browser-badge) .table-pager .pager-total { margin-left: 13px; }
#appRoot:has(> .browser-badge) .step-title { margin-bottom: 17px; }
#appRoot:has(> .browser-badge) .text-block li { margin-bottom: 14px; }
.main-card { padding-bottom: 32px; }
#appRoot:has(> .browser-badge) .search-input-row:first-of-type .field-inline:first-child { gap: 24px; }
#appRoot:has(> .browser-badge) .search-option-box:nth-child(2) .search-input-row { column-gap: 25px; }
#appRoot:has(> .browser-badge) .search-option-box:nth-child(3) .full-width-input label { font-family: Verdana, Arial, sans-serif; font-size: 12px; }
/* Fijar proporciones de columnas en la tabla según las capturas. */
#appRoot:has(> .browser-badge) .result-table { table-layout: fixed; }
#appRoot:has(> .browser-badge) .result-table th:nth-child(1) { width: 7%; }
#appRoot:has(> .browser-badge) .result-table th:nth-child(2) { width: 11%; }
#appRoot:has(> .browser-badge) .result-table th:nth-child(3) { width: 7%; }
#appRoot:has(> .browser-badge) .result-table th:nth-child(4) { width: 36%; }
#appRoot:has(> .browser-badge) .result-table th:nth-child(5) { width: 10%; }
#appRoot:has(> .browser-badge) .result-table th:nth-child(6) { width: 10%; }
#appRoot:has(> .browser-badge) .result-table th:nth-child(7) { width: 10%; }
#appRoot:has(> .browser-badge) .result-table th:nth-child(8) { width: 9%; }
#appRoot:has(> .browser-badge) .result-table td { overflow-wrap: anywhere; }
#appRoot:has(> .browser-badge) .summary-grid { padding-top: 10px; padding-bottom: 10px; }

/* Etapa adicional: cantidad editable, idéntica en distribución al resumen. */
#appRoot:has(> .browser-badge) .certificate-amount-table th:first-child { width: 136px; }
#appRoot:has(> .browser-badge) .certificate-amount-table th:nth-child(3) { width: 135px; }
#appRoot:has(> .browser-badge) .certificate-amount-table th:last-child { width: 136px; }
#appRoot:has(> .browser-badge) .certificate-amount-table td:first-child { text-align: center; }
#appRoot:has(> .browser-badge) .certificate-amount-table td.certificate-price-cell { text-align: right; }
#appRoot:has(> .browser-badge) .certificate-amount-table .certificate-grand-total-label { text-align: right; color: #337fcc; }
#appRoot:has(> .browser-badge) .certificate-amount-table .certificate-grand-total-row td { padding: 4px 8px; background: #f5f5f5; color: #337fcc; }
#appRoot:has(> .browser-badge) .certificate-amount-table .certificate-grand-total-row { border-top: 0; }
#appRoot:has(> .browser-badge) .certificate-quantity-input {
  box-sizing: border-box;
  height: 23px;
  width: 106px;
  padding: 2px 5px;
  font: 12px Arial, sans-serif;
  border: 1px solid #cfcfcf;
  border-radius: 4px;
  text-align: right;
  appearance: textfield;
  -moz-appearance: textfield;
}
#appRoot:has(> .browser-badge) .certificate-quantity-input::-webkit-inner-spin-button,
#appRoot:has(> .browser-badge) .certificate-quantity-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
#appRoot:has(> .browser-badge) .certificate-quantity-input[aria-invalid="true"] { border-color: #b33; }
#appRoot:has(> .browser-badge) .certificate-feedback { min-height: 0; margin: 0; text-align: center; color: #a22; font: 12px Arial, sans-serif; }
#appRoot:has(> .browser-badge) .certificate-feedback:not(:empty) { margin: 7px 0 0; }
#appRoot:has(> .browser-badge) .certificate-stage-edit .certificate-buttons { margin-top: 10px; }
#appRoot:has(> .browser-badge) .certificate-stage-edit .certificate-counts { margin-top: 13px; }
#appRoot:has(> .browser-badge) .certificate-stage-review .certificate-counts { margin-top: 10px; }
@media (max-width: 720px) {
  #appRoot:has(> .browser-badge) .certificate-amount-table { min-width: 620px; }
}

@media (max-width: 720px) {
  .top-logo { height: 99px; }
  .top-logo .brand-wrap { height: 99px; padding-left: 1px; }
  .top-logo .brand-mark { margin-top: 12px; width: 174px; height: 69px; }
  .top-logo .brand-mark img { width: 174px; height: 69px; }
}

/* Iconos de compatibilidad del pie de página, recortados de la referencia. */
.site-footer { position: relative; }
.site-footer-browsers { position: absolute; right: 35px; top: 0; width: 128px; height: 25px; object-fit: contain; }
@media (max-width: 620px) { .site-footer-browsers { display: none; } }


/* Loader de transición similar al del sitio de referencia. */
.processing-loader-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.processing-loader-overlay.is-visible {
  display: flex;
}
.processing-loader-dialog {
  width: min(202px, calc(100vw - 48px));
  min-height: 107px;
  background: #fff;
  border: 1px solid #b7b7b7;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  text-align: center;
  padding: 17px 16px 14px;
  font-family: Arial, Helvetica, sans-serif;
}
.processing-loader-title {
  margin: 0 0 26px;
  color: #000;
  font: 700 21px/1.1 Arial, Helvetica, sans-serif;
}
.processing-loader-spinner {
  width: 18px;
  height: 18px;
  margin: 0 auto;
  border-radius: 50%;
  border: 3px solid #d2d2d2;
  border-top-color: #4a4a4a;
  animation: processingLoaderSpin .8s linear infinite;
}
@keyframes processingLoaderSpin {
  to { transform: rotate(360deg); }
}