/* ==========================================================================
   Sugerencias dentro del globo amarillo de Clippy (icono "sugerencias" del escritorio)
   JS : javascript/sugerencias.js (usa el Clippy unico de clippy-reactive.js: window.W98Say)
   Formulario: Netlify Forms (esqueleto <form name="sugerencias" data-netlify="true"> escrito en index.html)
   Al abrirse, el globo (.clipr__b) pasa a ser la "hoja": clase .is-sheet, y el contenedor #clipr lleva data-sg.
   ========================================================================== */

/* el globo se agranda y se despliega como una hoja */
#clipr[data-sg] { max-width: min(330px, calc(100vw - 12px)); }
#clipr[data-sg] .clipr__b.is-sheet { width: min(330px, calc(100vw - 24px)); max-width: none; padding: 10px 24px 10px 12px; }
.clipr__b.is-sheet { transform-origin: 50% 100%; animation: sgUnfold .5s steps(8, end); }
.clipr__b.is-sheet p { margin: 0; line-height: 14px; }
/* la hoja es el papel rayado que sostiene Clippy: amarillo oliva, renglones en TODA la hoja (tambien fuera de las casillas), esquinas rectas y borde claro arriba/izquierda */
.clipr__b.is-sheet {
  background-color: #ecec9e; border-radius: 0; border-color: #000;
  background-image: linear-gradient(to bottom, transparent 11px, #cdcd86 11px, #cdcd86 12px, transparent 12px);   /* el renglon va justo debajo de la linea base del texto (11px dentro de cada fila de 14px) */
  background-size: 100% 14px; background-repeat: repeat; background-position: 0 var(--sg-y, 0px);   /* --sg-y la fija sugerencias.js para que los renglones de la hoja y los del campo coincidan */
  box-shadow: inset 1px 1px #fffff0, inset -1px -1px #a3a366, 3px 3px 0 rgba(0, 0, 0, .45);
}
@keyframes sgUnfold { from { transform: scaleY(.12); opacity: .5; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .clipr__b.is-sheet { animation: none; } }

/* formulario: estilo Windows 98 (tipografia MS Sans Serif pixelada, campos hundidos, botones biselados) */
.sg { display: flex; flex-direction: column; gap: 0; margin-top: 0; font-family: var(--font); font-size: 11px; -webkit-font-smoothing: none; }
.sg__l { font: 11px/14px var(--font); height: 14px; color: #000; }
.sg__in, .sg__msg {
  box-sizing: border-box; width: 100%; padding: 3px 4px; border: 0; border-radius: 0; outline: 0;
  font: 11px var(--font); color: #000; background: #ecec9e;   /* amarillo del papel de Clippy */
  box-shadow: inset -1px -1px #fffff0, inset 1px 1px #808080, inset -2px -2px #dcdc8e, inset 2px 2px #000;   /* borde hundido clasico */
}
.sg__in:focus, .sg__msg:focus { outline: 0; }
.sg__in { height: 25px; }   /* 25px = 14*2 - 3: deja el campo de texto con su primer renglon en la grilla de 14px de la hoja */
.sg__msg {
  height: 101px; min-height: 101px; line-height: 14px;   /* 101px = 3px de margen + 7 renglones de 14px */ resize: none; display: block;
  background-color: #ecec9e;
  /* renglones como la hoja de Clippy: una linea cada 14px (= line-height), mismo color y paso que los de la hoja, y se desplazan junto con el texto */
  background-image: linear-gradient(to bottom, transparent 11px, #cdcd86 11px, #cdcd86 12px, transparent 12px); background-size: 100% 14px; background-repeat: repeat;   /* mismo renglon que la hoja */
  background-origin: content-box; background-clip: padding-box; background-attachment: local;
}
.sg__row { display: flex; align-items: center; gap: 6px; margin-top: 0; height: 28px; }
.sg__n { margin-right: auto; align-self: flex-end; font: 11px/14px var(--font); color: #000; }
.sg .btn {
  min-width: 75px; padding: 4px 12px; border: 0; border-radius: 0; font: 11px var(--font); color: #000; text-align: center; cursor: default;
  background: #c0c0c0; box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
}
.sg .btn:active:not(:disabled) { box-shadow: inset -1px -1px #fff, inset 1px 1px #000, inset -2px -2px #dfdfdf, inset 2px 2px #808080; padding: 5px 11px 3px 13px; }
.sg .btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.sg .btn:disabled { color: #808080; text-shadow: 1px 1px #fff; }
.sg__ok { font-weight: 400; }
.sg__st { min-height: 14px; font: 11px/14px var(--font); }
.sg__st.is-ok { color: #006400; }
.sg__st.is-err { color: #a00000; }

/* campo trampa anti-spam (honeypot de Netlify): fuera de la vista y de los lectores de pantalla */
.sg__bot { display: none !important; }

/* lugar fijo del icono, pegado a la papelera (ver bin-corner.css): escritorio (>=1024px) abajo de la papelera; celular/tablet (<=1023px) a su lado (izquierda) */
.icons > li:has(> .icon[data-sg="open"]) { position: fixed; margin: 0; z-index: 1; }
@media (min-width: 1024px) {
  .icons > li:has(> .icon[data-sg="open"]) { top: calc(var(--gap, 16px) + 68px); right: 16px; bottom: auto; left: auto; }
}
@media (max-width: 1023px) {
  .icons > li:has(> .icon[data-sg="open"]) { right: 92px; left: auto; top: auto; bottom: calc(var(--taskbar-h, 36px) + 12px); }
}

/* EXCEPCION de tamano: este icono es mas grande que el cuadrado de 32x32 de los demas (64x48, regla general en windows.css: .icon img)
   para que entre Clippy entero metiendo el sobre en el buzon de sugerencias. La celda (.icon) mide 76px de ancho, asi que entra sin tocar el resto. */
.icons .icon[data-sg="open"] img { width: 64px; height: 48px; image-rendering: pixelated; }