/* ======================================
   CONTENEDOR GENERAL
====================================== */
.aviajar-ecp-front{
  max-width:1000px;
  margin:40px auto 80px;
  padding:0 18px 60px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  box-sizing:border-box;
}

/* ======================================
   HEADER
====================================== */
.aviajar-ecp-front-summary{
  background:#111;
  color:#fff;
  border-radius:22px;
  padding:28px;
  margin-bottom:35px;
  text-align:center;
}

.aviajar-ecp-front-summary .k{
  font-size:14px;
  opacity:.7;
}

.aviajar-ecp-front-summary .v{
  font-size:22px;
  font-weight:900;
}

.aviajar-ecp-front-summary .s{
  font-size:14px;
  opacity:.6;
}

/* Evita desbordes por textos largos (móvil / columnas estrechas) */
.aviajar-ecp-front-summary .v,
.aviajar-ecp-front-summary .s,
.aviajar-ecp-front-reserva .title,
.aviajar-ecp-front-reserva .ref{
  font-size:13px;
  opacity:.72;
}

.aviajar-ecp-front-reserva summary .left,
.aviajar-ecp-front-reserva summary .right{
  min-width:0;
}

/* ======================================
   RESUMEN GLOBAL
====================================== */
.aviajar-ecp-global{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  padding:18px;
  border-radius:20px;
  margin:0 0 26px;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
  border:1px solid rgba(0,0,0,.06);
}

.aviajar-ecp-global.pagado{ background:#ecfdf5; border-color:#22c55e; }
.aviajar-ecp-global.parcial{ background:#fff7ed; border-color:#f59e0b; }
.aviajar-ecp-global.pendiente{ background:#fef2f2; border-color:#ef4444; }

.aviajar-ecp-global .global-item{
  text-align:center;
}

.aviajar-ecp-global .global-item span{
  display:block;
  font-size:12px;
  opacity:.7;
  margin-bottom:6px;
}

.aviajar-ecp-global .global-item strong{
  font-size:18px;
  font-weight:900;
}

/* ======================================
   TARJETA RESERVA
====================================== */
.aviajar-ecp-front-reserva{
  border-radius:26px;
  margin-bottom:30px;
  overflow:hidden;
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 18px 50px rgba(15,23,42,.08);
  background:#fff;
  position:relative;
}

.aviajar-ecp-front-reserva.pagado{ border-left:6px solid #22c55e; }
.aviajar-ecp-front-reserva.pendiente{ border-left:6px solid #ef4444; }
.aviajar-ecp-front-reserva.parcial{ border-left:6px solid #f59e0b; }

.aviajar-ecp-front-reserva summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:18px;
  padding:22px 22px 18px;
  cursor:pointer;
  list-style:none;
  background:linear-gradient(180deg,#ffffff 0%,#fbfbfd 100%);
  position:relative;
}

.aviajar-ecp-front-reserva summary:after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:rgba(15,23,42,.06);
}
.aviajar-ecp-front-reserva summary::-webkit-details-marker{
  display:none;
}

.aviajar-ecp-front-reserva .left{
  display:flex;
  flex-direction:column;
}

/* Airline-style header line */
.aviajar-ecp-front-reserva .brandline{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  letter-spacing:.7px;
  text-transform:uppercase;
  color:rgba(15,23,42,.62);
  margin-bottom:10px;
}
.aviajar-ecp-front-reserva .brandline .brand{
  font-weight:900;
  color:#111;
}
.aviajar-ecp-front-reserva .brandline .dot{
  opacity:.55;
}
.aviajar-ecp-front-reserva .brandline .tag{
  font-weight:800;
  opacity:.75;
}


.aviajar-ecp-front-reserva .title{
  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
}

.aviajar-ecp-front-reserva .ref{
  font-size:13px;
  opacity:.72;
}

.aviajar-ecp-front-reserva .right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.aviajar-ecp-front-reserva .saldo{
  font-weight:900;
  font-size:20px;
  letter-spacing:.2px;
}

/* ======================================
   PILLS
====================================== */
.pill{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color:#111;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
}

.pill.pagado{ background:rgba(34,197,94,.16); border-color:rgba(34,197,94,.35); }
.pill.pendiente{ background:rgba(239,68,68,.14); border-color:rgba(239,68,68,.35); }
.pill.parcial{ background:rgba(245,158,11,.16); border-color:rgba(245,158,11,.35); }

/* ======================================
   CUERPO
====================================== */
.aviajar-ecp-front-body{
  padding:28px 24px 35px;
  background:#fff;
}

/* ======================================
   BLOQUES TOTAL / ABONOS / SALDO
====================================== */
.aviajar-ecp-front-body .row{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
  margin:40px 0;
}

/* En desktop, centramos el bloque "Total" para que no quede desbalanceado */
.aviajar-ecp-front-body .row > div:nth-child(1){ background:#fff; }

.aviajar-ecp-front-body .row > div{
  text-align:center;
  padding:26px;
  border-radius:22px;
  box-shadow:0 14px 35px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.08);
  font-weight:900;
  min-width:0;
  box-sizing:border-box;
  background:#fff;
  position:relative;
}

.aviajar-ecp-front-body .row > div:before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:14px;
  height:4px;
  border-radius:999px;
  background:rgba(15,23,42,.10);
}
.aviajar-ecp-front-body .row > div:nth-child(1):before{ background:rgba(59,130,246,.55); }
.aviajar-ecp-front-body .row > div:nth-child(2):before{ background:rgba(34,197,94,.55); }
.aviajar-ecp-front-body .row > div:nth-child(3):before{ background:rgba(245,158,11,.55); }


.aviajar-ecp-front-body .row > div:nth-child(1){ background:#fff; }
.aviajar-ecp-front-body .row > div:nth-child(2){ background:#fff; }
.aviajar-ecp-front-body .row > div:nth-child(3){ background:#fff; }

.aviajar-ecp-front-body .row .k{
  font-size:12px;
  letter-spacing:.6px;
  text-transform:uppercase;
  opacity:.6;
  display:block;
  margin:10px 0 8px;
}

.aviajar-ecp-front-body .row .v{
  font-size:22px;
}

/* ======================================
   TABLAS – SIN SCROLL EN DESKTOP
====================================== */

.table-wrap,
.aviajar-asesor-tablewrap{
  width:100%;
  max-width:100%;
  overflow:hidden;
  box-sizing:border-box;
}

/*
  FIX: Algunos temas aplican márgenes negativos / anchos extra a tablas dentro del contenido
  y eso hace que el "Historial de abonos" se vea como si se saliera del marco blanco.
  Forzamos el wrapper y la tabla a mantenerse dentro del contenedor del shortcode.
*/
.aviajar-ecp-front .table-wrap{
  width:100% !important;
  max-width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  box-sizing:border-box;
  overflow-x:auto; /* sin cambios visibles si no es necesario */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

.aviajar-ecp-front .table-wrap table{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
}

.table-wrap table,
.aviajar-asesor-table{
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}

.table-wrap th,
.table-wrap td,
.aviajar-asesor-table th,
.aviajar-asesor-table td{
  padding:12px;
  border-bottom:1px solid #eee;
  text-align:left;
  font-size:13px;
  vertical-align:top;
  word-break:break-word;
  overflow-wrap:break-word;
  white-space:normal;
}

.table-wrap th,
.aviajar-asesor-table th{
  background:#fafafa;
  font-weight:900;
}



/* ======================================
   TEMA FACTURA (alineado a PDF DOMPDF)
====================================== */
.aviajar-ecp-front.aviajar-ecp-invoice{
  /* Permite controlar el color de marca desde PHP */
  --aviajar-brand: #ffb300;
}

/* Header de cada reserva (similar al PDF) */
.aviajar-ecp-invoice .aviajar-ecp-front-reserva summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:18px;
  padding:22px 22px 18px;
  cursor:pointer;
  list-style:none;
  background:linear-gradient(180deg,#ffffff 0%,#fbfbfd 100%);
  position:relative;
}

.aviajar-ecp-invoice .aviajar-ecp-front-reserva .title,
.aviajar-ecp-invoice .aviajar-ecp-front-reserva .ref,
.aviajar-ecp-invoice .aviajar-ecp-front-reserva .saldo{
  font-weight:900;
  font-size:20px;
  letter-spacing:.2px;
}

.aviajar-ecp-invoice .aviajar-ecp-front-reserva .ref{
  font-size:13px;
  opacity:.72;
}

/* Pill más premium (con punto de estado, evita perder contraste en parcial) */
.aviajar-ecp-invoice .pill{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  letter-spacing:.2px;
  color:#111;
  background:rgba(15,23,42,.06);
  border:1px solid rgba(15,23,42,.10);
}

.aviajar-ecp-invoice .pill::before{
  content:'';
  width:10px;
  height:10px;
  border-radius:999px;
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  background:#6b7280;
}

.aviajar-ecp-invoice .pill.pagado::before{ background:#22c55e; }
.aviajar-ecp-invoice .pill.pendiente::before{ background:#ef4444; }
.aviajar-ecp-invoice .pill.parcial::before{ background: var(--aviajar-brand); }

/* Bloques Total/Abonos/Saldo más estilo factura */
.aviajar-ecp-invoice .aviajar-ecp-front-body .row > div{
  text-align:center;
  padding:26px;
  border-radius:22px;
  box-shadow:0 14px 35px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.08);
  font-weight:900;
  min-width:0;
  box-sizing:border-box;
  background:#fff;
  position:relative;
}

.aviajar-ecp-invoice .aviajar-ecp-front-body .row > div:nth-child(1){ background:#fff; }
.aviajar-ecp-invoice .aviajar-ecp-front-body .row > div:nth-child(2){ background:#fff; }
.aviajar-ecp-invoice .aviajar-ecp-front-body .row > div:nth-child(3){ background:#fff; }

/* Link de descarga del recibo */
.aviajar-ecp-pdf-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px !important;
  font-weight:900;
  letter-spacing:.2px;
  text-decoration:none !important;
  background: var(--aviajar-brand);
  color:#111 !important;
  border:1px solid rgba(0,0,0,.08);
  white-space:nowrap;
  min-width:92px;
  line-height:1;
}
.aviajar-ecp-pdf-link:hover{
  opacity:.92;
  color:#111 !important;
}
/* En móvil, evita que el botón haga crecer columnas */
@media (max-width: 620px){
  .aviajar-ecp-pdf-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  font-size:12px !important;
  font-weight:900;
  letter-spacing:.2px;
  text-decoration:none !important;
  background: var(--aviajar-brand);
  color:#111 !important;
  border:1px solid rgba(0,0,0,.08);
  white-space:nowrap;
  min-width:92px;
  line-height:1;
}
}


/* ======================================
   PANEL ASESOR
====================================== */
.aviajar-asesor-panel{
  max-width:1100px;
  margin:24px auto;
  padding:0 16px 40px;
  box-sizing:border-box;
}

.aviajar-asesor-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  padding:18px;
  box-shadow:0 10px 26px rgba(0,0,0,.06);
  margin-bottom:18px;
}

.aviajar-asesor-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

@media(max-width:900px){
  .aviajar-asesor-grid{
    grid-template-columns:1fr;
  }
}

/* ======================================
   RESPONSIVE
====================================== */

@media(max-width:768px){

  html, body{
    overflow-x:hidden !important;
  }

  .aviajar-ecp-front{
    margin:30px auto 100px;
    padding:0 14px 70px;
    max-width:100%;
    overflow-x:hidden;
  }

  .aviajar-ecp-global{
    grid-template-columns:1fr;
    padding:16px;
    gap:12px;
  }

  .aviajar-ecp-front-reserva summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:18px;
  padding:22px 22px 18px;
  cursor:pointer;
  list-style:none;
  background:linear-gradient(180deg,#ffffff 0%,#fbfbfd 100%);
  position:relative;
}

  .aviajar-ecp-front-reserva .right{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

  .aviajar-ecp-front-body .row{
    grid-template-columns:1fr;
    gap:18px;
  }

  .aviajar-ecp-front-body .row > div:nth-child(1){ background:#fff; }

  /* SOLO EN MÓVIL ACTIVAMOS SCROLL */
  .table-wrap,
  .aviajar-asesor-tablewrap{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }

  .table-wrap table,
  .aviajar-asesor-table{
    min-width:600px;
  }

}

/* Ajuste extra para pantallas muy pequeñas */
@media(max-width:480px){

  .aviajar-ecp-front-summary{
    padding:20px 14px;
    border-radius:18px;
  }

  .aviajar-ecp-front-summary .v{ font-size:18px; }

  .aviajar-ecp-front-reserva summary{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  flex-wrap:wrap;
  gap:18px;
  padding:22px 22px 18px;
  cursor:pointer;
  list-style:none;
  background:linear-gradient(180deg,#ffffff 0%,#fbfbfd 100%);
  position:relative;
}

  .aviajar-ecp-front-reserva .title{
  font-weight:900;
  font-size:18px;
  letter-spacing:.2px;
}
  .aviajar-ecp-front-reserva .saldo{
  font-weight:900;
  font-size:20px;
  letter-spacing:.2px;
}

  .aviajar-ecp-front-body{
    padding:22px 16px 28px;
  }

  .aviajar-ecp-front-body .row > div{
  text-align:center;
  padding:26px;
  border-radius:22px;
  box-shadow:0 14px 35px rgba(15,23,42,.08);
  border:1px solid rgba(15,23,42,.08);
  font-weight:900;
  min-width:0;
  box-sizing:border-box;
  background:#fff;
  position:relative;
}

  .aviajar-ecp-front-body .row .v{
  font-size:22px;
}

  /* Tabla un poco menos ancha para evitar cortes en móvil */
  .table-wrap table,
  .aviajar-asesor-table{
    min-width:520px;
  }
}