/* WP Buzón Papelerías — Mi Cuenta (editor de perfil, archivos recibidos, plan) */

.wpb-account { max-width: 760px; }
.wpb-account .wpb-public-link { margin: 0 0 1em; }
.wpb-account .wpb-public-link code { background: #f3f4f6; padding: 2px 6px; border-radius: 4px; }
.wpb-poster-row { margin: 0 0 1.3em; }
.wpb-poster-row .button { display: inline-flex; align-items: center; gap: .5em; }
.wpb-poster-row .wpb-cta-ico { font-size: 1.1em; line-height: 1; }
.wpb-poster-row small { display: block; color: #6b7280; margin-top: .35em; }

.wpb-form .wpb-field { margin: 0 0 1.1em; display: block; }
.wpb-form label { display: block; font-weight: 600; margin-bottom: .35em; }
.wpb-form input[type="text"],
.wpb-form input[type="email"],
.wpb-form input[type="url"],
.wpb-form textarea {
    width: 100%;
    padding: .55em .7em;
    border: 1px solid #cfd4da;
    border-radius: 6px;
    box-sizing: border-box;
}
.wpb-form small { color: #6b7280; display: block; margin-top: .3em; }

.wpb-handle-input { display: flex; align-items: stretch; }
.wpb-handle-input .wpb-at {
    display: flex; align-items: center;
    padding: 0 .65em;
    background: #f3f4f6; border: 1px solid #cfd4da; border-right: 0;
    border-radius: 6px 0 0 6px; font-weight: 700; color: #374151;
}
.wpb-handle-input input { border-radius: 0 6px 6px 0 !important; }

.wpb-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2em; }
@media (max-width: 600px) { .wpb-grid2 { grid-template-columns: 1fr; } }

.wpb-banner-preview {
    display: block; width: 100%; height: 140px;
    background-color: #000;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    border-radius: 8px; margin-bottom: .6em; border: 1px solid #e5e7eb;
}
.wpb-banner-preview.is-empty {
    border: 2px dashed #cbd5e1; background: #f8fafc;
}
.wpb-banner-rec { color: #6b7280; font-weight: 400; margin-left: .5em; font-size: .85em; }

/* Editor de banner (modal + Cropper) */
.wpb-modal[hidden] { display: none; }
.wpb-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wpb-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 24, 39, .6); }
.wpb-modal-dialog { position: relative; background: #fff; border-radius: 14px; max-width: 560px; width: 100%; max-height: 92vh; overflow: auto; padding: 1.3em 1.5em 1.5em; box-shadow: 0 20px 60px rgba(0, 0, 0, .3); }
.wpb-modal-close { position: absolute; top: .35em; right: .5em; background: none; border: 0; font-size: 1.8em; line-height: 1; cursor: pointer; color: #6b7280; }
.wpb-modal-close:hover { color: #111; }
.wpb-bedit-dialog { max-width: 660px; }
.wpb-bedit-area { max-height: 52vh; }
.wpb-bedit-area img { max-width: 100%; display: block; }
.wpb-bedit-area .cropper-container img { filter: var(--wpb-f, none); }
.wpb-bedit-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .6em 1.4em; align-items: center; margin: 1em 0 .4em; }
.wpb-bedit-controls label { display: flex; flex-direction: column; font-size: .85em; font-weight: 600; gap: .25em; }
.wpb-bedit-controls input[type="range"] { width: 100%; }
.wpb-bedit-controls .wpb-bedit-reset { grid-column: 1 / -1; justify-self: start; }
.wpb-bedit-hint { color: #6b7280; font-size: .85em; margin: .2em 0 1em; }
.wpb-bedit-actions { margin: 0; }
.wpb-checkbox { font-weight: 400 !important; display: inline-flex; gap: .4em; align-items: center; margin-top: .5em; }

/* Apariencia del botón (color + forma) */
.wpb-btn-appearance { display: flex; flex-wrap: wrap; gap: .4em 1.4em; align-items: center; margin-top: .6em; }
.wpb-btn-appearance .wpb-inline-field { display: inline-flex; align-items: center; gap: .45em; font-size: .9em; }
.wpb-btn-appearance input[type="color"] { width: 42px; height: 28px; padding: 0; border: 1px solid #cfd4da; border-radius: 6px; cursor: pointer; }
.wpb-btn-appearance select { padding: .35em .5em; border: 1px solid #cfd4da; border-radius: 6px; }

/* Selector de archivo compatible con el tema (banner) */
.wpb-file-pick { display: flex; align-items: center; gap: .7em; cursor: pointer; flex-wrap: wrap; }
.wpb-file-btn {
    display: inline-block; background: #eef2ff; color: #1e3a8a; border: 1px solid #c7d2fe;
    border-radius: 8px; padding: .55em .95em; font-weight: 600; white-space: nowrap;
}
.wpb-file-pick:hover .wpb-file-btn { background: #e0e7ff; }
.wpb-file-name { color: #6b7280; font-size: .92em; word-break: break-all; }

.wpb-submit .button { font-size: 1em; }

/* Tabla de archivos recibidos (Fase 4) */
.wpb-received-filters { display: flex; flex-wrap: wrap; gap: .6em; align-items: end; margin-bottom: 1em; }
.wpb-received-filters label { font-weight: 600; font-size: .85em; display: block; }
.wpb-received-filters input { padding: .45em .6em; border: 1px solid #cfd4da; border-radius: 6px; }
.wpb-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.wpb-table-wrap .wpb-table { min-width: 600px; }
.wpb-table { width: 100%; border-collapse: collapse; }
.wpb-table th, .wpb-table td { padding: .6em .5em; border-bottom: 1px solid #e5e7eb; text-align: left; vertical-align: top; }
.wpb-table th { font-size: .8em; text-transform: uppercase; letter-spacing: .03em; color: #6b7280; }
.wpb-file-cell { display: flex; align-items: center; gap: .6em; }
.wpb-thumb { width: 40px; height: 40px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.wpb-thumb-ext { display: flex; align-items: center; justify-content: center; background: #eef2ff; color: #1e3a8a; font-weight: 700; font-size: .62em; }
.wpb-file-cell-name { word-break: break-word; }
.wpb-file-open { cursor: pointer; }
.wpb-file-open:hover .wpb-file-cell-name { text-decoration: underline; color: #2563eb; }

/* Modal de vista previa (imagen / PDF) */
.wpb-pv-modal { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.wpb-pv-back { position: absolute; inset: 0; background: rgba(17, 24, 39, .7); }
.wpb-pv-dialog { position: relative; background: #fff; border-radius: 12px; width: min(900px, 96vw); height: min(90vh, 900px); display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, .4); }
.wpb-pv-head { display: flex; align-items: center; gap: .8em; padding: .6em .9em; border-bottom: 1px solid #e5e7eb; }
.wpb-pv-name { font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wpb-pv-close { background: none; border: 0; font-size: 1.7em; line-height: 1; cursor: pointer; color: #6b7280; padding: 0 .15em; }
.wpb-pv-close:hover { color: #111; }
.wpb-pv-body { flex: 1; overflow: auto; display: flex; align-items: center; justify-content: center; background: #f3f4f6; }
.wpb-pv-media { max-width: 100%; max-height: 100%; display: block; }
.wpb-pv-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.wpb-pv-none { padding: 2em; color: #6b7280; text-align: center; }
body.wpb-modal-open { overflow: hidden; }
.wpb-countdown { font-variant-numeric: tabular-nums; font-weight: 600; }
.wpb-countdown.is-expired { color: #b91c1c; }
.wpb-rowact { display: inline-flex; gap: .4em; flex-wrap: wrap; }
.wpb-ident-link { font-weight: 600; text-decoration: none; }
.wpb-ident-link:hover { text-decoration: underline; }
.wpb-muted { color: #9ca3af; }
.wpb-ident-edit { background: none; border: 0; cursor: pointer; color: #9ca3af; font-size: 1em; padding: 0 .25em; line-height: 1; }
.wpb-ident-edit:hover { color: #2563eb; }
.wpb-active-filter { background: #eef2ff; border: 1px solid #c7d2fe; border-radius: 8px; padding: .4em .8em; display: inline-flex; align-items: center; gap: .5em; margin: 0 0 1em; }
.wpb-clear-filter { text-decoration: none; font-weight: 700; color: #6b7280; font-size: 1.15em; line-height: 1; }
.wpb-clear-filter:hover { color: #111; }

/* Medidor circular de uso del plan (barra lateral de Mi Cuenta) */
.wpb-usage-gauge {
    display: flex; align-items: center; gap: .8em;
    padding: .7em .85em; margin: 0 0 1em;
    border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
}
.wpb-gauge { width: 58px; height: 58px; flex-shrink: 0; }
.wpb-gauge-bg { fill: none; stroke: #eef0f3; stroke-width: 3.4; }
.wpb-gauge-fg { fill: none; stroke: #2563eb; stroke-width: 3.4; stroke-linecap: round; transition: stroke-dasharray .5s ease; }
.wpb-usage-gauge.is-warn .wpb-gauge-fg { stroke: #f59e0b; }
.wpb-usage-gauge.is-full .wpb-gauge-fg { stroke: #dc2626; }
.wpb-gauge-text { fill: #111827; font-size: 9px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.wpb-gauge-info { min-width: 0; line-height: 1.3; }
.wpb-gauge-info strong { display: block; }
.wpb-gauge-info span { font-size: .85em; color: #6b7280; }

/* Mi Plan (Fase 5) */
.wpb-tokens-line { font-size: 1.05em; }
.wpb-plan-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 1.1em 1.2em; margin-bottom: 1em; }
.wpb-plan-card.is-current { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb33; }
.wpb-usage-bar { height: 10px; background: #eef0f3; border-radius: 6px; overflow: hidden; margin: .5em 0; }
.wpb-usage-bar > span { display: block; height: 100%; background: #2563eb; }
.wpb-plans-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1em; }
.wpb-plans-grid .wpb-plan-card { margin-bottom: 0; display: flex; flex-direction: column; }
.wpb-plan-card h4 { margin: 0 0 .5em; }
.wpb-plan-specs { list-style: none; margin: 0 0 .8em; padding: 0; font-size: .9em; color: #374151; }
.wpb-plan-specs li { padding: .2em 0; border-bottom: 1px solid #f0f1f3; }
.wpb-current-tag { color: #2563eb; font-weight: 600; font-size: .85em; }
.wpb-pagination { margin-top: 1em; }
.wpb-pagination .wpb-page { display: inline-block; padding: .3em .6em; border: 1px solid #d1d5db; border-radius: 6px; margin-right: .25em; text-decoration: none; }
.wpb-pagination .wpb-page.is-current { background: #2563eb; color: #fff; border-color: #2563eb; }

.wpb-badge { display: inline-block; background: #d1fae5; color: #065f46; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; vertical-align: middle; }
.wpb-badge-warn { background: #fef3c7; color: #92400e; }