/* Shared interaction rules. Rém's turquoise/ivory provenance colours retain
   their meaning; this layer adds hierarchy and accessible controls. */
:root{--rem-space-1:4px;--rem-space-2:8px;--rem-space-3:12px;--rem-space-4:16px;--rem-space-6:24px;--rem-focus:#ede8df;--rem-terracotta:#d98a78}
/* Copper is reflected light on surfaces, independent of account/tour state.
   Turquoise actions and turquoise/ivory knowledge semantics keep their roles. */
:root{
  --rem-copper-atmosphere:radial-gradient(ellipse 600px 280px at 90% 0%,rgba(217,138,120,.075),transparent 78%);
  --rem-copper-reflection:radial-gradient(ellipse 72% 120% at 100% 0%,rgba(217,138,120,.16),transparent 72%);
  --rem-copper-sheen:linear-gradient(90deg,transparent 8%,rgba(217,138,120,.18) 45%,rgba(246,198,167,.85) 82%,rgba(217,138,120,.16));
  --rem-copper-border:rgba(217,138,120,.24);
  --rem-copper-inset:inset -1px 1px 0 rgba(240,186,157,.18);
}
:where(button,a,input,textarea,select,summary):focus-visible{outline:2px solid var(--rem-focus)!important;outline-offset:4px}
.layout>nav .item{min-height:44px}
.layout>nav .menu,.tour-reopen,main .subtab,main .chip,main .clip,main .btn,.wrap button{min-height:44px}
.layout,.rem-content-shell,main,.axis,.axis>div,.escribir{min-width:0}
.escribir textarea,#guia .pieg textarea{min-width:0}
.escribir .clip{flex:none;min-width:38px}
.escribir .btn{flex:none}
.wrap .tabs{border-bottom:1px solid var(--line);padding-bottom:12px;gap:8px}
.wrap .tabs button{flex:1;min-width:0;color:var(--text);border:1px solid var(--line);background:transparent}
.wrap .tabs button[aria-selected=true]{border-color:var(--accent-deep);background:var(--surface2);box-shadow:inset 0 -2px var(--accent);color:var(--accent)}
.wrap form>button:not([type=button]){background:var(--accent);color:#071a16;min-height:48px}
.wrap form[aria-busy=true]{cursor:progress}
.wrap form button:disabled{cursor:wait;opacity:.65}
.wrap .account-welcome{margin:0 0 20px;color:var(--text);max-width:58ch;border:0;padding:0;font:400 14px/1.6 Inter,system-ui,sans-serif}
.wrap #f-log>.nota:last-child{border:0;padding:0;font:400 13px/1.6 Inter,system-ui,sans-serif}
.wrap .account-optional{margin-top:20px;border-top:1px solid var(--line);padding-top:12px;color:var(--text);font-size:13px}
.wrap .account-optional summary{min-height:44px;line-height:1.6;display:list-item;cursor:pointer;padding:10px 0}
.wrap #msg:empty{display:none}
.wrap #msg:not(:empty){border-left:3px solid var(--bad);background:var(--surface2);padding:12px 16px;margin:0 0 20px;line-height:1.6}
.wrap #msg .err{color:#f1b6ac}
/* Native screen hierarchy: use the existing Rém type and surface tokens.
   Large work areas can grow; reading text keeps its existing line length. */
.layout>.rem-content-shell{background:var(--rem-copper-atmosphere)}
.layout main{padding:28px 32px 80px}
main>h1,.inicio>h1{font:400 clamp(38px,3.5vw,52px)/1.08 var(--display);letter-spacing:-.025em;margin-bottom:10px;overflow-wrap:anywhere}
/* A small editorial accent; action, provenance and status colours keep their roles. */
main>h1::after,.inicio>h1::after{content:'';display:block;width:32px;height:2px;margin-top:12px;background:var(--rem-terracotta)}
main>.lede,.inicio>.lede{font-size:16px;line-height:1.6;max-width:64ch}
main>.sec{margin-top:26px}
main>.sec:has(>h3),main>.sec.dosc{padding-top:18px;border-top:1px solid var(--line2)}
main>.sec>h3,main>.sec.dosc>div>h3,#home-content>.sec>h3{font:600 18px/1.35 Inter,system-ui,sans-serif;letter-spacing:-.015em;text-transform:none;color:var(--text);margin-bottom:14px}
main>.sec.dosc{gap:24px}
main .sub-h{font-size:30px;line-height:1.15;margin-bottom:14px}
#home-content>.sec{margin-top:22px;padding:20px;border:1px solid var(--line2);border-top-color:var(--teal-deep);border-radius:var(--r);background:var(--s1)}
.inicio #home-content>.sec>h3{font-size:20px}
.inicio .rem-section-explainer{margin:20px 0 10px;padding:6px 14px;line-height:1.65}
.inicio .rem-section-explainer+.sec{margin-top:12px}
.inicio .logro,.inicio .brief{padding:22px}
.inicio .rem-available-summary{margin-top:14px;border:1px solid var(--line2);border-radius:var(--r);background:var(--s1);padding:0 20px}
.inicio .rem-available-summary>summary{font:600 16px/1.5 Inter,system-ui,sans-serif;color:var(--text);padding:14px 0}
.inicio .rem-available-summary .brief{margin-top:0;margin-bottom:20px}
.inicio #home-content .logro{position:relative;background:var(--rem-copper-reflection),linear-gradient(180deg,rgba(0,209,178,.045),rgba(0,209,178,.012));border-color:var(--rem-copper-border);box-shadow:var(--rem-copper-inset)}
.inicio #home-content .logro::before,.wrap .card:has(>.tabs)::before{content:'';position:absolute;inset:0 0 auto;height:1px;background:var(--rem-copper-sheen);pointer-events:none}
.inicio #home-content>.sec,.inicio .rem-available-summary{background:radial-gradient(ellipse 50% 110% at 100% 0%,rgba(217,138,120,.035),transparent 80%),var(--s1);border-top-color:rgba(217,138,120,.22);box-shadow:inset -1px 1px 0 rgba(240,186,157,.055)}
.wrap{background:var(--rem-copper-atmosphere)}
.wrap .card:has(>.tabs){position:relative;background:var(--rem-copper-reflection),var(--surface);border-color:var(--rem-copper-border);box-shadow:var(--rem-copper-inset)}
/* Error and empty states explain their state without a forced canvas of space. */
.doc-cuerpo{min-height:0}
.doc-estado-panel{min-height:164px;padding:24px}
.doc-vacio-foco{min-height:160px;padding:24px}
.docs-vacio{min-height:220px;padding:28px}
@media(max-width:900px){.layout main{padding:24px 18px 80px}}
@media(max-width:600px){
  main>h1,.inicio>h1{font-size:38px}
  main>.sec{margin-top:22px}
  #home-content>.sec{padding:18px 16px}
  .inicio #home-content>.sec>h3{font-size:18px}
  .inicio .logro,.inicio .brief{padding:18px}
  .inicio .rem-available-summary{padding:0 16px}
  .doc-estado-panel{min-height:0;padding:24px 18px}
  .escribir{gap:6px;flex-wrap:wrap}
  .escribir textarea{flex:1 1 100px;width:0}
  .escribir .btn{padding:0 12px}
  .wrap{padding:28px 18px 64px}
  .wrap .card{padding:20px 16px}
  .wrap .tabs button{padding:10px;font-size:13px}
  .wrap form>button:not([type=button]){width:100%}
}

/* A small first-use menu, with every native destination still available. */
.nav-tools>summary{padding:12px 18px;color:var(--dim);font-size:12px;cursor:pointer;min-height:44px}
.nav-tools>summary[hidden]{display:none}
.nav-tools[open]>summary{color:var(--text)}
.chat-help{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
.chat-help>summary{font-size:12px;color:var(--dim);cursor:pointer;min-height:44px;padding:12px 0}
.chat-help .hint{margin-top:4px;line-height:1.65;max-width:65ch}
.chat-help .hint p{margin-bottom:10px}
.chat-help a{color:var(--teal);text-decoration:underline;text-underline-offset:3px}
.axis .hilo:has(>.vacio:only-child){min-height:0}
.axis .hilo>.vacio:only-child{padding:14px 0;text-align:left}
.chat-help-ia{display:flex;align-items:center;gap:12px;margin:8px 0 14px}