/*
    Pago de servicios: paso 1 (pago-servicios/index.aspx, elegir servicios) y paso 2
    (carritoCompras/carrito.aspx, datos y pago). Las dos paginas comparten encabezado,
    pasos y resumen para que se vean como una sola que avanza de paso.

    En el paso 1 cada servicio es una tarjeta (.ps-srv) con su casilla real adentro: la
    casilla sigue siendo la que guarda la seleccion y la que leen actualizarTotal() y el
    carrito. pintarSeleccion() solo agrega clases y arma el resumen.
*/

/* Encabezado: el mismo de cotizar, contacto y cremacion */
.plan-header{width:100%;background-color:rgba(0,73,44,.06);border-bottom:3px solid #FED735;margin-top:20px;padding:34px 0}
.plan-header-inner{max-width:1180px;width:100%;margin:0 auto;padding:0 20px}
.plan-breadcrumb{font-size:13px;margin-bottom:12px}
.plan-breadcrumb a{color:#00492c;opacity:.75;font-weight:500;text-decoration:none}
.plan-breadcrumb a:hover{opacity:1;text-decoration:underline}
.plan-breadcrumb .sep{color:#00492c;opacity:.45;padding:0 7px}
.plan-breadcrumb .actual{color:#00492c;font-weight:700}
h1.plan-titulo{color:#00492c;font-size:34px;font-weight:700;line-height:1.15;margin:0}
.plan-header-bajada{color:#00492c;font-size:1.1rem;font-weight:400;margin-top:6px}

.cm-pago{box-sizing:border-box;max-width:1180px;margin:0 auto;padding:28px 24px 44px}

@media (max-width:767.98px){
    /* la barra de navegacion es fixed-top: sin este margen el breadcrumb queda
       pegado al menu, como en el resto de las paginas */
    .plan-header{margin-top:45px;padding:24px 0}
    h1.plan-titulo{font-size:27px}
    .plan-header-bajada{font-size:1rem}
    .plan-header-inner{padding:0 16px}
    .cm-pago{padding:20px 16px 32px}
}

.ps{
    --ps-verde:#00492C;
    --ps-verde-oscuro:#00321E;
    --ps-verde-suave:#F1F7F3;
    --ps-amarillo:#FED735;
    --ps-amarillo-hover:#F5CB1A;
    --ps-texto:#1F2A24;
    --ps-texto-2:#33403A;
    --ps-gris:#55605A;
    --ps-borde:#E1E6E2;
    --ps-fondo-suave:#EDF0EE;
    font-family:'Poppins',sans-serif;
    color:var(--ps-texto);
}
.ps *{box-sizing:border-box}
.ps h2,.ps h3,.ps p{margin:0}

/* Pasos */
.ps-pasos{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:0 0 28px}
.ps-paso{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ps-gris);background:#fff;border:1px solid var(--ps-borde);border-radius:999px;padding:6px 16px 6px 6px}
.ps-paso .n{width:28px;height:28px;border-radius:50%;border:2px solid #B9C4BD;display:flex;align-items:center;justify-content:center;font-weight:600}
.ps-paso--activo{color:var(--ps-verde);font-weight:600}
.ps-paso--activo .n{background:var(--ps-verde);border-color:var(--ps-verde);color:#fff}
/* paso ya completado: lleva de vuelta a ese paso */
.ps-paso--hecho{padding:0;color:var(--ps-verde)}
.ps-paso--hecho a{display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;color:inherit;text-decoration:none;border-radius:999px}
.ps-paso--hecho a:hover{color:var(--ps-verde-oscuro);background:var(--ps-verde-suave)}
.ps-paso--hecho .n{background:var(--ps-verde-suave);border-color:var(--ps-verde);color:var(--ps-verde);font-size:12px}
.ps-paso .ps-paso-texto{display:flex;align-items:center;gap:10px}
.ps-paso--hecho .ps-paso-texto{padding:6px 16px 6px 6px}

/* Dos columnas: servicios y resumen */
.ps-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:32px;align-items:start}

/* Grupos */
.ps-grupo{display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.ps-grupo h2{font-size:20px;font-weight:600;color:var(--ps-verde)}
.ps-grupo-ayuda{font-size:14px;color:var(--ps-gris);margin-top:-8px !important}
.ps-aviso{display:none;font-size:14px;color:#6B4E00;background:#FFF6D1;border-radius:10px;padding:10px 14px}
.ps-grupo--off .ps-aviso{display:block}

/* Tarjeta de servicio */
.ps-srv{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:18px;align-items:center;background:#fff;border:2px solid var(--ps-borde);border-radius:16px;padding:14px;transition:border-color .15s,background-color .15s}
.ps-srv--sel{border-color:var(--ps-verde);background:var(--ps-verde-suave)}
.ps-srv--off{opacity:.65}
.ps-srv-foto{width:120px;height:90px;object-fit:cover;border-radius:10px;display:block}
.ps-srv-info{display:flex;flex-direction:column;gap:4px;min-width:0}
.ps-srv-nombre{font-size:16px;font-weight:600;color:var(--ps-texto);margin:0;cursor:pointer}
.ps-srv--off .ps-srv-nombre{cursor:default}
.ps-srv-desc{font-size:13px;line-height:1.45;color:var(--ps-gris)}
.ps-srv-detalle{align-self:flex-start;font-size:13px;font-weight:500;color:var(--ps-verde);text-decoration:underline;margin-top:2px}
.ps-srv-detalle:hover{color:var(--ps-verde-oscuro)}
.ps-srv-accion{display:flex;flex-direction:column;align-items:flex-end;gap:10px;min-width:150px}
.ps-precio{font-size:20px;font-weight:700;color:var(--ps-verde);white-space:nowrap}
.ps-precio .dxeBase_Moderno,.ps-precio span{font-size:inherit !important;font-weight:inherit !important;color:inherit !important;font-family:inherit !important}
.ps-precio small{font-size:12px !important;font-weight:500 !important;color:var(--ps-gris) !important}

/* Boton Agregar / Agregado: un label con la casilla real adentro */
.ps-elegir{display:flex;align-items:center;gap:10px;min-height:44px;margin:0;padding:0 16px 0 12px;border-radius:999px;border:2px solid var(--ps-verde);color:var(--ps-verde);font-weight:600;font-size:14px;cursor:pointer;background:#fff;user-select:none}
.ps-elegir:focus-within{outline:3px solid var(--ps-amarillo);outline-offset:2px}
.ps-elegir input{width:20px;height:20px;margin:0;accent-color:var(--ps-verde);cursor:pointer}
.ps-srv--sel .ps-elegir{background:var(--ps-verde);color:#fff}
.ps-srv--sel .ps-elegir input{accent-color:var(--ps-amarillo)}
.ps-srv--off .ps-elegir{display:none}
/* La pagina ya pinta las casillas en verde con !important; dentro del boton
   verde la casilla marcada pasa a amarilla con el visto en verde para que se vea */
.cm-pago .ps-srv--sel .ps-elegir .form-check-input:checked{
    background-color:var(--ps-amarillo) !important;
    border-color:var(--ps-amarillo) !important;
    --bs-form-check-bg-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2300492C' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}
.ps-nodisp{display:none;font-size:13px;font-weight:600;color:var(--ps-gris);background:var(--ps-fondo-suave);border-radius:999px;padding:8px 14px}
.ps-srv--off .ps-nodisp{display:inline-flex}

/* Resumen */
.ps-resumen{position:sticky;top:96px;background:#fff;border-radius:18px;border:1px solid var(--ps-borde);padding:22px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 24px rgba(0,73,44,.08)}
.ps-resumen h2{font-size:18px;font-weight:600;color:var(--ps-verde)}
.ps-vacio{font-size:14px;color:var(--ps-gris);line-height:1.5}
.ps-lista{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.ps-lista li{display:grid;grid-template-columns:minmax(0,1fr) auto 32px;gap:8px;align-items:center;font-size:14px;color:var(--ps-texto)}
.ps-lista .m{font-weight:600;white-space:nowrap}
.ps-quitar{width:32px;height:32px;border-radius:50%;border:none;background:var(--ps-fondo-suave);color:var(--ps-texto-2);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.ps-quitar:hover{background:#DDE3DF}
.ps-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ps-borde);padding-top:14px}
.ps-total > span{font-size:15px;color:var(--ps-texto-2)}
.ps-total strong{font-size:26px;color:var(--ps-verde)}
.ps-total strong span{font-size:inherit !important;font-weight:inherit !important;color:inherit !important;font-family:inherit !important}
.ps-continuar{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;border-radius:999px;background:var(--ps-amarillo);color:var(--ps-verde-oscuro);font-weight:700;font-size:16px;text-decoration:none}
.ps-continuar:hover,.ps-continuar:focus{color:var(--ps-verde-oscuro);background:var(--ps-amarillo-hover)}
.ps-continuar--inactivo{background:#E4E8E5;color:var(--ps-gris);pointer-events:none}
.ps-seguro{display:flex;gap:8px;font-size:12px;line-height:1.5;color:var(--ps-gris)}
.ps-seguro i{color:var(--ps-verde);margin-top:2px}

/* Ayuda por WhatsApp */
.ps-ayuda{display:flex;align-items:center;justify-content:space-between;gap:16px;background:var(--ps-verde);color:#fff;border-radius:16px;padding:18px 22px}
.ps-ayuda p{font-size:15px}
.ps-ayuda > a{display:inline-flex;align-items:center;gap:8px;color:var(--ps-verde);background:#fff;border-radius:999px;padding:10px 18px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.ps-ayuda > a:hover{color:var(--ps-verde-oscuro);background:#F1F7F3}
.ps-ayuda .ps-ayuda-tel{color:#fff;font-weight:600;white-space:nowrap}
.ps-ayuda .ps-ayuda-tel:hover{color:var(--ps-amarillo)}

/* ---------- Paso 2: datos y pago (carrito.aspx) ---------- */
.ps-mini{display:none}

.ps-bloque{background:#fff;border:1px solid var(--ps-borde);border-radius:18px;padding:24px;margin-bottom:24px}
.ps-bloque h2{font-size:20px;font-weight:600;color:var(--ps-verde)}
.ps-bloque-ayuda{font-size:14px;color:var(--ps-gris);margin:4px 0 18px !important}
.ps-campos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 20px}
.ps-campo .form-label,.ps-opciones legend{font-size:14px;font-weight:500;color:var(--ps-texto-2);margin-bottom:6px}
.ps-opcional{font-weight:400;color:var(--ps-gris)}
.ps-campo .form-control{min-height:48px;border-radius:12px;border:1.5px solid #CBD3CE;font-size:15px;color:var(--ps-texto)}
.ps-campo .form-control:focus{border-color:var(--ps-verde);box-shadow:0 0 0 .2rem rgba(0,73,44,.15)}

.ps-opciones{border:0;margin:0;padding:0;min-width:0}
.ps-opciones legend{float:none;width:auto;padding:0}
.ps-opciones-fila{display:flex;gap:10px;flex-wrap:wrap}
.ps-opcion{display:flex;align-items:center;gap:10px;min-height:48px;margin:0;padding:0 18px 0 14px;border:1.5px solid #CBD3CE;border-radius:12px;background:#fff;font-size:15px;cursor:pointer;flex:1 1 120px}
.ps-opcion:hover{border-color:var(--ps-verde)}
.ps-opcion .form-check-input{width:20px;height:20px;margin:0;border:2px solid var(--ps-verde);cursor:pointer;float:none}
.ps-opcion .form-check-input:checked{background-color:var(--ps-verde);border-color:var(--ps-verde)}
.ps-opcion:has(input:checked){border-color:var(--ps-verde);background:var(--ps-verde-suave);font-weight:600;color:var(--ps-verde)}
.ps-opcion:focus-within{outline:3px solid var(--ps-amarillo);outline-offset:2px}
.was-validated .ps-opciones:has(input:invalid) .invalid-feedback{display:block}
.was-validated .ps-opciones:has(input:invalid) .ps-opcion{border-color:#dc3545}

/* el resumen del paso 2 tambien se ve en celular (bajo el formulario) */
.ps-resumen-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ps-modificar{font-size:14px;font-weight:500;color:var(--ps-verde);text-decoration:underline}
.ps-resumen--pago .ps-lista li{grid-template-columns:minmax(0,1fr) auto}
.ps-pagar{width:100%;border:none;cursor:pointer;font-family:inherit}
.ps-pagar:disabled{background:#E4E8E5;color:var(--ps-gris);cursor:not-allowed}

/* ---------- Paso 3: resultado del pago (respuestaTransbank.aspx) ---------- */
.ps-resultado-wrap{max-width:820px;display:flex;flex-direction:column;gap:24px}
.ps-resultado{display:flex;gap:20px;align-items:flex-start;background:#fff;border:1px solid var(--ps-borde);border-top:5px solid var(--ps-verde);border-radius:18px;padding:28px}
.ps-resultado--error{border-top-color:#B3261E}
.ps-resultado--aviso{border-top-color:#B7791F}
.ps-resultado-icono{flex:0 0 56px;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;background:var(--ps-verde)}
.ps-resultado--error .ps-resultado-icono{background:#B3261E}
.ps-resultado--aviso .ps-resultado-icono{background:#B7791F}
.ps-resultado-texto{display:flex;flex-direction:column;gap:10px;min-width:0}
.ps-resultado-texto h2{font-size:24px;font-weight:700;color:var(--ps-texto)}
.ps-resultado-texto p,.ps-resultado-texto li{font-size:15px;line-height:1.55;color:var(--ps-texto-2)}
.ps-resultado-texto ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.ps-resultado-texto a:not(.ps-continuar):not(.ps-secundario){color:var(--ps-verde);font-weight:600}
.ps-resultado-acciones{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px}
.ps-resultado-acciones .ps-continuar{padding:0 28px}
.ps-secundario{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border-radius:999px;border:2px solid var(--ps-verde);color:var(--ps-verde);font-weight:600;font-size:15px;text-decoration:none}
.ps-secundario:hover{color:var(--ps-verde-oscuro);background:var(--ps-verde-suave)}

.ps-detalle .ps-bloque h2{margin-bottom:16px}
.ps-datos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 24px;margin:0}
.ps-datos dt{font-size:13px;font-weight:500;color:var(--ps-gris)}
.ps-datos dd{margin:2px 0 0;font-size:15px;color:var(--ps-texto);overflow-wrap:anywhere}
.ps-datos-ancho{grid-column:1 / -1}
.ps-datos-destacado{font-size:20px !important;font-weight:700;color:var(--ps-verde) !important}

@media (max-width: 860px){
    .ps-paso--hecho .ps-paso-texto,.ps-paso--hecho a{padding:0}
    .ps-resultado{flex-direction:column;padding:22px}
    .ps-resultado-texto h2{font-size:21px}
    .ps-resultado-acciones > a{flex:1 1 100%}
    .ps-datos{grid-template-columns:minmax(0,1fr)}
}

@media (max-width: 860px){
    .ps-campos{grid-template-columns:minmax(0,1fr)}
    .ps-bloque{padding:18px}
    .ps-mini{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;padding:12px 16px;border-radius:12px;background:var(--ps-verde-suave);color:var(--ps-verde);font-weight:600;font-size:15px;text-decoration:none}
    .ps-mini-ver{font-size:13px;font-weight:500;text-decoration:underline}
    .ps-resumen.ps-resumen--pago{display:flex;position:static;margin-bottom:24px}
}

/* Barra inferior en celular */
.ps-barra{display:none}

@media (max-width: 860px){
    .ps-pasos{flex-direction:column;gap:6px;margin-bottom:20px}
    .ps-paso{background:transparent;border:none;padding:0}
    .ps-cuerpo{grid-template-columns:minmax(0,1fr);gap:0}
    .ps-srv{grid-template-columns:88px minmax(0,1fr);gap:12px;padding:12px}
    .ps-srv-foto{width:88px;height:88px}
    .ps-srv-accion{grid-column:1 / -1;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap;min-width:0;border-top:1px solid var(--ps-borde);padding-top:12px}
    .ps-resumen{display:none}
    .ps-ayuda{flex-direction:column;align-items:flex-start}
    .ps-barra{display:flex;position:sticky;bottom:0;z-index:20;margin:0 -16px;background:#fff;border-top:1px solid var(--ps-borde);box-shadow:0 -6px 18px rgba(0,0,0,.08);padding:12px 16px;align-items:center;justify-content:space-between;gap:12px}
    .ps-barra .t{display:flex;flex-direction:column;font-size:12px;color:var(--ps-gris)}
    .ps-barra .t strong{font-size:20px;color:var(--ps-verde)}
    .ps-barra .ps-continuar{min-height:48px;padding:0 20px;font-size:15px}
}