/* ============================================================================
 *  css/preinscripcion_intl_global.css
 *  Módulo: Preinscripción Internacional SUA
 *
 *  BEM-light:
 *    .pi-{block}               bloque
 *    .pi-{block}--{modifier}   modificador
 *    .pi-{block}__{element}    elemento
 *
 *  Usa exclusivamente var(--unad-*) y var(--pi-*) locales.
 *  Cero hex codes hardcoded fuera de :root.
 * ============================================================================ */

/* ── 1. Variables ────────────────────────────────────────────────────────── */
:root {
  /* Paleta institucional UNAD (mirror de tokens.css) */
  --unad-dark:         #004669;
  --unad-primary:      #f47920;
  --unad-secondary:    #d4a402;
  --unad-light:        #DADFE1;
  --unad-footer:       #445055;
  --unad-white:        #ffffff;
  --unad-danger:       #dc3545;
  --unad-success:      #28921f;

  /* Azules institucionales UNAD (paleta convenios) */
  --unad-blue-dark:    #003d5c;
  --unad-blue:         #006b96;

  /* Gradientes */
  --unad-gradient-cta:    linear-gradient(135deg, #f47920 0%, #d4a402 100%);
  --unad-gradient-header: linear-gradient(135deg, #003d5c 0%, #004669 50%, #006b96 100%);

  /* Sombras */
  --unad-shadow-md:    0 4px 12px rgba(244, 121, 32, .35);
  --unad-shadow-card:  6px 6px 16px rgba(0, 70, 105, .20);

  /* Tokens locales del módulo */
  --pi-bg-body:        var(--unad-light);
  --pi-bg-form:        var(--unad-white);
  --pi-bg-readonly:    #f5f5f5;
  --pi-bg-notice:      #F8F5D3;
  --pi-border-notice:  #e8e2a0;
  --pi-border-default: #CED5D7;
  --pi-text-body:      #333333;
  --pi-text-muted:     #666666;

  /* Espaciado (mirror de tokens.css) */
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  12px;
  --space-lg:  20px;
  --space-xl:  24px;
  --space-2xl: 32px;

  /* Radios */
  --radius-sm: 4px;
  --radius-md: 8px;

  /* Stepper (mirror de stepper.css defaults, para garantizar vars disponibles) */
  --unad-light-muted: var(--unad-light);
}

/* ── 2. Base / Body ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

/* body.pi-page garantiza mayor especificidad que los resets de Bootstrap */
body.pi-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: var(--pi-bg-body) !important;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

/* ── 3. Header ───────────────────────────────────────────────────────────── */
/* Azul institucional UNAD — consistente con el módulo convenios */
body.pi-page .pi-header {
  background: var(--unad-gradient-header);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .3);
  flex-shrink: 0;
}

body.pi-page .pi-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px clamp(16px, 2vw, 40px);
  min-height: clamp(80px, 8vw, 120px);
}

body.pi-page .pi-header__logo {
  /* Escala con el header: mismo rango que min-height del inner (80→120px) menos padding */
  height: clamp(52px, 5.5vw, 200px);
  width: auto;
  max-height: 250px;
  display: block;
  flex-shrink: 0;
}

body.pi-page .pi-header__title {
  color: var(--unad-white);
  font-size: clamp(1.1rem, 1.4vw, 1.7rem);
  font-weight: bold;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  margin: 0;
  line-height: 1.3;
}

/* Barra separadora naranja al pie del header */
body.pi-page .pi-header__bar {
  height: 5px;
  background: var(--unad-primary);
}

/* ── 4. Stepper wrapper ──────────────────────────────────────────────────── */
body.pi-page .pi-stepper-wrap {
  background-color: var(--unad-white);
  border-bottom: 1px solid var(--pi-border-default);
  padding: clamp(12px, 1.5vw, 24px) 0;
}

/* Ampliar el stepper en pantallas grandes para aprovechar el espacio */
body.pi-page .pi-stepper-wrap .container {
  max-width: clamp(600px, 70vw, 960px);
}

body.pi-page .pi-stepper-wrap .stepper {
  font-size: clamp(11px, 1vw, 14px);
}

body.pi-page .pi-stepper-wrap .stepper__label {
  font-size: clamp(10px, 0.9vw, 13px);
}

/* ── 5. Main ─────────────────────────────────────────────────────────────── */
body.pi-page .pi-main {
  flex: 1;
  background-color: var(--pi-bg-body);
  padding: var(--space-xl) 0;
}

body.pi-page .pi-main--full {
  padding: var(--space-xl) 0;
}

/* ── 6. Footer ───────────────────────────────────────────────────────────── */
body.pi-page .pi-footer {
  background: var(--unad-footer);
  padding: 15px 25px;
  text-align: center;
  border-top: 3px solid var(--unad-secondary);
  flex-shrink: 0;
}

body.pi-page .pi-footer img {
  max-width: 320px;
  height: auto;
  opacity: .9;
  background-color: var(--unad-white);
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 auto;
  /* Limitar ancho en pantallas pequeñas */
  width: 80%;
}

body.pi-page .pi-footer p {
  color: rgba(255, 255, 255, .7);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin: 8px 0 0 0;
}

/* ── 7. Form card (formulario compacto) ──────────────────────────────────── */
body.pi-page .pi-form-card {
  background-color: var(--pi-bg-form);
  box-shadow: var(--unad-shadow-card);
  border-radius: var(--radius-md);
  border: 1px solid #ddd;
  overflow: hidden;
  /* clamp: mínimo 460px, preferido 45vw, máximo 760px — escala bien en 2K */
  max-width: clamp(460px, 45vw, 760px);
  margin: 0 auto;
}

body.pi-page .pi-form-card__title {
  background: var(--unad-gradient-cta);
  color: var(--unad-white);
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: bold;
  text-align: center;
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  border-bottom: 3px solid var(--unad-secondary);
}

body.pi-page .pi-form-card__title h3 {
  font-size: inherit;
  margin: 0;
  color: inherit;
}

body.pi-page .pi-form-card__body {
  padding: clamp(16px, 2vw, 32px) clamp(20px, 2.5vw, 40px);
}

/* Botón submit en formulario compacto */
body.pi-page .pi-form-card .btn-pi-golden {
  background-color: var(--unad-secondary) !important;
  border-color: var(--unad-secondary) !important;
  color: var(--unad-white) !important;
  font-weight: 600;
  width: 100%;
  padding: 10px;
}

body.pi-page .pi-form-card .btn-pi-golden:hover {
  opacity: .9;
}

/* ── 8. Formulario amplio (datos personales) ─────────────────────────────── */
body.pi-page .pi-form-main {
  background: var(--pi-bg-form);
  border: 1px solid var(--pi-border-default);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  margin: 0 0 var(--space-lg) 0;
  overflow: hidden;
}

body.pi-page .pi-form-main__title {
  text-align: center;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: bold;
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  background: var(--unad-gradient-cta);
  color: var(--unad-white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  border-bottom: 3px solid var(--unad-secondary);
}

body.pi-page .pi-form-main__body {
  padding: var(--space-lg);
}

/* ── 9. Inputs y labels dentro de los formularios del módulo ─────────────── */
/* Usa body.pi-page como prefijo para superar la especificidad de Bootstrap 3 */
body.pi-page .pi-form-main .form-group label,
body.pi-page .pi-form-card .form-group label {
  font-weight: bold;
  font-size: clamp(12px, 0.9vw, 15px);
  color: var(--pi-text-body);
  margin-bottom: 4px;
  display: block;
}

body.pi-page .pi-form-main .form-control,
body.pi-page .pi-form-card .form-control {
  border-color: #cccccc;
  border-radius: var(--radius-sm);
  font-size: clamp(12px, 0.9vw, 15px);
  color: #555;
  background-color: var(--pi-bg-form);
  height: clamp(34px, 2.5vw, 44px);
  padding: 5px 10px;
  transition: border-color .25s, box-shadow .25s;
  box-shadow: none;
}

body.pi-page .pi-form-main .form-control:focus,
body.pi-page .pi-form-card .form-control:focus {
  border-color: var(--unad-secondary);
  box-shadow: 0 0 0 3px rgba(212, 164, 2, .2);
  outline: none;
}

body.pi-page .pi-form-main .form-control[readonly],
body.pi-page .pi-form-card .form-control[readonly] {
  background-color: var(--pi-bg-readonly) !important;
  cursor: not-allowed;
}

/* Hint tooltip */
body.pi-page .pi-form-hint {
  display: none;
  background: var(--unad-danger);
  border-radius: var(--radius-sm);
  color: var(--unad-white);
  padding: 2px 8px;
  font-size: 11px;
  margin-top: 3px;
}

body.pi-page .pi-form-main .form-control:focus + .pi-form-hint { display: inline-block; }

/* ── 10. Sección separador con título ────────────────────────────────────── */
body.pi-page .pi-section-title {
  color: var(--unad-dark);
  font-size: 14px;
  font-weight: bold;
  border-bottom: 2px solid var(--unad-primary);
  padding-bottom: 5px;
  margin: 22px 0 14px;
}

/* ── 11. Tabla de datos (recibo) ─────────────────────────────────────────── */
body.pi-page .pi-data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-bottom: 16px;
}

body.pi-page .pi-data-table td {
  padding: 7px 6px;
  border-bottom: 1px solid #f0f0f0;
  color: var(--pi-text-body);
}

body.pi-page .pi-data-table td:first-child {
  color: var(--pi-text-muted);
  width: 42%;
}

body.pi-page .pi-data-table td:last-child { font-weight: 600; }

/* ── 12. Botones ─────────────────────────────────────────────────────────── */
.btn-pi-submit,
.btn-pi-primary {
  display: inline-block;
  background: var(--unad-gradient-cta);
  color: var(--unad-white) !important;
  padding: 9px 28px;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: bold;
  font-size: 14px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, .15);
  transition: opacity .25s;
  text-decoration: none;
}

.btn-pi-submit:hover,
.btn-pi-primary:hover { opacity: .88; color: var(--unad-white) !important; }

.btn-pi-golden {
  background-color: var(--unad-secondary) !important;
  border: none !important;
  color: var(--unad-white) !important;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-weight: 600;
}

.btn-pi-golden:hover,
.btn-pi-golden:focus { opacity: .9; color: var(--unad-white) !important; }

.btn-pi-pagar {
  display: block;
  width: 100%;
  padding: 14px;
  background: var(--unad-primary);
  color: var(--unad-white);
  border: none;
  border-radius: 5px;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;
  margin-top: 6px;
  transition: background .2s;
}

.btn-pi-pagar:hover { background: #d4651a; color: var(--unad-white); }

.btn-pi-print {
  background: var(--unad-dark);
  color: var(--unad-white);
  border: none;
  padding: 9px 20px;
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
  margin-bottom: 20px;
}

/* ── 13. Montos de pago (recibo) ─────────────────────────────────────────── */
body.pi-page .pi-montos {
  background: var(--pi-bg-notice);
  border: 1px solid var(--pi-border-notice);
  border-radius: 5px;
  padding: 14px 18px;
  margin-bottom: 22px;
}

body.pi-page .pi-montos table { width: 100%; font-size: 14px; border-collapse: collapse; }
body.pi-page .pi-montos td   { padding: 6px 0; }
body.pi-page .pi-montos__label { color: #555; }
body.pi-page .pi-montos__value {
  text-align: right;
  font-weight: bold;
  color: var(--unad-dark);
  font-size: 16px;
}

/* ── 14. Formulario de pago (recibo) ─────────────────────────────────────── */
body.pi-page .pi-pago-form {
  border: 1px solid #ddd;
  border-radius: var(--radius-sm);
  padding: 20px 22px;
}

body.pi-page .pi-pago-form__card-icons {
  text-align: center;
  margin-bottom: 14px;
  font-size: 12px;
  color: #888;
}

body.pi-page .pi-pago-form__security {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin-top: 10px;
}

/* ── 15. Recibo (contenedor) ─────────────────────────────────────────────── */
body.pi-page .pi-receipt-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: var(--unad-white);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  overflow: hidden;
}

body.pi-page .pi-receipt-header {
  background: var(--unad-gradient-cta);
  padding: 22px;
  text-align: center;
  border-bottom: 3px solid #c96510;
}

body.pi-page .pi-receipt-header img  { max-height: 60px; margin-bottom: 10px; filter: brightness(0) invert(1); }
body.pi-page .pi-receipt-header h1   { color: var(--unad-white); font-size: 20px; margin: 0; }
body.pi-page .pi-receipt-body        { padding: 28px 32px; }

body.pi-page .pi-receipt-footer {
  background: var(--unad-footer);
  padding: 14px;
  text-align: center;
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
}

/* ── 16. Aviso legal / encuesta ──────────────────────────────────────────── */
body.pi-page .pi-aviso-legal {
  background: var(--pi-bg-notice);
  border: 1px solid var(--pi-border-notice);
  border-left: 4px solid var(--unad-secondary);
  border-radius: var(--radius-sm);
  padding: 12px 15px;
  margin: 5px 0;
  font-size: 13px;
  color: var(--pi-text-body);
  line-height: 1.7;
}

body.pi-page .pi-aviso-legal a { color: var(--unad-primary); font-weight: bold; }

body.pi-page .pi-aviso-legal__options {
  margin-top: 8px;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

body.pi-page .pi-aviso-legal__options label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: normal;
  cursor: pointer;
}

/* ── 17. Radio Si/No ─────────────────────────────────────────────────────── */
body.pi-page .pi-radio-group {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 4px;
}

body.pi-page .pi-radio-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: normal;
  font-size: 12px;
  cursor: pointer;
}

body.pi-page .pi-radio-group input[type="radio"] {
  accent-color: var(--unad-primary);
  width: 15px;
  height: 15px;
  cursor: pointer;
}

/* ── 18. Campos extras ───────────────────────────────────────────────────── */
body.pi-page .pi-campos-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 20px 32px;
  align-items: flex-end;
  justify-content: center;
  padding: 6px 0;
  margin: 10px 0;
}

body.pi-page .pi-campo-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 120px;
}

body.pi-page .pi-campo-item__label {
  font-size: 11px;
  font-weight: bold;
  color: var(--pi-text-body);
  line-height: 1.3;
}

/* ── 19. jQuery UI Datepicker — paleta UNAD ──────────────────────────────── */
/* Suficiente especificidad para ganar a jQuery UI base styles */
body.pi-page .ui-datepicker {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
  background: var(--unad-white);
  border: 1px solid var(--unad-secondary);
  border-radius: var(--radius-sm);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

body.pi-page .ui-datepicker .ui-datepicker-header {
  background: var(--unad-gradient-cta);
  color: var(--unad-white);
  border: none;
  border-radius: 3px 3px 0 0;
}

body.pi-page .ui-datepicker .ui-datepicker-title  { color: var(--unad-white); font-weight: bold; }
body.pi-page .ui-datepicker th                    { color: var(--unad-dark); font-weight: bold; }
body.pi-page .ui-datepicker .ui-state-default     { background: #f9f9f9; border: 1px solid #eee; color: var(--pi-text-body); }
body.pi-page .ui-datepicker .ui-state-hover       { background: var(--pi-bg-notice); border-color: var(--unad-secondary); color: var(--unad-dark); }
body.pi-page .ui-datepicker .ui-state-active      { background: var(--unad-gradient-cta); border-color: #c76b00; color: var(--unad-white); font-weight: bold; }
body.pi-page .ui-datepicker .ui-state-highlight   { background: var(--pi-bg-notice); border-color: var(--unad-secondary); color: var(--unad-dark); font-weight: bold; }
body.pi-page .ui-datepicker-trigger               { display: none !important; }

/* ── 20. Panel de documentos ─────────────────────────────────────────────── */
body.pi-page .pi-doc-panel {
  background: var(--unad-white);
  border: 1px solid var(--pi-border-default);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-lg);
}

body.pi-page .pi-doc-panel__title {
  color: var(--unad-dark);
  font-size: 15px;
  font-weight: bold;
  border-bottom: 2px solid var(--unad-primary);
  padding-bottom: 6px;
  margin-bottom: var(--space-md);
}

/* ── 21. Bloque de notas ─────────────────────────────────────────────────── */
body.pi-page .pi-notice-block {
  background: var(--pi-bg-notice);
  border: 1px solid var(--pi-border-notice);
  border-left: 4px solid var(--unad-secondary);
  border-radius: var(--radius-sm);
  padding: var(--space-md) var(--space-lg);
  font-size: 12px;
  color: var(--pi-text-body);
  line-height: 1.6;
}

body.pi-page .pi-notice-block__title {
  font-weight: bold;
  color: var(--unad-dark);
  margin-bottom: var(--space-sm);
  font-size: 13px;
}

/* ── 22. Print ───────────────────────────────────────────────────────────── */
@media print {
  body.pi-page .pi-pago-form               { display: none !important; }
  body.pi-page .pi-section-title--pago     { display: none !important; }
  body.pi-page .btn-pi-print               { display: none !important; }
  body.pi-page .btn-pi-pagar               { display: none !important; }
  body.pi-page .pi-footer                  { display: none !important; border-top: none; }
  body.pi-page .pi-stepper-wrap            { display: none !important; }
  body.pi-page .pi-receipt-header          { background: transparent !important; border: 1px solid #ccc; }
  body.pi-page .pi-receipt-header h1       { color: var(--unad-dark) !important; }
  body.pi-page .pi-receipt-wrap            { box-shadow: none; }
  body.pi-page .pi-montos                  { border: 1px solid #ccc; background: transparent; }
  body.pi-page                             { background: white !important; }
  body.pi-page .pi-header                  { background: #f0f0f0 !important; }
}

/* ── 23. Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body.pi-page .pi-header__inner {
    flex-direction: column-reverse;
    text-align: center;
    padding: 10px 12px;
    gap: var(--space-sm);
  }

  body.pi-page .pi-header__title  { font-size: 1.05rem; }
  body.pi-page .pi-header__logo   { max-height: 50px; }

  body.pi-page .pi-form-card {
    margin: 0 var(--space-sm);
    max-width: 100%;
  }

  body.pi-page .pi-receipt-body { padding: 16px; }

  body.pi-page .pi-campos-extras {
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
  }

  body.pi-page .pi-campo-item { min-width: 100%; }
}

@media (max-width: 480px) {
  body.pi-page .pi-form-card__body  { padding: var(--space-md); }
  body.pi-page .pi-montos__value    { font-size: 14px; }
  body.pi-page .pi-footer img       { max-width: 240px; }
}

/* ── 24. Pantallas grandes (1400px+ / 2K) ────────────────────────────────── */
@media (min-width: 1400px) {
  body.pi-page .pi-form-card {
    max-width: 680px;
  }

  body.pi-page .pi-form-card__body {
    padding: 28px 36px;
  }

  body.pi-page .pi-form-main__body {
    padding: 24px 28px;
  }

  body.pi-page .pi-stepper-wrap {
    padding: 22px 0 18px;
  }

  body.pi-page .pi-footer img {
    max-width: 400px;
  }
}

@media (min-width: 1920px) {
  body.pi-page .pi-form-card {
    max-width: 760px;
  }

  body.pi-page .pi-form-card__body {
    padding: 32px 44px;
  }

  body.pi-page .pi-receipt-body {
    padding: 36px 44px;
  }
}

/* ── 25. Reduced motion ──────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.pi-page .pi-form-card,
  body.pi-page .pi-form-main,
  body.pi-page .btn-pi-primary,
  body.pi-page .btn-pi-pagar {
    transition: none;
  }
}

/* ── 26. Recibo imprimible — botón y modal ───────────────────────────────── */
body.pi-page .pi-recibo-imprimible-wrap {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e0e0e0;
  text-align: center;
}

body.pi-page .pi-recibo-imprimible-wrap__hint {
  font-size: 11px;
  color: #888;
  margin-top: 8px;
}

.btn-pi-recibo {
  background: var(--unad-secondary);
  color: var(--unad-white);
  border: none;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: bold;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .2s;
}

.btn-pi-recibo:hover { background: #d4651a; }

body.pi-page .pi-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .65);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

body.pi-page .pi-modal-box {
  background: var(--unad-white);
  border-radius: var(--radius-sm);
  width: 92%;
  max-width: 820px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, .3);
}

body.pi-page .pi-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
  background: var(--pi-bg-notice);
}

body.pi-page .pi-modal-iframe {
  flex: 1;
  border: none;
  min-height: 600px;
}

.btn-pi-modal-print {
  background: var(--unad-secondary);
  color: var(--unad-white);
  border: none;
  padding: 6px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 13px;
  margin-right: 8px;
  transition: background .2s;
}

.btn-pi-modal-print:hover { background: #d4651a; }

.btn-pi-modal-close {
  background: #aaa;
  color: var(--unad-white);
  border: none;
  padding: 6px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  transition: background .2s;
}

.btn-pi-modal-close:hover { background: #888; }

/* notice de advertencia (fechas sin configurar) */
body.pi-page .pi-notice-block--warn {
  background: #fff8f0;
  border-color: #f5a623;
  border-left-color: #e87722;
}

body.pi-page .pi-notice-block--warn .pi-notice-block__title {
  color: #c0580b;
}

@media print {
  body.pi-page .pi-recibo-imprimible-wrap { display: none !important; }
  body.pi-page .pi-modal-overlay         { display: none !important; }
}