/* Ajustes and the screens of the redesign's wave 3 (0.27.0): the tree in six groups (Roger's machinery folded), the
   form pages in titled sections with "Ajustes avanzados" folded and the save bar at the foot, the "one per line" settings
   as small tables, and the page pattern on Contabilidad, Publicidad, Página Web, Marketplaces and the Bandeja. The
   approved mockup (Mockups/rediseno-panel-admin/) is the reference. Loaded after screens.css. */

/* Ajustes: the page head, then the tree beside the open page; each scrolls on its own */
#v-ajustes .aj { gap: 14px; min-height: 0; padding-bottom: 0; }
#v-ajustes .set { display: grid; grid-template-columns: 236px minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 16px; flex: 1; min-height: 0; }
#v-ajustes .tree { width: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--corner); padding: 8px; overflow: auto; }
#v-ajustes .tree .h, #v-ajustes .tree summary { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: #8A978F; font-weight: 600; margin: 0; padding: 12px 10px 4px; }
#v-ajustes .tree .h:first-child { padding-top: 6px; }
#v-ajustes .tree button { padding: 7px 10px; font-size: 13.5px; font-weight: 500; color: var(--text); border-radius: 7px; }
#v-ajustes .tree button:hover { background: #F7F4EC; }
#v-ajustes .tree button.on { background: #FFF3C4; color: var(--navy); font-weight: 600; box-shadow: none; }
#v-ajustes .tree summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 6px; }
#v-ajustes .tree summary::-webkit-details-marker { display: none; }
#v-ajustes .tree summary::after { content: "›"; margin-left: auto; font-size: 14px; letter-spacing: 0; transition: transform .15s; }
#v-ajustes .tree details[open] summary::after { transform: rotate(90deg); }
#v-ajustes .tree .tag { font-size: 9.5px; letter-spacing: .06em; background: #EEF1EE; color: #4A5A52; padding: 1px 6px; border-radius: 4px; }
#v-ajustes .spane { overflow: auto; min-width: 0; display: flex; flex-direction: column; }

/* a page's head: title, its one line, the actions ("Copias guardadas (N)" is a link) */
.spane > .bar.shead { position: sticky; top: 0; background: #fff; z-index: 3; padding: 14px 18px; border-radius: var(--corner) var(--corner) 0 0; }
.shead .tt { min-width: 0; }
.shead h2.t { font-size: 15px; margin: 0; font-weight: 600; }
.shead .sub { color: #4A5A52; font-size: 12.5px; margin-top: 2px; }
.shead .link.copies { color: var(--text); font-size: 12.5px; white-space: nowrap; }

/* a form: sections, the advanced fields folded, the save bar stuck to the foot */
.sform { flex: 1; display: flex; flex-direction: column; }
.sform > .sec, .sform > .card, .sform > .acc { margin: 0; }
.sform > .acc, .sform > .wacard, .sform > div:not(.sec):not(.save):not(.adv) { margin: 16px 18px 0; }
.sec { padding: 18px; border-bottom: 1px solid #EFEBE0; }
.sec h3 { margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.sec .sd { font-size: 12.5px; color: #8A978F; margin: 0 0 14px; }
.sec h3 + .frm { margin-top: 12px; }
.sec .acc { margin-top: 14px; }
.sec.flash { animation: secflash 1.6s ease-out; }
@keyframes secflash { from { background: #FFF6D1; } to { background: transparent; } }
.frm { gap: 14px 20px; }
.frm .field { margin: 0; display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.frm .field.w { grid-column: 1 / -1; }
.frm .field > label { font-size: 12.5px; color: #4A5A52; margin: 0; }
.frm .hint { font-size: 12px; color: #8A978F; }
.frm textarea { font-family: inherit; font-size: 14px; min-height: 84px; line-height: 1.45; }
.field .pre.suf span { font-weight: 400; white-space: nowrap; }
.sform details.adv > .frm { padding: 0 18px 18px; }
.sform details.adv .muted { font-weight: 400; color: #8A978F; }
.save { position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--border); padding: 12px 18px; display: flex; align-items: center; gap: 10px; margin-top: auto; z-index: 3; border-radius: 0 0 var(--corner) var(--corner); }
.save .ms { color: #4A5A52; font-size: 13px; }
.save .grow { flex: 1; }

/* a yes/no setting: a switch with its own words */
label.sw { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; cursor: pointer; position: relative; margin: 0; }
label.sw input { position: absolute; opacity: 0; width: 1px !important; height: 1px; margin: 0; padding: 0; }
label.sw i { width: 36px; height: 20px; border-radius: 999px; background: #CFD6D1; position: relative; flex: none; transition: background .15s; }
label.sw i::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
label.sw input:checked + i { background: var(--green); }
label.sw input:checked + i::after { left: 18px; }
label.sw input:focus-visible + i { outline: 2px solid var(--navy); outline-offset: 2px; }

/* "one per line" as a small table */
.ledit { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ledit table.ltab { width: 100%; border-collapse: collapse; }
.ltab th { text-align: left; font-size: 11.5px; font-weight: 600; color: #8A978F; padding: 0 6px 4px 0; }
.ltab td { padding: 0 6px 6px 0; }
.ltab td input { width: 100%; border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; background: #fff; min-width: 0; }
.ltab td.x { width: 34px; padding-right: 0; }
.ibtn.sm { width: 30px; height: 30px; font-size: 16px; }

/* Roger alone: one line in the middle */
#v-solo { align-items: center; justify-content: center; }
#v-solo .solo { color: #4A5A52; font-size: 15px; margin: 0; }

/* the page pattern on the other screens */
.grid.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.grid.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
.empty { text-align: center; color: #8A978F; padding: 24px 16px; margin: 0; }
.wcard { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; cursor: pointer; font: inherit; color: inherit; }
.wcard:hover:not(:disabled) { border-color: var(--oro); }
.wcard:disabled { opacity: .6; cursor: default; }
/* Página Web: the editor under the head and the three cards keeps a usable height; the page scrolls, not the editor */
#v-web .card.site { min-height: 520px; }
.ad-ask { display: flex; gap: 10px; align-items: center; padding: 12px 14px; }
.ad-ask .ask { flex: 1; min-width: 0; padding: 6px 12px; color: #8A978F; }
.ad-ask .ask > svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; }
.ok-list { display: flex; flex-direction: column; gap: 10px; }
.ok-list .ok-item.okr { margin: 0; display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; }
.ok-item > .ic { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.ok-item > .ic svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ok-item .okb { min-width: 0; }
.mk-card { min-width: 0; }
.mk-card .ch h2 { margin: 0; }
.svc { font-size: 12px; margin-top: 2px; }
table.t .ppl .sb { white-space: nowrap; }
.ctx { border-top: 1px solid #F0EEE6; padding: 12px 16px; background: #FBF8F1; }
.ctx h4 { margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #8A978F; font-weight: 600; }

@media (max-width: 1100px) {
  .grid.g3, .grid.g2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 820px) {
  #v-ajustes .set { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px; }
  #v-ajustes .tree { max-height: 210px; }
  .spane > .bar.shead { flex-wrap: wrap; padding: 12px 14px; }
  .sec { padding: 16px 14px; }
  .save { padding: 10px 14px; flex-wrap: wrap; }
  .sform details.adv > .frm { padding: 0 14px 16px; }
  .ad-ask { flex-wrap: wrap; }
  #v-web .card.site { flex: none; min-height: 0; overflow: visible; }
}