/* Portal de clientes: diseño mobile-first.
   Colores del "Site de Atención al Cliente" anterior (facturaweb/loginclave.aspx + CSS/Site.css). */
:root {
  --p-primario: #4b6c9e;      /* barra superior del sitio anterior */
  --p-primario-2: #3a4f63;    /* franja del menú */
  --p-acento: #6891a2;        /* foco de los campos: rgb(104, 145, 162) */
  --p-hover: #5f9ea0;         /* cadetblue, botón al pasar el mouse */
  --p-tarjeta-login: #f7f7f7;
  --p-fondo: #eef1f5;
  --p-texto-suave: #6b7280;
  --p-radio: 1rem;
}

body.portal {
  background: var(--p-fondo);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #1f2937;
  min-height: 100vh;
}

/* ---------- Barra superior ---------- */
.p-header {
  background: linear-gradient(135deg, var(--p-primario), var(--p-primario-2));
  color: #fff;
  padding: .9rem 0 3.5rem;
}
.p-marca { display: flex; align-items: center; gap: .6rem; font-weight: 600; }
.p-marca .p-logo {
  width: 38px; height: 38px; border-radius: 12px; background: rgba(255,255,255,.18);
  display: grid; place-items: center; font-size: 1.25rem;
}
.p-marca small { display: block; font-weight: 400; opacity: .8; font-size: .78rem; }
.p-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.2); color: #fff;
  display: grid; place-items: center; font-weight: 600; border: 0;
}
.p-saludo { margin-top: 1.4rem; }
.p-saludo h1 { font-size: 1.35rem; font-weight: 700; margin: 0; }
.p-saludo p { margin: .15rem 0 0; opacity: .85; font-size: .9rem; }

/* ---------- Navegación ---------- */
.p-tabs { display: none; }
.p-bottom-nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
  background: #fff; border-top: 1px solid #e5e7eb;
  display: flex; justify-content: space-around;
  padding: .35rem 0 calc(.35rem + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 16px rgba(17,24,39,.06);
}
.p-bottom-nav a {
  flex: 1; text-align: center; color: var(--p-texto-suave); text-decoration: none; font-size: .72rem;
  padding: .25rem 0;
}
.p-bottom-nav a i { display: block; font-size: 1.35rem; line-height: 1.2; }
.p-bottom-nav a.activo { color: var(--p-primario); font-weight: 600; }

.p-contenido { margin-top: -2.5rem; padding-bottom: 6rem; }

@media (min-width: 768px) {
  .p-bottom-nav { display: none; }
  .p-tabs { display: flex; gap: .5rem; margin-top: 1.2rem; }
  .p-tabs a {
    color: #fff; text-decoration: none; padding: .45rem 1rem; border-radius: 999px; opacity: .85;
    font-size: .92rem;
  }
  .p-tabs a:hover { opacity: 1; background: rgba(255,255,255,.12); }
  .p-tabs a.activo { background: #fff; color: var(--p-primario); opacity: 1; font-weight: 600; }
  .p-contenido { padding-bottom: 3rem; }
}

/* ---------- Tarjetas ---------- */
.p-card {
  background: #fff; border-radius: var(--p-radio); border: 0;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.06);
  padding: 1.25rem;
}
.p-card + .p-card { margin-top: 1rem; }
.p-card h2 { font-size: 1.05rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.p-card h2 i { color: var(--p-primario); }

.p-stat { background: #fff; border-radius: var(--p-radio); padding: .9rem 1rem; height: 100%;
  box-shadow: 0 1px 2px rgba(17,24,39,.04), 0 8px 24px rgba(17,24,39,.06); }
.p-stat .p-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-size: 1.1rem; margin-bottom: .5rem; }
.p-stat .p-lbl { font-size: .75rem; color: var(--p-texto-suave); }
.p-stat .p-val { font-weight: 700; font-size: 1rem; }
.ic-ok { background: #dcfce7; color: #15803d; }
.ic-warn { background: #fef3c7; color: #b45309; }
.ic-info { background: #e3eaf3; color: var(--p-primario); }
.ic-gris { background: #f3f4f6; color: #4b5563; }

/* ---------- Formularios ---------- */
.portal .form-control, .portal .form-select { border-radius: .75rem; padding: .65rem .9rem; border-color: #e5e7eb; }
.portal .form-control:focus, .portal .form-select:focus { border-color: var(--p-acento); box-shadow: 0 0 0 .2rem rgba(104,145,162,.25); }
.portal .form-label { font-size: .85rem; font-weight: 600; color: #374151; margin-bottom: .3rem; }
.portal .btn { border-radius: .75rem; padding: .65rem 1.1rem; font-weight: 600; }
.portal .btn-primary { background: var(--p-primario); border-color: var(--p-primario); }
.portal .btn-primary:hover, .portal .btn-primary:focus, .portal .btn-primary:active { background: var(--p-hover); border-color: var(--p-hover); }

/* ---------- Resultado de la activación ---------- */
.p-resultado {
  border-radius: var(--p-radio); padding: 1.5rem; text-align: center; color: #fff;
  background: linear-gradient(135deg, #10b981, #059669);
  box-shadow: 0 12px 28px rgba(5,150,105,.3);
}
.p-resultado .p-numero {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 2.4rem; font-weight: 700;
  letter-spacing: .12em; margin: .4rem 0 .8rem; word-break: break-all;
}

/* ---------- Listas ---------- */
.p-lista { list-style: none; padding: 0; margin: 0; }
.p-lista li { display: flex; align-items: center; gap: .8rem; padding: .7rem 0; border-bottom: 1px solid #f1f2f6; }
.p-lista li:last-child { border-bottom: 0; }
.p-lista .p-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
.p-lista .p-sub { font-size: .78rem; color: var(--p-texto-suave); }

/* ---------- Login ---------- */
.p-login-fondo {
  min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.25rem;
  background: radial-gradient(circle at 20% 20%, var(--p-acento) 0, transparent 45%),
              linear-gradient(135deg, var(--p-primario), var(--p-primario-2));
}
.p-login { width: 100%; max-width: 400px; }
.p-login .p-card { background: var(--p-tarjeta-login); border-radius: 30px; }
.p-login .p-logo-img { display: block; width: 160px; max-width: 60%; height: auto; margin: 0 auto 1.25rem; }
.p-login .p-titulo { color: var(--p-primario-2); letter-spacing: .04em; }
.p-login .input-group-text { background: #fff; border-color: #e5e7eb; border-radius: .75rem 0 0 .75rem; color: var(--p-texto-suave); }
.p-login .input-group .form-control { border-left: 0; }
.p-login .input-group .btn-ojo { border: 1px solid #e5e7eb; border-left: 0; background: #fff; color: var(--p-texto-suave); border-radius: 0 .75rem .75rem 0; padding: 0 .9rem; }
.p-login .input-group .form-control.con-ojo { border-radius: 0; }

.p-alerta { border: 0; border-radius: .9rem; }