/*
PORTAL DE REFERIDORES — CSS LIMPIO
Solo formulario, resultados, tabla, estados, progreso, paginación y loading.
Fondo general: #f6f9fc
*/

.crpc-referidores-portal{
  --bg:#ffffff;
  --surface:#e9eff6;
  --light:#f9fcff;
  --navy:#073566;
  --blue:#267fc8;
  --cyan:#27c4c7;
  --text:#102944;
  --muted:#6d7d91;
  --shadow-dark:rgba(104,122,145,.22);
  --shadow-light:rgba(255,255,255,.95);
  width:100%;
  min-height:100vh;
  padding:15px 22px 80px;
  overflow-x:hidden;
  background:#ffffff!important;
  background-image:none!important;
  color:var(--text);
}

.crpc-referidores-portal,
.crpc-referidores-portal *,
.crpc-referidores-portal *::before,
.crpc-referidores-portal *::after{box-sizing:border-box}

.crpc-referidores-portal::before,
.crpc-referidores-portal::after,
.crpc-referidores-portal .portal-consulta-card::before,
.crpc-referidores-portal .portal-consulta-card::after{
  content:none!important;
  display:none!important;
}

.crpc-referidores-wrap{
  width:100%;
  max-width:1180px;
  margin:0 auto!important;
  padding:0!important;
  font-family:"Montserrat",Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}

.crpc-referidores-wrap .crpc-panel{display:none}
.crpc-referidores-wrap .crpc-panel.is-active{display:block}

/* FORMULARIO */
.crpc-referidores-wrap .portal-consulta-card{
  width:100%;
  max-width:1120px;
  margin:0 auto 38px;
  padding:56px 68px 38px;
  overflow:hidden;
  background:linear-gradient(145deg,#f8fbff,#e8eef6)!important;
  border:3px solid rgba(255,255,255,.75)!important;
  border-radius:32px!important;
  box-shadow:
    18px 18px 34px var(--shadow-dark),
    -14px -14px 30px var(--shadow-light),
    inset 0 5px 8px rgba(255,255,255,.72),
    inset 0 -6px 12px rgba(126,144,166,.09)!important;
}

.crpc-referidores-wrap .portal-consulta-row{
  width:100%;
  max-width:860px;
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,1fr) 250px;
  align-items:end;
  gap:22px;
}

.crpc-referidores-wrap .portal-id-field{
  width:100%;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.crpc-referidores-wrap .portal-field-label{
  margin-left:5px;
  color:var(--text);
  font-size:14px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.9px;
}

.crpc-referidores-wrap .portal-id-field input[type="text"]{
  width:100%;
  height:62px;
  padding:0 22px;
  border:2px solid rgba(255,255,255,.65)!important;
  border-radius:17px!important;
  outline:none;
  background:var(--surface)!important;
  color:var(--text)!important;
  font:inherit;
  font-size:20px;
  line-height:62px;
  box-shadow:
    inset 7px 7px 13px rgba(100,119,143,.20),
    inset -7px -7px 13px rgba(255,255,255,.90)!important;
  transition:border-color .2s ease,box-shadow .2s ease;
}

.crpc-referidores-wrap .portal-id-field input[type="text"]::placeholder{
  color:#8796a8;
  opacity:1;
}

.crpc-referidores-wrap .portal-id-field input[type="text"]:focus{
  border-color:rgba(38,127,200,.44)!important;
  box-shadow:
    inset 4px 4px 9px rgba(100,119,143,.16),
    inset -4px -4px 9px rgba(255,255,255,.96),
    0 0 0 4px rgba(38,127,200,.12)!important;
}

.crpc-referidores-wrap .portal-consulta-btn{
  width:250px;
  height:62px;
  padding:0 25px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  border:3px solid rgba(255,255,255,.24)!important;
  border-radius:18px!important;
  background:linear-gradient(145deg,#0b4a83,#052d59)!important;
  color:#fff!important;
  font:inherit;
  font-size:17px;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    9px 11px 18px rgba(5,45,89,.30),
    inset 4px 4px 7px rgba(255,255,255,.17),
    inset -5px -6px 9px rgba(0,23,48,.24)!important;
  transition:transform .2s ease,filter .2s ease;
}

.crpc-referidores-wrap .portal-consulta-btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.07);
}

.crpc-referidores-wrap .portal-consulta-btn:active{
  transform:translateY(1px) scale(.98);
}

.crpc-referidores-wrap .portal-consulta-btn:disabled{
  opacity:.62;
  cursor:wait;
  transform:none;
}

.crpc-referidores-wrap .portal-btn-arrow{
  font-size:26px;
  line-height:1;
}

.crpc-referidores-wrap .portal-form-note{
  max-width:760px;
  margin:25px auto 0;
  color:#8492a5;
  font-size:17px;
  line-height:1.5;
  text-align:center;
}

/* RESULTADOS SIN TARJETA EXTERIOR */
.crpc-referidores-wrap #crpc-ref-resultados,
.crpc-referidores-wrap #crpc-ref-resultados.crpc-card{
  width:100%;
  max-width:1120px;
  margin:0 auto 30px;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* TÍTULO Y BOTÓN NUEVA CONSULTA */
.crpc-referidores-wrap .crpc-ref-title-row{
  width:100%;
  margin:0 0 30px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:18px;
}

.crpc-referidores-wrap .crpc-title{
  width:100%;
  margin:0!important;
  color:var(--navy);
  font-size:18px!important;
  font-weight:900;
  letter-spacing:1px;
  text-align:center;
  text-transform:uppercase;
}

.crpc-referidores-wrap .crpc-title::after{
  content:"";
  display:block;
  width:190px;
  height:7px;
  margin:11px auto 0;
  border-radius:999px;
  background:linear-gradient(145deg,var(--cyan),var(--blue));
  box-shadow:
    3px 4px 7px rgba(57,128,182,.26),
    inset 2px 2px 3px rgba(255,255,255,.42);
}

.crpc-referidores-wrap .crpc-ref-reload-btn{
  align-self:flex-start;
  width:auto;
  min-width:190px;
  height:48px;
  padding:0 19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border-radius:16px;
  color:#fff;
  font:inherit;
  font-size:14px;
  line-height:1;
  font-weight:800;
  cursor:pointer;
  border: 0 !important;

background:
  linear-gradient(
    145deg,
    #0a477e,
    #052d59
  ) !important;

box-shadow:
  6px 7px 12px rgba(5, 45, 89, 0.20),
  inset 4px 4px 7px rgba(255, 255, 255, 0.12),
  inset -5px -6px 9px rgba(0, 20, 43, 0.22) !important;
  transition:transform .2s ease,filter .2s ease,box-shadow .2s ease;
}

.crpc-referidores-wrap .crpc-ref-reload-btn svg{
  width:21px;
  height:21px;
  flex:0 0 21px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:transform .45s ease;
}

.crpc-referidores-wrap .crpc-ref-reload-btn:hover{
  transform:translateY(-3px);
  filter:brightness(1.08);
  box-shadow:
    11px 13px 21px rgba(5,45,89,.34),
    -5px -5px 12px rgba(255,255,255,.86),
    inset 4px 4px 7px rgba(255,255,255,.20),
    inset -5px -6px 9px rgba(0,23,48,.23);
}

.crpc-referidores-wrap .crpc-ref-reload-btn:hover svg{
  transform:rotate(360deg);
}

.crpc-referidores-wrap .crpc-ref-reload-btn:active{
  transform:translateY(1px) scale(.97);
  box-shadow:
    inset 6px 7px 12px rgba(0,25,53,.32),
    inset -3px -3px 7px rgba(255,255,255,.14);
}

/* TABLA */
.crpc-referidores-wrap .crpc-table-wrap{
  width:100%;
  margin:0!important;
  padding:0 0 14px!important;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  box-shadow:none!important;
}

.crpc-referidores-wrap #crpc-ref-table{
  width:100%;
  min-width:820px;
  margin:0!important;
  table-layout:fixed;
  border-collapse:separate!important;
  border-spacing:0 12px!important;
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

.crpc-referidores-wrap #crpc-ref-table,
.crpc-referidores-wrap #crpc-ref-table thead,
.crpc-referidores-wrap #crpc-ref-table tbody,
.crpc-referidores-wrap #crpc-ref-table tr{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

.crpc-referidores-wrap #crpc-ref-table thead th{
  padding:15px 13px;
  border:0!important;
  background:linear-gradient(145deg,#0a477e,#052d59)!important;
  color:#fff;
  font-size:12px;
  line-height:1.25;
  font-weight:800;
  text-align:left;
  vertical-align:middle;
}

.crpc-referidores-wrap #crpc-ref-table thead th:first-child{
  border-radius:15px 0 0 15px;
}

.crpc-referidores-wrap #crpc-ref-table thead th:last-child{
  border-radius:0 15px 15px 0;
}

.crpc-referidores-wrap #crpc-ref-table tbody td{
  padding:15px 13px;
  border:0!important;
  background:linear-gradient(145deg,#f9fcff,#e8eef5)!important;
  color:#33495f;
  font-size:12px;
  line-height:1.45;
  vertical-align:middle;
}

.crpc-referidores-wrap #crpc-ref-table tbody td:first-child{
  border-radius:15px 0 0 15px;
  box-shadow:
    -5px 7px 13px rgba(99,118,141,.12),
    -3px -3px 7px rgba(255,255,255,.88);
}

.crpc-referidores-wrap #crpc-ref-table tbody td:last-child{
  border-radius:0 15px 15px 0;
  box-shadow:6px 7px 13px rgba(99,118,141,.12);
}

.crpc-referidores-wrap #crpc-ref-table tbody tr:hover td{
  background:linear-gradient(145deg,#fff,#edf6fd)!important;
}

.crpc-referidores-wrap #crpc-ref-table th:nth-child(1),
.crpc-referidores-wrap #crpc-ref-table td:nth-child(1){
    width:28%;
    text-align:center;
}

.crpc-referidores-wrap #crpc-ref-table th:nth-child(2),
.crpc-referidores-wrap #crpc-ref-table td:nth-child(2){
  width:12%;
  text-align:center;
  white-space:nowrap;
}

.crpc-referidores-wrap #crpc-ref-table th:nth-child(3),
.crpc-referidores-wrap #crpc-ref-table td:nth-child(3){
    width:22%;
    text-align:center;
}

.crpc-referidores-wrap #crpc-ref-table th:nth-child(4),
.crpc-referidores-wrap #crpc-ref-table td:nth-child(4){
  width:22%;
  text-align:center;
}

.crpc-referidores-wrap #crpc-ref-table th:nth-child(5),
.crpc-referidores-wrap #crpc-ref-table td:nth-child(5){
  width:16%;
  white-space:nowrap;
  text-align:center;
}

/* ESTADOS */
.crpc-referidores-wrap .crpc-status-dot{
  display:inline-block;
  width:11px;
  height:11px;
  margin-right:7px;
  border:2px solid rgba(255,255,255,.45);
  border-radius:50%;
  vertical-align:middle;
  box-shadow:
    2px 3px 5px rgba(72,88,108,.22),
    inset 2px 2px 3px rgba(255,255,255,.32),
    inset -2px -2px 3px rgba(30,50,70,.14);
}

.crpc-referidores-wrap .crpc-status-dot.green{background:#22c55e}
.crpc-referidores-wrap .crpc-status-dot.yellow{background:#f59e0b}
.crpc-referidores-wrap .crpc-status-dot.red{background:#ef4444}

/* Para JS actualizado con .crpc-status-pill */
.crpc-referidores-wrap .crpc-status-pill{
  width:fit-content;
  max-width:100%;
  min-height:38px;
  padding:7px 13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:2px solid rgba(255,255,255,.76);
  border-radius:999px;
  background:linear-gradient(145deg,#f9fcff,#e1e8ef);
  color:#40556d;
  font-size:12px;
  line-height:1.25;
  font-weight:700;
  box-shadow:
    5px 6px 11px rgba(99,118,141,.18),
    -4px -4px 9px rgba(255,255,255,.95),
    inset 2px 2px 4px rgba(255,255,255,.72),
    inset -3px -3px 5px rgba(105,124,146,.10);
}

.crpc-referidores-wrap .crpc-status-pill .crpc-status-dot{
  flex:0 0 11px;
  margin:0;
}

.crpc-referidores-wrap .crpc-status-label{
  display:block;
  overflow-wrap:anywhere;
}

.crpc-referidores-wrap .crpc-status-pill.is-green{
  color:#167744;
  background:linear-gradient(145deg,#f7fff9,#dcefe4);
}

.crpc-referidores-wrap .crpc-status-pill.is-yellow{
  color:#8b5b08;
  background:linear-gradient(145deg,#fffdf5,#f1e8cf);
}

.crpc-referidores-wrap .crpc-status-pill.is-red{
  color:#a13a3a;
  background:linear-gradient(145deg,#fff8f8,#f0dddd);
}

/* Respaldo para JS antiguo: punto + span */
.crpc-referidores-wrap #crpc-ref-table tbody td:nth-child(3)>.crpc-status-dot+span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 11px;
  border:2px solid rgba(255,255,255,.74);
  border-radius:999px;
  background:linear-gradient(145deg,#f9fcff,#e1e8ef);
  color:#40556d;
  font-weight:700;
  box-shadow:
    4px 5px 9px rgba(99,118,141,.16),
    -3px -3px 8px rgba(255,255,255,.92),
    inset 2px 2px 3px rgba(255,255,255,.70),
    inset -2px -3px 4px rgba(105,124,146,.09);
}

/* PROGRESO */
.crpc-referidores-wrap .crpc-progress{
  width:100%;
  min-width:105px;
  height:11px;
  overflow:hidden;
  border-radius:999px;
  background:#e1e8ef;
  box-shadow:
    inset 3px 3px 6px rgba(100,119,142,.18),
    inset -3px -3px 6px rgba(255,255,255,.90);
}

.crpc-referidores-wrap .crpc-progress-bar{
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--navy));
  transition:width .25s ease;
}

.crpc-referidores-wrap .crpc-progress-text{
  width:fit-content;
  min-width:52px;
  margin:8px auto 0;
  padding:5px 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(255,255,255,.72);
  border-radius:999px;
  background:linear-gradient(145deg,#f9fcff,#dfe7ef);
  color:var(--navy);
  font-size:11px;
  line-height:1;
  font-weight:900;
  box-shadow:
    4px 5px 9px rgba(99,118,141,.18),
    -3px -3px 8px rgba(255,255,255,.95),
    inset 2px 2px 3px rgba(255,255,255,.72),
    inset -2px -3px 4px rgba(105,124,146,.10);
}

/* PAGINACIÓN */
.crpc-referidores-wrap .crpc-pagination{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:9px;
  margin-top:24px;
}

.crpc-referidores-wrap .crpc-page-btn{
  min-width:42px;
  height:42px;
  padding:0 12px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:13px;
  background:linear-gradient(145deg,#f8fbff,#e4ebf3);
  color:var(--navy);
  font:inherit;
  font-weight:800;
  cursor:pointer;
  box-shadow:
    5px 6px 10px rgba(99,118,141,.16),
    -4px -4px 9px rgba(255,255,255,.94);
}

.crpc-referidores-wrap .crpc-page-btn.is-active{
  background:linear-gradient(145deg,#0b4a83,#052d59);
  color:#fff;
}

.crpc-referidores-wrap .crpc-page-btn:disabled{
  opacity:.42;
  cursor:not-allowed;
}

.crpc-referidores-wrap .crpc-pagination-info{
  flex-basis:100%;
  color:#68798d;
  font-size:12px;
  text-align:center;
}

/* SIN RESULTADOS */
.crpc-referidores-wrap #crpc-ref-sin-resultados{
  max-width:760px;
  margin:24px auto;
  padding:20px 22px;
  border:2px solid rgba(255,255,255,.72);
  border-radius:18px;
  background:linear-gradient(145deg,#f8fbff,#e5ecf4);
  color:#68798d;
  font-size:14px;
  font-weight:700;
  text-align:center;
  box-shadow:
    8px 10px 18px rgba(99,118,141,.16),
    -6px -6px 14px rgba(255,255,255,.93);
}

/* LOADING */
#crpc-ref-loading-overlay{
  position:fixed;
  inset:0;
  z-index:99999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:20px;
  background:rgba(246,249,252,.92)!important;
}

#crpc-ref-loading-overlay.is-visible{display:flex}

#crpc-ref-loading-overlay .crpc-loading-box{
  width:min(540px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  color:#102944;
  font-weight:800;
  text-align:center;
}

#crpc-ref-loading-overlay .crpc-loading-gif{
  width:460px;
  max-width:90vw;
  max-height:55vh;
  height:auto;
  object-fit:contain;
}

#crpc-ref-loading-overlay .crpc-loading-message{
  margin:0;
  color:#102944;
  font-size:17px;
  line-height:1.45;
  text-align:center;
}

/* ACCESIBILIDAD */
.crpc-referidores-wrap button:focus-visible,
.crpc-referidores-wrap input:focus-visible{
  outline:4px solid rgba(39,196,199,.40);
  outline-offset:3px;
}

/* RESPONSIVE */
@media(max-width:820px){
  .crpc-referidores-portal{padding:38px 16px 60px}
  .crpc-referidores-wrap .portal-consulta-card{
    padding:38px 26px 30px;
    border-radius:27px!important;
  }
  .crpc-referidores-wrap .portal-consulta-row{
    grid-template-columns:1fr;
    gap:17px;
  }
  .crpc-referidores-wrap .portal-consulta-btn{width:100%}
}

@media(max-width:520px){
  .crpc-referidores-portal{padding:24px 10px 45px}

  .crpc-referidores-wrap .portal-consulta-card{
    padding:29px 17px 24px;
    border-radius:23px!important;
  }

  .crpc-referidores-wrap .portal-field-label{font-size:12px}

  .crpc-referidores-wrap .portal-id-field input[type="text"],
  .crpc-referidores-wrap .portal-consulta-btn{height:55px}

  .crpc-referidores-wrap .portal-id-field input[type="text"]{
    padding:0 16px;
    font-size:17px;
    line-height:55px;
  }

  .crpc-referidores-wrap .portal-consulta-btn{
    border-radius:15px!important;
    font-size:15px;
  }

  .crpc-referidores-wrap .portal-form-note{font-size:14px}

  .crpc-referidores-wrap .crpc-ref-title-row{
    gap:14px;
    margin-bottom:24px;
  }

  .crpc-referidores-wrap .crpc-title{font-size:15px!important}
  .crpc-referidores-wrap .crpc-title::after{width:95px}

  .crpc-referidores-wrap .crpc-ref-reload-btn{
    min-width:170px;
    height:44px;
    padding:0 16px;
    border-radius:14px;
    font-size:13px;
  }

  .crpc-referidores-wrap .crpc-ref-reload-btn svg{
    width:19px;
    height:19px;
    flex-basis:19px;
  }

  .crpc-referidores-wrap .crpc-status-pill{
    min-height:34px;
    padding:6px 10px;
    font-size:11px;
  }

  .crpc-referidores-wrap .crpc-progress-text{
    min-width:48px;
    padding:4px 8px;
  }

  .crpc-referidores-wrap .crpc-page-btn{
    min-width:37px;
    height:37px;
    padding:0 9px;
  }
}

@media(prefers-reduced-motion:reduce){
  .crpc-referidores-wrap *,
  .crpc-referidores-wrap *::before,
  .crpc-referidores-wrap *::after{
    transition-duration:.01ms!important;
    animation-duration:.01ms!important;
  }
}