/* Cerro Azul OS — Sistema 1.0
   Color: chrome Platinum / acentos CLUT Mac OS 9 / brand web-safe (ver brand-universe-v0.md) */

@font-face {
  font-family: "Chicago";
  src: url("assets/ChicagoFLF.ttf") format("truetype");
}

:root {
  --chrome-hi: #EEEEEE;
  --chrome-lt: #DDDDDD;
  --chrome: #CCCCCC;
  --chrome-sh: #999999;
  --chrome-dk: #666666;
  --teal: #009999;
  --yellow: #FFCC00;
  --red: #CC3333;
  --ink: #000000;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; overflow: hidden; }

body {
  font-family: "Geneva", Verdana, sans-serif;
  font-size: 11px;
  background: var(--chrome);
  -webkit-font-smoothing: none;
  font-smooth: never;
  /* el puntero-greca como cursor real del OS */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="24"><path d="M2 0h2v2h2v2h2v2h2v2h2v2h2v2h2v2h-2v2h-4v2h2v2h2v2h-4v-2h-2v-2h-2v-2h-2v2H2v2H0V2h2z" fill="%23CC0000" stroke="white" stroke-width="1"/></svg>') 2 2, auto;
}

.hidden { display: none !important; }

/* ---------- BOOT ---------- */
#boot {
  position: fixed; inset: 0;
  background: var(--chrome);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  z-index: 100;
}

.boot-panel {
  background: var(--chrome-hi);
  border: 1px solid var(--ink);
  border-radius: 8px;
  box-shadow: 1px 1px 0 var(--chrome-sh), 3px 3px 0 rgba(0,0,0,.15);
  padding: 28px 60px 20px;
  text-align: center;
}

.boot-title {
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 28px;
  margin-top: 14px;
}

.boot-sub { font-size: 11px; color: #333; margin-top: 6px; }

.boot-progress {
  margin-top: 26px;
  width: 300px; height: 14px;
  background: white;
  border: 1px solid var(--ink);
  box-shadow: inset 1px 1px 0 var(--chrome-sh);
}
.boot-progress-fill {
  height: 100%; width: 0%;
  background: var(--teal);
  transition: width .35s steps(6);
}
.boot-status { margin-top: 10px; font-size: 11px; }

/* glifo CRT-tuna dibujado en CSS */
.glyph { position: relative; width: 96px; height: 96px; margin: 0 auto; }
.penca { position: absolute; background: var(--teal); width: 26px; height: 40px; border-radius: 13px; bottom: 52px; }
.p1 { left: 6px; transform: rotate(-32deg); }
.p2 { left: 35px; bottom: 58px; }
.p3 { right: 6px; transform: rotate(32deg); }
.crt {
  position: absolute; bottom: 18px; left: 18px;
  width: 60px; height: 44px;
  background: var(--teal); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
}
.crt-screen { width: 36px; height: 24px; background: var(--chrome-hi); border-radius: 3px; }
.crt-base { position: absolute; bottom: 8px; left: 28px; width: 40px; height: 10px; background: var(--teal); }

/* ---------- DESKTOP ---------- */
#desktop {
  position: fixed; inset: 0;
  background: url("assets/tile-azul.png");
  background-size: 128px;
  image-rendering: pixelated;
}

#menubar {
  position: absolute; top: 0; left: 0; right: 0; height: 22px;
  background: var(--chrome-hi);
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: center;
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 13px;
  padding: 0 10px;
  z-index: 50;
}
.menu-glyph { width: 16px; height: 16px; margin-right: 14px; image-rendering: pixelated; }
.menu-glyph:hover { filter: brightness(1.2); }
.menu-item { margin-right: 16px; padding: 2px 6px; user-select: none; }
.menu-item:hover, .menu-item.open { background: var(--hl, var(--teal)); color: white; }

.dropdown {
  position: fixed; top: 22px;
  background: var(--chrome-hi);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(0,0,0,.25);
  z-index: 99;
  min-width: 190px;
  padding: 2px 0;
}
.dropdown-item {
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 13px;
  padding: 3px 14px 3px 8px;
  display: flex; align-items: center; gap: 8px;
  white-space: pre;
}
.dropdown-item:hover:not(.disabled) { background: var(--hl, var(--teal)); color: white; }
.dropdown-item.disabled { color: var(--chrome-sh); }
.dropdown-header {
  font-family: "Geneva", Verdana, sans-serif;
  font-size: 9px;
  color: var(--chrome-dk);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 8px 2px;
  border-top: 1px solid var(--chrome-lt);
}
.dropdown-header:first-child { border-top: none; }
.dropdown-swatch {
  width: 22px; height: 16px;
  border: 1px solid var(--ink);
  image-rendering: pixelated;
}
.menu-right { margin-left: auto; }

.desk-icon {
  position: absolute;
  width: 84px;
  text-align: center;
  color: white;
}
.desk-icon img {
  width: 48px; display: block; margin: 0 auto 3px;
  image-rendering: pixelated;
}
.desk-icon span {
  font-size: 10px;
  background: rgba(0,0,0,.4);
  padding: 1px 3px;
}
.desk-icon:active img { filter: invert(20%); }

/* ---------- VENTANAS ---------- */
.window {
  position: absolute;
  background: var(--chrome-lt);
  border: 1px solid var(--ink);
  box-shadow: 1px 1px 0 var(--chrome-sh), 3px 3px 0 rgba(0,0,0,.2);
  z-index: 10;
}

.titlebar {
  height: 20px;
  background: var(--chrome-hi);
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: center;
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 13px;
  padding: 0 6px;
  /* stripes Platinum */
  background-image: repeating-linear-gradient(
    to bottom,
    var(--chrome-hi) 0 2px,
    var(--chrome-sh) 2px 3px
  );
  user-select: none;
  cursor: inherit;
}
.titlebar .title {
  flex: 1; text-align: center;
  background: var(--chrome-hi);
  padding: 0 8px;
}
.closebox {
  width: 11px; height: 11px;
  background: var(--chrome-hi);
  border: 1px solid var(--ink);
  box-shadow: inset 1px 1px 0 white;
  margin-right: 6px;
}
.closebox:active { background: var(--chrome-dk); }

.window-body {
  padding: 14px;
  background: var(--chrome-lt);
  text-align: center;
}
.window-body p { margin-bottom: 10px; line-height: 1.5; }
.flag-img { width: 100%; border: 1px solid var(--ink); image-rendering: auto; }
.caption { font-size: 10px; color: #333; margin-top: 8px; }

.btn-default {
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 13px;
  background: var(--chrome-hi);
  border: 1px solid var(--ink);
  border-radius: 6px;
  padding: 3px 22px;
  box-shadow: 0 0 0 2px var(--chrome-lt), 0 0 0 3px var(--ink);
  cursor: inherit;
}
.btn-default:active { background: var(--chrome-dk); color: white; }

/* ---------- TIENDA ---------- */
.tienda { text-align: left; }

.tienda-banner {
  font-family: "Cooper Black", "Cooper Std", "Chicago", serif;
  font-size: 26px;
  color: var(--teal);
  background: var(--yellow);
  border: 2px solid var(--teal);
  text-align: center;
  padding: 8px;
  margin-bottom: 12px;
}

.app-card {
  display: flex; gap: 14px;
  background: var(--chrome-hi);
  border: 1px solid var(--ink);
  padding: 12px;
  margin-bottom: 10px;
}
.app-card img {
  width: 84px; height: 84px;
  border: 1px solid var(--ink);
  flex-shrink: 0;
}
.app-info h3 {
  font-family: "Cooper Black", "Cooper Std", "Chicago", serif;
  font-size: 19px;
  margin-bottom: 4px;
}
.app-desc { margin-bottom: 4px; }
.app-meta { font-size: 10px; color: #333; margin-bottom: 8px; }
.btn-link { text-decoration: none; color: var(--ink); display: inline-block; }

.garantia {
  border: 3px double var(--ink);
  background: var(--yellow);
  padding: 10px 14px;
  margin-top: 4px;
}
.garantia-title {
  font-family: "Cooper Black", "Cooper Std", "Chicago", serif;
  font-size: 15px;
  margin-bottom: 4px;
  text-align: center;
}
.garantia p { font-size: 10px; line-height: 1.6; margin: 0; }

/* ---------- FINDER ---------- */
.finder { text-align: left; padding: 0; }
.finder-info {
  font-size: 10px; color: #333;
  border-bottom: 1px solid var(--chrome-sh);
  padding: 4px 10px; margin: 0;
  background: var(--chrome-hi);
}
.finder-grid { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; background: white; }
.finder-item { width: 84px; text-align: center; }
.finder-item img { width: 40px; display: block; margin: 0 auto 3px; image-rendering: pixelated; }
.finder-item span { font-size: 10px; }
.finder-item:hover span { background: var(--hl, var(--teal)); color: white; }

/* ---------- DOCS ---------- */
.docs { text-align: left; background: white; }
.docs h3 { font-family: "Chicago", Verdana, sans-serif; margin-bottom: 8px; }
.docs-firma { text-align: right; font-style: italic; }

/* ---------- APARIENCIA ---------- */
.apariencia { text-align: left; }
.apariencia fieldset {
  border: 1px solid var(--chrome-sh);
  padding: 8px 12px; margin-bottom: 10px;
}
.apariencia legend { font-family: "Chicago", Verdana, sans-serif; font-size: 12px; padding: 0 4px; }
.apariencia label { display: block; padding: 2px 0; }

/* realce dinámico */
.menu-item:hover { background: var(--hl, var(--teal)); }

/* ---------- SEA INVADERS ---------- */
.game-body { padding: 0; text-align: center; background: #0A2238; }
#seaCanvas { display: block; image-rendering: pixelated; }
.game-help {
  font-size: 10px; color: var(--chrome-lt);
  padding: 4px; margin: 0;
  font-family: "Chicago", Verdana, sans-serif;
}

/* ---------- YUSEF SIMON SAYS ---------- */
.simon-body { text-align: center; }
.simon-status {
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 13px; margin-bottom: 12px;
}
.simon-board {
  position: relative;
  width: 240px; height: 240px;
  margin: 0 auto 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  background: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 50%;
  overflow: hidden;
  padding: 8px;
}
.simon-pad {
  border: 2px solid var(--ink);
  background: var(--pad);
  filter: brightness(.55);
  cursor: inherit;
}
.simon-pad:nth-child(1) { border-radius: 100% 0 0 0; }
.simon-pad:nth-child(2) { border-radius: 0 100% 0 0; }
.simon-pad:nth-child(3) { border-radius: 0 0 0 100%; }
.simon-pad:nth-child(4) { border-radius: 0 0 100% 0; }
.simon-pad.lit, .simon-pad:active { filter: brightness(1.15); }
.simon-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 74px; height: 74px;
  background: var(--chrome-hi);
  border: 2px solid var(--ink);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 22px;
}
.simon-help { color: #333; }

/* ---------- BANDERAS ---------- */
.banderas-body { padding: 0; text-align: left; }
.banderas-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: var(--chrome-hi);
  border-bottom: 1px solid var(--chrome-sh);
}
.banderas-toolbar .finder-info { border: none; background: none; padding: 0; }
#banderasBuscar {
  font-family: "Geneva", Verdana, sans-serif;
  font-size: 11px;
  border: 1px solid var(--ink);
  box-shadow: inset 1px 1px 0 var(--chrome-sh);
  padding: 2px 6px;
  width: 180px;
}
.banderas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 12px;
  padding: 12px;
  background: white;
  max-height: 380px;
  overflow-y: auto;
}
.bandera-item { text-align: center; }
.bandera-item img {
  width: 100%;
  border: 1px solid var(--ink);
  display: block;
  margin-bottom: 3px;
}
.bandera-item span { font-size: 9px; display: block; line-height: 1.2; }
.bandera-item:hover span { background: var(--hl, var(--teal)); color: white; }
.bandera-detalle {
  position: absolute; inset: 21px 0 0 0;
  background: white;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 10px;
}
.bandera-detalle img { width: 70%; border: 1px solid var(--ink); box-shadow: 4px 4px 0 rgba(0,0,0,.15); }
.bandera-nombre { font-family: "Chicago", Verdana, sans-serif; font-size: 16px; }

/* ---------- TELEVISOR ---------- */
.tv-body { padding: 14px; background: var(--chrome-lt); }
.tv-frame {
  background: #8A6238;
  border: 2px solid var(--ink);
  border-radius: 10px;
  padding: 14px 14px 8px;
  box-shadow: inset 1px 1px 0 #A87F52, 3px 3px 0 rgba(0,0,0,.2);
}
#tvVideo {
  width: 100%;
  display: block;
  background: #111;
  border: 3px solid #000;
  border-radius: 14px;
  filter: brightness(0.25) contrast(1.1);
  transition: filter .5s;
}
.tv-frame.on #tvVideo { filter: none; }
.tv-controls {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 4px 2px;
}
.tv-knob {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #E8E0C8;
  border: 2px solid var(--ink);
  box-shadow: inset -2px -2px 0 #B8B098;
  cursor: inherit;
}
.tv-frame.on .tv-knob { background: #FCF305; }
.tv-canal {
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 11px;
  color: #F6F0DC;
  letter-spacing: 1px;
}
.tv-help { color: #333; margin-top: 8px; }
.tv-knob-canal { background: #CC3333; width: 16px; height: 16px; }

/* ---------- ANARCOPOLY ---------- */
.ana-body { padding: 8px; background: #E8E4D8; }
.ana-board {
  display: grid;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(11, 1fr);
  gap: 1px;
  background: #000;
  border: 1px solid #000;
  aspect-ratio: 1;
}
.ana-cell {
  background: #F2EEE2;
  position: relative;
  font-size: 6px;
  line-height: 1.1;
  overflow: hidden;
  padding: 1px;
}
.ana-cell b {
  font-family: "Geneva", Verdana, sans-serif;
  font-weight: normal;
  display: block;
  font-size: 6px;
}
.ana-banda { display: block; height: 8px; margin: -1px -1px 1px; }
.ana-owner {
  position: absolute; bottom: 1px; right: 1px;
  width: 7px; height: 7px;
  border: 1px solid #000;
}
.ana-token {
  position: absolute; bottom: 1px; left: 1px;
  width: 9px; height: 9px;
  border: 1px solid #000;
  border-radius: 50%;
  text-decoration: none;
}
.ana-token + .ana-token { left: 12px; }
.ana-cell em { position: absolute; top: 9px; right: 1px; font-style: normal; font-size: 6px; color: #CC0000; }
.ana-centro {
  grid-row: 2 / 11; grid-column: 2 / 11;
  background: #F2EEE2;
  display: flex; flex-direction: column;
  align-items: center;
  padding: 8px;
  gap: 4px;
}
.ana-centro h2 {
  font-family: "Cooper Black", "Cooper Std", "Chicago", serif;
  font-size: 26px;
  color: #CC0000;
  letter-spacing: 2px;
  transform: rotate(-3deg);
}
.ana-lema { font-size: 9px; font-style: italic; color: #555; }
.ana-dados { font-size: 28px; }
.ana-estado { font-size: 11px; text-align: center; line-height: 1.5; }
.ana-botones { display: flex; gap: 8px; }
.ana-log {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #999;
  font-size: 9px;
  padding: 4px 6px;
  min-height: 60px;
}
.ana-log p { margin: 0 0 3px; }

/* ---------- CALABOZOS Y CANGREJOS ---------- */
.cal-body { padding: 0; background: #E8E4D8; }

.cal-scene {
  position: relative;
  height: 220px;
  overflow: hidden;
  border-bottom: 1px solid var(--ink);
  image-rendering: pixelated;
  background: linear-gradient(
    to bottom,
    #29366F 0%, #3B5DC9 28%,
    #EF7D57 40%, #FFCC00 48%,
    #2360A5 48%, #3F8FCE 66%,
    #F4D29C 66%, #C99B5F 100%
  );
}

.cal-sol {
  position: absolute; top: 22px; left: 56px;
  width: 36px; height: 36px;
  background: #FFCC00;
  box-shadow: 0 0 0 5px rgba(255, 204, 0, .35);
}
.cal-cerro {
  position: absolute; bottom: 72px; right: -30px;
  border-left: 140px solid transparent;
  border-right: 90px solid transparent;
  border-bottom: 100px solid #41A6F6;
  filter: brightness(.6) saturate(.7);
}
.cal-cerro2 {
  position: absolute; bottom: 72px; right: 80px;
  border-left: 90px solid transparent;
  border-right: 110px solid transparent;
  border-bottom: 70px solid #2360A5;
  filter: brightness(.5);
}
.cal-muelle {
  position: absolute; bottom: 66px; left: 0;
  width: 190px; height: 11px;
  background: repeating-linear-gradient(90deg, #7A4841 0 14px, #5D3A35 14px 18px);
}
.cal-ola {
  position: absolute; height: 6px; width: 200%;
  background: repeating-linear-gradient(90deg, #9FD9E8 0 20px, transparent 20px 40px);
  opacity: .6;
  animation: cal-olas 4s linear infinite;
}
@keyframes cal-olas { from { transform: translateX(0); } to { transform: translateX(-40px); } }

.cal-fighter {
  position: absolute;
  bottom: 14px;
  font-size: 52px;
  line-height: 1;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,.45));
}
#calHeroe { left: 70px; }
.cal-enemigo { right: 84px; font-size: 60px; transform: scaleX(-1); }

.cal-fighter.hit { animation: cal-hit .35s steps(3); }
.cal-fighter.lunge-r { animation: cal-lunge-r .3s steps(4); }
.cal-fighter.lunge-l { animation: cal-lunge-l .3s steps(4); }
@keyframes cal-hit { 25% { transform: translateX(-7px); filter: brightness(3); } 75% { transform: translateX(7px); } }
@keyframes cal-lunge-r { 50% { transform: translateX(46px); } }
@keyframes cal-lunge-l { 50% { transform: scaleX(-1) translateX(46px); } }

.cal-float {
  position: absolute;
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 17px;
  color: #FFCC00;
  text-shadow: 2px 2px 0 #000;
  animation: cal-float 1s steps(6) forwards;
  pointer-events: none;
  z-index: 5;
}
@keyframes cal-float { to { transform: translateY(-56px); opacity: 0; } }

.cal-overlay {
  position: absolute; inset: 0; z-index: 10;
  background: rgba(10, 34, 56, .93);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 14px 30px;
  color: white;
}
.cal-overlay-emoji { font-size: 44px; filter: drop-shadow(3px 3px 0 rgba(0,0,0,.5)); }
.cal-overlay-title { font-family: "Chicago", Verdana, sans-serif; font-size: 18px; color: #FFCC00; }
.cal-overlay-text { font-size: 11px; line-height: 1.6; max-width: 420px; }

.cal-hud {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--chrome-sh);
}
.cal-panel { flex: 1; }
.cal-panel-name { font-family: "Chicago", Verdana, sans-serif; font-size: 12px; margin-bottom: 3px; }
.cal-hpbar {
  height: 12px;
  background: white;
  border: 1px solid var(--ink);
}
.cal-hpfill { height: 100%; background: #009999; transition: width .4s steps(8); }
.cal-hpfill.low { background: #FFCC00; }
.cal-hpfill.crit { background: #CC3333; }
.cal-hptext { font-size: 9px; color: var(--chrome-dk); margin-top: 2px; }

.cal-d20 {
  width: 56px; height: 56px; flex-shrink: 0;
  background: #4600A5;
  color: white;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  border: none;
  font-family: "Chicago", Verdana, sans-serif;
  font-size: 19px;
  text-shadow: 1px 1px 0 #000;
}
.cal-d20.rolling { animation: cal-spin .5s steps(8) infinite; }
@keyframes cal-spin { 50% { transform: rotate(180deg) scale(.9); } }
.cal-d20.nat20 { background: #FFCC00; color: #000; text-shadow: none; }
.cal-d20.nat1 { background: #CC3333; }

.cal-log {
  height: 74px; overflow-y: auto;
  background: white;
  border-top: 1px solid var(--chrome-hi);
  border-bottom: 1px solid var(--chrome-sh);
  padding: 5px 8px;
  font-size: 10px;
  line-height: 1.6;
}
.cal-log .good { color: #006666; }
.cal-log .bad { color: #CC3333; }
.cal-log .crit { color: #4600A5; font-weight: bold; }

.cal-controls {
  display: flex; gap: 8px; justify-content: center;
  padding: 8px;
}
.cal-controls .btn-default { min-width: 110px; }