/* LuiArt Fotografía · Colorista
   Disposición tipo Lightroom (Revelar) con la paleta y la tipografía de luiartfotografia.com.
   Sin cursivas en ninguna parte. */
:root {
  --white:#FAFAF8; --off-white:#F2F0EC; --cream:#EDE8E0; --black:#0C0C0A;
  --dark:#111110; --mid-dark:#1E1E1C; --grey-900:#2A2A28; --grey-700:#555552;
  --grey-400:#9A9A97; --grey-200:#D4D2CE; --gold:#B8A082; --gold-light:#D4C4AA;
  --panel:#141412; --panel-2:#181816; --line:#2A2A28; --line-soft:rgba(250,250,248,.08);
  --serif:'Cormorant Garamond',Georgia,serif; --sans:'Inter',Arial,sans-serif;
  --error:#FFB9AD; --space:clamp(1.2rem,3vw,3rem);
  --ease:cubic-bezier(.25,.46,.45,.94);
  color-scheme:dark; accent-color:var(--gold); caret-color:var(--gold-light);
  scrollbar-color:var(--grey-700) var(--dark); scrollbar-width:thin;
}
* { box-sizing:border-box; font-style:normal !important; }
em,i,cite,dfn,address,var { font-style:normal !important; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--black); color:var(--cream); font:300 .8125rem/1.6 var(--sans); letter-spacing:.01em; }
button,input,select { font:inherit; }
button,a,input,select,summary { -webkit-tap-highlight-color:transparent; }
button,a { touch-action:manipulation; }
a { color:inherit; text-underline-offset:.25em; }
a:hover { color:var(--gold-light); }
h1,h2,h3,h4,p { margin:0; }
h1,h2,h3 { font-family:var(--serif); font-weight:400; line-height:1.15; text-wrap:balance; }
h2 { font-size:1.6rem; }
h3 { font-size:1.4rem; }
p+p { margin-top:.8rem; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip-link:focus { position:fixed; z-index:99; top:0; left:0; padding:1rem; background:var(--gold); color:var(--black); }
:focus-visible { outline:1px solid var(--gold-light); outline-offset:3px; }
::selection { background:var(--gold-light); color:var(--black); }
::placeholder { color:var(--grey-400); opacity:1; }

/* ---- Botones (como los de la web: dorado lleno, mayúsculas espaciadas) ---- */
button,.button-link { min-height:36px; padding:.5rem 1rem; border:1px solid var(--gold); border-radius:0; background:transparent; color:var(--gold-light); cursor:pointer;
  font-size:.68rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); }
button:hover,.button-link:hover { background:var(--gold); color:var(--black); }
button:disabled { cursor:not-allowed; border-color:var(--grey-900); color:var(--grey-700); background:transparent; }
button.primary { background:var(--gold); color:var(--black); }
button.primary:hover { background:var(--gold-light); border-color:var(--gold-light); }
button.primary:disabled { background:var(--grey-900); border-color:var(--grey-900); color:var(--grey-400); }
.full-width { width:100%; margin-top:.9rem; }
.seccion>.full-width { width:calc(100% - 2rem); }
.seccion { overflow:hidden; }

/* ---- Campos ---- */
label { display:block; font-size:.72rem; font-weight:400; letter-spacing:.06em; color:var(--grey-200); margin-bottom:.4rem; }
input:not([type="checkbox"]):not([type="range"]):not([type="file"]),select { width:100%; min-height:36px; border:1px solid var(--grey-900); border-radius:0; background:var(--dark); color:var(--cream); padding:.4rem .6rem; font-size:.78rem; }
input:not([type="checkbox"]):not([type="range"]):not([type="file"]):focus,select:focus { border-color:var(--gold); outline:none; }
select { text-overflow:ellipsis; }
input[type="checkbox"] { width:15px; height:15px; flex:0 0 15px; margin:.2rem 0 0; }
input[type="range"] { width:100%; margin:.4rem 0 .2rem; height:18px; background:transparent; -webkit-appearance:none; appearance:none; }
input[type="range"]::-webkit-slider-runnable-track { height:2px; background:var(--grey-700); }
input[type="range"]::-moz-range-track { height:2px; background:var(--grey-700); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; width:12px; height:12px; margin-top:-5px; border-radius:50%; background:var(--gold); border:0; }
input[type="range"]::-moz-range-thumb { width:12px; height:12px; border-radius:50%; background:var(--gold); border:0; }
input::file-selector-button { font:inherit; font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; padding:.55rem .9rem; margin-right:.7rem; border:1px solid var(--gold); border-radius:0; background:transparent; color:var(--gold-light); cursor:pointer; }
input::file-selector-button:hover { background:var(--gold); color:var(--black); }
output { color:var(--gold-light); font-size:.72rem; letter-spacing:.06em; }
.label-row { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; }
.label-row label { margin:0; }
.range-labels { display:flex; justify-content:space-between; gap:.2rem; color:var(--grey-400); font-size:.6rem; letter-spacing:.04em; margin-bottom:.9rem; }
.help { font-size:.7rem; line-height:1.6; color:var(--grey-400); margin-top:.5rem; }
.check { display:flex; align-items:flex-start; gap:.6rem; font-size:.72rem; line-height:1.55; letter-spacing:.02em; color:var(--grey-200); }
.status { margin-top:.8rem; font-size:.72rem; color:var(--grey-200); overflow-wrap:anywhere; }
.status.error,.file-status.error { color:var(--error); }
.file-status:empty,.status:empty { display:none; }
.etiqueta-valor { font-size:.72rem; color:var(--gold-light); letter-spacing:.06em; margin:.3rem 0 .4rem; }

/* ---- Barra superior (identidad + selector de módulo, como Lightroom) ---- */
.barra,.site-header { display:flex; align-items:center; gap:1.2rem; height:52px; padding:0 1.2rem; background:var(--dark); border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:baseline; gap:.7rem; text-decoration:none; font:400 1.35rem/1 var(--serif); letter-spacing:.3em; color:var(--white); margin-right:auto; }
.brand span { font:400 .6rem/1 var(--sans); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.barra-der { display:flex; align-items:center; gap:1rem; }
.return-link { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-400); text-decoration:none; }
.return-link:hover { color:var(--gold-light); }
.tabs { display:flex; gap:0; }
.tabs button { border:0; border-bottom:2px solid transparent; min-height:52px; padding:0 1.2rem; color:var(--grey-400); }
.tabs button:hover { background:transparent; color:var(--white); }
.tabs button[aria-selected="true"] { border-bottom-color:var(--gold); color:var(--gold-light); }
.modulos { margin:0 auto; }
.barra #cuenta-abrir { min-height:32px; }

/* ---- Estructura general del editor ---- */
.lr { display:block; margin:0; padding:0; border:0; min-width:0; }
.panel { background:var(--panel); min-width:0; }
.seccion { border-bottom:1px solid var(--line); }
.seccion>summary { list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.75rem 1rem; min-height:40px;
  font-size:.66rem; font-weight:500; letter-spacing:.2em; text-transform:uppercase; color:var(--grey-200); background:var(--panel-2); }
.seccion>summary::-webkit-details-marker { display:none; }
.seccion>summary::before { content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-top:5px solid var(--gold); transition:transform .2s var(--ease); margin-right:.2rem; }
.seccion:not([open])>summary::before { transform:rotate(-90deg); }
.seccion>summary span { margin-left:auto; color:var(--gold-light); font-size:.66rem; letter-spacing:.1em; font-variant-numeric:tabular-nums; }
.seccion>*:not(summary) { margin-left:1rem; margin-right:1rem; }
.seccion[open]>*:last-child { margin-bottom:1rem; }
.seccion>summary+* { margin-top:.9rem; }
.control-section label:not(:first-child),.control-section .label-row:not(:first-child) { margin-top:1rem; }
.pie-panel { font-size:.62rem; color:var(--grey-700); letter-spacing:.08em; padding:1rem; margin:0 !important; }

/* ---- Lista de ajustes preestablecidos ---- */
.lista-estilos { display:flex; flex-direction:column; gap:1px; margin-left:0 !important; margin-right:0 !important; }
.estilo-item { display:flex; align-items:center; gap:.7rem; width:100%; min-height:44px; padding:.45rem 1rem; border:0; border-left:2px solid transparent; text-align:left; text-transform:none; letter-spacing:.03em; font-size:.75rem; font-weight:400; color:var(--grey-200); background:transparent; }
.estilo-item:hover { background:var(--mid-dark); color:var(--white); }
.estilo-item[aria-pressed="true"] { background:var(--mid-dark); border-left-color:var(--gold); color:var(--gold-light); }
.muestra { flex:0 0 38px; height:26px; border:1px solid var(--grey-900); }
.estilo-item small { display:block; font-size:.62rem; color:var(--grey-400); letter-spacing:.02em; line-height:1.3; }
.inline-controls { display:flex; gap:.5rem; align-items:center; margin:.4rem 0; }
.inline-controls input { flex:1; min-width:0; }
.collection-list { padding:0; list-style:none; margin-top:.6rem !important; }
.collection-list li { display:flex; align-items:center; justify-content:space-between; gap:.5rem; border-bottom:1px solid var(--line); padding:.5rem 0; font-size:.68rem; line-height:1.4; }
.collection-list button { flex:none; min-height:26px; padding:.2rem .5rem; font-size:.58rem; }

/* ---- Visor ---- */
.visor { background:var(--black); min-width:0; display:flex; flex-direction:column; position:relative; }
.visor-panel { flex:1; min-height:340px; display:flex; padding:1rem; min-width:0; }
.visor-panel.dos { gap:1rem; }
.dropzone { flex:1; min-width:0; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:.6rem; border:1px dashed var(--grey-700); background:var(--dark); padding:1rem; transition:border-color .25s var(--ease); }
.dropzone.dragging { border-color:var(--gold); background:var(--mid-dark); }
.dz-intro { display:flex; flex-direction:column; align-items:center; gap:.5rem; }
.dz-intro svg { color:var(--gold); }
.dz-intro label { font:300 clamp(1.8rem,3vw,2.6rem)/1.15 var(--serif); letter-spacing:0; color:var(--white); margin:0; cursor:pointer; }
.dz-intro p { font-size:.74rem; color:var(--grey-400); max-width:46ch; }
.dropzone:has(canvas:not([hidden])) { border-style:solid; border-color:transparent; background:var(--black); padding:0; }
.dropzone:has(canvas:not([hidden])) .dz-intro { display:none; }
.dropzone canvas { display:block; max-width:100%; max-height:calc(100dvh - 380px); min-height:0; width:auto; height:auto; object-fit:contain; margin:auto; }
.dropzone input { max-width:100%; font-size:.7rem; background:transparent; border:0; }
.file-status { font-size:.66rem; color:var(--grey-400); letter-spacing:.06em; overflow-wrap:anywhere; }
.visor-barra { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; min-height:44px; padding:.4rem 1rem; background:var(--dark); border-top:1px solid var(--line); }
.vistas { display:flex; }
.vista { border-color:var(--grey-900); color:var(--grey-200); min-height:28px; padding:.3rem .8rem; font-size:.6rem; margin-left:-1px; }
.vista[aria-pressed="true"] { background:var(--mid-dark); color:var(--gold-light); border-color:var(--gold); position:relative; }
.visor-titulo { font-size:.66rem; letter-spacing:.1em; color:var(--grey-400); overflow-wrap:anywhere; }

/* ---- Panel derecho ---- */
#histograma { display:block; width:calc(100% - 2rem); height:96px; background:var(--black); border:1px solid var(--grey-900); }
.lectura #chat { max-height:340px; overflow:auto; padding-right:.4rem; }
.chat-message { padding:.2rem 0 .6rem; overflow-wrap:anywhere; }
.chat-message h3 { font-size:1.25rem; margin-bottom:.6rem; color:var(--white); }
.chat-message h4 { margin:1rem 0 .3rem; font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); font-weight:500; }
.chat-message p,.chat-message li { font-size:.76rem; line-height:1.65; color:var(--grey-200); }
.chat-message .aviso { font-size:.74rem; color:var(--gold-light); border-left:2px solid var(--gold); padding-left:.7rem; margin-top:.8rem; }
.chat-message ul { margin:.3rem 0 0; padding-left:1.1rem; }
.accion { padding:1rem; margin:0 !important; background:var(--panel); border-top:1px solid var(--line); }
.consent { margin:0 0 .3rem; }

/* ---- Tira de revelados ---- */
.tira { background:var(--dark); border-top:1px solid var(--line); min-height:64px; padding:.8rem 1rem; }
.tira-vacia { font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--grey-700); text-align:center; padding:.6rem 0; }
#resultados:not([hidden])~.tira-vacia,.tira:has(#resultados:not([hidden])) .tira-vacia { display:none; }
.results-heading { display:flex; align-items:baseline; gap:1rem; flex-wrap:wrap; margin-bottom:.7rem; }
.results-heading h2 { font-size:1.25rem; }
.results-heading .help { margin:0; flex:1; }
.results-grid { display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.5rem; scroll-snap-type:x proximity; }
.result-card { flex:0 0 190px; scroll-snap-align:start; background:var(--panel); border:1px solid var(--grey-900); border-top:2px solid transparent; padding:.5rem; cursor:pointer; min-width:0; }
.result-card:hover { border-color:var(--grey-700); }
.result-card[aria-current="true"] { border-color:var(--gold); background:var(--mid-dark); }
.result-card h4 { font:400 .72rem/1.35 var(--sans); letter-spacing:.03em; color:var(--grey-200); margin:0 0 .4rem; overflow-wrap:anywhere; min-height:2.7em; }
.comparison { display:block; }
.comparison figure:first-child { display:none; }
figure { margin:0; background:var(--black); }
figure canvas { display:block; width:100%; height:auto; }
figcaption { display:none; }
.result-actions { display:flex; gap:.3rem; margin-top:.5rem; }
.result-actions button { flex:1; min-height:26px; padding:.2rem .3rem; font-size:.54rem; letter-spacing:.1em; }

/* ---- Ventana de cuenta ---- */
dialog { width:min(560px,calc(100% - 2rem)); max-height:calc(100dvh - 2rem); padding:clamp(1rem,4vw,1.8rem); color:var(--cream); background:var(--dark); border:1px solid var(--gold); border-radius:0; }
dialog::backdrop { background:rgb(0 0 0 / .8); }
.dialog-top { display:flex; gap:1rem; justify-content:space-between; align-items:center; margin-bottom:1.2rem; }
.dialog-top h2 { font-size:1.8rem; }
.account-tabs { flex-wrap:wrap; margin-bottom:1rem; border-bottom:1px solid var(--line); }
.account-tabs button { min-height:40px; padding:0 .9rem; }
form label:not(.check) { margin-top:1rem; }
form .check { margin-top:1rem; }
#reenviar { margin-top:1rem; }
#usuario-nombre { margin-bottom:.8rem; }
.table-scroll { overflow-x:auto; margin-top:1.2rem; }
table { border-collapse:collapse; width:100%; font-size:.7rem; font-variant-numeric:tabular-nums; }
th,td { text-align:left; border-bottom:1px solid var(--line); padding:.6rem .5rem; }
caption { text-align:left; margin-bottom:.6rem; }

/* ---- Páginas sencillas (verificar, recuperar, legal) ---- */
.site-header .brand { margin-right:auto; }
.site-header { flex-wrap:wrap; }
.simple-page { max-width:740px; margin:clamp(2rem,7vw,5rem) auto; padding:0 var(--space); }
.simple-page h1 { font-size:clamp(2.4rem,5vw,3.6rem); font-weight:300; }
.simple-page h1 .acento { color:var(--gold-light); }
.simple-page h2 { margin-top:2.3rem; margin-bottom:1rem; }
.simple-page h3 { font:500 .9rem/1.5 var(--sans); letter-spacing:.06em; margin-top:1.6rem; margin-bottom:.6rem; }
.simple-page>p { margin-top:1.2rem; }
.simple-page form { max-width:470px; margin-top:1.5rem; }
.draft { font-weight:500; color:var(--gold-light); border-block:1px solid var(--gold); padding-block:1rem; }
.no-script { padding:1.5rem; border:1px solid var(--gold); }
.site-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding:1.6rem var(--space); font-size:.66rem; letter-spacing:.1em; color:var(--grey-400); border-top:1px solid var(--line); }

/* ---- Modo Color Match: se ocultan los controles de estilo ---- */
body[data-modo="colormatch"] .solo-edicion,body[data-modo="extraer"] .solo-edicion,body[data-modo="igualar"] .solo-edicion { display:none; }
.solo-igualar { display:none; }
body[data-modo="igualar"] .solo-igualar { display:block; }
.solo-extraer { display:none; }
body[data-modo="extraer"] .solo-extraer { display:block; }
body[data-modo="extraer"] .solo-ia,body[data-modo="igualar"] .solo-ia { display:none; }

/* ---- Pantallas grandes: rejilla Lightroom ---- */
@media (min-width:1100px) {
  body[data-page="editor"] { height:100dvh; display:grid; grid-template-rows:52px minmax(0,1fr) auto; overflow:hidden; }
  .lr { display:grid; grid-template-columns:270px minmax(0,1fr) 330px; min-height:0; }
  body[data-modo="colormatch"] .lr,body[data-modo="extraer"] .lr,body[data-modo="igualar"] .lr { grid-template-columns:minmax(0,1fr) 330px; }
  .panel { overflow-y:auto; min-height:0; }
  .panel-izq { border-right:1px solid var(--line); }
  .panel-der { border-left:1px solid var(--line); display:flex; flex-direction:column; }
  .panel-der .accion { position:sticky; bottom:0; margin-top:auto !important; }
  .visor { min-height:0; }
  .dropzone canvas { max-height:calc(100dvh - 52px - 44px - 150px - 2rem); }
  .tira { max-height:230px; overflow:hidden; }
  .lectura #chat { max-height:260px; }
}
@media (max-width:1099px) {
  .barra { height:auto; flex-wrap:wrap; padding:.6rem 1rem; gap:.4rem .8rem; }
  .modulos { order:3; flex:1 1 100%; margin:0; }
  .tabs button { flex:1; min-height:42px; }
  .visor { order:1; } .panel-der { order:2; } .panel-izq { order:3; }
  .lr { display:flex; flex-direction:column; }
  .dropzone canvas { max-height:70vh; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }