/* =============================
  Terminal CSS — hermesrm.com
  ES: Estilos base de la terminal simulada.
  EN: Base styles for the simulated terminal.
  ============================= */

/* Reset mínimo / Minimal reset */
* {
  box-sizing: border-box;
}

/* Layout raíz / Root layout */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
}

/* Base visual / Visual base */
body {
  background-color: #0d1117;
  color: #c9d1d9;
  font-family:
    "Cascadia Code", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-size: clamp(14px, 2.5vw, 16px);
  line-height: 1.45;
}

/* Contenedor principal / Main container */
#terminal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  height: 100dvh;
  padding: 16px;
  padding-left: 10px;
  overflow-y: auto;
  overflow-x: hidden;
  scroll-behavior: smooth;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: calc(env(safe-area-inset-bottom) + var(--kb-offset, 0px));
  padding-left: max(10px, env(safe-area-inset-left));
  overscroll-behavior: contain;
  overscroll-behavior-y: contain;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Área de salida / Output area */
#output {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 1100px;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

/* Línea de input / Input line */
.input-line {
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

/* Prompt / Prompt */
.prompt {
  color: #03c04a;
  margin-bottom: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-weight: normal;
}

.prompt-hint {
  color: #0078d4;
}

.prompt-path {
  color: #ffd700;
}

.prompt-line {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  width: 100%;
}

.prompt-symbol {
  color: #ffffff;
  flex-shrink: 0;
}

.command-wrapper {
  flex: 1;
  display: inline-block;
  min-width: 0;
  position: relative;
  font-size: inherit;
  line-height: 1.45;
}

.command-input,
.hidden-input,
.cursor {
  font-size: 16px;
}

.command-input {
  outline: none;
  color: inherit;
  font: inherit;
  white-space: pre;
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: left;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  user-select: text;
}

.cursor {
  color: #ffffff;
  animation: blink 1s step-end infinite;
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
  pointer-events: none;
  position: relative;
  z-index: 2;
}

@media (prefers-reduced-motion: reduce) {
  #terminal {
    scroll-behavior: auto;
  }

  .cursor {
    animation: none;
  }
}

/* Input invisible para capturar teclado móvil / Hidden input for mobile keyboard */
.hidden-input {
  position: absolute;
  inset: 0;
  opacity: 0.01;
  pointer-events: auto;
  width: 100%;
  height: 100%;
  font: inherit;
  line-height: inherit;
  border: none;
  padding: 0;
  margin: 0;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  -webkit-text-fill-color: transparent;
  font-size: 16px; /* Previene zoom en iOS */
  direction: ltr;
  unicode-bidi: plaintext;
  text-align: left;
  z-index: 1;
}

@keyframes blink {
  0%,
  50% {
    opacity: 1;
  }
  50.1%,
  100% {
    opacity: 0;
  }
}

/* Ayuda / Help layout */
.help-line {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.help-cmd {
  flex: 0 0 12ch;
  color: #c9d1d9;
  word-break: keep-all;
}

.help-desc {
  flex: 1;
  min-width: 0;
  color: #c9d1d9;
  padding-left: 4px;
}

/* Comentarios / Comments */
.comment {
  color: #8b949e;
}

/* Errores / Errors */
.error {
  color: #f85149;
}

/* Selección de texto / Text selection */
::selection {
  background: #005f87;
}

/* Sugerencias / Suggestions */
.suggestions {
  margin-top: 4px;
  color: #8b949e;
  display: none;
}
.suggestion-item {
  padding: 2px 4px;
  cursor: pointer;
}