/* Diálogos, avisos con «Deshacer» y estados de acciones de Tuneame (pedido del socio del 09-10). Un solo archivo para las
   páginas públicas (vanilla, /app-assets/ui.js) y los paneles React (console/src/ui.tsx lo importa). Identidad de Tuneame:
   papel y tinta, Outfit para el título, esquinas rectas, línea de color arriba, sin sombras. Los colores de los estados de
   acción son los mismos en todo el sitio (docs/PATRON-PANEL-CLIENTE.md, «Estados de acciones»). */
@font-face{font-family:Outfit;src:url('/brand/assets/fonts/Outfit-800.woff2') format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:DM;src:url('/brand/assets/fonts/DMSans-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:DM;src:url('/brand/assets/fonts/DMSans-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--td-ink:#202837;--td-paper:#fffdfa;--td-orange:#ff7f45;--td-orange-hover:#ffa270;--td-blue:#335cff;--td-sky:#e7edff;--td-mint:#d6f2e8;--td-peach:#fff0e7;--td-line:#ced0d4;--td-muted:#536071;--td-red:#b52c31;--td-red-soft:#fdeceb;--td-off:#eceef1}

/* ---- Diálogo ---- */
.td-dialog{width:min(480px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 48px);margin:auto;padding:0;border:0;border-top:5px solid var(--td-orange);background:var(--td-paper);color:var(--td-ink);font:400 16px/1.55 DM,'DM Sans',sans-serif;overflow:auto;overscroll-behavior:contain}
.td-dialog--danger{border-top-color:var(--td-red)}
.td-dialog::backdrop{background:rgba(32,40,55,.58)}
.td-dialog[open]{animation:td-in .18s ease-out}
.td-dialog[open]::backdrop{animation:td-fade .18s ease-out}
@keyframes td-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes td-fade{from{opacity:0}to{opacity:1}}
.td-dialog-body{display:grid;gap:12px;padding:28px 28px 8px}
.td-dialog-kicker{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--td-muted)}
.td-dialog--danger .td-dialog-kicker{color:var(--td-red)}
.td-dialog-title{margin:0;font:800 26px/1.08 Outfit,sans-serif;letter-spacing:-.03em;text-wrap:balance;color:var(--td-ink)}
.td-dialog-text{margin:0;font-size:16px;color:var(--td-ink);max-width:52ch}
.td-dialog-text+.td-dialog-text{color:var(--td-muted);font-size:15px}
.td-dialog-media{display:block;width:96px;height:96px;object-fit:cover;background:var(--td-sky)}
.td-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;padding:20px 28px 28px}
.td-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:0;border-radius:0;font:700 15px/1.2 DM,'DM Sans',sans-serif;cursor:pointer;transition:background .18s,color .18s}
.td-btn:focus-visible{outline:3px solid var(--td-blue);outline-offset:3px}
.td-btn--cancel{background:var(--td-paper);color:var(--td-ink);box-shadow:inset 0 0 0 1px var(--td-ink)}
.td-btn--cancel:hover{background:var(--td-peach)}
.td-btn--primary{background:var(--td-orange);color:var(--td-ink)}
.td-btn--primary:hover{background:var(--td-orange-hover)}
.td-btn--danger{background:var(--td-red);color:var(--td-paper)}
.td-btn--danger:hover{background:#8f1f24}
/* Confirmación escrita, bloqueo y error dentro del diálogo (10-10, «Borrar mi cuenta»). */
.td-dialog-list{margin:0;padding-left:20px;display:grid;gap:6px;font-size:15px;color:var(--td-ink)}
.td-dialog-field{display:grid;gap:8px;margin-top:6px}
.td-dialog-label{font-size:14px;font-weight:700;color:var(--td-ink)}
.td-dialog-input{width:100%;box-sizing:border-box;min-height:52px;padding:10px 14px;border:0;border-radius:0;box-shadow:inset 0 0 0 2px var(--td-ink);background:#fff;color:var(--td-ink);font:800 22px/1.2 Outfit,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.td-dialog-input:focus{outline:3px solid var(--td-blue);outline-offset:3px}
.td-dialog-hint{margin:0;min-height:1.4em;font-size:14px;color:var(--td-muted)}
.td-dialog-blocked{display:grid;gap:10px;padding:14px 16px;background:var(--td-peach);border-left:4px solid var(--td-orange)}
.td-dialog-blocked-title{margin:0;font-weight:700}
.td-dialog-error{display:grid;gap:8px;padding:12px 14px;background:var(--td-red-soft);border-left:4px solid var(--td-red);color:var(--td-red);font-size:15px}
.td-dialog-error p{margin:0;font-weight:700}
.td-dialog-error[hidden]{display:none}
.td-btn.td-act{position:relative}
@media(max-width:560px){
  .td-dialog{width:100vw;max-height:88dvh;margin:auto 0 0;border-top-width:5px}
  .td-dialog[open]{animation-name:td-up}
  .td-dialog-body{padding:24px 18px 4px}
  .td-dialog-title{font-size:23px}
  .td-dialog-actions{flex-direction:column-reverse;padding:18px 18px calc(18px + env(safe-area-inset-bottom))}
  .td-btn{width:100%;min-height:52px}
}
@keyframes td-up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}

/* ---- Aviso breve con «Deshacer» ---- */
.td-toasts{position:fixed;left:24px;bottom:24px;z-index:2147483000;display:grid;gap:8px;width:min(440px,calc(100vw - 32px));pointer-events:none}
.td-toast{position:relative;display:flex;align-items:center;gap:16px;padding:14px 14px 14px 18px;background:var(--td-ink);color:var(--td-paper);font:400 15px/1.4 DM,'DM Sans',sans-serif;pointer-events:auto;animation:td-in .18s ease-out;overflow:hidden}
.td-toast-text{flex:1;min-width:0}
.td-toast-action{flex:none;min-height:40px;padding:8px 14px;border:0;background:var(--td-orange);color:var(--td-ink);font:700 14px/1 DM,'DM Sans',sans-serif;cursor:pointer}
.td-toast-action:hover{background:var(--td-orange-hover)}
.td-toast-action:focus-visible,.td-toast-close:focus-visible{outline:3px solid var(--td-sky);outline-offset:2px}
.td-toast-close{flex:none;display:grid;place-items:center;width:36px;height:36px;border:0;background:none;color:var(--td-paper);cursor:pointer;font-size:20px;line-height:1}
.td-toast-time{position:absolute;left:0;bottom:0;height:3px;width:100%;background:var(--td-orange);transform-origin:left;animation:td-time linear forwards}
.td-toast:hover .td-toast-time,.td-toast:focus-within .td-toast-time{animation-play-state:paused}
@keyframes td-time{from{transform:scaleX(1)}to{transform:scaleX(0)}}
@media(max-width:560px){.td-toasts{left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));width:auto}}

/* ---- Estados de acciones ----
   idle: el color propio del botón · busy: azul con texto en curso y una barra que avanza · done: menta con tilde ·
   error: rojo con el motivo debajo y «Reintentar» · off (deshabilitado): gris, con el motivo visible debajo. */
.td-act{position:relative;overflow:hidden}
.td-act-icon{display:inline-grid;place-items:center;flex:none;width:18px;height:18px;vertical-align:-3px}
.td-act-icon+.td-act-label{margin-left:10px}
.td-act-icon svg{width:18px;height:18px}
.td-act[data-state=busy]{background:var(--td-blue)!important;color:var(--td-paper)!important;box-shadow:none!important;cursor:progress!important;opacity:1!important}
.td-act[data-state=busy]::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,transparent 0,rgba(255,253,250,.85) 50%,transparent 100%) no-repeat;background-size:40% 100%;animation:td-run 1.4s ease-in-out infinite}
.td-act[data-state=busy] .td-act-icon svg{animation:td-spin 1.1s linear infinite}
.td-act[data-state=done]{background:var(--td-mint)!important;color:var(--td-ink)!important;box-shadow:inset 0 0 0 1px #9fd6c1!important;opacity:1!important}
.td-act[data-state=error]{background:var(--td-red)!important;color:var(--td-paper)!important;box-shadow:none!important;opacity:1!important}
.td-act[data-state=error]:hover{background:#8f1f24!important}
.td-act[data-state=off],.td-act:disabled:not([data-state=busy]):not([data-state=done]){background:var(--td-off)!important;color:var(--td-muted)!important;box-shadow:inset 0 0 0 1px var(--td-line)!important;opacity:1!important;cursor:not-allowed!important}
.td-act[aria-disabled=true]{pointer-events:none}
@keyframes td-run{from{background-position:-60% 0}to{background-position:160% 0}}
@keyframes td-spin{to{transform:rotate(360deg)}}
.td-act-reason{margin:8px 0 0;font:600 14px/1.4 DM,'DM Sans',sans-serif;color:var(--td-muted);max-width:60ch}
.td-act-reason--error{color:var(--td-red)}
.td-act-reason:empty{display:none}
@media(prefers-reduced-motion:reduce){
  .td-dialog[open],.td-dialog[open]::backdrop,.td-toast{animation:none}
  .td-act[data-state=busy]::after{animation:none;background:rgba(255,253,250,.6);background-size:100% 100%}
  .td-act[data-state=busy] .td-act-icon svg{animation:none}
  .td-toast-time{animation:none;display:none}
}