/* Piezas de interfaz compartidas por todo el sistema: web pública, panel de
 * usuario y administración. Hoja aparte del build de Tailwind para que esté
 * disponible en cualquier layout sin depender de la compilación.
 */

/* ── Estado «procesando» de los botones ───────────────────────────────────
 * Lo aplica assets/js/app/submit-guard.js al enviar un formulario POST.
 */
[data-guarded] {
  cursor: progress !important;
  opacity: .78;
  filter: saturate(.85);
  transition: opacity .18s ease;
}

[data-guarded]:hover {
  transform: none !important;
  filter: saturate(.85) !important;
}

.guard-spinner {
  display: inline-block;
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  margin-right: 9px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: guard-spin .62s linear infinite;
}

@keyframes guard-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .guard-spinner {
    animation-duration: 1.6s;
  }
}

/* ── Modales ──────────────────────────────────────────────────────────────
 * El overlay funde y la caja entra con un leve zoom desde abajo. core.js solo
 * alterna .hidden, así que la animación corre cada vez que se abre.
 */
[data-modal] > [data-modal-overlay] {
  animation: tv-overlay-in .22s ease both;
}

[data-modal] > :not([data-modal-overlay]) {
  animation: tv-modal-in .32s cubic-bezier(.16, 1, .3, 1) both;
}

@keyframes tv-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes tv-modal-in {
  from { opacity: 0; transform: translateY(14px) scale(.975); }
  to   { opacity: 1; transform: none; }
}

/* ── Campos de formulario ─────────────────────────────────────────────────
 * Refina el .input del build de Tailwind: transición suave, halo de foco de
 * marca y flecha propia en los select (la nativa no respeta el tema oscuro).
 */
.input {
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.input:hover:not(:focus) {
  border-color: color-mix(in srgb, var(--border) 40%, var(--foreground) 22%);
}

.input:focus,
.input:focus-visible {
  border-color: color-mix(in srgb, var(--primary) 75%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
  outline: none;
}

select.input {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238b93a7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}

input[type="date"].input::-webkit-calendar-picker-indicator {
  filter: invert(.6);
  cursor: pointer;
}

input[type="search"].input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

/* Los number pierden las flechitas: en una app de trading se teclea, no se
   incrementa de uno en uno. */
input[type="number"].input::-webkit-outer-spin-button,
input[type="number"].input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

input[type="number"].input {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* ── Búsqueda con sugerencias ─────────────────────────────────────────────
 * Marcado que genera assets/js/app/suggest.js alrededor de un
 * input[data-suggest]. El desplegable hereda la estética de los modales.
 */
.suggest-wrap {
  position: relative;
}

.suggest-wrap .input {
  padding-left: 34px;
}

.suggest-icon {
  position: absolute;
  top: 50%;
  left: 11px;
  transform: translateY(-50%);
  color: var(--muted-foreground, #8b93a7);
  font-size: 15px;
  pointer-events: none;
}

.suggest-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 60;
  max-height: 340px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--popover, var(--card));
  box-shadow: 0 16px 48px -16px rgba(0, 0, 0, .55);
  animation: tv-modal-in .18s cubic-bezier(.16, 1, .3, 1) both;
}

.suggest-panel[hidden] { display: none; }

.suggest-group {
  padding: 8px 12px 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted-foreground, #8b93a7);
}

.suggest-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  color: var(--foreground, #fff);
  font: inherit;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.suggest-item:hover,
.suggest-item.is-active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.suggest-item-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 9px;
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-size: 14px;
}

.suggest-item-body {
  min-width: 0;
  flex: 1;
}

.suggest-item-title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.suggest-item-title mark {
  background: none;
  color: var(--primary);
  font-weight: 600;
}

.suggest-item-sub {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--muted-foreground, #8b93a7);
  font-size: 12px;
  line-height: 1.35;
}

.suggest-item-meta {
  flex: 0 0 auto;
  color: var(--muted-foreground, #8b93a7);
  font-size: 12px;
}

.suggest-empty {
  padding: 14px 12px;
  color: var(--muted-foreground, #8b93a7);
  font-size: 13.5px;
  text-align: center;
}

@media (prefers-reduced-motion: reduce) {
  [data-modal] > *,
  .suggest-panel {
    animation: none !important;
  }
}

/* ── Calendario de actividad del dashboard ────────────────────────────────
 * Celdas con resultado, operaciones y barra de intensidad. El tinte del fondo
 * escala con --strength (0–100, el |P&L| relativo al mejor día del mes).
 */
.cal-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 64px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  animation: cal-in .4s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(var(--i, 0) * 12ms);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.cal-cell.is-empty {
  border-color: transparent;
  animation: none;
}

.cal-cell.is-flat { background: color-mix(in srgb, var(--muted) 40%, transparent); }

.cal-cell.is-win {
  background: color-mix(in srgb, var(--tv-profit) calc(var(--strength) * .22% + 5%), transparent);
  border-color: color-mix(in srgb, var(--tv-profit) 22%, var(--border));
}

.cal-cell.is-loss {
  background: color-mix(in srgb, var(--tv-loss) calc(var(--strength) * .22% + 5%), transparent);
  border-color: color-mix(in srgb, var(--tv-loss) 22%, var(--border));
}

.cal-cell.is-today {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary);
}

.cal-cell:not(.is-empty):hover {
  transform: translateY(-2px) scale(1.03);
  z-index: 1;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .5);
}

.cal-day {
  align-self: flex-end;
  color: var(--muted-foreground);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
}

.cal-pnl {
  margin-top: auto;
  font-size: 12px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.is-win .cal-pnl  { color: var(--tv-profit); }
.is-loss .cal-pnl { color: var(--tv-loss); }

.cal-ops {
  color: var(--muted-foreground);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
}

.cal-bar {
  height: 3px;
  margin-top: 4px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--muted-foreground) 18%, transparent);
  overflow: hidden;
}

.cal-bar i {
  display: block;
  height: 100%;
  border-radius: 99px;
  animation: cal-fill .7s cubic-bezier(.2, .8, .3, 1) calc(var(--i, 0) * 12ms + .25s) backwards;
}

.is-win .cal-bar i  { background: var(--tv-profit); }
.is-loss .cal-bar i { background: var(--tv-loss); }

@keyframes cal-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes cal-fill { from { width: 0 !important; } }

@media (max-width: 640px) {
  .cal-cell { min-height: 46px; padding: 4px 6px; }
  .cal-ops { display: none; }
  .cal-pnl { font-size: 10.5px; }
}

@media (prefers-reduced-motion: reduce) {
  .cal-cell, .cal-bar i { animation: none; }
}

/* ── Entrada suave del contenido de cada página del panel ──────────────── */
.page-shell > * {
  animation: page-in .45s cubic-bezier(.16, 1, .3, 1) both;
}

.page-shell > *:nth-child(2) { animation-delay: .05s; }
.page-shell > *:nth-child(3) { animation-delay: .1s; }
.page-shell > *:nth-child(4) { animation-delay: .15s; }
.page-shell > *:nth-child(5) { animation-delay: .2s; }

@keyframes page-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-shell > * { animation: none; }
}

/* ── Banner de la guía de inicio (dashboard) ─────────────────────────────── */
.guide-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 16px;
  border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--border));
  border-radius: 14px;
  background:
    radial-gradient(120% 160% at 0% 0%, color-mix(in srgb, var(--primary) 14%, transparent) 0%, transparent 55%),
    var(--card);
  animation: page-in .5s cubic-bezier(.16, 1, .3, 1) both;
}

.guide-banner-icon {
  flex: 0 0 auto;
  display: inline-flex;
}

.guide-banner-icon .doc-illo {
  width: 44px;
  height: 44px;
  color: var(--muted-foreground);
}

@media (max-width: 640px) {
  .guide-banner { flex-wrap: wrap; }
  .guide-banner-icon { display: none; }
}

/* ── Iconos propios de la navegación ─────────────────────────────────────
 * components/nav-icon.twig. La pieza .ni-a es el acento: se colorea con el
 * primario en el ítem activo y se anima al pasar el ratón.
 */
.nav-svg {
  display: inline-flex;
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}

.nav-svg svg { width: 100%; height: 100%; }

.nav-item .ni-a { transition: color .18s ease, opacity .18s ease; }
.nav-item-active .ni-a,
.nav-item.nav-item-active .ni-a { color: var(--primary); }

/* Micro-animaciones al hover: cada familia de piezas tiene la suya. */
.nav-item:hover .ni-a {
  color: var(--primary);
  animation: ni-blink 1s ease-in-out calc(var(--d, 0s)) infinite;
}

.nav-item:hover .ni-draw {
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
  animation: ni-draw .45s ease forwards;
}

.nav-item:hover .ni-spark {
  transform-box: fill-box;
  transform-origin: center;
  animation: ni-spark 1s ease-in-out calc(var(--d, 0s)) infinite;
}

.nav-item:hover .ni-tilt {
  transform-box: fill-box;
  transform-origin: center;
  animation: ni-tilt .5s ease;
}

.nav-item:hover .ni-spin-slow {
  transform-box: fill-box;
  transform-origin: center;
  animation: ni-tilt .5s ease reverse;
}

@keyframes ni-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes ni-draw  { to { stroke-dashoffset: 0; } }
@keyframes ni-spark { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.35); } }
@keyframes ni-tilt  { 0% { transform: rotate(0); } 40% { transform: rotate(-9deg); } 100% { transform: rotate(0); } }

@media (prefers-reduced-motion: reduce) {
  .nav-item:hover .ni-a,
  .nav-item:hover .ni-draw,
  .nav-item:hover .ni-spark,
  .nav-item:hover .ni-tilt,
  .nav-item:hover .ni-spin-slow { animation: none; }
}