/* Página de imagenes: es una herramienta de consola, así que la página ES una consola.
   Windows Terminal (paleta Campbell) + Cascadia Mono; colores ANSI de imagenes/ui.py. */

.tema-imagenes { background: #000; }
.tema-imagenes .pp { font-family: var(--t-fuente); }
.im-hero { padding-top: 16px; padding-bottom: 40px; }
.im-ventana { background: var(--t-fondo); border: 1px solid #333; border-radius: 8px; overflow: hidden; box-shadow: 0 30px 80px -30px rgb(58 150 221 / 35%); }
.im-hero-cuerpo { padding: 24px 22px 30px; }
@media (min-width: 700px) { .im-hero-cuerpo { padding: 36px 40px 44px; } }
.regla { white-space: nowrap; overflow: hidden; text-overflow: clip; }
.im-h1 { font: 700 clamp(2.4rem, 9vw, 5rem)/1.1 var(--t-fuente); letter-spacing: -0.02em; margin: 10px 0; color: var(--t-texto); }
.im-lead { font-size: 1.05rem; line-height: 1.7; max-width: 46em; margin: 22px 0 10px; }
.im-tipo { color: var(--t-texto-2); margin-bottom: 26px; font-size: .92rem; }
.im-acciones { display: flex; flex-wrap: wrap; gap: 10px; }
.im-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  font: 600 .95rem var(--t-fuente); color: var(--t-texto); background: #1A1A1A; border: 1px solid #3A3A3A; border-radius: 4px;
  text-decoration: none; cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.im-btn:hover, .im-btn:focus-visible { background: var(--t-acento); color: #000; border-color: var(--t-acento); }
.im-btn .ico { width: 16px; height: 16px; }

/* colores ANSI (Campbell) */
.a-cyan { color: #3A96DD; }
.a-magenta { color: #B4009E; }
.a-green { color: #16C60C; }
.a-yellow { color: #F9F1A5; }
.a-bold { font-weight: 700; }
.a-dim { color: #767676; }
.a-prompt { color: #CCCCCC; }
.tema-imagenes .a-cyan.a-bold { color: #61D6D6; }
.tema-imagenes .a-green.a-bold { color: #16C60C; }

.im-seccion { padding-top: 40px; padding-bottom: 16px; }
.im-h2 { font: 700 1.5rem var(--t-fuente); margin-bottom: 10px; }
.im-h2::before { content: "## "; color: #767676; }
.im-texto { color: var(--t-texto-2); max-width: 48em; margin-bottom: 18px; line-height: 1.7; }
.im-replay { display: block; max-width: none; margin-bottom: 14px; }
.im-replay .wt-cuerpo { min-height: 30em; }
.wt-l.oculta { visibility: hidden; }

.im-constructor { display: grid; gap: 12px; margin-bottom: 14px; }
@media (min-width: 800px) { .im-constructor { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.im-constructor fieldset { border: 1px solid #333; border-radius: 6px; padding: 12px 14px 14px; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; min-width: 0; }
.im-constructor legend { color: #61D6D6; padding: 0 6px; font-weight: 700; }
.im-constructor label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-height: 32px; }
.im-constructor small { color: #767676; }
.im-constructor input { accent-color: #16C60C; width: 16px; height: 16px; }
.im-comando { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #0C0C0C; border: 1px solid #333; border-left: 3px solid #16C60C; border-radius: 4px; padding: 12px 14px; }
.im-comando code { flex: 1 1 260px; font: 600 .95rem/1.6 var(--t-fuente); color: #F2F2F2; overflow-wrap: anywhere; }
.im-comando code::before { content: "PS> "; color: #767676; }
.im-comando.destello { animation: im-destello .8s ease; }
@keyframes im-destello { 30% { background: #13300F; } }

.im-presets { margin: 0; display: grid; gap: 14px; }
.im-presets div { display: grid; gap: 4px; }
@media (min-width: 700px) { .im-presets div { grid-template-columns: 180px 1fr; } }
.im-presets dd { margin: 0; color: var(--t-texto); line-height: 1.6; }
.im-preset { font: 700 1rem var(--t-fuente); color: #61D6D6; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 4px; }
.im-preset:hover { color: #F9F1A5; }

.im-dos { display: grid; gap: 32px; }
@media (min-width: 960px) { .im-dos { grid-template-columns: 1.2fr 1fr; } }
.im-dos > div { min-width: 0; } /* sin esto el <pre> impone su ancho y la página desborda en móvil */
.im-codigo { margin: 0; background: #0C0C0C; border: 1px solid #333; border-radius: 6px; padding: 14px; overflow-x: auto; font: .82rem/1.6 var(--t-fuente); color: #CCCCCC; }
.im-matriz { border-collapse: collapse; font-size: .88rem; width: 100%; }
.im-matriz th, .im-matriz td { border: 1px solid #333; padding: 8px 10px; text-align: center; }
.im-matriz thead th { color: #61D6D6; }
.im-matriz tbody th { color: var(--t-texto-2); text-align: left; font-weight: 500; }
@media (max-width: 480px) { .im-matriz { font-size: .74rem; } .im-matriz th, .im-matriz td { padding: 6px 4px; } }