/* ============================================================
   DANGOFE OS · TALLER · RECOMENDACIONES DE LA IA DENTRO DE «NOTIFICACIONES DEL TALLER» (prefijo tia-) · 2026-10-20 · chat de Diseño
   Va con taller-ia.js, después del bloque de pendientes (.tpd) en .tal-card.tal-notif (tokens --tp-* de taller-panel.css).
   Sin sombras (solo anillos planos de foco); la hoja (versión C) sin desenfoque de fondo; claro y «Noche azul» por [data-theme='dark'].
   A · Bloque dentro de la tarjeta · B · Tarjeta propia · C · Fila que abre una hoja. Prioridades: alta (rojo), media (ámbar), baja (azul).
   ============================================================ */
.tia { --tia-az: var(--tp-az, 3, 38, 155); --tia-cel: var(--tp-cel, 53, 146, 207); --tia-ver: var(--tp-ver, 29, 154, 91); --tia-amb: var(--tp-amb, 194, 117, 0); --tia-roj: var(--tp-roj, 192, 57, 43);
  --tia-txt3: var(--tp-txt3, var(--text-secondary, #5b6880)); --tia-borde: var(--tp-borde, var(--glass-border, rgba(10, 22, 51, .09))); --tia-card2: var(--tp-card2, var(--glass-bg-input, rgba(10, 22, 51, .04))); --tia-card3: var(--tp-card3, rgba(10, 22, 51, .07)); --tia-azul: var(--tp-azul, #03269b);
  --tia-alta: #b42318; --tia-media: #9a5b00; --tia-baja: #1d6fa5; --tia-sobre: #fff;
  padding: 0 14px 12px; }
[data-theme='dark'] .tia { --tia-alta: #ff8a7a; --tia-media: #fcd34d; --tia-baja: #7dd3fc; --tia-sobre: #0b1540; }
.tia *, .tia *::before, .tia *::after { box-sizing: border-box; }
/* cabecera del bloque */
.tia-cab { display: flex; align-items: center; gap: 10px; padding: 12px 0 8px; }
.tia-cab__ico { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgb(var(--tia-az)), rgb(var(--tia-cel))); }
.tia-cab__ico svg { width: 16px; height: 16px; }
.tia-cab__txt { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.tia-cab__txt b { font-size: 14px; font-weight: 800; line-height: 1.2; }
.tia-cab__txt small { font-size: 12px; color: var(--tia-txt3); line-height: 1.3; }
.tia-cab__n { margin-left: auto; min-width: 24px; padding: 2px 8px; border-radius: 999px; text-align: center; font-size: 11.5px; font-weight: 800; background: rgba(var(--tia-az), .1); color: var(--tia-azul); }
[data-theme='dark'] .tia-cab__n { color: #8fb4ff; }
.tia-cuerpo { display: flex; flex-direction: column; gap: 10px; }
/* textos */
.tia-resumen { margin: 0; font-size: 13px; line-height: 1.45; }
.tia-vacio { margin: 0; font-size: 13px; line-height: 1.45; color: var(--tia-txt3); display: flex; gap: 6px; align-items: flex-start; }
.tia-vacio svg { width: 15px; height: 15px; flex: none; margin-top: 1px; color: #15724a; }
.tia-mes { margin: 0; font-size: 12px; color: var(--tia-txt3); }
.tia-nota { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: 11.5px; line-height: 1.4; color: var(--tia-txt3); opacity: .85; }
.tia-nota svg { width: 13px; height: 13px; flex: none; margin-top: 2px; }
/* botones */
.tia-b { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 7px 13px; border-radius: 11px; border: 1px solid var(--tia-borde); background: var(--tia-card3); color: inherit; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; align-self: flex-start; }
.tia-b svg { width: 14px; height: 14px; }
.tia-b[disabled] { opacity: .6; cursor: default; }
.tia-b:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(var(--tia-cel), .35); }
.tia-b--pri { color: #fff; border-color: transparent; background: linear-gradient(135deg, rgb(var(--tia-az)), rgb(var(--tia-cel))); }
[data-theme='dark'] .tia-b--pri { color: #fff; }
.tia-b--ir { background: rgb(var(--tia-az)); border-color: transparent; color: #fff; }
[data-theme='dark'] .tia-b--ir { background: #2e5bd9; }
/* recomendaciones */
.tia-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tia-rec { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; align-items: center; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--tia-borde); border-left: 3px solid rgb(var(--tia-amb)); background: var(--tia-card2); }
.tia-rec--alta { border-left-color: rgb(var(--tia-roj)); }
.tia-rec--baja { border-left-color: rgb(var(--tia-cel)); }
.tia-rec__prio { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: rgba(var(--tia-amb), .14); color: var(--tia-media); }
.tia-rec--alta .tia-rec__prio { background: rgba(var(--tia-roj), .12); color: var(--tia-alta); }
.tia-rec--baja .tia-rec__prio { background: rgba(var(--tia-cel), .14); color: var(--tia-baja); }
.tia-rec__txt { grid-column: 1 / -1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.tia-rec__txt b { font-size: 13.5px; font-weight: 800; line-height: 1.3; overflow-wrap: anywhere; }
.tia-rec__txt small { font-size: 12px; color: var(--tia-txt3); line-height: 1.35; overflow-wrap: anywhere; }
.tia-rec .tia-b--ir { grid-column: 1 / -1; justify-self: start; min-height: 34px; padding: 6px 12px; border-radius: 10px; }
.tia-pie { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.tia-pie__meta { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--tia-txt3); }
.tia-pie__meta svg { width: 13px; height: 13px; }
/* avisos: sin clave, error */
.tia-aviso { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 14px; border: 1px solid rgba(var(--tia-amb), .35); background: rgba(var(--tia-amb), .08); }
.tia-aviso > svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: #9a5b00; }
.tia-aviso b { display: block; font-size: 13.5px; font-weight: 800; line-height: 1.3; }
.tia-aviso small { display: block; font-size: 12px; color: var(--tia-txt3); line-height: 1.35; margin-top: 2px; }
.tia-aviso--error { border-color: rgba(var(--tia-roj), .3); background: rgba(var(--tia-roj), .07); }
.tia-aviso--error > svg { color: var(--tia-alta); }
[data-theme='dark'] .tia-aviso > svg { color: #fcd34d; }
[data-theme='dark'] .tia-aviso--error > svg { color: #ff8a7a; }
/* cargando: el ícono late 4 veces y las barras brillan 4 veces; después se quedan quietas */
.tia-carga { display: flex; gap: 10px; align-items: center; }
.tia-carga__ico { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, rgb(var(--tia-az)), rgb(var(--tia-cel))); animation: tia-late 1s ease-in-out 4 both; }
.tia-carga__ico svg { width: 16px; height: 16px; }
.tia-carga b { display: block; font-size: 13.5px; font-weight: 800; }
.tia-carga small { display: block; font-size: 12px; color: var(--tia-txt3); }
.tia-esq { display: flex; flex-direction: column; gap: 6px; }
.tia-esq i { display: block; height: 10px; border-radius: 999px; background: var(--tia-card3); animation: tia-brillo 1.2s ease-in-out 4 both; }
.tia-esq i:nth-child(1) { width: 82%; } .tia-esq i:nth-child(2) { width: 64%; animation-delay: .15s; } .tia-esq i:nth-child(3) { width: 72%; animation-delay: .3s; }
@keyframes tia-late { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes tia-brillo { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
/* ---------- A · dentro de la tarjeta: con la pestaña «Avisos» de T74-A se esconde ---------- */
.tal-notif:not(.is-tpd-pend) .tpd[data-v="A"] ~ .tia[data-v="A"] { display: none; }
.tia[data-v="A"] .tia-cab { border-top: 1px solid var(--tia-borde); margin-top: 2px; }
/* ---------- B · tarjeta propia ---------- */
.tia--tarjeta { padding: 0 16px 14px; margin-top: 12px; }
.tia--tarjeta .tia-cab { padding: 14px 0 10px; }
.tia--tarjeta .tia-cab__ico { width: 36px; height: 36px; border-radius: 12px; }
.tia--tarjeta .tia-cab__txt b { font-size: 15px; }
/* ---------- C · fila + hoja ---------- */
.tia[data-v="C"] { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.tia-fila { appearance: none; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 14px; border: 1px solid var(--tia-borde); background: var(--tia-card2); color: inherit; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; text-align: left; }
.tia-fila > svg { width: 18px; height: 18px; color: var(--tia-azul); flex: none; }
.tia-fila > svg:last-child { margin-left: auto; }
.tia-fila span i { font-style: normal; margin-left: 4px; padding: 2px 8px; border-radius: 999px; background: rgba(var(--tia-az), .1); color: var(--tia-azul); font-size: 11.5px; }
[data-theme='dark'] .tia-fila > svg, [data-theme='dark'] .tia-fila span i { color: #8fb4ff; }
.tia-fila__sig { margin: 0; padding: 0 4px; font-size: 12.5px; line-height: 1.4; color: var(--tia-txt3); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tia-hoja { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 8800; display: flex; align-items: flex-end; justify-content: center; background: rgba(10, 22, 51, .42); animation: tia-aparece .2s ease both;
  --tih-tinta: #0a1633; --tih-tenue: #5b6880; --tih-vidrio: rgba(255, 255, 255, .96); --tih-borde: rgba(255, 255, 255, .9); --tih-linea: rgba(10, 22, 51, .09); --tih-campo: rgba(10, 22, 51, .05);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--tih-tinta); }
[data-theme='dark'] .tia-hoja, .tia-hoja.is-noche { --tih-tinta: #f2f5fb; --tih-tenue: #a9b4c9; --tih-vidrio: rgba(12, 22, 60, .96); --tih-borde: rgba(140, 170, 255, .28); --tih-linea: rgba(255, 255, 255, .11); --tih-campo: rgba(255, 255, 255, .06); background: rgba(2, 6, 24, .62); }
.tia-hoja.is-fuera { opacity: 0; transition: opacity .2s ease; pointer-events: none; }
@keyframes tia-aparece { from { opacity: 0; } to { opacity: 1; } }
.tia-hoja *, .tia-hoja *::before, .tia-hoja *::after { box-sizing: border-box; }
.tia-hoja__caja { position: relative; width: 100%; max-width: 560px; max-height: 92vh; max-height: 92dvh; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; gap: 12px; padding: 22px 18px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 30px 30px 0 0; border: 1px solid var(--tih-borde); border-bottom: 0; background: var(--tih-vidrio); transform: translateY(24px); animation: tia-sube .3s cubic-bezier(.2, .9, .25, 1) both; }
.tia-hoja__caja::-webkit-scrollbar { display: none; }
@keyframes tia-sube { to { transform: translateY(0); } }
.tia-hoja__asa { width: 42px; height: 5px; margin: -8px auto 0; border-radius: 999px; background: var(--tih-linea); }
.tia-hoja__cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tia-hoja__cab > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tia-hoja__ojal { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--tih-tenue); }
.tia-hoja__ojal svg { width: 12px; height: 12px; }
.tia-hoja__cab b { font-size: 21px; font-weight: 800; letter-spacing: -.015em; line-height: 1.15; }
.tia-hoja__cab small { font-size: 13px; color: var(--tih-tenue); }
.tia-hoja__x { flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--tih-linea); background: var(--tih-campo); color: var(--tih-tenue); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.tia-hoja__x svg { width: 15px; height: 15px; }
.tia-hoja .tia-cuerpo { --tia-az: 3, 38, 155; --tia-cel: 53, 146, 207; --tia-ver: 29, 154, 91; --tia-amb: 194, 117, 0; --tia-roj: 192, 57, 43; --tia-txt3: var(--tih-tenue); --tia-borde: var(--tih-linea); --tia-card2: var(--tih-campo); --tia-card3: var(--tih-campo); --tia-azul: #03269b; --tia-alta: #b42318; --tia-media: #9a5b00; --tia-baja: #1d6fa5; }
.tia-hoja.is-noche .tia-cuerpo { --tia-alta: #ff8a7a; --tia-media: #fcd34d; --tia-baja: #7dd3fc; --tia-azul: #8fb4ff; }
@media (min-width: 700px) { .tia-hoja { align-items: center; padding: 20px; } .tia-hoja__caja { border-radius: 28px; border-bottom: 1px solid var(--tih-borde); max-height: 88vh; } .tia-hoja__asa { display: none; } }
@media (prefers-reduced-motion: reduce) { .tia-hoja, .tia-hoja__caja, .tia-carga__ico, .tia-esq i { animation: none; transform: none; opacity: 1; } }