/* toAction — réplica estática de los componentes del dashboard (components/ui). Usa las variables de tokens.css. */
.ta-root{font-family:var(--font-sans);color:var(--foreground);letter-spacing:-.011em;font-feature-settings:"cv11","ss01";-webkit-font-smoothing:antialiased}
.ta-glass{background:var(--card);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass)}
.ta-eyebrow{font-size:12px;font-weight:600;letter-spacing:-.01em;color:var(--primary);margin:0}

/* Button */
.ta-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;border-radius:9999px;font:500 13px/1 var(--font-sans);letter-spacing:-.011em;height:40px;padding:0 16px;border:0;cursor:pointer;transition:background .25s ease,transform .25s ease,box-shadow .25s ease;color:var(--foreground);background:transparent}
.ta-btn:active{transform:scale(.97)}
.ta-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.ta-btn[disabled]{opacity:.5;pointer-events:none}
.ta-btn--default{background:var(--primary);color:var(--primary-foreground);box-shadow:var(--glow-primary)}
.ta-btn--default:hover{background:var(--primary-hover);transform:translateY(-1px);box-shadow:var(--glow-primary-hover)}
.ta-btn--highlight{background:var(--highlight);color:var(--highlight-foreground);font-weight:600;box-shadow:var(--glow-highlight)}
.ta-btn--glass{background:var(--card);-webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--glass-border);box-shadow:var(--shadow-glass)}
.ta-btn--outline{border:1px solid var(--input)}
.ta-btn--outline:hover,.ta-btn--ghost:hover{background:var(--accent)}
.ta-btn--sm{height:32px;padding:0 12px}
.ta-btn--icon{width:40px;padding:0}
.ta-btn svg{width:16px;height:16px;flex:none}

/* Badge */
.ta-badge{display:inline-flex;align-items:center;gap:4px;border-radius:9999px;padding:2px 8px;font:500 11px/14px var(--font-sans)}
.ta-badge--default{background:var(--primary);color:var(--primary-foreground)}
.ta-badge--outline{background:var(--muted);color:var(--muted-foreground)}
.ta-badge--positive{background:var(--positive-bg);color:var(--positive)}
.ta-badge--negative{background:var(--negative-bg);color:var(--negative)}
.ta-badge--warning{background:var(--warning-bg);color:var(--warning)}

/* Card */
.ta-card{min-width:0;border-radius:20px;color:var(--card-foreground);transition:box-shadow .3s cubic-bezier(.16,1,.3,1)}
.ta-card:hover,.ta-card:focus-within{box-shadow:var(--shadow-card-hover)}
.ta-card__header{display:flex;flex-direction:column;gap:4px;padding:24px 24px 8px}
.ta-card__title{margin:0;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.025em}
.ta-card__desc{margin:0;font-size:13px;color:var(--muted-foreground)}
.ta-card__content{padding:8px 24px 24px}

/* Segmented */
.ta-seg{display:inline-flex;max-width:100%;border-radius:9999px;background:var(--muted);padding:4px}
.ta-seg__opt{height:32px;border:0;border-radius:9999px;padding:0 14px;font:500 13px var(--font-sans);white-space:nowrap;background:transparent;color:var(--muted-foreground);cursor:pointer;transition:all .2s}
.ta-seg__opt:hover{color:var(--foreground)}
.ta-seg__opt[aria-checked="true"]{background:var(--thumb);color:var(--foreground);box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 1px rgba(0,0,0,.04)}

/* Brillo de trabajo: borde de degradado cónico que gira y brilla hacia afuera en lo que está trabajando.
   El fondo de la pieza no cambia: ::before es el borde (máscara) y ::after el brillo, pintado en el área de la pieza,
   desenfocado y recortado con una máscara para que solo quede por fuera. Sirve en piezas opacas, de vidrio o transparentes.
   Única condición: la pieza no debe recortar lo que sobresale (sin overflow: hidden). */
@property --ang{syntax:"<angle>";initial-value:0deg;inherits:false}
:where(.ta-glow,.ta-glow--idle){position:relative}
.ta-glow::before,.ta-glow::after,.ta-glow--idle::before{content:"";position:absolute;border-radius:inherit;pointer-events:none}
.ta-glow::before,.ta-glow--idle::before{inset:-1.5px;z-index:1;padding:1.5px;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ta-glow::before,.ta-glow::after{background:conic-gradient(from var(--ang),var(--highlight),var(--nen-refuerzo-1) 18%,var(--highlight) 38%,var(--nen-especializacion-3) 52%,var(--highlight) 66%,var(--nen-especializacion-1) 82%,var(--highlight));animation:ta-spin 4s linear infinite}
.ta-glow::after{inset:-16px;z-index:-1;padding:16px;background-clip:content-box;filter:blur(10px);opacity:.5;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
/* En reposo: el mismo borde en tonos fríos de Nen, quieto y sin brillo. El naranja nunca va en reposo. */
.ta-glow--idle::before{background:conic-gradient(from var(--ang),var(--nen-transformacion-1),var(--nen-emision-1),var(--nen-materializacion-1),var(--nen-especializacion-2),var(--nen-transformacion-2),var(--nen-transformacion-1))}
@keyframes ta-spin{to{--ang:360deg}}

/* Estado: forma + color, para que no dependa solo del color (daltonismo).
   ✓ en círculo (bien), triángulo (aviso), ✕ en cuadrado (problema), círculo punteado (apagado o planeado). */
.ta-status{display:inline-block;flex:none;width:12px;height:12px;vertical-align:-1px;background:currentColor;-webkit-mask:var(--ta-shape) center/contain no-repeat;mask:var(--ta-shape) center/contain no-repeat}
.ta-status--positive{color:var(--positive);--ta-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 0a6 6 0 1 1 0 12A6 6 0 0 1 6 0Zm2.9 3.7-3.7 3.9-2-1.9-.9.9 2.9 2.8 4.6-4.8z'/%3E%3C/svg%3E")}
.ta-status--warning{color:var(--warning);--ta-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M6 .4c.4 0 .7.2.9.5l5 9.2c.4.7-.1 1.5-.9 1.5H1c-.8 0-1.3-.8-.9-1.5L5.1.9c.2-.3.5-.5.9-.5ZM5.3 4v3.6h1.4V4Zm0 4.6V10h1.4V8.6Z'/%3E%3C/svg%3E")}
.ta-status--negative{color:var(--negative);--ta-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill-rule='evenodd' d='M2 .5h8c.8 0 1.5.7 1.5 1.5v8c0 .8-.7 1.5-1.5 1.5H2c-.8 0-1.5-.7-1.5-1.5V2C.5 1.2 1.2.5 2 .5Zm1.6 2.1-1 1L5 6 2.6 8.4l1 1L6 7l2.4 2.4 1-1L7 6l2.4-2.4-1-1L6 5Z'/%3E%3C/svg%3E")}
.ta-status--off{color:var(--tertiary);--ta-shape:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Ccircle cx='6' cy='6' r='5' fill='none' stroke='%23000' stroke-width='1.5' stroke-dasharray='2.2 1.7'/%3E%3C/svg%3E")}
.ta-badge .ta-status{color:inherit}

@media (prefers-reduced-transparency:reduce){.ta-glass,.ta-btn--glass{background:var(--card-solid);-webkit-backdrop-filter:none;backdrop-filter:none}}
@media (prefers-reduced-motion:reduce){.ta-btn,.ta-card,.ta-seg__opt{transition:none}.ta-btn--default:hover{transform:none}.ta-glow::before,.ta-glow::after{animation:none}}