/* =====================================================================
   JMF Auditorías · estilos
   Negro, blanco y un acento dorado. Los colores están aquí arriba.
   ===================================================================== */
:root {
  --negro: #0A0A0A;
  --negro-2: #161616;
  --gris: #8A8A8A;
  --linea: #E6E6E6;
  --fondo: #F5F5F4;
  --blanco: #FFFFFF;
  --dorado: #C9A227;
  --mal: #B42318; --mal-fondo: #FEF3F2;
  --ok: #067647;  --ok-fondo: #ECFDF3;
  --radio: 14px;
}
* { box-sizing: border-box; }
html { color-scheme: light; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; font-size: 16px;
  line-height: 1.45; background: var(--fondo); color: var(--negro); -webkit-font-smoothing: antialiased; }
.cargando { padding: 40px; text-align: center; color: var(--gris); }
.aviso { background: var(--mal-fondo); color: var(--mal); border-radius: 10px; padding: 11px 14px; font-size: .95rem; }
.gracias { background: var(--ok-fondo); color: var(--ok); border-radius: 10px; padding: 11px 14px; margin-bottom: 14px; }

/* ---------- Portada / inicio de sesión (negra) ---------- */
.portada { min-height: 100vh; min-height: 100dvh; background: var(--negro); color: var(--blanco); display: grid;
  grid-template-rows: 1fr auto; padding: 28px 22px max(22px, env(safe-area-inset-bottom)); position: relative; overflow: hidden; }
.portada::before { content: ""; position: absolute; inset: auto -30% -40% -30%; height: 70%;
  background: radial-gradient(closest-side, rgba(201, 162, 39, .14), transparent); pointer-events: none; }
.portada-centro { width: 100%; max-width: 380px; margin: 0 auto; align-self: center; display: grid; gap: 26px; position: relative; }
.marca { text-align: center; display: grid; gap: 6px; }
.marca-jmf { font-family: Futura, "Avenir Next", "Helvetica Neue", sans-serif; font-weight: 800; font-size: 4.6rem; letter-spacing: .06em; line-height: 1; }
.marca-linea { width: 64px; height: 3px; background: var(--dorado); margin: 6px auto 4px; border-radius: 3px; }
.marca-sub { font-size: .95rem; letter-spacing: .42em; text-transform: uppercase; color: #BDBDBD; padding-left: .42em; }
.login { display: grid; gap: 14px; }
.campo { display: grid; gap: 6px; }
.campo label { font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; color: #A3A3A3; font-weight: 600; }
.portada input { width: 100%; padding: 14px 15px; font-size: 16px; border-radius: 12px; border: 1px solid #2E2E2E;
  background: var(--negro-2); color: var(--blanco); }
.portada input:focus { outline: 2px solid var(--dorado); outline-offset: 1px; border-color: transparent; }
.portada .aviso { background: rgba(180, 35, 24, .18); color: #FDA29B; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 18px; border-radius: 12px;
  font-size: 1rem; font-weight: 700; cursor: pointer; border: 1px solid var(--linea); background: var(--blanco); color: var(--negro); }
.btn:disabled { opacity: .6; cursor: wait; }
.btn.primario { background: var(--blanco); color: var(--negro); border-color: var(--blanco); width: 100%; margin-top: 6px; }
.btn.primario:hover { background: #EDEDED; }
.btn.chico { padding: 8px 13px; font-size: .9rem; }
.ver { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: #A3A3A3; }
.ver input { width: auto; }
.pie { text-align: center; font-size: .8rem; color: #6B6B6B; position: relative; }

/* ---------- Dentro de la app ---------- */
.barra { position: sticky; top: 0; z-index: 5; background: var(--negro); color: var(--blanco); display: flex; align-items: center;
  gap: 12px; padding: 12px 18px; padding-top: max(12px, env(safe-area-inset-top)); }
.barra .logo { font-family: Futura, "Avenir Next", sans-serif; font-weight: 800; font-size: 1.35rem; letter-spacing: .06em; }
.barra .logo small { font-family: -apple-system, sans-serif; font-weight: 600; font-size: .7rem; letter-spacing: .3em; color: #BDBDBD; margin-left: 8px; }
.barra .yo { margin-left: auto; text-align: right; line-height: 1.2; font-size: .9rem; }
.barra .yo span { display: block; color: var(--gris); font-size: .78rem; }
.barra .btn { background: transparent; color: var(--blanco); border-color: #3A3A3A; }
main { max-width: 960px; margin: 0 auto; padding: 22px 18px 60px; }
h1 { font-size: 1.8rem; margin: 0 0 4px; }
.sub { color: var(--gris); margin: 0 0 22px; }
.tarjetas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tarjeta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio); padding: 20px; display: grid; gap: 6px; }
.tarjeta b { font-size: 1.1rem; }
.tarjeta p { margin: 0; color: var(--gris); font-size: .92rem; }
.tarjeta .estado { justify-self: start; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: #F2F2F2; color: #555; padding: 4px 9px; border-radius: 999px; margin-top: 6px; }