/* BAIREN · Portal · Riel de identidad (migración 29, 9/10/2026).
   1. cuenta-verificacion.html (body.p-identidad): un trámite de un minuto. Arriba el estado en una línea, el título y un
      solo botón principal abajo, al alcance del pulgar (en el celular la barra del botón queda fija). Tres pasos, una foto
      por pantalla, con el progreso a la vista.
   2. Curación (body.p-herramienta): la pestaña Identidad, con las mismas tarjetas .p-cur.
   3. La ficha (body.p-ficha-page): el total por mes y el renglón "Quién ofrece".
   4. El panel (body.p-panel-page): el domicilio legal en Mi cuenta.
   Papel #F6F2E8, superficies #FFFDF8, línea fina, navy #131D2D, tinta media #59647A y oro tinta #75623C. portal.css pone en
   0 el radio de los botones dentro de un elemento "p-…" (el body lo es): los radios de acá van con !important. */

body.p-identidad{
  --idn-papel:#F6F2E8; --idn-sup:#FFFDF8; --idn-linea:rgba(19,29,45,.10); --idn-linea-2:rgba(19,29,45,.18);
  --idn-navy:#131D2D; --idn-tinta:#1A2538; --idn-media:#59647A; --idn-oro:#75623C; --idn-verde:#2E6A4E; --idn-vino:#7E2B26;
  --idn-curva:cubic-bezier(.22,1,.36,1);
  background:var(--idn-papel); color:var(--idn-navy)
}
body.p-identidad [hidden]{display:none!important}
body.p-identidad .idn-main{max-width:560px;margin:0 auto;padding:calc(64px + env(safe-area-inset-top) + 20px) 16px 0;box-sizing:border-box;min-height:calc(100svh - 64px)}
body.p-identidad .idn-caja{display:flex;flex-direction:column;min-height:calc(100svh - 64px - env(safe-area-inset-top) - 20px)}
@media(min-width:700px){
  body.p-identidad .idn-main{padding-top:calc(64px + 56px);padding-bottom:72px;min-height:0}
  body.p-identidad .idn-caja{min-height:0;background:var(--idn-sup);border:1px solid var(--idn-linea);border-radius:var(--r-box,14px)!important;padding:32px 36px 28px}
}

/* Arriba: atrás, el estado en una línea y el progreso */
body.p-identidad .idn-atras{display:inline-flex;align-items:center;gap:4px;align-self:flex-start;min-height:44px;margin:-8px 0 4px -10px;padding:0 10px;border:0;border-radius:var(--r-pill,999px)!important;background:transparent;color:var(--idn-media);font:400 .9375rem/1 var(--font-body);cursor:pointer}
@media(hover:hover) and (pointer:fine){body.p-identidad .idn-atras:hover{color:var(--idn-navy);background:rgba(19,29,45,.05)}}
body.p-identidad .idn-atras svg{width:20px;height:20px}
body.p-identidad .idn-estado{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 18px;font:400 .9375rem/1.4 var(--font-body);color:var(--idn-media)}
body.p-identidad .idn-pill{display:inline-flex;align-items:center;height:26px;padding:0 11px;border-radius:var(--r-pill,999px)!important;background:rgba(19,29,45,.06);color:var(--idn-navy);font:500 .8125rem/1 var(--font-body);white-space:nowrap}
body.p-identidad .idn-pill.ok{background:rgba(46,106,78,.12);color:var(--idn-verde)}
body.p-identidad .idn-pill.rev{background:rgba(117,98,60,.13);color:var(--idn-oro)}
body.p-identidad .idn-pill.no{background:rgba(126,43,38,.10);color:var(--idn-vino)}
body.p-identidad .idn-e-no > span:last-child{color:var(--idn-tinta)}

body.p-identidad .idn-prog{margin:0 0 18px}
body.p-identidad .idn-prog-n{margin:0 0 8px;font:500 .8125rem/1 var(--font-body);color:var(--idn-oro)}
body.p-identidad .idn-prog ol{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0;padding:0;list-style:none}
body.p-identidad .idn-prog li{display:grid;gap:6px;font:400 .75rem/1 var(--font-body);color:var(--idn-media)}
body.p-identidad .idn-barra{display:block;height:4px;border-radius:var(--r-pill,999px)!important;background:rgba(19,29,45,.10);overflow:hidden;position:relative}
body.p-identidad .idn-barra::after{content:"";position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:var(--idn-navy);border-radius:inherit;transition:transform .35s var(--idn-curva)}
body.p-identidad .idn-prog li.hecho .idn-barra::after{transform:scaleX(1)}
body.p-identidad .idn-prog li.actual .idn-barra::after{transform:scaleX(.5);background:var(--idn-oro)}
body.p-identidad .idn-prog li.actual{color:var(--idn-navy);font-weight:500}

body.p-identidad .idn-tit{margin:0;font:400 clamp(1.85rem,7.4vw,2.35rem)/1.1 var(--font-display);letter-spacing:-.01em;color:var(--idn-navy);outline:0}
body.p-identidad .idn-bajada{margin:10px 0 0;font:300 1.0625rem/1.5 var(--font-body);color:var(--idn-media);max-width:44ch}
body.p-identidad .idn-cuerpo{margin:24px 0 0;flex:1 1 auto}

/* Los tres pasos, en la portada del trámite */
body.p-identidad .idn-tres{margin:0;padding:0;list-style:none;border-top:1px solid var(--idn-linea)}
body.p-identidad .idn-tres li{display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px solid var(--idn-linea)}
body.p-identidad .idn-tres-ico{display:grid;place-items:center;width:40px;height:40px;flex:0 0 auto;border-radius:50%!important;background:var(--idn-sup);border:1px solid var(--idn-linea);color:var(--idn-oro)}
body.p-identidad .idn-tres-ico svg{width:22px;height:22px}
body.p-identidad .idn-tres-t{font:400 1rem/1.3 var(--font-body);color:var(--idn-tinta)}
body.p-identidad .idn-tres-t b{font-weight:500;color:var(--idn-oro);margin-right:4px}

/* La toma de la foto: una superficie grande que se toca */
body.p-identidad .idn-toma{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;width:100%;aspect-ratio:1.586;box-sizing:border-box;
  border:1.5px dashed rgba(117,98,60,.45);border-radius:var(--r-box,14px)!important;background:var(--idn-sup);color:var(--idn-oro);cursor:pointer;overflow:hidden;
  transition:border-color .2s var(--idn-curva),background-color .2s var(--idn-curva)}
body.p-identidad .idn-toma.selfie{aspect-ratio:1;max-width:360px;margin:0 auto}
@media(hover:hover) and (pointer:fine){body.p-identidad .idn-toma:hover{border-color:var(--idn-oro);background:#FFFEFB}}
body.p-identidad .idn-toma:focus-within{outline:2px solid var(--idn-oro);outline-offset:3px}
body.p-identidad .idn-toma-ico svg{width:48px;height:48px;stroke-width:1.2}
body.p-identidad .idn-toma-t{font:500 .9375rem/1.2 var(--font-body);color:var(--idn-navy)}
body.p-identidad .idn-toma.con-foto{border-style:solid;border-color:var(--idn-linea);background:#EFEADD}
body.p-identidad .idn-toma img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
body.p-identidad .idn-toma.cargando{opacity:.6;pointer-events:none}
body.p-identidad .idn-archivo{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);pointer-events:none}

/* Revisar y mandar */
body.p-identidad .idn-miniaturas{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:0 0 22px;padding:0;list-style:none}
body.p-identidad .idn-mini{display:grid;gap:6px;width:100%;padding:0;border:0;background:transparent;cursor:pointer;text-align:center;font:400 .8125rem/1.2 var(--font-body);color:var(--idn-media)}
body.p-identidad .idn-mini img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-ctl,10px)!important;border:1px solid var(--idn-linea);background:#EFEADD}
@media(hover:hover) and (pointer:fine){body.p-identidad .idn-mini:hover img{border-color:var(--idn-oro)}}
body.p-identidad .idn-mini:focus-visible{outline:2px solid var(--idn-oro);outline-offset:3px}
body.p-identidad .idn-form{display:grid;gap:14px}
body.p-identidad .idn-fila{display:grid;gap:14px}
@media(min-width:440px){body.p-identidad .idn-fila{grid-template-columns:1fr 1fr}}
body.p-identidad .idn-campo{display:grid;gap:6px;min-width:0}
body.p-identidad .idn-campo label{font:500 .875rem/1.2 var(--font-body);color:var(--idn-navy)}
body.p-identidad .idn-campo input{width:100%;min-height:48px;box-sizing:border-box;padding:10px 14px;border:1px solid var(--idn-linea-2);border-radius:var(--r-ctl,10px)!important;background:#fff;color:var(--idn-navy);font:400 1rem/1.3 var(--font-body)}
body.p-identidad .idn-campo input:focus{outline:2px solid var(--idn-oro);outline-offset:1px;border-color:var(--idn-oro)}
body.p-identidad .idn-campo input[aria-invalid=true]{border-color:var(--idn-vino)}
body.p-identidad .idn-acepto{display:flex;align-items:flex-start;gap:12px;margin:4px 0 0;font:300 .875rem/1.5 var(--font-body);color:var(--idn-tinta);cursor:pointer}
body.p-identidad .idn-acepto input{flex:0 0 auto;width:20px;height:20px;margin:1px 0 0;accent-color:var(--idn-navy)}
body.p-identidad .idn-acepto a{color:var(--idn-navy);text-decoration:underline;text-decoration-color:rgba(117,98,60,.55);text-underline-offset:3px}
body.p-identidad .idn-como{margin:0;font:400 .875rem/1.5 var(--font-body);color:var(--idn-media)}
body.p-identidad .idn-como summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;color:var(--idn-navy);text-decoration:underline;text-decoration-color:rgba(117,98,60,.55);text-underline-offset:4px;list-style:none}
body.p-identidad .idn-como summary::-webkit-details-marker{display:none}
body.p-identidad .idn-como p{margin:0 0 4px}
body.p-identidad .p-err-campo{margin:6px 0 0;font:400 .8125rem/1.4 var(--font-body);color:var(--idn-vino)}

/* El estado: un sello chico con la persona o la espera */
body.p-identidad .idn-sello{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--idn-linea);border-radius:var(--r-box,14px)!important;background:var(--idn-sup);font:400 1rem/1.35 var(--font-body);color:var(--idn-tinta)}
body.p-identidad .idn-sello svg{width:26px;height:26px;flex:0 0 auto;color:var(--idn-verde)}
body.p-identidad .idn-sello.rev svg{color:var(--idn-oro)}
body.p-identidad .idn-sello.rev{font-size:.9375rem;color:var(--idn-media)}

/* Abajo: un solo botón principal, al alcance del pulgar */
body.p-identidad .idn-acc{position:sticky;bottom:0;z-index:5;display:grid;gap:10px;margin:28px -16px 0;padding:14px 16px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to bottom,rgba(246,242,232,0),var(--idn-papel) 18px)}
@media(min-width:700px){body.p-identidad .idn-acc{position:static;margin:28px 0 0;padding:0;background:none}}
body.p-identidad .idn-prim{width:100%;min-height:52px;font-size:1rem;gap:10px}
body.p-identidad .idn-prim svg{width:20px;height:20px}
body.p-identidad .idn-prim[aria-busy=true]{cursor:progress}
body.p-identidad .idn-link{justify-self:center;min-height:44px;padding:0 12px;border:0;border-radius:var(--r-pill,999px)!important;background:transparent;color:var(--idn-navy);font:500 .9375rem/1 var(--font-body);text-decoration:underline;text-decoration-color:rgba(117,98,60,.55);text-underline-offset:4px;cursor:pointer}
body.p-identidad .idn-conf{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;font:400 .8125rem/1.35 var(--font-body);color:var(--idn-media);text-align:center}
body.p-identidad .idn-conf svg{width:14px;height:14px;flex:0 0 auto}
body.p-identidad .idn-err{margin:0;padding:10px 12px;border-radius:var(--r-ctl,10px)!important;background:rgba(126,43,38,.08);color:var(--idn-vino);font:400 .9rem/1.45 var(--font-body)}

/* Mientras carga y "muy pronto" */
body.p-identidad .idn-esq{display:grid;gap:14px;padding-top:8px}
body.p-identidad .idn-esq i{display:block;height:14px;width:60%;border-radius:var(--r-pill,999px)!important;background:rgba(19,29,45,.07)}
body.p-identidad .idn-esq i.t{height:34px;width:85%}
body.p-identidad .idn-esq i.b{height:160px;width:100%;border-radius:var(--r-box,14px)!important}
body.p-identidad .idn-pronto{margin:24px 0}

@media(prefers-reduced-motion:reduce){
  body.p-identidad .idn-barra::after,body.p-identidad .idn-toma{transition:none}
}

/* ── 2 · Curación: la pestaña Identidad ─────────────────────────────────────────────────────────────── */
body.p-herramienta .p-cur.idn-cur{grid-template-columns:1fr}
body.p-herramienta .idn-cur-fotos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0}
body.p-herramienta .idn-cur-fotos figure{margin:0;display:grid;gap:4px;min-width:0}
body.p-herramienta .idn-cur-fotos figure.grande{grid-column:1/-1}
body.p-herramienta .idn-cur-foto{display:block;width:100%;padding:0;border:1px solid rgba(19,29,45,.10);border-radius:var(--r-ctl,10px)!important;background:#EFEADD;overflow:hidden;cursor:zoom-in}
body.p-herramienta figure.grande .idn-cur-foto{cursor:zoom-out}
body.p-herramienta .idn-cur-foto img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain}
body.p-herramienta figure.grande .idn-cur-foto img{aspect-ratio:auto;max-height:80vh}
body.p-herramienta .idn-cur-foto .sin{display:grid;place-items:center;aspect-ratio:4/3;font:400 .8rem/1.3 var(--font-body);color:var(--text-mid,#59647A);padding:8px;text-align:center}
body.p-herramienta .idn-cur-fotos figcaption{font:400 .78rem/1.2 var(--font-body);color:var(--text-mid,#59647A)}
body.p-herramienta .idn-cur-quien{margin:4px 0 0}
body.p-herramienta .idn-cur-sec{margin:28px 0 10px;font:500 .9375rem/1.3 var(--font-body);color:#75623C}
body.p-herramienta .idn-cur-limpiar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;margin-bottom:8px;border:1px dashed rgba(126,43,38,.35);border-radius:var(--r-ctl,10px)!important;font:400 .875rem/1.4 var(--font-body)}

/* ── 3 · La ficha: total por mes y "Quién ofrece" ───────────────────────────────────────────────────── */
.p-ficha-page .idn-total{display:block;margin:2px 0 0;font:400 .875rem/1.4 var(--font-body);letter-spacing:0;color:inherit;opacity:.92}
.p-ficha-page .idn-total b{font-weight:500}
.p-ficha-page .idn-ofe{margin:0}
.p-ficha-page .idn-ofe-btn{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0 0 0 -2px;padding:0 2px;border:0;background:transparent;color:var(--p-tinta-2,#59647A);font:400 .875rem/1.2 var(--font-body);cursor:pointer}
.p-ficha-page .idn-ofe-btn span{border-bottom:1px solid rgba(194,169,104,.6)}
@media(hover:hover) and (pointer:fine){.p-ficha-page .idn-ofe-btn:hover{color:#131D2D}}
.p-ficha-page .idn-ofe-btn svg{width:14px;height:14px;transition:transform .2s cubic-bezier(.22,1,.36,1)}
.p-ficha-page .idn-ofe-btn[aria-expanded=true] svg{transform:rotate(180deg)}
.p-ficha-page .idn-ofe-datos{margin:0 0 8px;padding:12px 14px;border:1px solid rgba(19,29,45,.10);border-radius:var(--r-ctl,10px)!important;background:#FFFDF8;font:400 .875rem/1.45 var(--font-body);color:#1A2538}
.p-ficha-page .idn-ofe-datos dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;margin:0}
.p-ficha-page .idn-ofe-datos dt{color:#59647A}
.p-ficha-page .idn-ofe-datos dd{margin:0;overflow-wrap:anywhere}
.p-ficha-page .idn-ofe-datos p{margin:8px 0 0;color:#59647A}
.p-ficha-page .idn-ofe-datos p:first-child{margin-top:0}
@media(prefers-reduced-motion:reduce){.p-ficha-page .idn-ofe-btn svg{transition:none}}

/* ── 4 · El panel: el domicilio legal ───────────────────────────────────────────────────────────────── */
body.p-panel-page .idn-dom{display:grid;gap:6px;max-width:520px}
body.p-panel-page .idn-dom-fila{display:flex;flex-wrap:wrap;gap:8px}
body.p-panel-page .idn-dom input{flex:1 1 220px;min-width:0;min-height:44px;box-sizing:border-box;padding:8px 12px;border:1px solid rgba(19,29,45,.18);border-radius:var(--r-ctl,10px)!important;background:#fff;font:400 .9375rem/1.3 var(--font-body);color:#131D2D}
body.p-panel-page .idn-dom input:focus{outline:2px solid #75623C;outline-offset:1px}
body.p-panel-page .idn-dom .p-note{margin:0}