/* Portal publico StarRapiCash (landing + consulta de pagos). Hoja de
   estilos propia, separada de app.css (admin/cobrador) a proposito: cero
   riesgo de que un cambio aqui afecte esos paneles. Identidad: azul
   electrico + violeta/morado + acentos fucsia moderados, en linea con el
   panel StarLatino de referencia. El verde queda reservado EXCLUSIVAMENTE
   para significado de estado (pagado/al dia/whatsapp) - nunca como color
   principal de marca. */

:root {
  --pub-bg: #060812;
  --pub-surface: #0a0d1c;
  --pub-card: #0f1330;
  --pub-card-alt: #0b0e22;
  --pub-border: rgba(124,131,253,0.16);
  --pub-border-hover: rgba(139,92,246,0.5);
  --pub-text: #eef0fb;
  --pub-muted: #9aa3c7;

  /* Identidad principal: azul electrico + violeta/morado */
  --pub-blue: #4f7cff;
  --pub-blue-dark: #3a5fe0;
  --pub-violet: #8b5cf6;
  --pub-violet-dark: #7440e0;
  --pub-magenta: #d946ef;

  /* Reservados SOLO para estado (pagado/al dia/atrasado/pendiente/whatsapp) */
  --pub-green: #22c55e;
  --pub-green-dark: #16a34a;
  --pub-red: #f2555a;
  --pub-amber: #f59e0b;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100%; overflow-x: hidden; }
body {
  background: var(--pub-bg); color: var(--pub-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.5;
}
a { color: var(--pub-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { color: #fff; margin: 0; }

.pub-shell { display: flex; flex-direction: column; min-height: 100vh; }
.pub-container { max-width: 1200px; margin: 0 auto; padding: 0 1.25rem; }
.pub-container-sm { max-width: 560px; }

.pub-gradient-text {
  background: linear-gradient(90deg, var(--pub-blue), var(--pub-violet), var(--pub-magenta));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Header ---- */
.pub-header { position: sticky; top: 0; z-index: 50; background: rgba(6,8,18,0.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--pub-border); }
.pub-header-inner { max-width: 1200px; margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 1rem; }
.pub-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.pub-brand:hover { text-decoration: none; }
.pub-brand-logo { display: flex; align-items: center; flex-shrink: 0; }

/* Logo real del negocio: rectangular horizontal, respeta proporciones
   originales (object-fit:contain, sin recortar ni deformar), sin caja
   cuadrada ni fondo alrededor - el PNG conserva su propia transparencia. */
.pub-brand-logo-rect { width: auto; height: auto; max-width: 160px; max-height: 48px; }
.pub-brand-logo-rect img { display: block; width: auto; height: auto; max-width: 100%; max-height: 48px; object-fit: contain; }

/* Placeholder (solo cuando NO hay logo configurado): si se queda cuadrado
   a proposito, es un icono generico, no el logo real. */
.pub-brand-logo-fallback {
  width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--pub-violet), var(--pub-blue)); color: #fff; font-weight: 800;
}
.pub-brand-name { font-weight: 700; color: #fff; font-size: 1rem; white-space: nowrap; }
.pub-menu-toggle { display: none; margin-left: auto; background: none; border: 1px solid var(--pub-border); color: var(--pub-text); border-radius: 10px; padding: 0.4rem; cursor: pointer; }
.pub-nav { margin-left: auto; display: flex; align-items: center; gap: 1.5rem; }
.pub-nav a:not(.pub-nav-cta) { color: var(--pub-muted); font-size: 0.9rem; font-weight: 500; position: relative; padding-bottom: 4px; }
.pub-nav a:not(.pub-nav-cta)::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--pub-violet), var(--pub-blue));
  transition: right 0.18s ease; border-radius: 2px;
}
.pub-nav a:not(.pub-nav-cta):hover { color: #fff; text-decoration: none; }
.pub-nav a:not(.pub-nav-cta):hover::after { right: 0; }
.pub-nav-cta { background: linear-gradient(135deg, var(--pub-violet), var(--pub-blue)); color: #fff !important; padding: 0.55rem 1.1rem; border-radius: 999px; font-weight: 700; box-shadow: 0 6px 18px rgba(139,92,246,0.25); }
.pub-nav-cta:hover { filter: brightness(1.1); text-decoration: none; }

/* ---- Hero ---- */
.pub-hero { padding: 4.5rem 0 4rem; background: radial-gradient(circle at 50% 0%, rgba(139,92,246,0.16), transparent 60%); }
.pub-hero-inner { text-align: center; max-width: 720px; margin: 0 auto; }
.pub-eyebrow { color: var(--pub-violet); font-size: 0.78rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 0.75rem; }
.pub-hero h1 { font-size: 2.4rem; font-weight: 800; line-height: 1.15; margin-bottom: 1rem; }
.pub-hero-sub { color: var(--pub-muted); font-size: 1.05rem; margin: 0 0 2rem; }
.pub-hero-actions { display: flex; flex-wrap: wrap; gap: 0.85rem; justify-content: center; }

/* ---- Botones ---- */
.pub-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.85rem 1.6rem; border-radius: 12px; font-weight: 700; font-size: 0.9rem; border: none; cursor: pointer; text-decoration: none; min-height: 48px; transition: filter 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.pub-btn:hover { text-decoration: none; }
.pub-btn-primary { background: linear-gradient(135deg, var(--pub-violet), var(--pub-blue)); color: #fff; box-shadow: 0 10px 25px rgba(79,124,255,0.25); }
.pub-btn-primary:hover { filter: brightness(1.1); transform: translateY(-1px); box-shadow: 0 14px 30px rgba(139,92,246,0.35); }
.pub-btn-secondary { background: transparent; border: 1px solid var(--pub-border-hover); color: #fff; }
.pub-btn-secondary:hover { background: rgba(139,92,246,0.1); }
.pub-btn-block { width: 100%; }

/* ---- Secciones ---- */
.pub-section { padding: 3.5rem 0; }
.pub-section-alt { background: var(--pub-surface); }
.pub-section-title { font-size: 1.6rem; font-weight: 800; text-align: center; margin-bottom: 2rem; }

.pub-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; }
.pub-step-card { background: var(--pub-card); border: 1px solid var(--pub-border); border-radius: 16px; padding: 1.5rem 1rem; text-align: center; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.pub-step-card:hover { border-color: var(--pub-border-hover); box-shadow: 0 0 0 1px rgba(139,92,246,0.15), 0 12px 25px rgba(0,0,0,0.3); }
.pub-step-num { width: 38px; height: 38px; border-radius: 999px; background: linear-gradient(135deg, var(--pub-violet), var(--pub-blue)); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 0.85rem; }
.pub-step-card p { margin: 0; font-size: 0.85rem; color: var(--pub-muted); }

.pub-benefits { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pub-benefit-card { background: var(--pub-card); border: 1px solid var(--pub-border); border-radius: 16px; padding: 1.5rem 1.25rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.pub-benefit-card:hover { border-color: var(--pub-border-hover); box-shadow: 0 0 0 1px rgba(139,92,246,0.15), 0 12px 25px rgba(0,0,0,0.3); }
.pub-benefit-icon {
  font-size: 1.25rem; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(139,92,246,0.18), rgba(79,124,255,0.14));
  border: 1px solid var(--pub-border);
}
.pub-benefit-card h3 { font-size: 0.95rem; margin: 0.75rem 0 0.35rem; }
.pub-benefit-card p { margin: 0; font-size: 0.8rem; color: var(--pub-muted); }

.pub-requirements { list-style: none; margin: 0 auto; padding: 0; max-width: 520px; display: flex; flex-direction: column; gap: 0.7rem; }
.pub-requirements li { background: var(--pub-card); border: 1px solid var(--pub-border); border-radius: 12px; padding: 0.85rem 1.1rem; font-size: 0.9rem; }
.pub-requirements li::before { content: "✓"; color: var(--pub-violet); font-weight: 800; margin-right: 0.6rem; }

.pub-contact { text-align: center; }

/* Tarjeta unica de contacto (seccion "Quieres solicitar un prestamo?") -
   la UNICA seccion de la landing que muestra direccion/horario/WhatsApp,
   para no repetir esos datos en el footer. */
.pub-contact-card {
  max-width: 640px; margin: 0 auto; padding: 2.5rem 2rem; border-radius: 22px;
  background: var(--pub-card); border: 1px solid var(--pub-border);
  box-shadow: 0 0 0 1px rgba(139,92,246,0.08), 0 25px 60px rgba(79,124,255,0.12), 0 25px 60px rgba(139,92,246,0.1);
  position: relative;
}
.pub-contact-card .pub-section-title { margin-bottom: 0.85rem; }
.pub-contact-lead { color: var(--pub-muted); font-size: 0.95rem; max-width: 460px; margin: 0 auto 1.5rem; }
.pub-contact-meta { margin-bottom: 1.75rem; }
.pub-contact-meta p { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--pub-text); }
.pub-contact-meta p:last-child { margin-bottom: 0; }

/* ---- Footer ---- */
.pub-footer { background: var(--pub-surface); border-top: 1px solid var(--pub-border); padding: 3rem 0 1.5rem; margin-top: auto; }
.pub-footer-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.pub-footer h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--pub-muted); margin-bottom: 0.85rem; }
.pub-footer p { margin: 0 0 0.5rem; font-size: 0.85rem; }
.pub-footer-text { color: var(--pub-muted); font-size: 0.85rem; }
.pub-footer-bottom { border-top: 1px solid var(--pub-border); padding-top: 1.25rem; text-align: center; }
.pub-footer-bottom p { margin: 0; font-size: 0.78rem; color: var(--pub-muted); }

/* ---- Formularios / tarjetas (consulta) ---- */
.pub-consulta { padding-top: 3rem; }
.pub-card { background: var(--pub-card); border: 1px solid var(--pub-border); border-radius: 18px; padding: 1.5rem; margin-bottom: 1.25rem; box-shadow: 0 10px 25px rgba(0,0,0,0.35); }
.pub-card-title { font-size: 1rem; margin-bottom: 1rem; }
.pub-card-consulta { border-color: var(--pub-border-hover); box-shadow: 0 0 0 1px rgba(139,92,246,0.15), 0 20px 45px rgba(79,124,255,0.12); }
.pub-field { margin-bottom: 1.1rem; }
.pub-field label { display: block; font-size: 0.85rem; color: var(--pub-muted); margin-bottom: 0.4rem; font-weight: 600; }
.pub-field input { width: 100%; background: var(--pub-card-alt); border: 1px solid var(--pub-border); color: #fff; border-radius: 12px; padding: 0.8rem 1rem; font-size: 1rem; outline: none; }
.pub-field input::placeholder { color: #5c6382; }
.pub-field input:focus { border-color: var(--pub-violet); box-shadow: 0 0 0 3px rgba(139,92,246,0.22); }
.pub-field-hint { font-size: 0.75rem; color: var(--pub-muted); margin: 0.4rem 0 0; }
.pub-secure-note { text-align: center; font-size: 0.78rem; color: var(--pub-muted); margin: 0.9rem 0 0; }
.pub-muted { color: var(--pub-muted); }
.pub-text-emerald { color: var(--pub-green); }
.pub-text-amber { color: var(--pub-amber); }
.pub-alert { background: rgba(242,85,90,0.12); border: 1px solid rgba(242,85,90,0.35); color: #ffb3b5; padding: 0.9rem 1.1rem; border-radius: 12px; font-size: 0.9rem; }
.pub-flash-wrap { padding-top: 1.5rem; }

/* ---- Lista de prestamos ---- */
.pub-loan-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; transition: border-color 0.2s ease; }
.pub-loan-row:hover { border-color: var(--pub-border-hover); }
.pub-loan-row-title { font-weight: 700; color: #fff; margin: 0 0 0.35rem; font-size: 0.95rem; }
.pub-loan-row-amount { text-align: right; }
.pub-loan-row-amount span { display: block; }
.pub-loan-row-amount strong { font-size: 1.05rem; }

/* ---- Resumen del prestamo ---- */
.pub-summary-card { text-align: center; }
.pub-summary-status { display: inline-block; padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.5px; margin-bottom: 1.25rem; }
.pub-status-ok { background: rgba(34,197,94,0.15); color: var(--pub-green); }
.pub-status-overdue { background: rgba(242,85,90,0.15); color: #ff8388; }
.pub-status-done { background: rgba(139,147,167,0.15); color: var(--pub-muted); }
.pub-summary-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.85rem; text-align: left; margin-bottom: 1rem; }
.pub-summary-grid > div {
  background: var(--pub-card-alt); border: 1px solid var(--pub-border); border-radius: 12px;
  padding: 0.8rem 0.95rem;
}
.pub-summary-grid span, .pub-next-due span { display: block; font-size: 0.68rem; color: var(--pub-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.25rem; }
.pub-summary-grid strong { font-size: 1.15rem; color: #fff; }
.pub-next-due { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; text-align: left; background: linear-gradient(135deg, rgba(139,92,246,0.1), rgba(79,124,255,0.08)); border: 1px solid var(--pub-border); border-radius: 12px; padding: 0.85rem 1rem; margin-bottom: 0.5rem; }
.pub-next-due strong { font-size: 1rem; color: #fff; }
.pub-summary-grid-2 { display: flex; align-items: center; justify-content: space-between; text-align: left; }
.progress-bar-pub { height: 10px; width: 100%; border-radius: 999px; background: rgba(255,255,255,0.08); overflow: hidden; }
.progress-bar-pub > div { height: 100%; background: linear-gradient(90deg, var(--pub-violet), var(--pub-blue)); }

/* ---- Cronograma ---- */
.pub-schedule { display: flex; flex-direction: column; gap: 0.6rem; }
.pub-schedule-row { display: grid; grid-template-columns: 2.2rem 1fr auto auto; align-items: center; gap: 0.75rem; background: var(--pub-card-alt); border: 1px solid var(--pub-border); border-radius: 12px; padding: 0.65rem 0.9rem; }
.pub-schedule-n { color: var(--pub-muted); font-size: 0.8rem; font-weight: 700; }
.pub-schedule-date { font-size: 0.85rem; }
.pub-schedule-amounts { display: flex; flex-direction: column; align-items: flex-end; }
.pub-schedule-amounts span:first-child { font-weight: 700; color: #fff; font-size: 0.9rem; }

/* Reutiliza las mismas clases de badge que app.css (badge, badge-success,
   etc, via status_badge()) - las redefinimos aqui porque public.css no
   incluye app.css, para no acoplar los dos paneles.
   Estados del cronograma: PAGADA=verde, PENDIENTE=azul/violeta,
   ATRASADA=rojo, PAGO_PARCIAL=naranja - el verde queda solo para "pagada". */
.badge { display: inline-flex; align-items: center; gap: 0.25rem; border-radius: 999px; padding: 0.2rem 0.65rem; font-size: 0.72rem; font-weight: 700; white-space: nowrap; }
.badge-neutral { background: rgba(139,147,167,0.15); color: var(--pub-muted); }
.badge-success { background: rgba(34,197,94,0.15); color: var(--pub-green); }
.badge-warning { background: rgba(245,158,11,0.15); color: var(--pub-amber); }
.badge-danger { background: rgba(242,85,90,0.15); color: #ff8388; }
.badge-info { background: rgba(139,92,246,0.15); color: #b39dfb; }

.pub-contact-cta { text-align: center; }
.pub-contact-cta h3 { font-size: 0.95rem; margin-bottom: 0.9rem; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .pub-steps { grid-template-columns: repeat(3, 1fr); }
  .pub-benefits { grid-template-columns: repeat(2, 1fr); }
  .pub-footer-grid { grid-template-columns: 1fr 1fr; }
  .pub-brand-logo-rect, .pub-brand-logo-rect img { max-width: 145px; max-height: 45px; }
}
@media (max-width: 767px) {
  .pub-brand-logo-rect, .pub-brand-logo-rect img { max-width: 125px; max-height: 40px; }
  .pub-menu-toggle { display: flex; align-items: center; justify-content: center; }
  .pub-nav {
    position: fixed; top: 0; right: 0; height: 100vh; width: min(80vw, 300px);
    background: var(--pub-surface); border-left: 1px solid var(--pub-border);
    flex-direction: column; align-items: flex-start; padding: 5rem 1.5rem 2rem;
    transform: translateX(100%); transition: transform 0.25s ease; z-index: 60;
  }
  .pub-nav.open { transform: translateX(0); }
  .pub-nav a:not(.pub-nav-cta) { width: 100%; padding: 0.75rem 0; border-bottom: 1px solid var(--pub-border); }
  .pub-nav a:not(.pub-nav-cta)::after { display: none; }
  .pub-nav-cta { text-align: center; margin-top: 0.5rem; width: 100%; }
  .pub-hero h1 { font-size: 1.9rem; }
  .pub-steps { grid-template-columns: repeat(2, 1fr); }
  .pub-benefits { grid-template-columns: 1fr; }
  .pub-footer-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .pub-schedule-row { grid-template-columns: 1.8rem 1fr; }
  .pub-schedule-amounts { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .pub-summary-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .pub-steps { grid-template-columns: 1fr 1fr; }
  .pub-hero-actions { flex-direction: column; }
  .pub-hero-actions .pub-btn { width: 100%; }
}

/* ---- Overlay para el menu movil ---- */
.pub-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.55); z-index: 55; }
.pub-nav-overlay.open { display: block; }