/* AULA LISTA · Asistente pedagógico. Extensión del sistema visual existente. */
.header nav { gap: clamp(13px, 2vw, 28px); }
.header nav a { white-space: nowrap; }
.home-tools-grid { display: grid; grid-template-columns: minmax(0, 1.38fr) minmax(280px, .62fr); gap: 18px; }
.home-tool-feature { min-height: 295px; display: grid; grid-template-columns: 90px minmax(0, 1fr); align-items: start; gap: 24px; padding: 32px 37px; border-radius: 28px; background: var(--navy); color: white; box-shadow: 0 12px 30px #0f4c5c17; text-decoration: none; }
.home-tool-feature:hover { background: #115c6d; color: white; transform: translateY(-2px); }
.home-tool-mark { display: grid; place-items: center; width: 82px; height: 82px; border-radius: 25px; color: var(--navy); background: var(--yellow); transform: rotate(-5deg); }
.home-tool-mark svg { width: 42px; height: 42px; stroke: currentColor; fill: none; stroke-width: 1.7; }
.home-tool-feature span:last-child { display: flex; flex-direction: column; align-items: start; }
.home-tool-feature small { font-size: .78rem; font-weight: 900; letter-spacing: .12em; color: var(--yellow); }
.home-tool-feature b { display: block; max-width: 600px; margin-top: 13px; font-size: clamp(1.75rem, 2.2vw, 2.45rem); line-height: 1.12; letter-spacing: -.04em; }
.home-tool-feature em { font-size: 1.04rem; font-style: normal; opacity: .84; margin-top: 13px; line-height: 1.5; }
.home-tool-feature strong { display: inline-flex; align-items: center; gap: 8px; margin-top: 23px; font-size: 1rem; }
.home-tool-feature strong svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }
.home-tool-links { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.home-tool-links a { display: flex; flex-direction: column; justify-content: space-between; min-height: 139px; padding: 19px; background: white; border: 1px solid var(--line); border-radius: 20px; color: var(--navy); font-size: 1rem; line-height: 1.25; font-weight: 900; box-shadow: 0 6px 18px #0f4c5c09; text-decoration: none; }
.home-tool-links a:hover { border-color: var(--sky); transform: translateY(-2px); }
.home-tool-links svg { width: 26px; height: 26px; stroke: currentColor; fill: none; stroke-width: 1.8; }
.home-tool-links svg:last-child { width: 18px; height: 18px; align-self: end; }
.home-tool-links a:nth-child(2) { background: #e7f4f8; }
.home-tool-links a:nth-child(3) { background: #fff4d8; }
.home-tool-links a:nth-child(4) { background: #ffeae4; }

.as-page { padding-top: 18px; padding-bottom: 75px; }
.as-page [hidden] { display: none !important; }
.as-page svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.as-head { display: flex; align-items: end; justify-content: space-between; gap: 28px; position: relative; overflow: hidden; padding: 33px 42px 41px; margin: 18px 0 31px; background: #e8f5f8; border-radius: 28px; }
.as-head::after { content: ''; position: absolute; right: -49px; top: -99px; width: 270px; height: 270px; border-radius: 50%; background: #ffd86b77; }
.as-kicker { display: inline-flex; align-items: center; gap: 7px; color: var(--navy); font-size: .78rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.as-kicker svg { width: 17px; height: 17px; }
.as-head h1 { margin: 15px 0 13px; font-size: clamp(2.8rem, 4.4vw, 4.9rem); line-height: 1.03; }
.as-head p { margin: 0; max-width: 690px; font-size: 1.19rem; color: #325f6a; }
.as-head em { position: relative; z-index: 1; margin: 0 23px 15px 0; color: var(--navy); font-size: 1.45rem; font-weight: 800; font-style: normal; line-height: 1.3; transform: rotate(-7deg); }
.as-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(410px, .86fr); align-items: start; gap: 25px; }
.as-form { display: grid; gap: 18px; }
.as-panel, .as-preview { min-width: 0; background: white; border: 1px solid #e3e9e5; border-radius: 24px; box-shadow: 0 8px 23px #0f4c5c09; }
.as-panel { padding: 28px; }
.as-panel-head { display: flex; align-items: flex-start; gap: 17px; margin-bottom: 24px; }
.as-panel-head > b { display: grid; place-items: center; width: 43px; height: 43px; flex: none; border-radius: 13px; background: #e5f2f6; color: var(--navy); font-size: 1rem; }
.as-panel-head h2 { margin: 0 0 5px; font-size: clamp(1.33rem, 1.55vw, 1.7rem); line-height: 1.2; }
.as-panel-head p { margin: 0; color: var(--muted); font-size: .95rem; }
.as-types { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.as-type { position: relative; min-width: 0; cursor: pointer; }
.as-type input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.as-type span { display: flex; flex-direction: column; min-height: 121px; padding: 17px; border: 2px solid #e1e8e6; border-radius: 17px; background: #fbfbf9; }
.as-type b { color: var(--navy); font-size: 1.05rem; line-height: 1.22; }
.as-type small { margin-top: 7px; color: var(--muted); font-size: .86rem; line-height: 1.4; }
.as-type input:checked + span { background: #e9f5f7; border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.as-type input:focus-visible + span, .as-choice input:focus-visible + span { outline: 3px solid var(--coral-bright); outline-offset: 2px; }
.as-soon { margin: 20px 0 0; padding: 14px 17px; border-radius: 12px; background: var(--cream); color: #4c6670; font-size: .91rem; }
.as-soon strong { color: var(--navy); }
.as-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
.as-wide { grid-column: 1 / -1; }
.as-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--navy); font-size: .94rem; font-weight: 800; }
.as-field input, .as-field select, .as-field textarea { width: 100%; min-height: 51px; padding: 12px 14px; border: 1px solid #cddfdf; border-radius: 12px; color: var(--ink); background: #fff; font: 600 1rem/1.45 'Nunito','Trebuchet MS',sans-serif; }
.as-field textarea { resize: vertical; min-height: 92px; }
.as-field input::placeholder, .as-field textarea::placeholder { color: #728891; font-weight: 500; }
.as-field:focus-within > span { color: #0e6677; }
#as-sequence { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
#as-tone { max-width: 400px; }
.as-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.as-choice { position: relative; cursor: pointer; }
.as-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.as-choice span { display: inline-flex; align-items: center; min-height: 41px; padding: 7px 13px; border: 1px solid #d7e4e4; border-radius: 10px; background: #f6faf9; color: var(--navy); font-size: .9rem; font-weight: 800; }
.as-choice input:checked + span { border-color: var(--navy); background: #e5f3f7; box-shadow: inset 0 0 0 1px var(--navy); }
.as-context { margin-top: 22px; }
.as-context-panel { background: #fcfaf4; }
.as-privacy { border-left: 4px solid var(--coral-bright); padding: 5px 0 5px 14px; margin: -5px 0 21px; color: #4f626a; font-size: .94rem; }
.as-submit { padding: 8px 0; }
.as-submit .btn { min-height: 57px; padding-inline: 25px; font-size: 1.04rem; }
.as-submit p { margin: 11px 0 0; min-height: 1.4em; color: var(--navy); font-weight: 700; }
.as-preview { position: sticky; top: 20px; max-height: calc(100vh - 40px); overflow: auto; padding: 27px; scroll-margin-top: 20px; }
.as-empty { display: flex; min-height: 600px; align-items: center; justify-content: center; flex-direction: column; text-align: center; padding: 45px 18px; }
.as-empty > span { display: grid; place-items: center; width: 91px; height: 91px; border-radius: 28px; background: #fff1ca; color: var(--navy); transform: rotate(-5deg); }
.as-empty > span svg { width: 46px; height: 46px; }
.as-empty h2 { margin: 25px 0 8px; font-size: 1.85rem; }
.as-empty p { max-width: 350px; margin: 0; color: var(--muted); }
.as-empty em { margin-top: 25px; color: var(--navy); font-size: 1.1rem; font-weight: 800; transform: rotate(-5deg); }
.as-preview-head h2 { margin: 14px 0 5px; font-size: 1.65rem; }
.as-preview-head p { margin: 0 0 17px; color: var(--muted); font-size: .94rem; }
.as-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 21px; }
.as-actions .btn { min-height: 43px; padding: 10px 13px; font-size: .86rem; }
.as-actions .btn svg { width: 16px; height: 16px; }
.as-save { margin-bottom: 20px; padding: 18px; border: 1px solid #c8dee2; border-radius: 17px; background: #eff7f9; }
.as-save h3 { margin: 0 0 4px; }
.as-save p { font-size: .88rem; color: var(--muted); margin: 0 0 15px; }
.as-save .as-field { margin: 13px 0; }
.as-save > div { display: flex; flex-wrap: wrap; gap: 8px; }
.as-save .btn { min-height: 43px; font-size: .87rem; }
.as-document { border: 1px solid #e3e8e2; border-radius: 17px; overflow: hidden; background: white; }
.as-document > header { padding: 25px 25px 19px; background: var(--cream); border-bottom: 1px solid #e5e2da; }
.as-document > header span { font-size: .7rem; color: var(--navy); font-weight: 900; letter-spacing: .12em; }
.as-document h2 { margin: 9px 0; font-size: 1.65rem; line-height: 1.18; }
.as-document > header p { margin: 0; font-size: .85rem; font-weight: 800; color: #526d76; }
.as-document section { padding: 18px 25px; border-bottom: 1px solid #ebefec; }
.as-document section:nth-child(even) { background: #fdfcf9; }
.as-document h3 { margin: 0 0 8px; color: var(--navy); font-size: 1.08rem; }
.as-document [data-as-section] { white-space: pre-wrap; color: #294d57; font-size: .96rem; line-height: 1.58; overflow-wrap: anywhere; }
.as-document [contenteditable="true"] { outline: 2px solid var(--sky); outline-offset: 4px; border-radius: 3px; background: #fffaf0; }
.as-document footer { padding: 14px 25px; background: var(--cream); color: var(--muted); font-size: .77rem; }
.as-recommend { margin: 20px 0 0; padding: 21px; border-radius: 17px; background: #e8f4f7; }
.as-recommend h3 { margin: 0; font-size: 1.12rem; }
.as-recommend p { margin: 4px 0 13px; color: var(--muted); font-size: .86rem; }
.as-recommend a { display: flex; align-items: center; gap: 8px; padding: 12px; margin-top: 7px; border-radius: 10px; background: white; color: var(--navy); text-decoration: none; }
.as-recommend a b { flex: 1; }
.as-recommend a small { color: var(--muted); }
.as-recommend a svg { width: 16px; height: 16px; }
.as-disclaimer, .as-footnote { color: var(--muted); font-size: .85rem; line-height: 1.45; }
.as-footnote { margin-top: 24px; }
.as-saved-card { padding: 23px; border: 1px solid var(--line); border-radius: 19px; background: white; box-shadow: 0 7px 18px #0f4c5c09; }
.as-saved-card h3 { margin: 13px 0 6px; }
.as-saved-card h3 a { color: var(--navy); text-decoration: none; }
.as-saved-card p { color: var(--muted); margin: 0 0 15px; }
.as-saved-card .textlink { display: inline-flex; align-items: center; gap: 7px; }
.as-saved-card .textlink svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
@media(max-width: 1100px) { .as-layout { grid-template-columns: minmax(0,1fr) minmax(360px,.9fr); } .home-tool-feature { grid-template-columns: 1fr; } .home-tool-mark { width: 58px; height: 58px; } }
@media(max-width: 970px) { .header nav { display: none; } .header .menu-btn { display: grid; } .header nav.open { display: flex; position: absolute; left: 0; right: 0; top: 92px; z-index: 40; flex-direction: column; align-items: stretch; gap: 0; padding: 17px 30px; background: white; box-shadow: 0 12px 20px #0f4c5c19; } .header nav.open a { padding: 11px 0; } .as-layout { grid-template-columns: 1fr; } .as-preview { position: static; max-height: none; } .as-empty { min-height: 280px; } }
@media(max-width: 740px) { .header nav.open { top: 75px; } .home-tools-grid { grid-template-columns: 1fr; } .home-tool-feature { min-height: 0; padding: 25px; } .home-tool-links a { min-height: 115px; } .as-head { padding: 27px 24px; margin-top: 12px; } .as-head em { display: none; } .as-head h1 { font-size: clamp(2.5rem,9vw,3.5rem); } .as-head p { font-size: 1.05rem; } .as-panel, .as-preview { padding: 21px; border-radius: 19px; } .as-fields { gap: 14px; } .as-page { padding-bottom: 50px; } }
@media(max-width: 520px) { .home-tool-links { grid-template-columns: repeat(2,minmax(0,1fr)); } .home-tool-links a { font-size: .9rem; padding: 14px; } .as-types, .as-fields { grid-template-columns: 1fr; } .as-type span { min-height: 0; } .as-wide { grid-column: auto; } #as-sequence { grid-template-columns: 1fr; } .as-panel-head { gap: 11px; } .as-panel-head > b { width: 36px; height: 36px; } .as-choices { gap: 7px; } .as-choice span { font-size: .83rem; } .as-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .as-actions .btn { min-width: 0; white-space: normal; text-align: center; justify-content: center; } .as-recommend a { align-items: start; flex-wrap: wrap; } .as-recommend a small { width: 100%; } .as-document > header, .as-document section { padding-inline: 17px; } }
@media(max-width: 390px) { .as-head h1 { font-size: 2.45rem; } .home-tool-feature b { font-size: 1.65rem; } .as-panel, .as-preview { padding: 16px; } .as-head { padding: 25px 19px; } }
.as-saved-actions { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.as-saved-actions button { color: #9b4c47; font-size: .88rem; font-weight: 800; padding: 8px 0; }
.as-saved-actions button:hover { text-decoration: underline; text-underline-offset: 4px; }