/* ============================================================
   MoraCream — Sistema visual "Estudio" (v1)
   Extensión aislada de app.css (se carga después).
   Paleta morado profundo + crema, superficies planas, sin
   degradados chillones. Fuentes: system-ui, sin dependencias.
   ============================================================ */

:root{
  /* Color (design_system.txt) */
  --st-bg:#0E0716;          /* fondo casi negro morado, nunca #000 */
  --st-surface:#180D26;
  --st-surface-2:#201333;
  --st-surface-3:#2A1548;   /* morado de marca */
  --st-line:#37224F;
  --st-line-2:#4A3168;
  --st-text:#F3EDFB;
  --st-text-2:#B3A3C9;
  --st-text-3:#8C7BA3;
  --st-mora:#6C3FA0;
  --st-mora-light:#8E5FBF;
  --st-cream:#F5E9D2;
  --st-cream-light:#FFF8EC;
  --st-ok:#5BD08A;
  --st-err:#F2777A;
  --st-warn:#E8B45C;

  --st-maxw:1240px;
  --st-radius:14px;
  --st-radius-sm:10px;
}

/* ---------- Base ---------- */
body{
  background:var(--st-bg);
  color:var(--st-text);
}
/* El atributo hidden debe ganar a las clases de componentes (.btn etc.). */
[hidden]{display:none !important}
main{max-width:var(--st-maxw)}
.home-wrap--slim{gap:28px}
.home-wrap--slim .hero{padding:26px 0 8px}
.home-wrap--slim .hero h1{background:none;-webkit-background-clip:initial;background-clip:initial;
  -webkit-text-fill-color:var(--st-text);font-size:clamp(30px,5vw,46px);line-height:1.12}

/* ---------- Topbar ---------- */
.brand{text-decoration:none;color:inherit}
.brand:hover{text-decoration:none}
/* Un solo crema visible por pantalla (el CTA): el chip de créditos va sobrio. */
.credits-chip{background:var(--st-surface-2);border:1px solid var(--st-line-2);
  color:var(--st-cream);font-size:12px;font-weight:700;border-radius:999px;padding:5px 13px;
  white-space:nowrap}
.nav-user{color:var(--st-text-2);font-size:13px;overflow-wrap:anywhere;min-width:0}

/* ---------- Estudio: cabecera y modos ---------- */
.studio{display:flex;flex-direction:column;gap:18px}
.studio-head{display:flex;flex-direction:column;gap:12px}
.studio-title{font-size:30px;margin:0;letter-spacing:-.4px}
.studio-lead{margin:0;color:var(--st-text-2);font-size:15px;max-width:70ch}

.studio-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:4px}
.mode-card{
  display:flex;flex-direction:column;gap:6px;text-align:left;
  background:var(--st-surface);border:1px solid var(--st-line);border-radius:var(--st-radius);
  padding:16px 18px;min-height:44px;cursor:pointer;color:inherit;font:inherit;
  transition:border-color .18s ease,background .18s ease;
}
.mode-card:hover{border-color:var(--st-line-2)}
.mode-card:focus-visible{outline:2px solid var(--st-cream);outline-offset:2px}
.mode-card[aria-pressed="true"]{border-color:var(--st-cream);background:var(--st-surface-2)}
.mode-name{font-size:16px;font-weight:700;color:var(--st-text)}
.mode-card[aria-pressed="true"] .mode-name{color:var(--st-cream)}
.mode-desc{font-size:13px;color:var(--st-text-2);line-height:1.5}
.mode-flag{font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--st-warn);margin-top:2px}
.studio-job-note{margin:0;font-size:13px;color:var(--st-warn)}

/* ---------- Estudio: layout 2 columnas ---------- */
.studio-panel{display:block}
.studio-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:20px;align-items:start}
.studio-work{display:flex;flex-direction:column;gap:14px;min-width:0}
.studio-side{display:flex;flex-direction:column;gap:14px;position:sticky;top:88px;min-width:0}

.studio-card{background:var(--st-surface);border:1px solid var(--st-line);
  border-radius:var(--st-radius);padding:18px}
.studio-card-title{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.7px;
  color:var(--st-text-2);margin:0 0 4px}
.studio-card-sub{margin:0 0 12px;font-size:13px;color:var(--st-text-3);line-height:1.5}
.studio-note{margin:0 0 10px;font-size:12.5px;color:var(--st-warn);line-height:1.5}
.studio-card--result{display:flex;flex-direction:column;gap:10px}

/* ---------- Studio: tarjetas ---------- */
.studio-card .card-line{margin-bottom:8px}
.studio-card .card-line .studio-card-title{margin:0}

/* ---------- Dropzone ---------- */
.dropzone{border:1px dashed var(--st-line-2);border-radius:var(--st-radius-sm);
  background:var(--st-surface-2);transition:border-color .15s ease,background .15s ease}
.dropzone:hover{border-color:var(--st-mora-light)}
.dropzone.over{border-color:var(--st-cream);background:var(--st-surface-3)}
.dz-in{width:100%;padding:18px}
.dz-text{font-size:13px;color:var(--st-text-2);text-align:left}
.dz-text b{display:block;color:var(--st-text);font-size:14px}
.dz-text small{display:block;font-size:11.5px;color:var(--st-text-3);margin-top:3px}
.dropzone .preview{height:180px;object-fit:contain;background:var(--st-bg)}

/* ---------- Acción principal (toggle) ---------- */
.primary-action{display:flex;flex-direction:column;gap:8px;padding:14px;margin-bottom:12px;
  border:1px solid var(--st-line);border-radius:var(--st-radius);background:var(--st-surface-2)}
.primary-action .toggle-action{width:100%;justify-content:center;min-height:44px;font-weight:700}
.primary-action .toggle-action[aria-pressed="true"]{
  border-color:var(--st-mora-light);background:var(--st-surface-3);color:var(--st-cream)}
.primary-action-sub{margin:0;font-size:12px;color:var(--st-text-3);line-height:1.45}
.primary-action-sub b{color:var(--st-text-2)}
#primaryAction.act-on{border-color:var(--st-mora-light)}
.undress-note{font-size:12px;line-height:1.5;color:var(--st-text-2);background:var(--st-surface-2);
  border:1px solid var(--st-line);border-left:2px solid var(--st-mora-light);
  border-radius:var(--st-radius-sm);padding:10px 12px;margin:0 0 12px}

/* ---------- Chips (selección única fuente de verdad) ---------- */
.chip-groups{display:flex;flex-direction:column;gap:14px;margin:4px 0 14px}
.chip-group{display:flex;flex-direction:column;gap:8px}
.chip-group-title{margin:0;font-size:11px;font-weight:800;letter-spacing:.7px;text-transform:uppercase;
  color:var(--st-text-3)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{background:var(--st-surface-2);color:var(--st-text);border:1px solid var(--st-line-2);
  border-radius:999px;font-size:12.5px;padding:8px 14px;min-height:34px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,color .15s ease;font-family:inherit}
.chip:hover{border-color:var(--st-mora-light)}
.chip:focus-visible{outline:2px solid var(--st-cream);outline-offset:2px}
.chip.on{background:var(--st-cream);color:#2A1548;border-color:var(--st-cream);font-weight:700}

/* Categorías plegables (generar) */
.chips-grid{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.cat-card{position:relative;background:var(--st-surface-2);border:1px solid var(--st-line);
  border-radius:var(--st-radius-sm);padding:0;overflow:hidden}
.cat-card > summary{list-style:none;cursor:pointer;padding:12px 36px 12px 14px;display:flex;align-items:center;
  gap:10px;font-size:12px;font-weight:800;letter-spacing:.6px;
  text-transform:uppercase;color:var(--st-text-2);min-height:44px}
.cat-card > summary::-webkit-details-marker{display:none}
/* El indicador va posicionado: como flex item se colaba en medio del header. */
.cat-card > summary::after{content:"▾";position:absolute;right:14px;top:50%;
  transform:translateY(-50%);color:var(--st-text-3);font-size:11px}
.cat-card[open] > summary::after{content:"▴"}
.cat-card[open] > summary{border-bottom:1px solid var(--st-line)}
.cat-card .chips{padding:12px 14px 14px}
.cat-card .cat-clear{border:1px dashed var(--st-line-2);background:transparent;color:var(--st-text-3);
  border-radius:999px;font-size:11.5px;padding:7px 12px;cursor:pointer;min-height:34px}
.cat-card .cat-clear:hover{color:var(--st-text);border-color:var(--st-mora-light)}
.cat-card .cat-clear:focus-visible{outline:2px solid var(--st-cream);outline-offset:2px}
.cat-card .cat-clear[hidden]{display:none}
.studio-search{width:100%;padding:11px 13px;border-radius:var(--st-radius-sm);
  border:1px solid var(--st-line-2);background:var(--st-surface-2);color:var(--st-text);font-size:14px}
.studio-search:focus{outline:none;border-color:var(--st-mora-light);box-shadow:0 0 0 3px rgba(142,95,191,.22)}
.chip.hidden-chip{display:none}

/* ---------- Resumen de selecciones ---------- */
.sel-summary{display:flex;flex-wrap:wrap;gap:6px}
.sel-empty{font-size:12.5px;color:var(--st-text-3);line-height:1.5;margin:0}
.sel-item{display:inline-flex;align-items:center;gap:6px;background:var(--st-surface-2);
  border:1px solid var(--st-line-2);border-radius:999px;padding:5px 6px 5px 12px;font-size:12.5px;
  color:var(--st-text);max-width:100%}
.sel-item .sel-cat{color:var(--st-text-3);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.sel-item .sel-text{overflow-wrap:anywhere;min-width:0}
.sel-remove{border:none;background:transparent;color:var(--st-text-3);cursor:pointer;font-size:15px;
  line-height:1;padding:4px 6px;border-radius:999px;min-width:24px;min-height:24px}
.sel-remove:hover{color:var(--st-text);background:var(--st-surface-3)}
.sel-remove:focus-visible{outline:2px solid var(--st-cream);outline-offset:1px}

/* ---------- Coste y CTA ---------- */
.studio-cta{display:flex;flex-direction:column;gap:10px}
.cost-line{margin:0;font-size:13px;color:var(--st-text-2)}
.cost-value{color:var(--st-cream);font-weight:700}
.studio-cta .btn-primary{width:100%;min-height:44px}
.studio-cta .status{margin:0}

/* ---------- Resultado ---------- */
.result-empty{color:var(--st-text-3);font-size:13px;line-height:1.5;text-align:center;padding:26px 14px;
  border:1px dashed var(--st-line-2);border-radius:var(--st-radius-sm);background:var(--st-surface-2)}
.result-empty.err{color:var(--st-err);border-color:var(--st-err)}
.res-img{width:100%;border-radius:var(--st-radius-sm);max-height:460px;object-fit:contain;
  background:var(--st-bg);border:1px solid var(--st-line)}
.res-actions .btn{min-height:40px}

/* ---------- Barra inferior (móvil) ---------- */
.studio-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;
  background:var(--st-surface-2);border-top:1px solid var(--st-line);
  padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.studio-bar.hidden-bar{display:none !important}
.studio-bar-inner{max-width:var(--st-maxw);margin:0 auto;display:flex;align-items:center;gap:12px}
.studio-bar-cost{font-size:12px;color:var(--st-text-2);flex:0 0 auto}
.studio-bar .btn-primary{flex:1;min-height:44px}

/* ---------- Formularios ---------- */
/* studio.css debe ser autosuficiente: el app.css de producción difiere del
   local y no incluye esta regla. */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;border:0;padding:0;margin:-1px}
label{color:var(--st-text-2)}
textarea{background:var(--st-surface-2);border-color:var(--st-line-2);color:var(--st-text)}
textarea:focus{outline:none;border-color:var(--st-mora-light);box-shadow:0 0 0 3px rgba(142,95,191,.22)}
input[type=email],input[type=password],input[type=date],input[type=text]{
  background:var(--st-surface-2);border-color:var(--st-line-2);color:var(--st-text)}
.btn{background:var(--st-surface-2);border-color:var(--st-line-2);min-height:44px}
.btn:hover{border-color:var(--st-mora-light);transform:none}
.btn:focus-visible{outline:2px solid var(--st-cream);outline-offset:2px}
.btn-primary{background:var(--st-cream);color:#2A1548;border:none}
.btn-primary:hover{filter:none;background:var(--st-cream-light)}
.btn-ghost{background:transparent}

/* ---------- Pie honesto ---------- */
.footer{border-top:1px solid var(--st-line)}
.footer-grid{grid-template-columns:2fr 1fr 1fr}
.footer .f-col a{color:var(--st-text-2)}
.footer .f-col a:hover{color:var(--st-cream)}
.age-chip{background:var(--st-surface-3);color:var(--st-cream)}

/* ---------- Foco global ---------- */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,
textarea:focus-visible{outline:2px solid var(--st-cream);outline-offset:2px}

/* ---------- Responsive ---------- */
@media(max-width:1040px){
  .studio-grid{grid-template-columns:minmax(0,1fr) 340px}
}
@media(max-width:900px){
  .studio-grid{grid-template-columns:1fr}
  .studio-side{position:static}
  .studio-modes{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  main{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .studio-bar{display:block}
  .studio-cta{display:none}          /* una sola acción primaria visible */
  .studio-title{font-size:24px}
  .mode-card{padding:14px}
  .studio-card{padding:14px}
  .edit-row--range{grid-template-columns:1fr;gap:6px}
  .int-row{flex-wrap:wrap}
  .int-row input[type=range]{min-width:120px}
  .footer-grid{grid-template-columns:1fr}
  .chip{min-height:36px}
  /* el correo largo no debe romper la barra ni desplazar el layout */
  .nav-user{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .credits-chip{padding:4px 10px}
}
@media(max-width:360px){
  .studio-modes{gap:10px}
  .mode-desc{font-size:12px}
  .studio-bar-cost{display:none}
}

/* ---------- Movimiento reducido ---------- */
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}