/**
* WC Pagos Parciales — estilos de frontend (página de gracias / shortcodes).
*/
.wcpp-checkout-choice {
margin: 12px 0;
padding: 12px 14px;
border: 1px dashed #c9c9c9;
border-radius: 8px;
background: #fafafa;
}
.wcpp-checkout-choice__title { margin: 0 0 6px; }
.wcpp-thankyou-pay {
margin: 24px 0;
padding: 18px;
border: 1px solid #e2e4e7;
border-radius: 10px;
background: #fff;
}
.wcpp-thankyou-pay h2 { margin-top: 0; font-size: 1.2em; }
.wcpp-thankyou-summary { font-size: 0.95em; }
.wcpp-thankyou-summary .wcpp-due { font-weight: 700; color: #b32d2e; }
.wcpp-thankyou-form .wcpp-field { margin-bottom: 14px; }
.wcpp-thankyou-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.wcpp-thankyou-form input[type="number"],
.wcpp-thankyou-form input[type="text"],
.wcpp-thankyou-form input[type="date"],
.wcpp-thankyou-form select,
.wcpp-thankyou-form textarea { width: 100%; max-width: 420px; }
.wcpp-thankyou-form .wcpp-hint { color: #646970; font-size: 0.85em; }
.wcpp-cedula-gate {
margin-bottom: 18px;
padding: 14px 16px;
border: 1px solid #e2e4e7;
border-radius: 8px;
background: #fbfbfc;
}
.wcpp-cedula-gate .wcpp-field { margin-bottom: 10px; }
.wcpp-cedula-gate input[type="text"] { max-width: 220px; }
.wcpp-cedula-status { margin-left: 8px; color: #646970; font-size: 0.9em; }
.wcpp-cedula-msg { margin-top: 8px; font-size: 0.9em; min-height: 1em; }
.wcpp-cedula-msg.wcpp-cedula-error { color: #b32d2e; font-weight: 600; }
.wcpp-cedula-msg.wcpp-cedula-info { color: #8a6d00; }
.wcpp-cedula-msg.wcpp-cedula-ok { color: #135e2b; }
.wcpp-cedula-override { display: block; margin-top: 10px; font-weight: 600; color: #b32d2e; }
/* Bloque "invitar a completar perfil" tras registrar el abono (página de gracias). */
.wcpp-profile-invite {
margin-top: 16px;
padding: 14px 16px;
border: 1px solid #a7e3b6;
border-radius: 8px;
background: #f4fbf6;
}
.wcpp-profile-invite h4 { margin: 0 0 4px; }
.wcpp-profile-invite-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.wcpp-invite-wa { background: #25d366 !important; border-color: #25d366 !important; color: #fff !important; }
.wcpp-profile-invite-done { margin-top: 12px; color: #135e2b; font-weight: 600; }
.wcpp-calc-row { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.wcpp-calc-row select { width: auto; min-width: 120px; }
.wcpp-calc-output {
font-weight: 600;
background: #f6f7f7;
border: 1px solid #e2e4e7;
border-radius: 6px;
padding: 6px 10px;
min-width: 120px;
}
.wcpp-method-details {
margin-top: 8px;
padding: 10px 12px;
background: #f6f7f7;
border: 1px solid #e2e4e7;
border-radius: 8px;
}
.wcpp-md-logo img { max-height: 40px; max-width: 120px; margin-bottom: 6px; }
.wcpp-md-line { font-size: 0.9em; }
.wcpp-form-actions { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.wcpp-pf-error { color: #b32d2e; margin-top: 8px; min-height: 1em; }
.wcpp-thankyou-done {
margin-top: 12px;
padding: 12px 14px;
border-radius: 8px;
background: #edfaef;
border: 1px solid #a7e3b6;
color: #135e2b;
font-weight: 600;
}
/* Precio convertido en frontend (solo vista). */
.wcpp-price-converted { white-space: nowrap; }
/* ------------------------------------------------------------------ *
* F12 — Calculadora [wcpp_calculadora] y panel [wcpp_panel]
* ------------------------------------------------------------------ */
.wcpp-calc-card {
max-width: 420px;
margin: 1em 0;
border: 1px solid #e2e4e7;
border-radius: 14px;
background: #fff;
box-shadow: 0 6px 24px rgba(0,0,0,.06);
overflow: hidden;
}
.wcpp-calc-card__head {
padding: 14px 18px;
background: linear-gradient(135deg, #2271b1, #135e96);
color: #fff;
}
.wcpp-calc-card__head h3 { margin: 0; font-size: 1.05rem; color: #fff; }
.wcpp-calc-card__body { padding: 18px; }
.wcpp-calc-field { margin-bottom: 14px; }
.wcpp-calc-field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; color: #50575e; }
.wcpp-calc-field input,
.wcpp-calc-field select {
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid #dcdcde;
border-radius: 10px;
font-size: 1rem;
background: #fff;
}
.wcpp-calc-field input:focus,
.wcpp-calc-field select:focus { outline: 2px solid #2271b1; outline-offset: 1px; }
.wcpp-calc-row {
display: flex;
align-items: end;
gap: 10px;
}
.wcpp-calc-row .wcpp-calc-field { flex: 1; margin-bottom: 0; }
.wcpp-calc-swap { padding-bottom: 12px; color: #8c8f94; font-size: 1.2rem; }
.wcpp-calc-result {
margin-top: 16px;
padding: 14px 16px;
border-radius: 12px;
background: #f6f7f7;
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.wcpp-calc-result__label { font-size: .8rem; color: #646970; text-transform: uppercase; letter-spacing: .03em; }
.wcpp-calc-result__value { font-size: 1.4rem; font-weight: 700; color: #1d2327; font-variant-numeric: tabular-nums; }
.wcpp-calc-card__note { margin: 0; padding: 0 18px 16px; font-size: .78rem; color: #8c8f94; }
.wcpp-frontend-panel { margin: 1em 0; }
.wcpp-frontend-panel__title { margin: 0 0 6px; }
.wcpp-frontend-panel__intro { color: #50575e; }
.wcpp-panel-denied { padding: 14px; border-radius: 10px; background: #fcf0f0; color: #8a2424; border: 1px solid #f0c2c2; }
@media (max-width: 480px) {
.wcpp-calc-card { max-width: 100%; }
.wcpp-calc-row { flex-wrap: wrap; }
.wcpp-calc-swap { display: none; }
.wcpp-calc-row .wcpp-calc-field { flex-basis: 100%; margin-bottom: 12px; }
}
/* Panel de frontend (réplica del admin) */
.wcpp-panel-tabs { margin-bottom: 16px; }
.wcpp-panel-notice {
margin: 0 0 14px; padding: 10px 14px; border-radius: 8px;
background: #edfaef; border: 1px solid #a7e3b6; color: #135e2b;
}
.wcpp-panel-body .wcpp-card { margin-top: 12px; }
/* Ámbito para que los estilos de tabla/formulario del admin se apliquen bien. */
.wcpp-admin-scope .form-table th { width: 220px; }
.wcpp-admin-scope table.widefat { margin-top: 10px; }
/* Tabla nativa de "Registro de pagos" en el panel de frontend */
.wcpp-fe-filters { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.wcpp-fe-filters input[type="search"] { min-width: 220px; }
.wcpp-fe-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.wcpp-fe-table th, .wcpp-fe-table td { padding: 8px 10px; text-align: left; vertical-align: middle; border-bottom: 1px solid #e2e4e7; font-size: .92em; }
.wcpp-fe-table thead th { background: #f6f7f7; font-weight: 600; }
.wcpp-fe-table .wcpp-row-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.wcpp-fe-pagination { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.wcpp-fe-pageinfo { color: #646970; font-size: .9em; }
/* F37 — fila meta (correo/teléfono/cédula/fechas) de ancho completo, pegada
debajo de la fila primaria de cada registro. El fondo (blanco/alterno) lo
pone la regla de zebra striping de F38, más abajo. */
.wcpp-fe-table tr.wcpp-fe-tr-primary td { border-bottom: none; }
.wcpp-fe-table tr.wcpp-fe-tr-meta td.wcpp-fe-meta-td {
border-top: none; padding-top: 2px; font-size: .88em;
}
.wcpp-fe-table tr.wcpp-fe-tr-meta:last-child td.wcpp-fe-meta-td { border-bottom: 1px solid #e2e4e7; }
@media screen and (max-width: 782px) {
/* La celda meta se pinta como bloque (los chips ya se envuelven solos),
no con el patrón "label a la izquierda / valor a la derecha" genérico. */
.wcpp-fe-table td.wcpp-fe-meta-td { display: block !important; }
.wcpp-fe-table td.wcpp-fe-meta-td::before { content: none !important; }
/* Las dos de un mismo registro se pintan como una sola "tarjeta". */
.wcpp-fe-table tr.wcpp-fe-tr-primary {
margin-bottom: 0; border-bottom: none; border-radius: 8px 8px 0 0;
}
.wcpp-fe-table tr.wcpp-fe-tr-meta {
margin-top: -1px; border-top: none; border-radius: 0 0 8px 8px; padding-top: 2px;
}
}
/* F38 — alternancia de fondo por REGISTRO (las 2
comparten el mismo
fondo: blanco por defecto, #eeefef en los registros impares) y botones
de acción redondos con icono + color propio. */
.wcpp-fe-table tr.wcpp-fe-tr-primary td,
.wcpp-fe-table tr.wcpp-fe-tr-meta td.wcpp-fe-meta-td { background: #ffffff; }
.wcpp-fe-table tr.wcpp-row-alt.wcpp-fe-tr-primary td,
.wcpp-fe-table tr.wcpp-row-alt.wcpp-fe-tr-meta td.wcpp-fe-meta-td { background: #eeefef; }
.wcpp-fe-table .wcpp-icon-actions { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 782px) {
.wcpp-fe-table td:last-child .wcpp-icon-actions { justify-content: flex-start; }
}
@media (max-width: 782px) {
.wcpp-fe-table thead { display: none; }
.wcpp-fe-table tr {
display: block;
margin-bottom: 12px;
border: 1px solid #e2e4e7;
border-radius: 8px;
padding: 4px 12px;
background: #fff;
}
.wcpp-fe-table td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
border: none;
border-bottom: 1px solid #f0f0f1;
padding: 9px 0;
}
.wcpp-fe-table tr td:last-child { border-bottom: 0; }
.wcpp-fe-table td::before {
content: attr(data-label);
font-weight: 600;
color: #50575e;
flex: 0 0 40%;
text-align: left;
}
/* La columna de acciones ocupa el ancho completo y apila sus botones. */
.wcpp-fe-table td:last-child { flex-direction: column; align-items: stretch; gap: 8px; }
.wcpp-fe-table td:last-child::before { flex-basis: auto; }
.wcpp-fe-table .wcpp-row-actions { justify-content: flex-start; }
}
/* ============================================================
F13 — Consulta de pedido del cliente ([wcpp_mis_pagos])
============================================================ */
.wcpp-lookup { max-width: 660px; margin: 0 auto; }
.wcpp-lookup-card {
border: 1px solid #e3e3e3;
border-radius: 10px;
padding: 22px;
background: #fff;
}
.wcpp-lookup-card h3 { margin: 0 0 6px; }
.wcpp-lookup-card h4 { margin: 18px 0 8px; }
.wcpp-lookup-intro { color: #555; margin: 0 0 16px; }
.wcpp-hint { color: #777; font-size: 13px; margin: 0 0 10px; }
.wcpp-lookup-error {
background: #fcf0f0;
color: #8a2424;
border: 1px solid #f0c2c2;
padding: 10px 12px;
border-radius: 8px;
margin-bottom: 14px;
}
.wcpp-lookup-form .wcpp-field { margin-bottom: 14px; }
.wcpp-lookup-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.wcpp-lookup-form input[type="text"] {
width: 100%;
padding: 9px 11px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
}
.wcpp-lookup-btn { margin-top: 4px; }
.wcpp-lookup-summary {
display: flex;
gap: 18px;
flex-wrap: wrap;
margin: 8px 0 6px;
font-size: 15px;
}
.wcpp-lookup-summary em { color: #666; font-style: normal; font-weight: 600; margin-right: 4px; }
.wcpp-lookup-summary .wcpp-due { font-weight: 700; }
.wcpp-lookup-abonos { width: 100%; border-collapse: collapse; margin-bottom: 8px; }
.wcpp-lookup-abonos th,
.wcpp-lookup-abonos td { text-align: left; padding: 8px 10px; border-bottom: 1px solid #eee; font-size: 14px; }
.wcpp-lookup-abonos th { color: #555; font-weight: 600; }
.wcpp-lookup-abonos .wcpp-deadline-overdue { color: #b32d2e; font-weight: 600; }
.wcpp-lookup-abonos .button-primary {
background: #2271b1; border-color: #2271b1; color: #fff;
border-radius: 4px; padding: 6px 12px; text-decoration: none; display: inline-block;
font-size: 13px; font-weight: 600;
}
.wcpp-lookup-abonos .button-primary:hover { background: #135e96; border-color: #135e96; }
.wcpp-lookup-done {
background: #edfaef;
color: #135e2b;
border: 1px solid #a7e3b6;
padding: 12px 14px;
border-radius: 8px;
margin-top: 12px;
}
.wcpp-lookup-clear { color: #135e2b; font-weight: 600; }
/* Badges (base + variantes) para el frontend */
.wcpp-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 999px;
font-size: 12px;
line-height: 1.6;
white-space: nowrap;
}
.wcpp-pay-paid { background: #edfaef; color: #135e2b; border: 1px solid #a7e3b6; }
.wcpp-pay-pending { background: #fff3e0; color: #9a5b00; border: 1px solid #f0c890; }
.wcpp-pay-rejected { background: #fcf0f0; color: #8a2424; border: 1px solid #f0c2c2; }
@media (max-width: 480px) {
.wcpp-lookup-summary { flex-direction: column; gap: 6px; }
.wcpp-lookup-card { padding: 16px; }
}
.wcpp-export-csv { margin-left: 6px; }
/* ============================================================
Pase responsive (móvil / tablet) — calculadora, panel, buscador
============================================================ */
/* --- Tablet y móvil: ≤ 782px --- */
@media (max-width: 782px) {
/* Pestañas del panel: fila desplazable en lugar de romper el layout. */
.wcpp-panel-tabs.nav-tab-wrapper {
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border-bottom: 1px solid #c3c4c7;
padding-bottom: 0;
margin-bottom: 14px;
scrollbar-width: thin;
}
.wcpp-panel-tabs .nav-tab {
float: none;
flex: 0 0 auto;
margin: 0 4px 0 0;
white-space: nowrap;
}
/* Filtros y acciones: en columna y a ancho completo. */
.wcpp-fe-filters { flex-direction: column; align-items: stretch; }
.wcpp-fe-filters input[type="search"],
.wcpp-fe-filters select,
.wcpp-fe-filters .button { width: 100%; min-width: 0; }
.wcpp-table-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wcpp-table-actions .button,
.wcpp-table-actions .wcpp-export-csv { flex: 1 1 auto; text-align: center; }
.wcpp-table-actions .description { flex-basis: 100%; }
/* Paginación centrada y con aire. */
.wcpp-fe-pagination { justify-content: center; flex-wrap: wrap; }
/* Objetivos táctiles cómodos (≈44px) en controles del ámbito frontend. */
.wcpp-admin-scope .button,
.wcpp-lookup .button,
.wcpp-calc-card .button,
.wcpp-admin-scope input,
.wcpp-admin-scope select,
.wcpp-lookup input,
.wcpp-lookup select { min-height: 42px; }
/* Buscador: tabla de abonos apilada con etiqueta de columna. */
.wcpp-lookup-abonos thead { display: none; }
.wcpp-lookup-abonos tr {
display: block;
border: 1px solid #eee;
border-radius: 8px;
padding: 4px 12px;
margin-bottom: 10px;
}
.wcpp-lookup-abonos td {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid #f2f2f2;
}
.wcpp-lookup-abonos tr td:last-child { border-bottom: 0; }
.wcpp-lookup-abonos td::before {
content: attr(data-label);
font-weight: 600;
color: #555;
flex: 0 0 40%;
}
}
/* --- Móvil: ≤ 600px --- */
@media (max-width: 600px) {
/* El panel usa todo el ancho del contenedor. */
.wcpp-frontend-panel { margin-left: 0; margin-right: 0; }
.wcpp-panel-body .wcpp-card { padding: 12px; }
/* Formularios de pago (modal y buscador): campos a ancho completo. */
.wcpp-payment-form .wcpp-calc-row,
.wcpp-thankyou-form .wcpp-calc-row { flex-direction: column; align-items: stretch; }
.wcpp-payment-form .wcpp-calc-row .wcpp-calc-field,
.wcpp-payment-form .wcpp-field { flex-basis: 100%; margin-bottom: 12px; }
.wcpp-payment-form input,
.wcpp-payment-form select,
.wcpp-payment-form textarea { width: 100%; box-sizing: border-box; }
.wcpp-payment-form .button { width: 100%; }
/* Resumen del buscador ya apila (heredado); reforzamos separación. */
.wcpp-lookup-summary { gap: 8px; }
/* Calculadora a ancho completo y campos cómodos. */
.wcpp-calc-card { max-width: 100%; }
.wcpp-calc-field input,
.wcpp-calc-field select { min-height: 42px; }
}
/* --- Modal del panel en pantallas pequeñas: abonos con scroll horizontal --- */
@media (max-width: 600px) {
.wcpp-modal-body { padding: 14px; }
.wcpp-abonos-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wcpp-abonos-table { min-width: 480px; }
}
/* ============================================================
F19 — Perfil de cliente / KYC ([wcpp_perfil_registro] / [wcpp_perfil_ver])
============================================================ */
.wcpp-profile-register,
.wcpp-profile-view { max-width: 640px; margin: 0 auto; }
.wcpp-profile-denied {
background: #fcf0f0;
color: #8a2424;
border: 1px solid #f0c2c2;
padding: 12px 14px;
border-radius: 8px;
}
.wcpp-profile-gate,
.wcpp-profile-form-wrap {
border: 1px solid #e3e3e3;
border-radius: 10px;
padding: 22px;
background: #fff;
margin-bottom: 16px;
}
.wcpp-profile-gate h3 { margin: 0 0 6px; }
.wcpp-profile-form .wcpp-field { margin-bottom: 14px; }
.wcpp-profile-form label { display: block; font-weight: 600; margin-bottom: 4px; }
.wcpp-profile-form input[type="text"],
.wcpp-profile-form input[type="email"],
.wcpp-profile-form input[type="file"],
.wcpp-profile-form textarea {
width: 100%;
max-width: 420px;
padding: 9px 11px;
border: 1px solid #ccc;
border-radius: 8px;
box-sizing: border-box;
}
.wcpp-profile-form input[readonly] { background: #f6f7f7; color: #555; }
.wcpp-pr-preview {
display: block;
max-width: 200px;
max-height: 200px;
margin-top: 8px;
border-radius: 8px;
border: 1px solid #e2e4e7;
}
.wcpp-pr-camera { margin: 10px 0; }
.wcpp-pr-video,
.wcpp-pr-camera .wcpp-pr-preview { max-width: 320px; width: 100%; border-radius: 8px; background: #000; }
.wcpp-pr-camera-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.wcpp-profile-terms {
margin: 18px 0 14px;
padding: 14px 16px;
border: 1px solid #e2e4e7;
border-radius: 8px;
background: #fbfbfc;
}
.wcpp-profile-terms h4 { margin: 0 0 8px; }
.wcpp-profile-terms-text {
max-height: 220px;
overflow-y: auto;
font-size: 0.9em;
color: #444;
padding-right: 6px;
}
.wcpp-profile-terms-check { display: block; margin-top: 10px; font-weight: 600; }
.wcpp-pr-error,
.wcpp-pg-error { color: #b32d2e; margin-top: 8px; min-height: 1em; }
.wcpp-pr-done {
margin-top: 12px;
padding: 12px 14px;
border-radius: 8px;
background: #edfaef;
border: 1px solid #a7e3b6;
color: #135e2b;
font-weight: 600;
}
.wcpp-pr-done .button { margin-top: 8px; }
/* --- Vista de perfil --- */
.wcpp-profile-card,
.wcpp-profile-orders {
border: 1px solid #e3e3e3;
border-radius: 10px;
padding: 22px;
background: #fff;
margin-bottom: 16px;
}
.wcpp-profile-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px 20px;
margin: 12px 0;
}
.wcpp-profile-grid .wcpp-pv-full { grid-column: 1 / -1; }
.wcpp-pv-label { display: block; font-size: 0.8em; color: #777; text-transform: uppercase; letter-spacing: 0.03em; }
.wcpp-pv-value { display: block; font-weight: 600; }
.wcpp-profile-images { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.wcpp-profile-images figure { margin: 0; }
.wcpp-profile-images img { max-width: 220px; max-height: 220px; border-radius: 8px; border: 1px solid #e2e4e7; display: block; }
.wcpp-profile-images figcaption { text-align: center; font-size: 0.85em; color: #666; margin-top: 4px; }
@media (max-width: 480px) {
.wcpp-profile-grid { grid-template-columns: 1fr; }
.wcpp-profile-images img { max-width: 100%; }
}