/* =====================================================================
   Portal de clientes -- estilo moderno compartido (Fase 55).
   Se carga DESPUES de los estilos de cada pagina del portal, asi que
   moderniza tarjetas, botones, estados y paneles en todas a la vez sin
   tocar la logica de cada pagina.
   ===================================================================== */
body.app-body{ background:#F4F7FB; }

/* Encabezado de cada pagina */
.app-main-header h1{ font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.01em; }
.app-main-header .subtitle{ font-size:.95rem; }

/* Paneles */
body.app-body .app-panel{ border-radius:18px; border:1px solid #E5E7EB; box-shadow:0 1px 2px rgba(13,13,13,.04), 0 8px 24px rgba(13,13,13,.04); }
body.app-body .app-panel h2{ font-size:1.02rem; letter-spacing:-.005em; }

/* Tarjetas de documentos (facturas, cotizaciones, trabajos, citas) */
.doc-card{
  position:relative; border-radius:16px !important; padding:18px 20px 18px 24px !important; margin-bottom:12px !important;
  border:1px solid #E5E7EB !important; box-shadow:0 1px 2px rgba(13,13,13,.04), 0 6px 18px rgba(13,13,13,.04) !important;
  overflow:hidden; transition:transform .15s ease, box-shadow .15s ease;
}
.doc-card:hover{ transform:translateY(-2px); box-shadow:0 12px 28px rgba(13,13,13,.08) !important; }
.doc-card::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:#CBD5E1; }
.doc-card:has(.status-sent)::before, .doc-card:has(.status-in_progress)::before{ background:#F59E0B; }
.doc-card:has(.status-overdue)::before, .doc-card:has(.status-declined)::before, .doc-card:has(.status-cancelled)::before{ background:#EF4444; }
.doc-card:has(.status-partial)::before, .doc-card:has(.status-past_due)::before{ background:#EAB308; }
.doc-card:has(.status-paid)::before, .doc-card:has(.status-accepted)::before, .doc-card:has(.status-completed)::before, .doc-card:has(.status-active)::before{ background:#10B981; }
.doc-card:has(.status-scheduled)::before, .doc-card:has(.status-draft)::before{ background:#0066FF; }
.doc-card:has(.status-requested)::before{ background:#7C3AED; }
.doc-card:has(.status-awaiting_deposit)::before{ background:#D97706; }
.doc-card .doc-title{ font-family:var(--font-heading); font-size:1rem; color:var(--jet-black); }
.doc-card .doc-sub{ font-size:.82rem !important; }
.doc-card .doc-amt{ font-size:1.2rem !important; }
.doc-card .doc-actions{ margin-top:14px !important; gap:8px !important; }

/* Estados */
.status-pill{ display:inline-flex !important; align-items:center; gap:6px; padding:4px 11px 4px 9px !important; font-size:.68rem !important; }
.status-pill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-requested{ background:#F5F3FF; color:#6D28D9; }
.status-awaiting_deposit{ background:#FFFBEB; color:#B45309; }
.status-open{ background:#EFF6FF; color:#1D4ED8; }
.status-closed{ background:#F1F5F9; color:#64748B; }

/* Botones */
body.app-body .app-main .btn{ border-radius:10px; font-weight:700; letter-spacing:.02em; transition:transform .15s ease, box-shadow .15s ease, filter .15s ease; }
body.app-body .app-main .btn:hover{ transform:translateY(-1px); }
body.app-body .app-main .btn-primary{ background:linear-gradient(135deg,#0066FF,#2F80FF); border-color:transparent; box-shadow:0 6px 16px rgba(0,102,255,.22); }
body.app-body .app-main .btn-primary:hover{ box-shadow:0 10px 22px rgba(0,102,255,.3); }
body.app-body .app-main .btn-secondary{ background:#fff; }
/* "Pay Now" / "Pay Deposit" / "Accept" en verde, para que se distingan */
body.app-body .doc-actions .btn-primary[onclick*="Payment"], body.app-body .doc-actions .btn-primary[onclick*="pay"],
body.app-body .doc-actions .btn-primary[onclick*="accepted"]{ background:linear-gradient(135deg,#059669,#10B981); box-shadow:0 6px 16px rgba(5,150,105,.25); }

/* Pago con tarjeta */
.pay-panel{ background:#F8FAFC; border:1px solid #E5E7EB !important; border-radius:12px; padding:14px !important; }
.card-element-box{ border-radius:10px !important; }
.response-note{ border-radius:10px !important; font-weight:600; }

/* Planes */
.plan-card{ border-radius:18px !important; border:1px solid #E5E7EB; transition:transform .15s ease, box-shadow .15s ease; }
.plan-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(13,13,13,.08) !important; }
.usage-bar{ height:8px !important; }
.usage-bar > div{ background:linear-gradient(90deg,#0066FF,#38BDF8) !important; border-radius:999px; }
.usage-bar.over > div{ background:#DC2626 !important; }

/* Estado vacio */
.portal-empty{ background:#fff; border:1px dashed #CBD5E1; border-radius:16px; }

/* Tickets */
.ticket-row{ border-radius:14px !important; transition:transform .15s ease, box-shadow .15s ease; }
.ticket-row:hover{ transform:translateY(-2px); box-shadow:0 10px 22px rgba(13,13,13,.07); }

/* Ver / imprimir documentos (Fase 61) */
.doc-card[data-doc-href]{ cursor:pointer; }
.doc-card .doc-actions{ align-items:center; }
.doc-link{ display:inline-flex; align-items:center; gap:7px; height:40px; padding:0 14px; border-radius:10px; border:1.5px solid #E5E7EB; background:#fff; color:var(--jet-black); font-family:var(--font-body); font-weight:700; font-size:.82rem; text-decoration:none; transition:border-color .15s, color .15s, background .15s; }
.doc-link:hover{ border-color:var(--electric-blue); color:var(--electric-blue); background:#F0F6FF; }
@media (max-width:600px){ .doc-card .doc-actions > *{ flex:1 1 auto; justify-content:center; } }