/* style-w31.css
   Look & feel: Windows 3.1 (beveled UI, grays, compact system font)
   Diseñado para aplicarse sobre tu HTML actual.
*/

/* Reset mínimo */
* { box-sizing: border-box; margin: 0; padding: 0; }

/* Tipografía "compacta" tipo sistema */
:root{
  --bg: #c0c0c0;        /* fondo general */
  --panel: #e6e6e6;     /* color interior ventanas */
  --bevel-light: #ffffff;
  --bevel-dark: #7a7a7a;
  --text: #000000;
  --titlebar: #000080;  /* azul oscuro para título (opcional) */
  --title-text: #ffffff;
  --button-face: #d4d0c8;
}

/* Fondo de escritorio: gris con patrón sutil tipo 3.1 */
body {
  font-family: Tahoma, "Arial Narrow", Arial, sans-serif;
  background-color: var(--bg);
  background-image:
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(180deg, rgba(0,0,0,0.02) 1px, transparent 1px);
  background-size: 24px 24px, 24px 24px;
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: none;
}

/* Escritorio (contenedor principal) */
.desktop-xp {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 100vh;
}

/* Barra de título "sistema" estilo 3.1:
   pequeña, con borde doble (efecto bisel). */
.title-bar-xp {
  width: 100%;
  max-width: 900px;
  background: linear-gradient(#f2f2f2, #dcdcdc);
  padding: 6px 8px;
  border-top: 2px solid var(--bevel-light);
  border-left: 2px solid var(--bevel-light);
  border-right: 2px solid var(--bevel-dark);
  border-bottom: 2px solid var(--bevel-dark);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.8),
    inset -1px -1px 0 rgba(0,0,0,0.08);
  display: flex;
  align-items: center;
}

/* Título: tipografía condensada, pequeña y alineada centro-izq */
.main-title-xp {
  font-size: 12px;
  letter-spacing: 1px;
  font-weight: bold;
  color: #000;
  margin: 0;
  text-transform: uppercase;
}

/* Contenedor de contenido estilo ventana 3.1 (Program Manager) */
.content-xp {
  width: 100%;
  max-width: 900px;
  background: var(--panel);
  padding: 12px;
  min-height: 400px;
  border-top: 2px solid var(--bevel-light);
  border-left: 2px solid var(--bevel-light);
  border-right: 2px solid var(--bevel-dark);
  border-bottom: 2px solid var(--bevel-dark);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.9),
    inset -1px -1px 0 rgba(0,0,0,0.06);
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr; /* ejemplo: dos columnas para iconos/áreas */
  gap: 12px;
  align-items: start;
}

/* Simular iconos tipo Program Manager */
.program-group {
  background: linear-gradient(#eee,#ddd);
  padding: 8px;
  border: 2px solid #bcbcbc;
  border-radius: 2px;
  box-shadow:
    1px 1px 0 rgba(0,0,0,0.12),
    -1px -1px 0 rgba(255,255,255,0.9) inset;
  min-height: 120px;
}

/* Icono individual (cuadro con texto pequeño debajo) */
.program-icon {
  display: inline-block;
  width: 64px;
  margin: 6px;
  text-align: center;
  font-size: 11px;
  color: var(--text);
}
.program-icon .ico {
  width: 48px;
  height: 48px;
  display: block;
  margin: 0 auto 4px;
  border: 2px solid #999;
  background: linear-gradient(#fff,#e6e6e6);
  box-shadow:
    inset 1px 1px 0 rgba(255,255,255,0.7),
    1px 1px 0 rgba(0,0,0,0.08);
}

/* Botones estilo clásico con relieve */
.btn-w31 {
  display: inline-block;
  padding: 4px 8px;
  margin: 4px;
  font-size: 12px;
  background: var(--button-face);
  border-top: 2px solid var(--bevel-light);
  border-left: 2px solid var(--bevel-light);
  border-bottom: 2px solid var(--bevel-dark);
  border-right: 2px solid var(--bevel-dark);
  cursor: pointer;
  user-select: none;
}

/* Efecto 'presionado' */
.btn-w31:active, .btn-w31.pressed {
  border-top: 2px solid var(--bevel-dark);
  border-left: 2px solid var(--bevel-dark);
  border-bottom: 2px solid var(--bevel-light);
  border-right: 2px solid var(--bevel-light);
  transform: translateY(1px);
}

/* Ventana flotante (ejemplo) */
.window {
  width: 420px;
  background: linear-gradient(#e9e9e9,#ddd);
  border: 2px solid #7a7a7a;
  box-shadow: 6px 6px 0 rgba(0,0,0,0.12);
  margin: 8px;
}

/* Barra de título interna (simula ventana clásica) */
.window .title {
  background: linear-gradient(#000080,#000060);
  color: white;
  padding: 4px 6px;
  font-size: 12px;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 2px solid #4a4a4a;
}

/* Contenido interno de ventana */
.window .body {
  padding: 8px;
  background: var(--panel);
  border-top: 2px solid var(--bevel-light);
  border-left: 2px solid var(--bevel-light);
  border-right: 2px solid var(--bevel-dark);
  border-bottom: 2px solid var(--bevel-dark);
  min-height: 120px;
  font-size: 13px;
}

/* Simula input/textarea estilo sistema */
input[type="text"], textarea {
  font-family: inherit;
  font-size: 12px;
  padding: 4px;
  border: 2px solid #999;
  background: #fff;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,0.7);
}

/* Pequeño helper para centrar elementos en el "escritorio" */
.centered {
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Resposive (no cambiar mucho: 3.1 era fijo, pero soportaremos móvil) */
@media (max-width: 700px) {
  .content-xp { grid-template-columns: 1fr; padding: 10px; }
  .title-bar-xp, .content-xp { max-width: 100%; }
}