/* ============================================================
   DANGOFE · PISTA DEL CORREO al escribirlo (la pinta src/js/ui/correo-revisar.js)
   Prefijo correo-pista. Pieza del chat de Diseño visual (1.0.285).
   UN solo archivo para los tres sitios donde se escribe un correo:
     · el sistema (index.html): claro y «Noche azul» por html[data-theme='dark'];
     · el portal de agenda (portal/index.html, .campo > #c-correo): «Noche azul» por [data-tono='medianoche'|'negro'];
     · la página del equipo (api_v2/taller/consulta.html, label.campo > #cond-correo): sigue al teléfono
       (prefers-color-scheme) y SOLO cuando la página no trae data-theme ni data-tono.
   El bloque va justo después del <input type="email">:
     <div class="correo-pista correo-pista--sugiere" role="status" aria-live="polite">
       <span class="correo-pista__txt">¿Quisiste decir <b>juan@gmail.com</b>?</span>
       <button type="button" class="correo-pista__si">Sí, corregir</button>
     </div>
     --mal     sin botón: «No encontramos «gmial.co». Revisa lo que va después de la @.»
     --rebota  sin botón (solo en el sistema): «Este correo rebotó el 14 de octubre: no existe. Corrígelo.»
   Sin sombras; la letra es la del sitio (inherit). Si el input vive en una fila flex o en una
   cuadrícula, la pista baja a una línea propia (flex-basis 100 % · grid-column 1 / -1).
   ============================================================ */
.correo-pista {
  --cp-tinta: #0a1633;
  --cp-fondo: rgba(3, 38, 155, .07); --cp-color: #03269b; --cp-borde: rgba(3, 38, 155, .16);
  --cp-btn: #03269b; --cp-btn-txt: #fff;
  --cp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3a6 6 0 0 0-3.5 10.9c.6.5.9 1.1.9 1.8V17h5.2v-1.3c0-.7.3-1.3.9-1.8A6 6 0 0 0 12 3Z'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E");
  box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  flex: 1 1 100%; grid-column: 1 / -1; width: 100%; max-width: 100%; margin: 6px 0 0; padding: 8px 12px 8px 10px;
  border-radius: 14px; border: 1px solid var(--cp-borde); background: var(--cp-fondo); color: var(--cp-tinta);
  font: inherit; font-size: 13px; font-weight: 500; line-height: 1.35; text-align: left; text-transform: none; letter-spacing: normal;
  animation: correo-pista-sube .35s cubic-bezier(.2, .9, .25, 1) both;
}
.correo-pista * { box-sizing: border-box; }
.correo-pista::before {
  content: ''; flex: none; width: 18px; height: 18px; background: var(--cp-color);
  -webkit-mask: var(--cp-ico) center / contain no-repeat; mask: var(--cp-ico) center / contain no-repeat;
}
.correo-pista__txt { flex: 1 1 150px; min-width: 0; margin: 0; color: var(--cp-tinta); overflow-wrap: anywhere; }
.correo-pista__txt b, .correo-pista__txt strong { font-weight: 800; color: var(--cp-color); }
.correo-pista__si {
  flex: none; margin: 0 0 0 auto; min-height: 32px; padding: 0 13px; border: 0; border-radius: 999px;
  background: var(--cp-btn); color: var(--cp-btn-txt); font: inherit; font-size: 12.5px; font-weight: 800; line-height: 1;
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .2s, opacity .2s;
}
.correo-pista__si:hover { opacity: .92; }
.correo-pista__si:active { transform: scale(.96); }
.correo-pista__si:focus-visible { outline: 2px solid var(--cp-color); outline-offset: 2px; }
.correo-pista__si:disabled { opacity: .5; cursor: default; }

/* ---------- variantes ---------- */
.correo-pista--mal {
  --cp-fondo: rgba(194, 117, 0, .11); --cp-color: #9a5b00; --cp-borde: rgba(194, 117, 0, .24);
  --cp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20L12 3Z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
}
.correo-pista--rebota {
  --cp-fondo: rgba(192, 57, 43, .1); --cp-color: #a52f20; --cp-borde: rgba(192, 57, 43, .22);
  --cp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='6' width='14' height='12' rx='3'/%3E%3Cpath d='m3 9 7 5 7-5'/%3E%3Cpath d='m17 3 4 4M21 3l-4 4'/%3E%3C/svg%3E");
}

/* Dentro de .campo del portal y de la página del equipo (ya traen su separación) */
.campo > .correo-pista { margin-top: 2px; }

/* ---------- «Noche azul»: el sistema (html[data-theme='dark']) y el portal ([data-tono]) ---------- */
[data-theme='dark'] .correo-pista, [data-tono='medianoche'] .correo-pista, [data-tono='negro'] .correo-pista, [data-tono='contraste'] .correo-pista {
  --cp-tinta: #f2f5fb; --cp-fondo: rgba(143, 180, 255, .14); --cp-color: #c7d7ff; --cp-borde: rgba(143, 180, 255, .3); --cp-btn: #2e5bd9;
}
[data-theme='dark'] .correo-pista--mal, [data-tono='medianoche'] .correo-pista--mal, [data-tono='negro'] .correo-pista--mal, [data-tono='contraste'] .correo-pista--mal {
  --cp-fondo: rgba(246, 182, 74, .14); --cp-color: #fcd34d; --cp-borde: rgba(246, 182, 74, .32);
}
[data-theme='dark'] .correo-pista--rebota, [data-tono='medianoche'] .correo-pista--rebota, [data-tono='negro'] .correo-pista--rebota, [data-tono='contraste'] .correo-pista--rebota {
  --cp-fondo: rgba(255, 138, 122, .14); --cp-color: #fca5a5; --cp-borde: rgba(255, 138, 122, .32);
}
/* El portal en «claro» aunque el teléfono esté oscuro: se queda claro (lo decide data-tono). */

/* ---------- la página del equipo: sigue al teléfono, solo sin data-theme ni data-tono ---------- */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) body:not([data-tono]) .correo-pista { --cp-tinta: #e9eef8; --cp-fondo: rgba(96, 165, 250, .14); --cp-color: #93c5fd; --cp-borde: rgba(96, 165, 250, .3); --cp-btn: #3b82f6; }
  html:not([data-theme]) body:not([data-tono]) .correo-pista--mal { --cp-fondo: rgba(251, 191, 36, .14); --cp-color: #fcd34d; --cp-borde: rgba(251, 191, 36, .3); }
  html:not([data-theme]) body:not([data-tono]) .correo-pista--rebota { --cp-fondo: rgba(248, 113, 113, .14); --cp-color: #fca5a5; --cp-borde: rgba(248, 113, 113, .3); }
}

@keyframes correo-pista-sube { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .correo-pista { animation: none; } }