/* "Cuentas para pagar" (pagos.js): botón en la página + modal con las cuentas.
   --pg-fondo / --pg-tinta cambian por página: azul en fin de semana, verde en media semana */
.pg-modal{
    --pg-fondo: linear-gradient(135deg, rgb(40,10,140), rgb(1,4,96));
    --pg-tinta: rgb(30,0,113);
    --pg-suave: #eef0fb;
}
.pg-modal[data-tipo="media"]{
    --pg-fondo: linear-gradient(135deg, #14532d, #062612);
    --pg-tinta: #0f4d27;
    --pg-suave: #eaf5ee;
}
#pagos[hidden]{ display: none; }

#pagos button, .pg-modal button{
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#pagos span, .pg-modal span{
    float: none;
    display: block;
    font-weight: inherit;
    text-align: left;
}

/* Fila: Costo y Quiniela(s) | botón | Total. El botón va al centro, un poco más angosto que BORRAR TODO (45%);
   si los montos son largos se angosta y el texto baja de renglón */
.pg-fila{
    display: grid;
    grid-template-columns: 1fr minmax(0, 43%) 1fr;
    align-items: center;
    gap: 12px;
    padding: 0 6px;
}
.pg-izq{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-self: start;
}
.pg-fila #costo, .pg-fila #numquinielas{ margin-left: 0; }
.pg-fila #costo, .pg-fila #numquinielas, .pg-fila #total{ white-space: nowrap; }
.pg-fila #total{
    float: none;
    margin: 0;
    grid-column: 3;
    justify-self: end;
}
#pagos{
    grid-column: 2;
    min-width: 0;
    -webkit-user-select: none;
    user-select: none;
}
#pagos .pg-abrir{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: 100%;
    padding: 9px 6px 8px;
    border-radius: 6px;
    background: linear-gradient(to bottom, #ffe27a, #f2b705);
    color: #1a1a1a;
    box-shadow: 1px 1px 6px black;   /* misma sombra que AGREGAR, ENVIAR y BORRAR TODO */
    transition: transform .1s ease;
}
#pagos .pg-abrir:active{ transform: scale(.97); }
#pagos .pg-abrir svg{
    width: 16px;
    height: 16px;
    flex: none;
    fill: currentColor;
}
#pagos .pg-titulo{
    font-size: 12px;
    font-weight: bold;
    line-height: 1.15;
    text-align: center;
}

/* Modal */
.pg-modal{
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    background: rgba(5,10,30,.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s;
    -webkit-user-select: none;
    user-select: none;
}
.pg-modal.abierto{
    opacity: 1;
    visibility: visible;
}
.pg-caja{
    position: relative;
    width: 100%;
    max-width: 370px;
    max-height: 96vh;
    max-height: 96dvh;
    overflow-y: auto;
    border-radius: 12px;
    background: #e4e7ef;
    color: #1b1d26;
    box-shadow: 0 12px 40px rgba(0,0,0,.35);
    transform: translateY(16px) scale(.98);
    transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.pg-modal.abierto .pg-caja{ transform: none; }
body.pg-sin-scroll{ overflow: hidden; }

.pg-head{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px 9px 15px;
    background: var(--pg-fondo);
    color: white;
}
.pg-head > div{ flex: 1; }
#pg-modal-titulo{
    font-size: 15px;
    font-weight: 600;
    letter-spacing: .2px;
}
.pg-sub{
    margin-top: 1px;
    font-size: 11px;
    opacity: .75;
}
.pg-modal .pg-cerrar{
    display: flex;
    flex: none;
    padding: 5px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    transition: background-color .15s ease;
}
.pg-modal .pg-cerrar:active{ background: rgba(255,255,255,.3); }
.pg-cerrar svg{ width: 16px; height: 16px; }

/* Tarjetas de cuenta */
.pg-lista{ padding: 9px 9px 0; }
.pg-modal .pg-cuenta{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border-radius: 7px;
    background: white;
    text-align: left;
    transition: box-shadow .2s ease, transform .1s ease;
}
.pg-modal .pg-cuenta + .pg-cuenta{ margin-top: 7px; }
.pg-modal .pg-cuenta:active{ transform: scale(.985); }
.pg-modal .pg-cuenta.copiado{ box-shadow: 0 0 0 2px #22a447; }

.pg-modal .pg-logo{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 7px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .2px;
    text-align: center;
    background: #5b6170;
    color: white;
}
.pg-modal .pg-logo.bbva{ background: #072146; color: white; }
.pg-modal .pg-logo.hsbc{ background: #db0011; }
.pg-modal .pg-logo.spin{ background: linear-gradient(90deg, #5a1fd1, #7b45d6); color: white; }
.pg-modal .pg-logo.coppel{ background: #ffe200; color: #0047bb; }
.pg-modal .pg-logo.banorte{ background: #eb0029; }
.pg-modal .pg-logo.santander{ background: #ec0000; }
.pg-modal .pg-logo.banamex{ background: #002d72; }
.pg-modal .pg-logo.azteca{ background: #006341; }
.pg-modal .pg-logo.nu{ background: #820ad1; font-size: 13px; }
.pg-modal .pg-logo.mp{ background: #00b1ea; }

.pg-modal .pg-info{
    flex: 1;
    min-width: 0;
}
.pg-modal .pg-banco{
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #1b1d26;
}
.pg-modal .pg-uso{
    display: inline;
    font-weight: 400;
    color: #6b7080;
}
.pg-modal .pg-num{
    font-size: 15px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: .4px;
    line-height: 1.35;
    white-space: nowrap;
    color: #0e1020;
}
.pg-modal .pg-titular{
    font-size: 10.5px;
    line-height: 1.3;
    color: #6b7080;
}
.pg-modal .pg-aviso{
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.3;
    color: #c62828;
}

.pg-modal .pg-copiar{
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--pg-suave);
    color: var(--pg-tinta);
    transition: background-color .2s ease, color .2s ease;
}
.pg-copiar svg{ width: 16px; height: 16px; fill: currentColor; }
.pg-modal .copiado .pg-copiar{ background: #e3f6e8; color: #1a8a3a; }

/* Aviso "Número copiado": no ocupa espacio, aparece encima de la parte de abajo */
.pg-modal .pg-toast{
    position: sticky;
    bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    height: 32px;
    margin: -42px auto 10px;
    padding: 7px 14px;
    border-radius: 999px;
    background: #1b1d26;
    color: white;
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}
.pg-modal .pg-toast.visible{ opacity: 1; transform: none; }
.pg-toast svg{ width: 16px; height: 16px; fill: #4ade80; }

/* Nota de enviar quinielas y comprobante */
.pg-confirma{
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 9px 9px 10px;
    padding: 7px 10px;
    border-radius: 6px;
    background: #e7f8ec;
    color: #14532d;
}
.pg-confirma img{ flex: none; width: 20px; height: 20px; }
.pg-confirma p{
    margin: 0;
    font-size: 12.5px;
    line-height: 1.35;
}