/* ============================================================
   Páginas de pago del portal de clientes (Blesta, tema bootstrap)
   Mismo estilo que los formularios .edu.mx — GUIAESCOLAR.NET
   Solo afecta los recuadros con estos IDs:
   #client_pay (elegir facturas), #client_method (forma de pago),
   #client_pay_confirm (confirmar / botón del gateway), #client_pay_received (gracias)
   ============================================================ */
:root {
    --gp-navy: #14284b;
    --gp-navy2: #1d3a6b;
    --gp-blue: #2f8fe6;
    --gp-blue-dark: #1f6fc4;
    --gp-soft: #e8f2fd;
    --gp-text: #1f2a3c;
    --gp-muted: #64748b;
    --gp-border: #dbe3ee;
    --gp-ok: #16a34a;
}

#client_pay *, #client_method *, #client_pay_confirm *, #client_pay_received * { box-sizing: border-box; }

/* ---------- Recuadro ---------- */
#client_pay, #client_method, #client_pay_confirm, #client_pay_received {
    border: 1px solid var(--gp-border) !important;
    border-radius: 18px !important;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(20, 40, 75, .08) !important;
    color: var(--gp-text);
    font-size: 1.02rem;
}
#client_pay > .card-header, #client_method > .card-header,
#client_pay_confirm > .card-header, #client_pay_received > .card-header,
#client_pay .card-header:first-child, #client_method .card-header:first-child,
#client_pay_confirm .card-header:first-child, #client_pay_received .card-header:first-child {
    background: linear-gradient(135deg, var(--gp-navy) 0%, var(--gp-navy2) 70%, #23589e 100%) !important;
    color: #fff !important;
    border-bottom: 0 !important;
    padding: 1.1rem 1.4rem !important;
}
#client_pay .card-header *, #client_method .card-header *,
#client_pay_confirm .card-header *, #client_pay_received .card-header * {
    color: #fff !important;
    font-weight: 800;
    letter-spacing: -.01em;
}
#client_pay .card-body, #client_method .card-body,
#client_pay_confirm .card-body, #client_pay_received .card-body {
    padding: 1.4rem 1.5rem 1.6rem !important;
}
#client_pay h4, #client_method h4, #client_pay_confirm h4 {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--gp-navy);
    margin-bottom: .8rem;
}
#client_pay hr, #client_method hr, #client_pay_confirm hr { border-color: var(--gp-border); opacity: 1; margin: 1.3rem 0; }

/* ---------- Tablas de facturas ---------- */
#client_pay .table-responsive, #client_method .table-responsive {
    border: 1px solid var(--gp-border);
    border-radius: 14px;
    overflow: hidden;
}
#client_pay table.table, #client_method table.table { margin: 0; }
#client_pay table.table thead th, #client_method table.table thead th {
    background: var(--gp-soft) !important;
    color: var(--gp-navy) !important;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
    border: 0 !important;
    padding: .8rem 1rem;
}
#client_pay table.table td, #client_method table.table td {
    padding: .85rem 1rem;
    vertical-align: middle;
    border-color: var(--gp-border) !important;
}
#client_pay table.table tbody tr:hover td { background: #f7fbff; }
#client_pay table.table td a, #client_method table.table td a { font-weight: 700; color: var(--gp-blue); text-decoration: none; }
#client_pay input[type="checkbox"], #client_method input[type="checkbox"] {
    width: 1.15rem; height: 1.15rem; accent-color: var(--gp-blue); cursor: pointer; vertical-align: middle;
}

/* ---------- Campos ---------- */
#client_pay .form-control, #client_method .form-control {
    border: 2px solid var(--gp-border);
    border-radius: 12px;
    padding: .6rem .8rem;
    font-weight: 600;
}
#client_pay .form-control:focus, #client_method .form-control:focus {
    border-color: var(--gp-blue);
    box-shadow: 0 0 0 4px rgba(47, 143, 230, .15);
}
#client_pay .input-group .form-control { border-top-right-radius: 0; border-bottom-right-radius: 0; }
#client_pay .input-group { flex-wrap: nowrap; align-items: stretch; }
#client_pay .input-group-append { display: flex; }
#client_pay .input-group-text {
    border: 2px solid var(--gp-border); border-left: 0; border-radius: 0 12px 12px 0;
    background: var(--gp-soft); color: var(--gp-navy); font-weight: 800;
}
#client_pay label { font-weight: 700; color: var(--gp-muted); font-size: .9rem; }
#client_pay .col-xs-3 { max-width: 320px; }

/* ---------- Botones ---------- */
#client_pay button[type="submit"], #client_method #submit_payment, #client_pay_confirm #submit_payment {
    background: var(--gp-blue) !important;
    border: 0 !important;
    color: #fff !important;
    font-weight: 800;
    font-size: 1.05rem;
    border-radius: 12px;
    padding: .75rem 1.5rem;
    box-shadow: 0 6px 16px rgba(47, 143, 230, .28);
    transition: background .15s, transform .15s;
}
#client_pay button[type="submit"]:hover, #client_method #submit_payment:hover, #client_pay_confirm #submit_payment:hover {
    background: var(--gp-blue-dark) !important; transform: translateY(-1px);
}
#client_pay #edit_amounts, #client_pay_confirm a.edit {
    background: #fff !important;
    border: 2px solid var(--gp-border) !important;
    color: var(--gp-navy) !important;
    font-weight: 700;
    border-radius: 12px;
    padding: .55rem 1rem;
}
#client_pay #edit_amounts:hover, #client_pay_confirm a.edit:hover { border-color: var(--gp-blue) !important; }

/* ---------- Formas de pago como tarjetas seleccionables ---------- */
#client_method .radio { margin: 0 0 .7rem; }
#client_method .radio label {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: 100%;
    padding: 1rem 1.15rem;
    border: 2px solid var(--gp-border);
    border-radius: 14px;
    background: #fff;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--gp-text);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, background .15s;
}
#client_method .radio label:hover { border-color: #b6d5f7; background: #f7fbff; }
#client_method .radio input[type="radio"] {
    width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--gp-blue); flex: 0 0 auto;
}
#client_method .radio label:has(input:checked) {
    border-color: var(--gp-blue);
    background: linear-gradient(180deg, #f5faff 0%, #fff 70%);
    box-shadow: 0 0 0 4px rgba(47, 143, 230, .12);
}
#client_method .checkbox label { font-weight: 600; }

/* ---------- Total ---------- */
#client_method .card.bg-light, #client_pay_confirm .card.bg-light {
    background: var(--gp-soft) !important;
    border: 0 !important;
    border-radius: 14px !important;
    padding: .8rem 1.2rem !important;
    color: var(--gp-navy);
    font-size: 1.05rem;
}
#client_method .card.bg-light strong, #client_pay_confirm .card.bg-light strong {
    font-size: 1.35rem; font-weight: 800; color: var(--gp-navy); margin-left: .35rem;
}

/* ---------- Confirmación ---------- */
#client_pay_confirm .panel-fix p { color: var(--gp-text); }

/* ---------- Gracias ---------- */
#client_pay_received .panel-pad label {
    display: block; margin: .9rem 0 .15rem; font-size: .78rem; font-weight: 800;
    letter-spacing: .05em; text-transform: uppercase; color: var(--gp-muted);
}
#client_pay_received .panel-pad h4 { font-size: 1.35rem; font-weight: 800; color: var(--gp-navy); margin: 0; }
#client_pay_received .panel-pad > div > p:first-child {
    display: flex; align-items: center; gap: .6rem;
    background: #e7f8ee; color: #166534; font-weight: 700;
    border-radius: 12px; padding: .8rem 1rem; margin-bottom: .6rem;
}
#client_pay_received .panel-pad > div > p:first-child::before {
    content: "✓"; display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--gp-ok); color: #fff; font-weight: 800;
}

/* ---------- Instrucciones de Transferencia / Depósito (Markdown del gateway offline) ----------
   Cada "> ####" del texto de instrucciones es una tarjeta; "---" las separa.
   1.ª tarjeta azul (SPEI/Banamex), 2.ª roja (OXXO), 3.ª verde (después de pagar). */
#client_pay_confirm blockquote {
    max-width: 720px;
    margin: 0 0 1rem;
    padding: 0 1.1rem .9rem;
    border: 1px solid var(--gp-border);
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(20, 40, 75, .06);
    font-size: 1rem;
    color: var(--gp-text);
}
#client_pay_confirm blockquote h4 {
    margin: 0 -1.1rem .9rem;
    padding: .8rem 1.1rem;
    background: linear-gradient(135deg, var(--gp-navy) 0%, var(--gp-navy2) 70%, #23589e 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 800;
}
#client_pay_confirm blockquote p { margin: 0 0 .55rem; color: var(--gp-text); }
#client_pay_confirm blockquote p:last-child { margin-bottom: 0; }
#client_pay_confirm blockquote h4 + p {
    margin-bottom: .2rem;
    font-size: .74rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--gp-muted);
}
#client_pay_confirm blockquote pre {
    margin: 0 0 .8rem;
    padding: .55rem .8rem;
    border: 0;
    border-radius: 10px;
    background: var(--gp-soft);
    white-space: pre-wrap;
    word-break: break-all;
    user-select: all;
    cursor: text;
}
#client_pay_confirm blockquote pre code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 1.25rem; font-weight: 800; letter-spacing: .04em;
    color: var(--gp-navy); background: none; padding: 0;
}
#client_pay_confirm blockquote p code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: .95rem; font-weight: 700; color: var(--gp-navy);
    background: var(--gp-soft); border-radius: 6px; padding: .1rem .35rem; user-select: all;
}
/* OXXO */
#client_pay_confirm blockquote:nth-of-type(2) h4 { background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%); }
#client_pay_confirm blockquote:nth-of-type(2) pre { background: #fef2f2; }
#client_pay_confirm blockquote:nth-of-type(2) pre code { color: #991b1b; }
/* Después de pagar */
#client_pay_confirm blockquote:nth-of-type(3) { background: #e7f8ee; border-color: #bbe5cb; }
#client_pay_confirm blockquote:nth-of-type(3) h4 { background: #16a34a; }
#client_pay_confirm blockquote:nth-of-type(3) p,
#client_pay_confirm blockquote:nth-of-type(3) h4 + p {
    margin-bottom: .55rem; font-size: 1rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: #166534;
}
/* Los "---" solo separan tarjetas */
#client_pay_confirm blockquote + hr { display: none; }

/* ---------- Celular ---------- */
@media (max-width: 575.98px) {
    #client_pay .card-body, #client_method .card-body,
    #client_pay_confirm .card-body, #client_pay_received .card-body { padding: 1rem !important; }
    #client_pay button[type="submit"], #client_method #submit_payment { width: 100%; float: none !important; }
    #client_pay .col-xs-3 { max-width: none; }
    #client_pay_confirm blockquote pre code { font-size: 1.1rem; }
}