/* Rednacer v2 · estilos COMPARTIDOS de las apps por rol (encima de apps-base.css, núcleo de la plantilla). Solo
   var(--…) de tokens.css. Lo propio de cada rol va en css/roles.css; el wizard, en css/wizard.css. */

/* Cabecera con contraste (regla de la casa): banda de marca oscura, no blanco sobre blanco. Igual en claro y oscuro. */
.ap-top{background:var(--noche);border-bottom:0;color:var(--sobre-marca)}
.ap-top .ap-marca{color:var(--sobre-marca)}
.ap-top .ap-simbolo{background:color-mix(in srgb,var(--sobre-marca) 10%,transparent);color:var(--sobre-marca)}
.ap-simbolo .s2{stroke:var(--enfasis)}.ap-simbolo .s3{stroke:color-mix(in srgb,var(--marca) 55%,var(--sobre-marca))}.ap-simbolo .pt{fill:var(--acento)}
html[data-modo="oscuro"] .ap-top .ap-simbolo{color:var(--tinta)}
.ap-top .ap-cab{background:color-mix(in srgb,var(--sobre-marca) 10%,transparent);border-color:color-mix(in srgb,var(--sobre-marca) 22%,transparent);color:var(--sobre-marca)}
html[data-modo="oscuro"] .ap-top{color:var(--tinta)}
html[data-modo="oscuro"] .ap-top .ap-marca,html[data-modo="oscuro"] .ap-top .ap-cab{color:var(--tinta)}
.ap-top .ap-cab[aria-current]{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.ap-top .ap-cab-n{background:var(--acento);color:var(--sobre-acento);box-shadow:0 0 0 2px var(--noche)}
[data-modo-btn] .ico-sol{display:none}
html[data-modo="oscuro"] [data-modo-btn] .ico-sol{display:block}
html[data-modo="oscuro"] [data-modo-btn] .ico-luna{display:none}
/* Cambio de modo: un círculo que nace del botón (View Transitions). */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.cambia-modo::view-transition-new(root){animation:revela-modo .55s cubic-bezier(.2,0,0,1)}
@keyframes revela-modo{from{clip-path:circle(0 at var(--modo-x,50%) var(--modo-y,0))}to{clip-path:circle(150vmax at var(--modo-x,50%) var(--modo-y,0))}}

/* Volver: en la cabecera, a la izquierda del título (js/ui.js › volverEnCabecera). */
.ap-volver{display:inline-grid;place-items:center;flex:none;width:44px;height:44px;margin-left:-8px;border-radius:999px;color:inherit;text-decoration:none}
.ap-volver:hover{background:color-mix(in srgb,currentColor 12%,transparent)}
body.con-volver .ap-simbolo{display:none}

/* Botón flotante para crear (sobre la barra inferior en celular; abajo a la derecha en computadora). */
.fab{position:fixed;z-index:25;right:max(16px,env(safe-area-inset-right));bottom:calc(92px + env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:10px;min-height:60px;padding:0 22px 0 14px;border:0;border-radius:999px;background:var(--marca);color:var(--sobre-marca);font:800 1rem var(--sans);box-shadow:var(--sombra-alta);cursor:pointer;transition:transform var(--dur-normal) var(--curva)}
.fab:active{transform:scale(.95)}
.fab .fab-emoji{width:36px;height:36px}
@media (max-width:480px){.fab{padding:0 12px;min-width:60px;justify-content:center}.fab span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}
@media (min-width:900px){.fab{bottom:calc(28px + env(safe-area-inset-bottom));right:max(32px,env(safe-area-inset-right))}}

/* Hoja inferior (celular) / diálogo (computadora). */
dialog.hoja{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:none;max-height:min(88dvh,760px);padding:0 0 env(safe-area-inset-bottom);border:0;border-radius:24px 24px 0 0;background:var(--superficie);color:var(--tinta);box-shadow:var(--sombra-alta);overflow:auto;overscroll-behavior:contain;animation:hoja-sube .32s cubic-bezier(.2,0,0,1)}
dialog.hoja::backdrop{background:color-mix(in srgb,var(--noche) 55%,transparent);animation:velo .3s ease}
dialog.hoja.saliendo{animation:hoja-baja .22s ease-in forwards}
@keyframes hoja-sube{from{transform:translateY(100%)}to{transform:none}}
@keyframes hoja-baja{to{transform:translateY(100%)}}
@keyframes velo{from{opacity:0}}
.hoja-asa{width:44px;height:5px;margin:10px auto 0;border-radius:999px;background:var(--linea)}
.hoja-cab{position:sticky;top:0;z-index:1;display:flex;align-items:center;gap:12px;padding:12px 16px 10px 20px;background:var(--superficie)}
.hoja-cab h2{margin:0;flex:1;font:800 var(--t-3)/1.2 var(--display)}
.hoja-cerrar{width:44px;height:44px;border:0;border-radius:999px;background:var(--fondo);color:var(--tinta);font-size:1.1rem;cursor:pointer}
.hoja-cuerpo{padding:4px 20px 24px}
@media (min-width:900px){
  dialog.hoja{inset:0;margin:auto;width:min(560px,92vw);max-height:86dvh;border-radius:24px;animation:hoja-aparece .28s cubic-bezier(.2,0,0,1)}
  dialog.hoja.ancha{width:min(880px,94vw)}
  dialog.hoja.saliendo{animation:hoja-desaparece .2s ease-in forwards}
  .hoja-asa{display:none}
}
@keyframes hoja-aparece{from{opacity:0;transform:translateY(16px) scale(.98)}}
@keyframes hoja-desaparece{to{opacity:0;transform:translateY(8px) scale(.98)}}

/* Formularios cortos dentro de hojas */
.form{display:grid;gap:14px}
.form .acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
.consentimiento{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:var(--t-chico);color:var(--tinta-2)}
.consentimiento input{width:22px;height:22px;flex:none;margin:2px 0 0;accent-color:var(--marca)}

/* Progreso */
.progreso{height:10px;border-radius:999px;background:var(--marca-suave-2);overflow:hidden}
.progreso i{display:block;height:100%;width:calc(var(--p,0)*100%);border-radius:inherit;background:linear-gradient(90deg,var(--marca),color-mix(in srgb,var(--marca) 55%,var(--superficie)))}
.progreso.acento i{background:var(--acento)}

/* La IA escribe (js/ui.js › escribir) */
.escribiendo-ia::after{content:"";display:inline-block;width:.55em;height:1em;margin-left:2px;vertical-align:-.12em;border-radius:2px;background:var(--acento);animation:cursor-ia .8s steps(2) infinite}
@keyframes cursor-ia{50%{opacity:0}}
.ia-marca{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-chico);font-weight:800;color:var(--marca-oscura)}
.ia-marca::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--acento);box-shadow:0 0 0 4px color-mix(in srgb,var(--acento) 25%,transparent)}
.pensando{display:inline-flex;gap:5px;align-items:center}
.pensando i{width:8px;height:8px;border-radius:50%;background:var(--marca);animation:punto 1s ease-in-out infinite}
.pensando i:nth-child(2){animation-delay:.15s}.pensando i:nth-child(3){animation-delay:.3s}

/* Superficie de énfasis de Forma: UNA por pantalla. */
.enfasis{background:var(--enfasis);color:var(--sobre-enfasis)}
.enfasis .gris{color:color-mix(in srgb,var(--sobre-enfasis) 72%,transparent)}
.chip.muestra{background:var(--acento);color:var(--sobre-acento)}
.fila-acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn.fantasma{background:transparent;color:var(--marca-oscura);border:1px solid var(--linea)}
html[data-modo="oscuro"] .btn.fantasma{color:var(--marca)}
.vacio{text-align:center;padding:28px 16px}
.vacio .emoji{margin:0 auto 8px;display:block}
.seccion-t{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:22px 0 10px}
.seccion-t h2{margin:0}
.seccion-t a{font-weight:800;color:var(--marca-oscura);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
html[data-modo="oscuro"] .seccion-t a{color:var(--marca)}

/* La cáscara enfoca main#vista al cambiar de pantalla (lectores de pantalla); sin anillo visible en el contenedor. */
.ap-vista:focus,.ap-vista:focus-visible{outline:none}
.btn.fantasma[disabled]{opacity:1;color:var(--tinta-2);border-style:dashed}

/* Aviso ÚNICO de prototipo (js/aviso-prototipo.js): píldora pequeña en la cabecera, junto a los botones. */
.ap-proto{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:44px;min-height:44px;padding:0 12px;border-radius:999px;border:1px dashed color-mix(in srgb,var(--sobre-marca) 45%,transparent);background:transparent;color:var(--sobre-marca);font:700 var(--t-chico)/1 var(--sans);cursor:pointer;margin-left:auto}
html[data-modo="oscuro"] .ap-proto{color:var(--tinta);border-color:var(--linea)}
.ap-proto:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.ap-proto svg{width:18px;height:18px;flex:none}
/* Celular: solo el ícono (patrón de la casa: acción de solo ícono con aria-label) para no cortar el nombre del rol. */
@media (max-width:600px){.ap-proto{padding:0;width:44px;border-radius:50%}.ap-proto-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
@media (max-width:400px){.ap-top{gap:4px}.ap-marca{gap:8px}}
@media (max-width:340px){.ap-top .ap-simbolo{display:none}}
.proto-lista{margin:12px 0;padding-left:20px;line-height:1.5}
.proto-lista li{margin:6px 0}

/* «¿Qué es…?»: un término del oficio explicado en una frase (queEs() de ui.js). */
.que-es{margin:0 0 12px;font-size:var(--t-chico);color:var(--tinta-2)}
.que-es summary{display:inline-flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;color:var(--marca-oscura);list-style:none}
html[data-modo="oscuro"] .que-es summary{color:var(--marca)}
.que-es summary::-webkit-details-marker{display:none}
.que-es summary::before{content:"?";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:8px;border-radius:50%;background:var(--marca-suave-2);font-size:.75rem}
.que-es p{margin:0 0 4px;max-width:60ch;line-height:1.5;color:var(--tinta)}

/* «Qué pasa al …»: consecuencias visibles ANTES de aceptar, firmar o publicar (quePasa() de ui.js). */
.que-pasa{margin:12px 0;padding:12px 14px;border-radius:var(--radio-chico);background:var(--marca-suave);border:1px solid color-mix(in srgb,var(--marca) 22%,transparent);font-size:var(--t-chico);color:var(--tinta)}
.que-pasa b{display:block;margin-bottom:4px}
.que-pasa ul{margin:0;padding-left:18px;line-height:1.5}
.que-pasa li + li{margin-top:2px}

/* Costo en créditos con su equivalente en pesos (costoHTML() de ui.js). */
.costo{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:2px 6px;white-space:nowrap}
.costo small{color:var(--tinta-2);font-size:var(--t-chico)}