/* Apariencia y taller práctico: extensión del sistema visual CSS / LAB. */
:root {
  --accent-ink: var(--accent);
  --code-bg: #11130f;
  --code-text: #c3dca4;
  --chrome: #171914;
  --toolbar-bg: rgba(20, 22, 19, 0.94);
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6f1;
  --surface: #ffffff;
  --surface-raised: #eaf0e3;
  --line: #cdd6c4;
  --text: #20291b;
  --muted: #55614c;
  --accent-ink: #416515;
  --code-bg: #eef3e8;
  --code-text: #344b23;
  --chrome: #ffffff;
  --toolbar-bg: rgba(255, 255, 255, 0.95);
}
html[data-theme="rest"] {
  color-scheme: light;
  --bg: #f0e8d9;
  --surface: #faf3e7;
  --surface-raised: #e9dfcb;
  --line: #d2c4aa;
  --text: #3d3529;
  --muted: #6a5d4a;
  --accent-ink: #4c5c28;
  --code-bg: #eae1d0;
  --code-text: #514b30;
  --chrome: #f7efdf;
  --toolbar-bg: rgba(247, 239, 223, 0.96);
}
.sidebar {
  background: var(--chrome);
}
.topbar {
  background: var(--toolbar-bg);
}
pre {
  background: var(--code-bg);
  color: var(--code-text);
  border-color: var(--line);
}
.appearance-control {
  display: flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding-left: 10px;
}
.appearance-control > span {
  color: var(--accent-ink);
}
.appearance-control select {
  width: 112px;
  margin: 0;
  min-height: 36px;
  padding: 7px 7px 7px 2px;
  border: 0;
  font-size: 12px;
  background: transparent;
}
/* Las muestras cromáticas conservan sus colores; el texto de la interfaz se adapta. */
html:not([data-theme="dark"])
  :is(
    .index-label,
    .chapter-nav a,
    .chapter-nav a > span,
    .sidebar-bottom,
    .breadcrumb,
    .breadcrumb > span,
    .hero-meta,
    .topic-strip,
    .section-badge,
    .panel-label,
    .experiment-bar,
    .micro-note,
    summary > span,
    .color-formats span,
    .position-origin,
    footer
  ) {
  color: var(--muted);
}
html:not([data-theme="dark"]) .chapter-nav a.active {
  color: var(--accent-ink);
  background: var(--surface-raised);
}
html:not([data-theme="dark"]) .syntax-card {
  background: var(--surface-raised);
}
html:not([data-theme="dark"]) .syntax-line {
  color: var(--muted);
}
html:not([data-theme="dark"]) .token-property {
  color: #714294;
}
html:not([data-theme="dark"]) .token-value {
  color: #914511;
}
html:not([data-theme="dark"]) .selector-tile {
  background: var(--surface-raised);
  color: var(--muted);
}
html:not([data-theme="dark"]) .selector-tile.matched {
  color: var(--accent-ink);
  outline-color: var(--accent-ink);
}
html:not([data-theme="dark"]) .pseudo-quote {
  color: #714294;
}
html:not([data-theme="dark"]) .transform-demo > span {
  color: #714294;
  border-color: #a78cbe;
}
html:not([data-theme="dark"]) .position-anchor {
  color: var(--muted);
  border-color: var(--line);
}
html:not([data-theme="dark"]) .idea-light {
  color: #8d947f;
}
html:not([data-theme="dark"]) .state-panel:has(input:checked) .idea-light {
  color: var(--accent-ink);
}
html:not([data-theme="dark"])
  .validation-demo
  input:not(:placeholder-shown):valid {
  border-color: #427331;
}
html:not([data-theme="dark"])
  .validation-demo
  input:not(:placeholder-shown):invalid {
  border-color: #af392e;
}
/* Escenarios oscuros intencionales para mantener fieles los ejemplos de color. */
.hero-art,
.cascade-stage,
.box-model-stage,
.motion-stage,
.responsive-container,
.effect-stage {
  --accent-ink: var(--accent);
  --text: #f0f1e9;
  --muted: #afb4a5;
}
html:not([data-theme="dark"]) .effect-stage .glass-pane {
  color: #f0f1e9;
}
.appearance-control,
.playground-toolbar,
.playground-actions {
  flex-shrink: 0;
}

/* Editor: vista previa a la izquierda, código a la derecha. */
.playground-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.example-picker {
  min-width: 0;
}
.example-picker > label {
  font-size: 12px;
  margin-bottom: 8px;
  color: var(--muted);
}
.example-picker > div {
  display: flex;
  gap: 9px;
}
.example-picker select {
  margin: 0;
  width: 210px;
  max-width: 100%;
  font-size: 13px;
}
.playground-actions {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.playground-actions .small-button,
.example-picker .small-button {
  min-height: 44px;
  font-size: 12px;
}
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.playground-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: wrap;
  padding: 5px 2px;
}
.playground-options .check-control {
  font-size: 13px;
}
.playground-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
.preview-panel,
.source-panel {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
}
.preview-panel {
  display: flex;
  flex-direction: column;
}
.editor-panel-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 16px;
  background: var(--surface-raised);
  border-bottom: 1px solid var(--line);
  font: 11px var(--mono);
}
.editor-panel-bar > span,
.editor-panel-bar label {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 12px var(--mono);
}
.editor-panel-bar output {
  color: var(--muted);
  font-size: 11px;
}
.preview-bar-actions {
  display: flex;
  align-items: center;
  gap: 9px;
}
.preview-bar-actions .small-button {
  min-height: 30px;
  padding: 4px 8px;
  font-size: 10px;
}
.preview-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
}
.preview-controls > label {
  color: var(--muted);
  font-size: 12px;
}
.preview-controls select {
  margin: 0;
  min-height: 36px;
  font-size: 12px;
}
.preview-canvas {
  flex: 1;
  background: #d5d9d0;
  min-height: 530px;
  overflow: auto;
}
#exercisePreview {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 530px;
  border: 0;
  background: white;
  color-scheme: light;
}
.preview-footer {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  min-height: 39px;
  align-items: center;
  padding: 10px 15px;
  border-top: 1px solid var(--line);
  font: 10px var(--mono);
  color: var(--muted);
}
.preview-footer .has-warning {
  color: #ff9e91;
}
.preview-panel:fullscreen {
  width: 100vw;
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: var(--surface);
}
.preview-panel:fullscreen .preview-canvas,
.preview-panel:fullscreen #exercisePreview {
  min-height: 0;
  height: auto;
  flex: 1;
}
.preview-panel:fullscreen .preview-controls {
  justify-content: center;
}
.source-panels {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  min-width: 0;
}
.source-panel {
  display: flex;
  flex-direction: column;
}
.source-panel textarea {
  display: block;
  flex: 1;
  width: 100%;
  min-height: 265px;
  padding: 17px;
  margin: 0;
  border: 0;
  border-radius: 0;
  resize: vertical;
  background: var(--code-bg);
  color: var(--code-text);
  font: 13px/1.7 var(--mono);
  tab-size: 2;
  white-space: pre;
  overflow: auto;
}
.source-panel textarea:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: -3px;
}
.language-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.html-dot {
  background: #e99462;
}
.css-dot {
  background: #9c86ea;
}
.playground-section .section-intro {
  max-width: 800px;
}
.playground-section .tip {
  margin-top: 20px;
}
@media (max-width: 1250px) {
  .breadcrumb {
    display: none;
  }
  .topbar {
    justify-content: flex-end;
  }
}
@media (max-width: 1000px) {
  .playground-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .preview-canvas,
  #exercisePreview {
    min-height: 390px;
    height: 390px;
  }
  .source-panels {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto;
  }
  .source-panel textarea {
    min-height: 310px;
  }
}
@media (max-width: 820px) {
  .topbar {
    justify-content: space-between;
    flex-wrap: wrap;
    padding-block: 10px;
  }
  .appearance-control select {
    width: 100px;
  }
  .toolbar {
    gap: 6px;
  }
}
@media (max-width: 600px) {
  .topbar .mobile-brand {
    flex-basis: 100%;
  }
  .topbar {
    gap: 7px;
    min-height: 104px;
  }
  .toolbar {
    width: 100%;
    justify-content: space-between;
  }
  .icon-button span {
    display: inline;
  }
  .appearance-control select {
    width: 93px;
  }
  .icon-button,
  .theme-button {
    padding: 7px;
    gap: 5px;
    font-size: 11px;
  }
  .appearance-control {
    padding-left: 7px;
  }
  html {
    scroll-padding-top: 130px;
  }
  .source-panels {
    grid-template-columns: minmax(0, 1fr);
  }
  .playground-toolbar {
    padding: 15px;
  }
  .example-picker {
    width: 100%;
  }
  .example-picker > div {
    flex-wrap: wrap;
  }
  .example-picker select {
    flex: 1;
    min-width: 150px;
  }
  .playground-actions {
    gap: 8px;
    width: 100%;
  }
  .playground-actions .button {
    flex: 1;
  }
  .preview-footer {
    font-size: 9px;
  }
  .source-panel textarea {
    min-height: 270px;
    font-size: 14px;
  }
  .playground-options {
    gap: 0;
    padding-bottom: 15px;
  }
  .playground-options .micro-note {
    font-size: 11px !important;
  }
}
@media print {
  .appearance-control,
  .playground-toolbar,
  .playground-options,
  .preview-controls {
    display: none;
  }
  .playground-grid {
    grid-template-columns: 1fr;
  }
  .source-panels textarea {
    height: auto;
    background: white;
    color: #111;
  }
}

/* Laboratorio de color */
.color-lab-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, 0.88fr);
  gap: 18px;
  align-items: stretch;
}
.color-builder {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(220px, 1fr);
  gap: 22px;
  align-content: start;
}
.color-display {
  min-height: 270px;
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border-radius: 12px;
  background: #c5f568;
  color: #24341b;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.12);
  transition:
    background 0.2s,
    color 0.2s;
}
.color-display > span {
  font: clamp(27px, 4vw, 46px) / 1 var(--mono);
  letter-spacing: -0.06em;
  overflow-wrap: anywhere;
}
.color-display > small {
  margin-top: 11px;
  font: 10px var(--mono);
  letter-spacing: 0.12em;
  opacity: 0.7;
}
.native-picker-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 9px 12px;
  align-items: center;
}
.native-picker-row label {
  justify-content: flex-start;
  font-size: 13px;
}
.native-picker-row input[type="color"],
.contrast-inputs input[type="color"] {
  width: 100%;
  height: 44px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  cursor: pointer;
}
.native-picker-row input[type="text"] {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg);
  color: var(--text);
  padding: 9px 12px;
  font: 14px var(--mono);
  text-transform: uppercase;
}
.native-picker-row input.invalid {
  border-color: #ff7d70;
}
.native-picker-row .micro-note {
  grid-column: 1 / -1;
  margin-top: -3px;
}
.eyedropper-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.eyedropper-row .small-button {
  flex: 0 0 auto;
}
.eyedropper-row .micro-note {
  flex-basis: 100%;
  margin: 0;
}
body.color-sampling,
body.color-sampling * {
  cursor: crosshair !important;
}
.page-color-probe {
  position: fixed;
  z-index: 200;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 8px 24px rgb(0 0 0 / 0.2);
  font: 11px var(--mono);
  opacity: 0;
  pointer-events: none;
  transform: translate(14px, 14px);
}
.page-color-probe span {
  width: 18px;
  height: 18px;
  border: 1px solid var(--line);
  border-radius: 50%;
}
body.color-sampling .page-color-probe {
  opacity: 1;
}
.rgb-sliders {
  padding-top: 3px;
}
.rgb-sliders input {
  margin-bottom: 13px;
}
.color-formats-expanded {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.color-code-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 14px;
  background: var(--surface-raised);
  border: 1px solid var(--line);
  border-radius: 9px;
  text-align: left;
}
.color-code-card:hover {
  border-color: var(--accent-ink);
}
.color-code-card > span {
  color: var(--accent-ink);
  font: 10px var(--mono);
}
.color-code-card code {
  max-width: 100%;
  font-size: 12px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.color-code-card small {
  color: var(--muted);
  font-size: 10px;
}
.color-copy-row {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}
.color-copy-row .small-button {
  min-height: 45px;
}
.color-copy-row .micro-note {
  flex-basis: 100%;
  min-height: 18px;
}
.color-tools {
  display: grid;
  gap: 18px;
}
.contrast-preview {
  min-height: 136px;
  margin: 18px 0 14px;
  padding: 22px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #c5f568;
  color: #24341b;
}
.contrast-preview strong {
  font-size: 27px;
  letter-spacing: -0.04em;
}
.contrast-preview span {
  font-size: 13px;
  margin-top: 5px;
}
.contrast-inputs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.contrast-inputs label {
  display: grid;
  gap: 6px;
  align-items: start;
  font-size: 12px;
}
.contrast-inputs .small-button {
  grid-column: 1 / -1;
}
.contrast-result {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.contrast-result > strong {
  flex-shrink: 0;
  font: 25px var(--mono);
  color: var(--accent-ink);
}
.contrast-result div {
  display: flex;
  flex-direction: column;
}
.contrast-result span {
  font-size: 13px;
}
.contrast-result small {
  font-size: 11px;
  color: var(--muted);
}
.contrast-result code {
  margin-top: 4px;
  color: var(--accent-ink);
  font-size: 10px;
}
.contrast-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 16px;
  padding-top: 15px;
  border-top: 1px solid var(--line);
}
.contrast-actions .panel-label,
.contrast-actions .micro-note {
  grid-column: 1 / -1;
}
.contrast-actions button {
  min-height: 40px;
}
.contrast-actions .button {
  justify-content: center;
  padding: 9px 12px;
  font-size: 11px;
}
.contrast-actions .micro-note {
  min-height: 18px;
}
.palette-heading {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}
.palette-panel p {
  font-size: 12px;
  margin: 14px 0;
}
.generated-palette {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  min-height: 85px;
  border-radius: 9px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.generated-palette button {
  min-width: 0;
  padding: 7px 3px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font: 8px var(--mono);
  transition: flex-grow 0.2s;
}
.generated-palette button:hover {
  flex-grow: 1.4;
}
.generated-palette button:focus-visible {
  outline-offset: -4px;
}
.palette-panel pre {
  font-size: 11px;
}
.color-concepts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.color-concepts article {
  padding: 17px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  min-width: 0;
}
.color-concepts span {
  display: block;
  color: var(--accent-ink);
  font: 10px var(--mono);
}
.color-concepts code {
  display: block;
  margin: 8px 0;
  color: var(--text);
  font-size: 11px;
  overflow-wrap: anywhere;
}
.color-concepts p {
  margin: 0;
  font-size: 12px;
}
@media (max-width: 1100px) {
  .color-lab-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .color-tools {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 740px) {
  .color-builder {
    grid-template-columns: minmax(0, 1fr);
  }
  .color-display {
    grid-row: auto;
    min-height: 220px;
  }
  .color-formats-expanded,
  .color-copy-row {
    grid-column: auto;
  }
  .color-tools {
    grid-template-columns: minmax(0, 1fr);
  }
  .color-concepts {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 440px) {
  .color-formats-expanded {
    grid-template-columns: minmax(0, 1fr);
  }
  .color-concepts {
    grid-template-columns: minmax(0, 1fr);
  }
  .native-picker-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .native-picker-row .micro-note {
    grid-column: auto;
  }
  .eyedropper-row {
    grid-column: auto;
    align-items: flex-start;
    flex-direction: column;
  }
  .color-copy-row > button {
    width: 100%;
  }
  .contrast-actions {
    grid-template-columns: minmax(0, 1fr);
  }
  .contrast-actions .panel-label,
  .contrast-actions .micro-note {
    grid-column: auto;
  }
  .generated-palette button {
    font-size: 7px;
  }
}