/* Yalemo v2.5 · «Dictar mi oficio»: pantalla de elección + estados (diseño v5, 22 oct 2026). Copia fiel de dictado-v5.css y
   dictado-estados-v5.css (sin la regla .pie-mini repetida) + ajustes de implementación al final. */
/* Yalemo · Pantalla de elección v5 (22 oct 2026). Dos botones iguales: componente .btn--grande de la portada (56 px, radio 20, Inter 600 17 px, sin sombra), mismo ancho. */
.v5-pag{min-height:100vh;display:flex;flex-direction:column;overflow:auto;background:var(--y-papel)}
.v5-pag .app-top__nav .btn{min-height:44px;padding:0 16px}
.v5{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;padding:var(--y-s-5) var(--y-s-6) var(--y-s-10)}
.v5__barra{width:min(1080px,100%)}
.v5__volver{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-left:-4px;padding:0 4px;color:var(--y-tinta-2);font:500 var(--y-t-small)/1 var(--y-font-texto);text-decoration:none}
.v5__volver svg{width:18px;height:18px}
.v5__volver:hover{color:var(--y-tinta)}
.v5__centro{margin:auto 0;width:min(760px,100%);display:flex;flex-direction:column;align-items:center;text-align:center;padding-bottom:var(--y-s-6)}
.v5__titulo{margin:0;font:700 4.5rem/1.02 var(--y-font-titulos);letter-spacing:-.025em;color:var(--y-tinta)}
.v5__sub span{display:block}
.v5__acento{color:var(--y-cobalto)}
.v5__sub{margin:var(--y-s-5) 0 0;max-width:40rem;text-wrap:balance;font:400 var(--y-t-lead)/1.55 var(--y-font-texto);color:var(--y-tinta-2)}
.v5__acciones{display:grid;grid-template-columns:repeat(2,320px);justify-content:center;gap:var(--y-s-4) var(--y-s-5);margin-top:var(--y-s-10)}
.v5__opcion{display:flex;flex-direction:column;align-items:stretch}
.v5-btn{width:100%;box-shadow:none}
.v5-btn svg{width:20px;height:20px}
.v5-escribir{background:var(--y-cobalto);color:#FFFFFF}
.v5-escribir:hover{background:var(--y-cobalto-hover)}
.v5-dictar{background:var(--y-tinta);color:#FFFFFF}
.v5-dictar:hover{background:var(--y-tinta-2);color:#FFFFFF}
.v5-nuevo{display:inline-flex;align-items:center;margin-left:2px;padding:4px 8px;border-radius:var(--y-r-pill);background:var(--y-cobalto-50);color:var(--y-cobalto-900);font:700 .6875rem/1 var(--y-font-texto);letter-spacing:.08em;text-transform:uppercase}
.v5 .btn:focus-visible{outline:3px solid var(--y-foco);outline-offset:3px}
.v5__nota{margin:var(--y-s-3) 0 0;padding:0 var(--y-s-2);text-wrap:balance;color:var(--y-tinta-2);font:500 var(--y-t-small)/1.45 var(--y-font-texto)}
.v5__cuenta{margin:var(--y-s-10) 0 0;color:var(--y-tinta-3);font:500 var(--y-t-small)/1.45 var(--y-font-texto)}

.pie-mini{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--y-s-4);padding:var(--y-s-2) var(--y-s-6);border-top:1px solid var(--y-linea);background:#fff;color:var(--y-tinta-3);font:500 var(--y-t-small)/1.4 var(--y-font-texto)}
.pie-mini p{margin:0}
.pie-mini nav{display:flex;align-items:center;gap:4px}
.pie-mini a{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--y-tinta-2);text-decoration:none}
.pie-mini a:hover{color:var(--y-tinta);text-decoration:underline}

@media (max-width:959px){
  .v5{padding:0 var(--y-s-5) var(--y-s-6)}
  .v5__centro{margin:var(--y-s-6) 0 0;width:100%}
  .v5__titulo{font-size:2.875rem}
  .v5__sub{margin-top:var(--y-s-4)}
  .v5__sub span{display:inline}
  .v5__acciones{grid-template-columns:1fr;width:100%;row-gap:var(--y-s-5);margin-top:var(--y-s-8)}
  .v5__cuenta{margin-top:var(--y-s-6)}
  .pie-mini{flex-direction:column;gap:0;padding:var(--y-s-3) var(--y-s-5) var(--y-s-2);text-align:center}
}

/* Yalemo · Dictado v5: grabando, procesando y micrófono negado. Solo componentes del sitio (.card, .btn, .btn--grande, tokens). Tinta = color propio del dictado; cobalto = acciones generales y foco. */
.ds-pag{min-height:100vh;display:flex;flex-direction:column;background:var(--y-papel)}
.ds{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;padding:var(--y-s-10) var(--y-s-6)}
.ds__col{margin:auto 0;width:min(680px,100%);display:flex;flex-direction:column;align-items:center;text-align:center}
.ds__titulo{margin:0;font:700 var(--y-t-h1)/1.1 var(--y-font-titulos);letter-spacing:-.015em;color:var(--y-tinta);text-wrap:balance}
.ds__titulo--panel{font-size:1.75rem;line-height:1.2}
.ds__guia{margin:var(--y-s-3) 0 0;max-width:30rem;text-wrap:balance;font:400 var(--y-t-lead)/1.55 var(--y-font-texto);color:var(--y-tinta-2)}
.ds__panel{width:100%;margin-top:var(--y-s-8);padding:var(--y-s-8);display:flex;flex-direction:column;align-items:center}
.ds__col > .ds__panel:first-child{margin-top:0}
.ds__estado{display:inline-flex;align-items:center;gap:8px;margin:0;color:var(--y-tinta);font:600 var(--y-t-small)/1 var(--y-font-texto)}
.ds__punto{width:10px;height:10px;border-radius:50%;background:#C2362F}
.ds__contador{margin:var(--y-s-4) 0 0;font-family:var(--y-font-titulos);font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1}
.ds__tiempo{font-size:4.5rem;color:var(--y-tinta)}
.ds__limite{font-size:1.75rem;color:var(--y-tinta-3)}
.ds__barra{width:100%;height:6px;margin-top:var(--y-s-6);border-radius:var(--y-r-pill);background:var(--y-linea);overflow:hidden}
.ds__barra span{display:block;height:100%;border-radius:inherit;background:var(--y-tinta)}
.ds__barra--espera{max-width:320px}
.ds__barra--espera span{width:35%;margin:0 auto;animation:ds-espera 1.8s ease-in-out infinite alternate}
@keyframes ds-espera{from{transform:translateX(-93%)}to{transform:translateX(93%)}}
@media (prefers-reduced-motion:reduce){.ds__barra--espera span{animation:none;width:100%;opacity:.35}}
.ds__acciones{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--y-s-3);margin-top:var(--y-s-8)}
.ds__acciones .btn{width:100%}
.ds-tinta{background:var(--y-tinta);color:#FFFFFF}
.ds-tinta:hover{background:var(--y-tinta-2);color:#FFFFFF}
.ds .btn svg{width:20px;height:20px}
.ds .btn:focus-visible,.ds__enlace:focus-visible{outline:3px solid var(--y-foco);outline-offset:3px}
.ds__privado{margin:var(--y-s-5) 0 0;color:var(--y-tinta-3);font:500 var(--y-t-small)/1.45 var(--y-font-texto);text-wrap:balance}
.ds__enlace{display:inline-flex;align-items:center;min-height:44px;margin-top:var(--y-s-4);padding:0 var(--y-s-3);color:var(--y-tinta-2);font:500 var(--y-t-small)/1 var(--y-font-texto);text-decoration:underline;text-underline-offset:3px}
.ds__enlace:hover{color:var(--y-tinta)}


@media (max-width:959px){
  .ds{padding:var(--y-s-6) var(--y-s-5)}
  .ds__col{margin:var(--y-s-4) 0 auto}
  .ds__panel{padding:var(--y-s-6) var(--y-s-5)}
  .ds__titulo--panel{font-size:1.5rem}
  .ds__tiempo{font-size:3.5rem}
  .ds__limite{font-size:1.5rem}
  .ds__acciones{grid-template-columns:1fr;margin-top:var(--y-s-6)}
}

/* ---- v2.5 (implementación): piezas que el diseño dibuja estáticas, alturas bajas (240-500 px) y horizontal. ---- */
.ds__form{display:contents}
.ds__barra span{width:0;transition:width .25s linear}
.ds__barra--espera span{transition:none}
.ds__aviso{margin:var(--y-s-3) 0 0;color:#B42318;font:600 var(--y-t-small)/1.4 var(--y-font-texto)}
.ds__titulo:focus{outline:none}
.v5-btn{white-space:normal;height:auto;min-height:56px;padding-top:10px;padding-bottom:10px;line-height:1.2}
.ds__acciones .btn{min-width:0;max-width:100%;white-space:normal;height:auto;padding-top:10px;padding-bottom:10px;line-height:1.2;text-align:center}
@media (max-width:359px){.ds__acciones .btn{padding-left:16px;padding-right:16px}}
@media (max-width:359px){
  .v5__titulo{font-size:2.375rem}
  .ds__tiempo{font-size:3rem}
  .app-top__titulo{display:none}
}
@media (max-height:560px){
  .v5{padding-top:0;padding-bottom:var(--y-s-4)}
  .v5__centro{margin:var(--y-s-2) 0 0}
  .v5__titulo{font-size:2.25rem}
  .v5__sub{margin-top:var(--y-s-2);font-size:1rem}
  .v5__acciones{margin-top:var(--y-s-4);row-gap:var(--y-s-3)}
  .v5__nota{margin-top:var(--y-s-1)}
  .v5__cuenta{margin-top:var(--y-s-3)}
  .ds{padding:var(--y-s-3) var(--y-s-5)}
  .ds__col{margin:0}
  .ds__titulo{font-size:1.5rem}
  .ds__guia{margin-top:var(--y-s-1);font-size:1rem}
  .ds__panel{margin-top:var(--y-s-3);padding:var(--y-s-4)}
  .ds__contador{margin-top:var(--y-s-2)}
  .ds__tiempo{font-size:2.5rem}
  .ds__limite{font-size:1.125rem}
  .ds__barra{margin-top:var(--y-s-3)}
  .ds__acciones{margin-top:var(--y-s-4)}
  .ds__privado{margin-top:var(--y-s-2)}
  .pie-mini{padding-top:var(--y-s-1);padding-bottom:var(--y-s-1)}
}
@media (max-height:560px) and (min-width:560px){
  .v5__acciones{grid-template-columns:repeat(2,minmax(0,320px))}
  .ds__acciones{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pie-mini{flex-direction:row;justify-content:space-between;text-align:left}
}
@media (max-height:360px){
  .app-top{height:48px}
  .v5__barra{display:none}
  .v5__titulo{font-size:1.75rem}
  .v5__sub,.v5__nota,.ds__guia{display:none}
  .ds__privado{font-size:.8125rem}
}

/* v2.5.1 (QA N-02): aviso de cupo agotado arriba de las opciones de empezar.php (funciona también sin estas reglas). */
.v5__aviso{order:-1;width:min(640px,100%);margin:0 0 var(--y-s-6);padding:var(--y-s-4) var(--y-s-5);border:1px solid var(--y-borde,#d9dcef);border-radius:16px;background:#fff7e6;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--y-s-3) var(--y-s-4);text-align:center}
.v5__aviso p{margin:0;flex:1 1 18rem;color:var(--y-tinta);font:500 var(--y-t-small)/1.45 var(--y-font-texto)}
.v5__aviso .btn{min-height:44px;padding:0 20px;white-space:nowrap}
/* v2.5.1 delta4 (QA D3-03): sin cupo «Escribir con el asistente» lleva btn--fantasma: contorno, no relleno (antes .v5-escribir lo rellenaba) */
.v5-escribir.btn--fantasma{background:transparent;color:var(--y-cobalto);box-shadow:inset 0 0 0 2px var(--y-cobalto)}
.v5-escribir.btn--fantasma:hover{background:var(--y-cobalto-50);color:var(--y-cobalto-900)}