#xerplanner_check form.css_formulario {
    /*background-color: rgba(255, 255, 255, 0.95);*/
    background-color: rgba(255, 255, 255, 0.93);
    /*opacity: 95%;*/
    /*width: 90%;*/
    width: 100%;
    height: auto;
    /*max-width: 300px;*/
    max-width: 460px;
    text-align: center;
    /*padding: 25px 25px 5px 25px; /* arriba izquierda abajo derecha*/
    padding: 25px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    /*box-shadow: -20px 20px 30px -10px rgba(0,0,0,0.3);*/
    box-shadow: 0 20px 40px rgba(0,0,0,0.18);
	/* font-family: arial; */
    /*font-size: 16px;*/
    font-size: 17px;
    font-weight: 600;
    color: #323232;
}

/*#xerplanner_check form.css_formulario input, select, button {*/
#xerplanner_check form.css_formulario input,
#xerplanner_check form.css_formulario select,
#xerplanner_check form.css_formulario button {
  /*font-size: 14px;*/
  font-size: 15px;
  font-weight: 600;
  color: #024185;
  padding: 10px;
  margin-bottom: 20px;
  border-radius: 5px;
  border: none;
  /*box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);*/
  border: 1px solid #e3e8ef;
  box-shadow: none;
  width: 100%;
  max-width: 400px;
}

#xerplanner_check button {
  letter-spacing: 0.5px;
}

#xerplanner_check form.css_formulario .css_lista_opciones {
transition: all 0.2s ease-in-out;  
cursor: pointer;
}

#xerplanner_check form.css_formulario .css_lista_opciones:hover {
background-color: #eaeaea;
}

/* Estilos específicos del área de carga de archivos */
#xerplanner_check form.css_formulario .css_drag_area {
  /*border: 2px dashed #ccc;*/  
  border: 2px dashed #cbd5e1;
  padding-left: 20px;  
  display: grid;
  /*grid-template-columns: 25% 75%;*/
  grid-template-columns: 70px 1fr;
  /*gap: 10px;*/
  gap: 12px;
  /*height: 100px;*/
  height: 96px;
  border-radius: 10px;
  text-align: left;
  margin-bottom: 20px;
  align-items: center;
  transition: all 0.2s ease-in-out;  
  cursor: pointer;
}

#xerplanner_check form.css_formulario .css_drag_area:hover {
  background-color: #eaeaea;
}

#xerplanner_check form.css_formulario .dragover { /* Esta clase se agrega y/o remueve al arrastrar un archivo sobre el drag_area. Esto lo hace el script validador */
  background-color: #eaeaea;
}

#xerplanner_check form.css_formulario .css_drag_area_mensaje {
  font-weight: 600;    
  font-size: 14px;
  line-height: 1.35;
  color: #024185;
  /*margin-right: 15px;*/
  margin-right: 10px;
}

#xerplanner_check form.css_formulario .css_xer_file_icon {
  width: 60px;
  height: auto;  
  float: none;
  display: block;
}

#xerplanner_check form.css_formulario .css_titulo_elemento {
	font-size: 13px;
  font-weight: 600;
	display: block;	
	text-align: left;
  width: 75%;
  }

/* Estilos de la barra de progreso */
#xerplanner_check form.css_formulario .css_progress-bar {
  width: 100%;
  height: 10px;  
  border-radius: 10px;
  overflow: hidden;
}

/* Estilo de la barra de progreso con un color específico */
#xerplanner_check form.css_formulario progress::-webkit-progress-value {
  background-color: blue; /* Reemplazar 'blue' con el color deseado */
}

#xerplanner_check form.css_formulario .css_texto_barra_progreso{		/* Para los textos mientras avanza la revisión */
	margin-left: 8px; 
	border: none;
	color: #024185;
	display: block;
	font-size: 12px;
	font-weight: 600;
	margin-bottom: 20px;
  line-height: 1.3;
  font-family: -apple-system,
               BlinkMacSystemFont,
               "Segoe UI",
               Roboto,
               Oxygen-Sans,
               Ubuntu,
               Cantarell,
               Arial,
               sans-serif !important               
               ;
  }

/* Estilo de la barra de progreso en navegadores que no son de WebKit (Firefox, Edge, etc.) */
#xerplanner_check form.css_formulario progress[value]::-moz-progress-bar {
  background-color: blue; /* Reemplazar 'blue' con el color deseado */
}

/* Estilo de la etiqueta que muestra el porcentaje de progreso */
#xerplanner_check form.css_formulario progress::-webkit-progress-bar {
  background-color: #eee;
}

#xerplanner_check form.css_formulario .progress {
  width: 0%;
  height: 100%;
  background-color: #1a5fd0;
  border-radius: 10px;
  transition: all 0.2s ease-in-out;
}

/* Estilos del botón iniciar análisis y descargar informe*/
#xerplanner_check form.css_formulario .css_btn_iniciar {
	background-color: #1a5fd0;
	/*height: 50px;*/
  height: 52px;
  font-size: 15px;
  letter-spacing: 0.5px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
  }

#xerplanner_check form.css_formulario .css_btn_descargar {
	background-color: #1a5fd0;
	/*height: 50px;*/
  height: 52px;
  font-size: 15px;
  letter-spacing: 0.5px;
	color: #fff;
	font-weight: bold;
	cursor: pointer;
	transition: all 0.2s ease-in-out;
  display: none; /* Se hace visible cuando finaliza un análisis y se puede descargar el informe */
  }

#xerplanner_check form.css_formulario .css_btn_iniciar:hover {
	/*background-color: #007bff;*/
  background-color: #04305F;
  }

  #xerplanner_check form.css_formulario .css_btn_descargar:hover {
	/*background-color: #007bff;*/
  background-color: #04305F;
  }

.f32 .flag {
	vertical-align: middle;
	margin: -8px 0;
}

/* Para no mostrar por defecto el rectángulo que engloba los campos del formularios, pues uso esta etiqueta para deshabilitarlos mientras se ejecutan análisis */
#xerplanner_check #xp_form_fields{
  border: 0;
  padding: 0;
  margin: 0;
  min-inline-size: 0; /* evita rarezas en algunos navegadores */
}

/* Para el área de carga de archivos cuando está en proceso un análisis */
#xerplanner_check.xp-busy #drag-area{
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.9;
}

/* Estilo para el texto con el nombre del usuario y saldo en el menú secundario*/
#saldo-monedero {
  display: inline;
  color: #113b67;
}

#saldo-monedero i {
  vertical-align: middle;
  margin-right: 5px;
  color: #113b67;
}

/* Estilo para la tabla de informes históricos*/
.tabla-informes {
  font-size: 0.9rem;  
}
.tabla-informes th:nth-child(1) { width: 16%; }  /* Fecha */
.tabla-informes th:nth-child(2) { width: 48%; }  /* Archivo */
.tabla-informes th:nth-child(3) { width: 5%; text-align: center; }  /* Idioma */
.tabla-informes td:nth-child(3) { text-align: center; }
.tabla-informes th:nth-child(4) { width: 22%; }  /* Alcance del análisis*/
.tabla-informes th:nth-child(5),
.tabla-informes th:nth-child(6) { width: 4%; text-align: center; } /* PDF y Excel */
.tabla-informes td:nth-child(5),
.tabla-informes td:nth-child(6) { text-align: center; }

.icono-bandera {
  display: inline-block;
  text-align: center;
  font-size: 1.3rem;
  vertical-align: middle;
}

.icono-pdf {
  font-size: 1.4rem;
  color: #e63946; /* rojo adobe */
  display: inline-block;
  vertical-align: middle;
}

.icono-excel {
  font-size: 1.4rem;
  color: #2a9d8f; /* verde excel */
  display: inline-block;
  vertical-align: middle;
}

/* =========================
   xerPlanner SweetAlert2
   (solo popups con customClass: popup 'xp-swal')
   ========================= */

.swal2-container .swal2-popup.xp-swal{
  width: 36em;
  max-width: 95%;
  padding-bottom: 1.6em;

  font-family: Arial, sans-serif;
  font-size: 14px;
  line-height: 1.3;
}

/* Texto del mensaje */
.swal2-container .swal2-popup.xp-swal .swal2-html-container{
  line-height: 1.5 !important;
}

/* Contenedor de botones */
.swal2-container .swal2-popup.xp-swal .swal2-actions{
  background: transparent !important;
  padding: 0 !important;
  margin-top: 1.2em;
  margin-bottom: 0;
  gap: 10px;
}

/* Botón base (confirm/cancel si los usas) */
.swal2-container .swal2-popup.xp-swal .xp-swal-btn{
  display: inline-block;
  width: auto;
  min-width: 120px;
  padding: 8px 18px;
  line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  border-radius: 6px;
  box-sizing: border-box;
  white-space: nowrap;

  transition: all 0.2s ease-in-out;
}

/* Confirm: azul del formulario (gana a User Registration) */
.swal2-container .swal2-popup.xp-swal .swal2-actions .swal2-confirm.xp-swal-btn{
  background-color: #04305F !important;
  color: #fff !important;
  border: 0 !important;
}

/* Hover: mismo comportamiento que el formulario */
.swal2-container .swal2-popup.xp-swal .swal2-actions .swal2-confirm.xp-swal-btn:hover{
  background-color: #007bff !important;
}

/* Tarjetas de tipo de análisis */
#xerplanner_check form.css_formulario .xp_analysis_option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #e3e8ef;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  position: relative;
  cursor: pointer;
  text-align: left;
  transition: all 0.2s ease-in-out;
  background-color: rgba(255, 255, 255, 0.9);
}

#xerplanner_check form.css_formulario .xp_analysis_option:hover {
  border-color: #3F84E5;
  background-color: #f8fbff;
}

#xerplanner_check form.css_formulario .xp_paid {
  border: 1px solid #dbeafe;
  background-color: #f8fbff;
}

#xerplanner_check form.css_formulario .xp_analysis_option_disabled {
  opacity: 0.75;
  cursor: not-allowed;
}

#xerplanner_check form.css_formulario .xp_analysis_option_content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#xerplanner_check form.css_formulario .xp_analysis_option_title {
  font-size: 14px;
  font-weight: 700;
  color: #04305F;
  line-height: 1.2;
}

#xerplanner_check form.css_formulario .xp_analysis_option_desc {
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  line-height: 1.3;
}

#xerplanner_check form.css_formulario .xp_analysis_option input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Círculo exterior */
#xerplanner_check form.css_formulario .xp_analysis_option .css_checkmark_selector_opcion {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid #cbd5e1;
  border-radius: 50%;
  display: inline-block;
  box-sizing: border-box;
  background: #fff;
  flex: 0 0 18px;
}

/* Punto interior */
#xerplanner_check form.css_formulario .xp_analysis_option .css_checkmark_selector_opcion:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #3F84E5;
  transform: translate(-50%, -50%);
  display: none;
}

/* Checked */
#xerplanner_check form.css_formulario .xp_analysis_option input:checked + .css_checkmark_selector_opcion {
  border-color: #3F84E5;
}

#xerplanner_check form.css_formulario .xp_analysis_option input:checked + .css_checkmark_selector_opcion:after {
  display: block;
}

#xerplanner_check form.css_formulario .xp_analysis_option:has(input:checked) {
  border: 2px solid #3F84E5;
  background-color: #f7faff;
}

.xerplanner-support-container {
    max-width: 720px;
    margin: 55px auto;
    padding: 34px;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.xerplanner-support-container h1 {
    margin: 0 0 10px 0;
    color: #003b70;
    font-size: 32px;
    font-weight: 800;
}

.xerplanner-support-intro {
    margin-bottom: 28px;
    color: #344054;
    font-size: 16px;
}

.xerplanner-support-container label {
    font-weight: 700;
    color: #003b70;
    margin-bottom: 6px;
    display: block;
}

.xerplanner-support-container input,
.xerplanner-support-container select,
.xerplanner-support-container textarea {
    width: 100%;
    max-width: 100%;
    padding: 11px 13px;
    border: 1px solid #d0d5dd;
    border-radius: 9px;
    font-size: 15px;
    box-sizing: border-box;
}

.xerplanner-support-container textarea {
    min-height: 120px;
    resize: vertical;
}

.xerplanner-support-container button {
    background: #003b70;
    color: #ffffff;
    border: none;
    padding: 13px 24px;
    border-radius: 9px;
    font-weight: 800;
    cursor: pointer;
    text-transform: uppercase;
}

.xerplanner-support-container button:hover {
    background: #00529b;
}

.xerplanner-support-success {
    padding: 14px 18px;
    background: #e8f7ee;
    border-left: 5px solid #1f9d55;
    border-radius: 8px;
    margin-bottom: 22px;
    color: #155724;
    font-weight: 600;
}

.xerplanner-support-help {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 13px;
}

.xerplanner-support-field {
    margin-bottom: 18px;
}

.xerplanner-support-container label {
    font-weight: 700;
    color: #003b70;
    margin-bottom: 6px;
    display: block;
}

.xerplanner-support-actions {
    margin-top: 6px;
}

.xerplanner-support-help {
    display: block;
    margin-top: 6px;
    color: #667085;
    font-size: 13px;
}

.xerplanner-support-error {
    padding: 14px 18px;
    background: #fdecec;
    border-left: 5px solid #d93025;
    border-radius: 8px;
    margin-bottom: 22px;
    color: #7a1b15;
    font-weight: 600;
}

.xerplanner-file-upload {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 4px;
}

.xerplanner-file-upload input[type="file"] {
    display: none;
}

.xerplanner-file-button {
    background: #003b70;
    color: #ffffff !important;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    margin-bottom: 0 !important;
    white-space: nowrap;
}

.xerplanner-file-name {
    color: #667085;
    font-size: 14px;
}

.xerplanner-validation-box {
    max-width: 900px;
    margin: 40px auto;
    padding: 25px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.xerplanner-validation-box h2 {
    font-size: 26px;
    margin-bottom: 10px;
}

.xerplanner-validation-box strong {
    display: inline-block;
    background: #e6f4ea;
    color: #1e7e34;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13px;
}

.xerplanner-validation-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

.xerplanner-validation-table td,
.xerplanner-validation-table th {
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.xerplanner-validation-table th {
    text-align: left;
    background: #f8f9fa;
}

.xerplanner-validation-note {
    margin-top: 20px;
    font-size: 12px;
    color: #666;
}

.xerplanner-validation-box h2 {
    font-size: 26px;
    margin-bottom: 10px;
    color: #3f84e5;
}