/* ============================================================
   Portal de clientes — Fiber Solution (tema oscuro, consistente
   con el panel admin pero más simple: tarjetas centradas).
   ============================================================ */
:root {
    --p-bg: #0f172a;
    --p-surface: #1e293b;
    --p-surface-2: #263548;
    --p-border: #334155;
    --p-text: #e2e8f0;
    --p-muted: #94a3b8;
    --p-primary: #3b82f6;
    --p-green: #22c55e;
    --p-amber: #f59e0b;
    --p-red: #ef4444;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--p-bg);
    color: var(--p-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

a { color: var(--p-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Barra superior */
.p-topbar {
    background: var(--p-surface);
    border-bottom: 1px solid var(--p-border);
    padding: .65rem 1rem;
    display: flex;
    align-items: center;
    gap: .75rem;
}
.p-topbar .p-brand {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--p-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.p-topbar .p-brand i { color: var(--p-primary); font-size: 1.35rem; }
.p-topbar .p-spacer { flex: 1; }
.p-topbar .p-user {
    font-size: .85rem;
    color: var(--p-muted);
    display: flex;
    align-items: center;
    gap: .4rem;
}
.p-topbar .p-user i { color: var(--p-primary); }

/* Contenido centrado */
.p-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem 1rem 3rem;
    gap: 1.25rem;
    width: 100%;
}
.p-col { width: 100%; max-width: 640px; display: flex; flex-direction: column; gap: 1.25rem; }

/* Tarjetas */
.p-card {
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: .9rem;
    padding: 1.25rem;
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .25);
}
.p-card h2 {
    margin: 0 0 .9rem;
    font-size: 1rem;
    font-weight: 600;
    color: var(--p-text);
    display: flex;
    align-items: center;
    gap: .5rem;
}
.p-card h2 i { color: var(--p-primary); }

/* Login */
.p-login-body {
    justify-content: center;
    align-items: center;
    padding: 2rem 1rem;
}
.p-login {
    width: 100%;
    max-width: 400px;
}
.p-login .p-logo {
    text-align: center;
    margin-bottom: 1.25rem;
}
.p-logo i {
    font-size: 2.75rem;
    color: var(--p-primary);
}
.p-logo h1 {
    margin: .5rem 0 .15rem;
    font-size: 1.3rem;
}
.p-logo p { margin: 0; color: var(--p-muted); font-size: .85rem; }

/* Formularios */
.p-field { margin-bottom: .9rem; }
.p-field label {
    display: block;
    font-size: .8rem;
    color: var(--p-muted);
    margin-bottom: .3rem;
}
.p-input, .p-select, .p-file {
    width: 100%;
    background: var(--p-surface-2);
    border: 1px solid var(--p-border);
    color: var(--p-text);
    border-radius: .55rem;
    padding: .55rem .7rem;
    font-size: .95rem;
    outline: none;
    transition: border-color .15s;
}
.p-input:focus, .p-select:focus { border-color: var(--p-primary); }
.p-file { padding: .4rem .6rem; }
.p-file::file-selector-button {
    background: var(--p-primary);
    color: #fff;
    border: 0;
    border-radius: .4rem;
    padding: .35rem .8rem;
    margin-right: .6rem;
    cursor: pointer;
}

/* Inputs de solo lectura (monto / período del formulario de pago) */
.p-locked {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--p-surface-2);
    border: 1px solid var(--p-border);
    border-radius: .55rem;
    padding: .55rem .7rem;
    font-size: .95rem;
    font-weight: 600;
}
.p-locked i { color: var(--p-amber); font-size: .85rem; }

/* Monto a pagar en la ficha Mi servicio (texto limpio, sin rectángulo) */
.p-monto-v {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--p-green);
    text-shadow: 0 0 12px rgba(34, 197, 94, .35);
}

.p-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border: 0;
    border-radius: .6rem;
    padding: .6rem 1.1rem;
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter .15s;
}
.p-btn:hover { filter: brightness(1.12); }
.p-btn-primary { background: var(--p-primary); color: #fff; width: 100%; }
.p-btn-ghost { background: transparent; color: var(--p-muted); border: 1px solid var(--p-border); }
.p-btn-block { width: 100%; }

/* Datos del cliente */
.p-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .75rem;
}
.p-grid .p-cell { min-width: 0; }
.p-grid .p-cell .p-k {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--p-muted);
}
.p-grid .p-cell .p-v { font-weight: 600; font-size: .95rem; word-break: break-word; }

/* Badges de estado */
.p-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .75rem;
    font-weight: 600;
    padding: .28rem .7rem;
    border-radius: 20px;
}
.p-badge-ok   { background: rgba(34, 197, 94, .15);  color: var(--p-green); }
.p-badge-amber{ background: rgba(245, 158, 11, .15); color: var(--p-amber); }
.p-badge-bad  { background: rgba(239, 68, 68, .15);  color: var(--p-red); }
.p-badge-mute { background: var(--p-surface-2);      color: var(--p-muted); }

/* Banners */
.p-banner {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    border-radius: .7rem;
    padding: .8rem 1rem;
    font-size: .88rem;
    border: 1px solid;
}
.p-banner i { font-size: 1.1rem; margin-top: .1rem; }
.p-banner-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); color: #fbbf24; }
.p-banner-danger  { background: rgba(239, 68, 68, .12);  border-color: rgba(239, 68, 68, .35);  color: #fca5a5; }
.p-banner-info    { background: rgba(59, 130, 246, .12);  border-color: rgba(59, 130, 246, .35);  color: #93c5fd; }
.p-banner-ok      { background: rgba(34, 197, 94, .12);   border-color: rgba(34, 197, 94, .35);   color: #86efac; }

/* Tabla de historial */
.p-table-wrap { overflow-x: auto; }
table.p-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .88rem;
}
.p-table th {
    text-align: left;
    color: var(--p-muted);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .45rem .6rem;
    border-bottom: 1px solid var(--p-border);
    white-space: nowrap;
}
.p-table td {
    padding: .55rem .6rem;
    border-bottom: 1px solid rgba(51, 65, 85, .5);
    vertical-align: middle;
}
.p-table tr:last-child td { border-bottom: 0; }
.p-table .p-right { text-align: right; white-space: nowrap; }

/* Fila expandible del historial */
.p-fila-detalle { display: none; }
.p-fila-detalle.abierto { display: table-row; }
.p-fila-detalle td {
    background: rgba(38, 53, 72, .45);
    font-size: .82rem;
    color: var(--p-muted);
    padding: .5rem .6rem .75rem;
}
.p-fila-detalle .p-det-grid { display: grid; grid-template-columns: repeat(2, auto); gap: .15rem 1.25rem; }
.p-fila-detalle .p-det-grid span:nth-child(odd) { color: var(--p-muted); }
.p-fila-detalle .p-det-grid span:nth-child(even) { color: var(--p-text); font-weight: 600; }
.p-fila-btn {
    background: none;
    border: 0;
    color: var(--p-primary);
    cursor: pointer;
    font-size: .85rem;
    padding: .2rem;
}

/* Comprobante en el historial */
.p-comp {
    display: inline-block;
    max-width: 120px;
    border-radius: .45rem;
    overflow: hidden;
    border: 1px solid var(--p-border);
    line-height: 0;
}
.p-comp img { width: 100%; height: auto; display: block; }

/* Lista de comprobantes múltiples */
.p-comp-list {
    display: flex;
    gap: .4rem;
    flex-wrap: wrap;
    align-items: flex-start;
}
.p-comp-list .p-comp {
    max-width: 80px;
}

/* Preview de archivos seleccionados */
.p-file-preview {
    margin-top: .5rem;
    background: var(--p-surface-2);
    border: 1px solid var(--p-border);
    border-radius: .5rem;
    padding: .5rem;
}
.p-file-list {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.p-file-item {
    display: flex;
    align-items: center;
    gap: .5rem;
    font-size: .82rem;
    color: var(--p-text);
    padding: .3rem .5rem;
    background: rgba(59, 130, 246, .1);
    border-radius: .4rem;
}
.p-file-item i {
    color: var(--p-primary);
    font-size: 1rem;
}
.p-file-item span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.p-file-item small {
    color: var(--p-muted);
    font-size: .72rem;
    flex-shrink: 0;
}

/* Pie */
.p-footer {
    text-align: center;
    color: var(--p-muted);
    font-size: .78rem;
    padding: .75rem 1rem 1.5rem;
}
.p-footer-brand {
    color: #ffffff;
    font-weight: 600;
    letter-spacing: .02em;
}

/* Flash del portal (reusa el patrón setFlash de auth.php) */
.p-flash {
    border-radius: .7rem;
    padding: .8rem 1rem;
    font-size: .9rem;
    border: 1px solid;
}
.p-flash-success { background: rgba(34, 197, 94, .12); border-color: rgba(34, 197, 94, .35); color: #86efac; }
.p-flash-error   { background: rgba(239, 68, 68, .12);  border-color: rgba(239, 68, 68, .35);  color: #fca5a5; }
.p-flash-warning { background: rgba(245, 158, 11, .12); border-color: rgba(245, 158, 11, .35); color: #fbbf24; }

/* Validación visual del formulario de pago (campos obligatorios) */
.p-field.p-error .p-input,
.p-field.p-error .p-file {
    border-color: var(--p-red);
    background: rgba(239, 68, 68, .08);
}
.p-field.p-error .p-input:focus { border-color: var(--p-red); }
.p-error-msg {
    margin-top: .35rem;
    font-size: .78rem;
    color: var(--p-red);
    display: flex;
    align-items: center;
    gap: .35rem;
}
@keyframes p-shake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-3px); }
    75%      { transform: translateX(3px); }
}
.p-field.p-error { animation: p-shake .18s ease-in-out 2; }

@media (max-width: 520px) {
    .p-grid { grid-template-columns: 1fr; }
    .p-topbar .p-user span { display: none; }

    /* Pago móvil: filas cómodas al tacto en pantallas pequeñas */
    .p-pm-row { padding: .55rem .8rem; }
    .p-pm-v { font-size: 1.1rem; }
    .p-pm-copy { padding: .55rem .9rem; font-size: .8rem; }
    #pm-copiar-todo { width: 100%; }
}

/* ============================================================
   Pago móvil — datos copiables (Config → Corte → pm_*)
   ============================================================ */
.p-pm-grid {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-bottom: .9rem;
}
.p-pm-row {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--p-surface-2);
    border: 1px solid var(--p-border);
    border-radius: .6rem;
    padding: .5rem .75rem;
}
.p-pm-k {
    font-size: .68rem;
    color: var(--p-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    min-width: 64px;
    flex-shrink: 0;
}
.p-pm-v {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    font-size: 1.05rem;
    word-break: break-all;
    user-select: all;
    -webkit-user-select: all;
}
.p-pm-copy {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    flex-shrink: 0;
    background: var(--p-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: .38rem .75rem;
    cursor: pointer;
    line-height: 1;
    font-size: .74rem;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(59, 130, 246, .35);
    transition: all .15s ease;
}
.p-pm-copy:hover { background: #2563eb; }
.p-pm-copy:active { transform: scale(.96); }
.p-pm-copy.copiado { background: var(--p-green); color: #fff; }
.p-btn.copiado { color: var(--p-green); }
.p-btn-sm { padding: .38rem .75rem; font-size: .82rem; }

/* SweetAlert2 dark theme */
.dark-swal,
.dark-swal .swal2-popup {
    background: var(--p-surface) !important;
    color: var(--p-text) !important;
}
.dark-swal .swal2-title {
    color: var(--p-text) !important;
}
.dark-swal .swal2-html-container {
    color: var(--p-muted) !important;
    margin: 0 !important;
}
.dark-swal .swal2-icon {
    border-color: var(--p-green) !important;
}
.dark-swal .swal2-icon .swal2-icon-content {
    color: var(--p-green) !important;
}
.dark-swal .swal2-actions {
    gap: .75rem !important;
}
.dark-swal .swal2-styled {
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: .6rem 1.5rem !important;
}
.dark-swal .swal2-styled.swal2-confirm {
    background: var(--p-primary) !important;
    border: none !important;
}
.dark-swal .swal2-styled.swal2-cancel {
    background: transparent !important;
    border: 1px solid var(--p-border) !important;
    color: var(--p-muted) !important;
}
.dark-swal .swal2-styled.swal2-cancel:hover {
    background: var(--p-surface-2) !important;
}
.dark-swal .swal2-close {
    color: var(--p-muted) !important;
}
.dark-swal .swal2-close:hover {
    color: var(--p-text) !important;
}