/* AddStudio · panel-opciones.css — el panel de opciones del usuario.
   Escritorio: columna lateral derecha fija. Teléfono/tablet: hoja inferior.
   Regla de oro: ninguna opción que cambie el resultado vive en un submenú. */

.options-panel {
  background: var(--color-surface-raised);
  border-left: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  flex-direction: column;
  gap: .875rem;
  padding: 1.25rem;
  overflow-y: auto;
}
.options-panel__title {
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin: 0;
}
.options-panel__group { display: flex; flex-direction: column; gap: .375rem; }
.options-panel__label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.options-panel__hint { font-size: .6875rem; color: var(--color-text-muted); font-weight: 400; }
.options-panel select,
.options-panel input[type="text"],
.options-panel textarea {
  width: 100%;
  background: var(--color-surface-overlay);
  border: 1px solid var(--color-surface-hairline);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-family: var(--font-sans);
  font-size: max(16px, .875rem);
  padding: .625rem .75rem;
  min-height: 44px;
}
.options-panel textarea { min-height: 84px; resize: vertical; }
.options-panel select:focus-visible,
.options-panel input:focus-visible,
.options-panel textarea:focus-visible {
  outline: 2px solid var(--color-brand-cyan-400);
  outline-offset: 1px;
}
.options-row { display: flex; gap: .5rem; }
.options-row > * { flex: 1; min-width: 0; }

/* Costo visible antes de gastar */
.costo-linea {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8125rem;
  color: var(--color-text-secondary);
  background: var(--color-surface-sunken);
  border: 1px solid var(--color-surface-hairline);
  border-radius: var(--radius-md);
  padding: .625rem .75rem;
}
.costo-linea strong { color: var(--color-brand-cyan-400); font-variant-numeric: tabular-nums; }

/* Botón de generar con el costo dentro */
.btn-generar {
  width: 100%;
  min-height: 48px;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--color-brand-violet-600);
  color: var(--color-text-on-brand);
  font-family: var(--font-sans);
  font-size: .9375rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  cursor: pointer;
}
.btn-generar:hover { background: var(--color-brand-violet-500); }
.btn-generar:focus-visible { outline: 2px solid var(--color-brand-cyan-400); outline-offset: 2px; }
.btn-generar:disabled { opacity: .55; cursor: not-allowed; }
.btn-generar .creditos {
  background: rgba(0, 0, 0, .28);
  border-radius: var(--radius-full);
  padding: .125rem .5rem;
  font-variant-numeric: tabular-nums;
}

/* Historial */
.historial { display: flex; flex-direction: column; gap: .5rem; }
.historial__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  font-size: .75rem;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-surface-hairline);
  border-radius: var(--radius-md);
  padding: .5rem .625rem;
}
.historial__estado { font-size: .6875rem; font-weight: 700; }
.historial__estado--listo { color: var(--color-state-success); }
.historial__estado--cola { color: var(--color-state-warning); }
.historial__estado--error { color: var(--color-state-danger); }

/* ---------- Escritorio: columna lateral fija ---------- */
@media (min-width: 1025px) {
  .options-panel {
    position: fixed;
    top: 60px;
    right: 0;
    bottom: 0;
    width: 340px;
  }
  .main-body { margin-right: 340px; }
  .panel-toggle { display: none; }
}

/* ---------- Teléfono y tablet: hoja inferior ---------- */
@media (max-width: 1024px) {
  .options-panel {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 56px; /* encima de la barra inferior */
    max-height: 78vh;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    transform: translateY(calc(100% + 56px));
    transition: transform 220ms cubic-bezier(.2, .7, .2, 1);
    z-index: 120;
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0));
    box-shadow: 0 -12px 40px rgba(2, 6, 23, .55);
  }
  .options-panel.is-open { transform: translateY(0); }

  .panel-toggle {
    position: fixed;
    right: 1rem;
    bottom: calc(68px + env(safe-area-inset-bottom, 0));
    z-index: 121;
    min-height: 48px;
    padding: 0 1.125rem;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-brand-violet-600);
    color: var(--color-text-on-brand);
    font-family: var(--font-sans);
    font-size: .875rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    box-shadow: var(--shadow-lg);
  }
  .panel-toggle:focus-visible { outline: 2px solid var(--color-brand-cyan-400); outline-offset: 2px; }

  .panel-cerrar {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: var(--radius-full);
    background: var(--color-surface-overlay);
    color: var(--color-text-primary);
    font-size: 1.125rem;
    cursor: pointer;
  }
}
@media (min-width: 1025px) { .panel-cerrar { display: none; } }

/* Tirador de la hoja */
.panel-tirador {
  display: none;
  width: 42px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--color-surface-hairline);
  margin: 0 auto .25rem;
}
@media (max-width: 1024px) { .panel-tirador { display: block; } }