.modalDialog {
        position: fixed;
        font-family: Arial, Helvetica, sans-serif;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: 60%;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: -12px;
        text-align: center;
        top: -10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close:hover { background: #2980B9; }
		
  input[type=button] {
  background-color: #FFFFFF;
  border: none;
  color: black;
  padding: 16px 26px;
  text-decoration: none;
  margin: 4px 2px;
  cursor: pointer;
}

/* ===== Modal + Step Card moderno ===== */

/* ===== Fix + diseño moderno del botón X en los modales (modal2.css override) ===== */
.modalDialog > div{
  position: relative;   /* CLAVE: ahora .close se ubica dentro del modal */
  padding-top: 46px;    /* deja espacio arriba para la X */
}

.modalDialog .close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;

  background: rgba(0,0,0,.10);
  color: #111;
  border-radius: 999px;
  font-size: 18px;
  font-weight: 900;
  text-decoration: none;

  box-shadow: 0 10px 25px rgba(0,0,0,.22);
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

.modalDialog .close:hover{
  background: rgba(0,0,0,.16);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(0,0,0,.28);
}

/* ===== Step card (solo estas tablas de modales) ===== */
.step-card{
  width: 100%;
  max-width: 640px;
  margin: 14px auto;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(0,0,0,.25);
  overflow: hidden;
}

.step-card td{
  padding: 18px;
  vertical-align: middle;
}

/* Columna del avatar */
.step-avatar{
  width: 120px;
  background: linear-gradient(180deg, #f3f4f8, #ffffff);
  text-align: center;
  border-right: 1px solid rgba(0,0,0,.06);
}

.step-avatar img{
  box-shadow: 0 6px 14px rgba(0,0,0,.25);
}

/* Contenido */
.step-content{
  padding-left: 22px;
}

.step-content .fant{
  font-family: "Baloo 2", system-ui, sans-serif; /* mas moderno */
  font-size: 15px;
  color: #2c2c2c;
  letter-spacing: .2px;
}

/* Líneas con iconos */
.step-line{
  margin-top: 10px;
  line-height: 1.4;
}

.step-line img{
  margin-top: 6px;
  border-radius: 10px;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}

.step-line img:hover{
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,.32);
}

/* Responsive */
@media (max-width: 600px){
  .step-card td{
    display: block;
    width: 100%;
  }
  .step-avatar{
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }
}

/* ===== Tabla principal modernizada (sin perder esencia) ===== */
.main-steps{
  width: 60%;
  margin: 24px auto;
  border-collapse: separate;       /* clave para bordes redondeados bonitos */
  border-spacing: 0;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.14); /* reemplaza el borde grueso visualmente */
  border-radius: 18px;
  overflow: hidden;                /* recorta bordes */
  box-shadow: 0 18px 45px rgba(0,0,0,.35);
}

/* Quita el look “cuadriculado” */
.main-steps td{
  border: none !important;
  padding: 12px 10px;
}

/* ===== Header negro (JENMPO + competencia) ===== */
.main-steps tr:first-child td{
  background: #000 !important;
  color: #fff;
  padding: 18px 12px;
}

/* separador suave entre header y contenido */
.main-steps tr:nth-child(2) td{
  background: #f6f7fb;
  border-top: 1px solid rgba(0,0,0,.08);
}

/* ===== Titulos Step One/Two/Three y Step Four/Five/Six ===== */
.main-steps .step-title{
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #1f1f1f;
  letter-spacing: .3px;
}

/* si no quieres editar HTML, aplica directo por inline style actual */
.main-steps tr:nth-child(2) td,
.main-steps tr:nth-child(5) td{
  font-family: "Baloo 2", system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: .3px;
}

/* ===== Filas de imágenes (las 2 filas con iconos grandes) ===== */
.main-steps tr:nth-child(3) td,
.main-steps tr:nth-child(6) td{
  background: #ffffff;
}

.main-steps tr:nth-child(3) img,
.main-steps tr:nth-child(6) img{
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  transition: transform .15s ease, box-shadow .15s ease;
}

.main-steps tr:nth-child(3) img:hover,
.main-steps tr:nth-child(6) img:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0,0,0,.24);
}

/* ===== Fila de botones/acciones (download/excel/web) ===== */
.main-steps tr:nth-child(4) td{
  background: #f8fafc;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.main-steps tr:nth-child(4) img{
  border-radius: 12px;
  box-shadow: 0 10px 22px rgba(0,0,0,.16);
  transition: transform .15s ease, box-shadow .15s ease;
}

.main-steps tr:nth-child(4) img:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(0,0,0,.22);
}

/* ===== Icono Help más “moderno” ===== */
.main-steps a img[alt="Help"]{
  border-radius: 999px;
  padding: 4px;
  background: rgba(0,0,0,.06);
  transition: transform .15s ease, background .15s ease;
}
.main-steps a img[alt="Help"]:hover{
  transform: scale(1.05);
  background: rgba(0,0,0,.10);
}

/* ===== Ajuste del input button para que combine mejor ===== */
.main-steps input[type="blue"]{
  border-radius: 12px;
  padding: 10px 14px;
  border: 0;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

/* ===== Responsive: en móvil usa casi todo el ancho ===== */
@media (max-width: 980px){
  .main-steps{ width: 92%; }
}

/* En pantallas pequeñas, baja tamaño de texto y padding */
@media (max-width: 600px){
  .main-steps td{ padding: 10px 8px; }
  .main-steps tr:nth-child(2) td,
  .main-steps tr:nth-child(5) td{
    font-size: 16px !important;
  }
}