/* ──────────────────────────────────────────────────────────────────────────────
   Pagos de invitados (T577) - /pay/{schID} y el recibo.

   Prefijo de pantalla: .gp-  (igual que .sbr-, .ed-, .ar- de las pantallas doradas).
   Todo el color sale de los tokens de Content/Site.css; aqui no se inventa ni un gris.
   Se carga DESPUES de Content/Shared/awilda-components.css, que es quien define .awilda-btn.
   ────────────────────────────────────────────────────────────────────────────── */

.gp-body {
    max-width: 560px;
    margin: 0 auto 32px;
    padding: 0 12px;
}

/* ── Encabezado ─────────────────────────────────────────────────────────────── */

/* Relleno navy a proposito: lang-toggle.css pinta el selector de idioma en blanco
   translucido, y sobre fondo blanco seria invisible. */
.gp-header {
    position: relative;
    background: var(--awilda-navy);
    color: #fff;
    border-radius: var(--awilda-radius-lg);
    /* 46px arriba: el selector de idioma va absoluto en top:12px/right:16px y el contenido
       del encabezado esta centrado. Con menos, el logo se le mete debajo. */
    padding: 46px 18px 20px;
    margin: 16px 0 18px;
    text-align: center;
}

.gp-logo {
    max-height: 64px;
    max-width: 70%;
    background: #fff;
    border-radius: 10px;
    padding: 6px 10px;
    margin-bottom: 10px;
}

.gp-school {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, .82) !important;
    margin: 0 0 2px;
    letter-spacing: .01em;
}

.gp-title {
    font-size: 1.6rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin: 0 0 6px;
}

.gp-subtitle {
    font-size: .92rem;
    color: rgba(255, 255, 255, .78) !important;
    margin: 0;
    line-height: 1.45;
}

/* ── Tarjetas ───────────────────────────────────────────────────────────────── */

.gp-card {
    background: #fff;
    border: 1px solid var(--awilda-slate-200);
    border-radius: 14px;
    box-shadow: 0 1px 3px rgba(40, 48, 80, .05);
    padding: 24px;
    margin-bottom: 16px;
}

.gp-card h3 {
    font-size: 1.15rem !important;
    font-weight: 700 !important;
    color: var(--awilda-navy-alt) !important;
    margin: 0 0 6px;
}

.gp-lead {
    color: var(--awilda-slate-600);
    font-size: .92rem;
    margin-bottom: 16px;
    line-height: 1.5;
}

/* ── Campos ─────────────────────────────────────────────────────────────────── */

/* Site.css impone `input, select, textarea { max-width: 280px }` a partir de 993px.
   Con .gp-body delante (0,1,1 contra 0,0,1) esta regla gana sin `!important`. */
.gp-body input,
.gp-body select,
.gp-body textarea {
    max-width: 100%;
    width: 100%;
}

.gp-body .form-group { margin-bottom: 16px; }

.gp-body label,
.gp-label {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--awilda-slate-600);
    margin-bottom: 5px;
}

.gp-body .form-control {
    border: 1px solid var(--awilda-slate-300);
    border-radius: 10px;
    padding: 10px 12px;
    height: auto;
    font-size: 1rem;
    background-image: none;
    background-color: #fff;
}

.gp-body .form-control:focus {
    border-color: var(--awilda-primary-teal);
    box-shadow: 0 0 0 3px rgba(58, 195, 207, .30);
    outline: none;
}

.gp-hint {
    display: block;
    font-size: .78rem;
    color: var(--awilda-slate-500);
    margin-top: 5px;
    line-height: 1.4;
}

/* ── Radios (metodo de pago y tipo de cuenta) ───────────────────────────────── */

/* Dos reglas de fuera se juntan sobre estos radios y los dejan invisibles:
   material-dashboard.css esconde el .form-check-input nativo (opacity 0, z-index -1) para
   pintarlo desde un <span> hermano, y la regla de arriba de este archivo estira TODO input
   al 100% del ancho. En vez de reproducir el marcado del tema -- que no esta versionado
   aqui, viene del CDN, y cuya forma para radios no es la misma que para casillas -- se
   devuelve el control nativo, que ya es accesible y no depende de nadie. */
.gp-body .form-check-input[type="radio"] {
    -webkit-appearance: radio;
    -moz-appearance: radio;
    appearance: radio;
    position: static;
    opacity: 1;
    visibility: visible;
    z-index: auto;
    width: auto;
    height: auto;
    min-width: 0;
    margin: 0 8px 0 0;
    vertical-align: middle;
    accent-color: var(--awilda-primary-teal);
}

.gp-body .form-check {
    padding: 0;
    margin-bottom: 6px;
}

.gp-body .form-check-label {
    display: flex;
    align-items: center;
    font-size: .95rem;
    font-weight: 400;
    color: var(--awilda-slate-600);
    margin-bottom: 0;
    cursor: pointer;
}

.gp-methods { margin-bottom: 16px; }

/* ── Tarjetas de metodo ─────────────────────────────────────────────────────
   Portado de .payment-method-card (Content/Payments/Create.css), que es lo que ve
   una familia en /Payments/Create. El radio nativo va escondido DENTRO del <label>:
   asi no hay nada que material-dashboard pueda repintar encima, que era el choque
   que dejaba los dos controles superpuestos. El <label> sigue siendo el que marca
   el radio, o sea que el teclado y los lectores de pantalla funcionan igual. */
.gp-method-options {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.gp-body .gp-method-card {
    position: relative;
    flex: 1 1 190px;
    max-width: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    padding: 18px 14px;
    border: 2px solid #e1f5f7;
    border-radius: 12px;
    background: #f8fbfc;
    cursor: pointer;
    margin-bottom: 0;
    transition: border-color .15s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
}

.gp-body .gp-method-card:hover {
    border-color: #b3e5e9;
    background: #e1f5f7;
}

.gp-body .gp-method-card.selected {
    border-color: var(--awilda-primary-teal, #3ac3cf);
    background: #e1f5f7;
    box-shadow: 0 0 0 3px rgba(58, 195, 207, .15);
}

/* El foco se ve en la TARJETA, no en un radio invisible: sin esto, moverse con el
   teclado no dejaria ninguna pista de donde se esta. */
.gp-body .gp-method-card:focus-within {
    border-color: var(--awilda-primary-teal, #3ac3cf);
    box-shadow: 0 0 0 3px rgba(58, 195, 207, .30);
}

/* Escondido de verdad, y sin appearance: nada que repintar encima. La regla de
   arriba que devuelve el radio nativo NO alcanza aqui porque esta es mas especifica. */
.gp-body .gp-method-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.gp-body .gp-method-icon {
    font-size: 1.6rem;
    line-height: 1;
    color: var(--awilda-indigo, #354F8E);
}

.gp-body .gp-method-card.selected .gp-method-icon {
    color: var(--awilda-primary-teal, #3ac3cf);
}

.gp-body .gp-method-title {
    font-size: .95rem;
    font-weight: 500;
    color: var(--awilda-slate-600, #354F8E);
}

@media (max-width: 400px) {
    .gp-method-options { flex-direction: column; }
    .gp-body .gp-method-card { max-width: none; }
}

.gp-card-brand {
    display: inline-block;
    font-size: .78rem;
    font-weight: 700;
    color: var(--awilda-navy-alt);
    min-height: 1em;
}

/* El campo del codigo: grande, espaciado y centrado, para leerlo del correo sin dudar. */
.gp-code {
    font-size: 28px !important;
    letter-spacing: 8px;
    text-align: center;
    font-weight: 700;
}

/* Trampa de robots. Fuera de la pantalla por CSS, NO con type=hidden: un bot que rellena
   todo lo visible del DOM cae igual, y un lector de pantalla nunca la anuncia. */
/* La regla de ancho de arriba (`.gp-body input`) es (0,1,1) y le gana a esta (0,1,0),
   asi que el ancho se declara con la misma fuerza. Aun sin eso el campo estaria fuera
   de la pantalla por `left`, pero una regla que no aplica confunde a quien la lee. */
.gp-honeypot {
    position: absolute;
    left: -10000px;
    width: 1px !important;
    height: 1px;
    overflow: hidden;
}

/* ── Resumen del cobro ──────────────────────────────────────────────────────── */

.gp-summary {
    background: var(--awilda-soft-teal-bg);
    border: 1px solid var(--awilda-slate-200);
    border-radius: 12px;
    padding: 14px 16px;
    margin: 4px 0 16px;
}

.gp-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    font-size: .92rem;
    color: var(--awilda-slate-600);
    padding: 3px 0;
}

.gp-summary-row strong {
    font-variant-numeric: tabular-nums;
    color: var(--awilda-navy);
}

.gp-total {
    border-top: 1px solid var(--awilda-slate-300);
    margin-top: 8px;
    padding-top: 9px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--awilda-navy);
}

.gp-total strong { font-size: 1.15rem; }

.gp-summary-note {
    font-size: .76rem;
    color: var(--awilda-slate-500);
    margin: 6px 0 0;
}

/* ── Reloj del codigo ───────────────────────────────────────────────────────── */

.gp-timer {
    display: block;
    font-size: .82rem;
    font-weight: 600;
    color: var(--awilda-slate-600);
    margin-bottom: 12px;
    font-variant-numeric: tabular-nums;
}

.gp-timer--out { color: var(--awilda-coral-deep); }

/* ── Errores ────────────────────────────────────────────────────────────────── */

.gp-error {
    background: var(--awilda-soft-coral-tint);
    border: 1px solid var(--awilda-coral-alt);
    border-radius: 10px;
    color: var(--awilda-coral-deep);
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.45;
    padding: 10px 12px;
    margin-bottom: 14px;
}

/* ── Botones ────────────────────────────────────────────────────────────────── */

.gp-submit {
    width: 100%;
    justify-content: center;
    margin-top: 4px;
}

.gp-linkbtn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    color: var(--awilda-navy-alt);
    font-size: .86rem;
    font-weight: 600;
    text-decoration: underline;
    padding: 12px 4px;
    margin-top: 6px;
    cursor: pointer;
}

.gp-linkbtn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(58, 195, 207, .30);
    border-radius: 8px;
}

.gp-legal {
    font-size: .78rem;
    color: var(--awilda-slate-500) !important;
    line-height: 1.45;
    margin: 12px 0 0;
    text-align: center;
}

/* ── Recibo ─────────────────────────────────────────────────────────────────── */

.gp-confirm { margin-top: 24px; }

.gp-confirm .gp-title {
    color: var(--awilda-navy-alt) !important;
    font-size: 1.4rem !important;
    text-align: center;
    margin-bottom: 18px;
}

.gp-dl {
    margin: 0 0 16px;
    display: grid;
    grid-template-columns: minmax(110px, 40%) 1fr;
    gap: 8px 14px;
}

.gp-dl dt {
    font-size: .74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--awilda-slate-500);
    margin: 0;
    align-self: center;
}

.gp-dl dd {
    margin: 0;
    font-size: .95rem;
    color: var(--awilda-navy);
    word-break: break-word;
}

.gp-note {
    font-size: .86rem;
    color: var(--awilda-slate-600) !important;
    line-height: 1.5;
    margin: 0 0 8px;
}

/* ── Movil ──────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .gp-body { padding: 0 10px; }
    .gp-card { padding: 16px; border-radius: 12px; }
    .gp-header { padding: 46px 14px 18px; }
    .gp-title { font-size: 1.35rem !important; }
    .gp-code { font-size: 24px !important; letter-spacing: 6px; }
    .gp-dl { grid-template-columns: 1fr; gap: 2px 0; }
    .gp-dl dd { margin-bottom: 10px; }
}

@media print {
    .gp-header, .gp-linkbtn, .gp-submit { display: none !important; }
    .gp-card { border: none; box-shadow: none; }
}