/* =========================================================
   PORTFOLIO :: MS-DOS TERMINAL THEME
   Gray-on-black, monospace, box-drawing borders.
   Edit the CSS variables below to retune the palette.
   ========================================================= */

:root {
  --dos-bg: #000000;
  --dos-text: #bfbfbf;
  --dos-text-bright: #f2f2f2;
  --dos-text-dim: #707070;
  --dos-border: #565656;
  --dos-highlight-bg: #bfbfbf;
  --dos-highlight-text: #000000;
  --font-dos: 'VT323', 'Perfect DOS VGA437', 'Consolas', 'Courier New', monospace;

  /* Color accents */
  --accent-magenta: #ff00ff;
  --accent-yellow: #ffff00;
  --accent-green: #00ff00;
  --accent-blue: #0066ff;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: #000000 !important;
  color: #f2f2f2 !important;
  font-family: 'VT323', 'Courier New', monospace !important;
  font-size: 20px !important;
  line-height: 1.6 !important;
}

a {
  color: var(--dos-text-bright);
}

/* Faint CRT scanline overlay */
.crt-overlay {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.025) 0px,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
}

.screen {
  position: relative;
  z-index: 10;
  max-width: 900px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  background: #000000;
}

/* ---------- Navigation ---------- */
.dos-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  border-bottom: 1px solid var(--dos-border);
  padding-bottom: 12px;
  margin-bottom: 28px;
}

.dos-nav a {
  text-decoration: none;
  padding: 2px 8px;
}

.dos-nav a::before {
  content: "[";
  color: var(--dos-text-dim);
}

.dos-nav a::after {
  content: "]";
  color: var(--dos-text-dim);
}

.dos-nav a:hover,
.dos-nav a.active {
  background: var(--dos-highlight-bg);
  color: var(--dos-highlight-text);
}

.dos-nav a:hover::before,
.dos-nav a:hover::after,
.dos-nav a.active::before,
.dos-nav a.active::after {
  color: var(--dos-highlight-text);
}

/* ---------- ASCII art / static banners ---------- */
.ascii-art {
  color: var(--dos-text-dim);
  font-size: 14px;
  line-height: 1.15;
  white-space: pre;
  overflow-x: auto;
  margin: 0 0 10px;
}

/* ---------- Headings / hero ---------- */
h1, h2, h3 {
  color: var(--dos-text-bright);
  margin: 0 0 10px;
  position: relative;
  z-index: 2;
}

h1 {
  font-size: 2.4em;
  letter-spacing: 2px;
}

h2 {
  font-size: 1.5em;
  border-bottom: 1px dashed var(--dos-border);
  padding-bottom: 6px;
  margin-top: 34px;
}

.tagline {
  color: var(--dos-text-dim);
  margin-top: 0;
}

.prompt {
  color: var(--dos-text-dim);
}

.prompt .path {
  color: var(--dos-text-bright);
}

/* ---------- Typewriter ---------- */
.tw-line {
  display: block !important;
  white-space: normal !important;
  min-height: 1.6em !important;
  margin-bottom: 0.35em !important;
  color: #f2f2f2 !important;
  opacity: 1 !important;
  position: relative !important;
  z-index: 20 !important;
  background: transparent !important;
  visibility: visible !important;
}

.tw-line.cursor::after {
  content: "\2588";
  animation: blink 1s steps(1) infinite;
  margin-left: 2px;
}

@keyframes blink {
  50% { opacity: 0; }
}

/* ---------- Boxed panels ---------- */
.box {
  border: 1px solid var(--dos-border);
  padding: 18px;
  margin-bottom: 24px;
}

.box-title {
  color: var(--accent-green) !important;
  margin: -18px -18px 14px;
  padding: 4px 12px;
  border-bottom: 1px solid var(--dos-border);
}

/* ---------- Directory / menu list ---------- */
.menu-list {
  list-style: none;
  padding-left: 0;
  margin: 6px 0 18px;
}

.menu-list li {
  padding: 3px 0;
}
.menu-list ul li::before {
  content: none;
}

.menu-list > li::before {
  content: "\00BB ";
  color: var(--accent-yellow) !important;
}

.menu-list a {
  text-decoration: underline;
}

.menu-list .hint {
  color: var(--dos-text-dim);
}

/* ---------- Images ---------- */
.tw-reveal {
  opacity: 1;
  transition: none;
}

.tw-reveal.visible {
  opacity: 1;
}

.img-frame {
  display: block;
  border: 1px dashed var(--dos-border);
  padding: 8px;
  max-width: 500px;
  margin: 12px 0 18px;
}

.img-frame img {
  display: block;
  max-width: 100%;
  height: auto;
  filter: contrast(1.05) brightness(0.95);
}

.img-frame figcaption {
  color: var(--dos-text-dim);
  font-size: 0.85em;
  margin-top: 4px;
  text-align: center;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.gallery-thumb {
  padding: 0;
  border: 1px solid var(--dos-border);
  background: transparent;
  cursor: pointer;
  overflow: hidden;
}

.gallery-thumb img {
  display: block;
  width: 100%;
  height: 110px;
  object-fit: cover;
}

.gallery-link {
  color: var(--dos-text-bright);
  text-decoration: underline;
  cursor: pointer;
}

.image-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  gap: 16px;
}

.image-modal[hidden] {
  display: none !important;
}

.image-modal img,
.image-modal video {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border: 1px solid var(--dos-border);
}

.image-modal-caption {
  color: var(--dos-text-bright);
  font-family: var(--font-dos);
  font-size: 1.3rem;
  text-align: center;
  max-width: 80%;
  line-height: 1.4;
  word-wrap: break-word;
  background: rgba(0, 0, 0, 0.6);
  padding: 4px 12px;
  border: 1px dashed var(--dos-border);
}

.image-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: transparent;
  border: 1px solid var(--dos-border);
  color: var(--dos-text-bright);
  font-size: 1.4rem;
  cursor: pointer;
  width: 40px;
  height: 40px;
}

.image-modal-prev,
.image-modal-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: 1px solid var(--dos-border);
  color: var(--dos-text-bright);
  font-size: 1.8rem;
  font-family: var(--font-dos);
  cursor: pointer;
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 110;
  user-select: none;
}

.image-modal-prev {
  left: 24px;
}

.image-modal-next {
  right: 24px;
}

.image-modal-prev:hover,
.image-modal-next:hover,
.image-modal-close:hover {
  background: var(--dos-highlight-bg);
  color: var(--dos-highlight-text);
}

/* ---------- Project cards ---------- */
.project-grid {
  display: grid;
  gap: 24px;
}

/* ---------- Phase blocks ---------- */
.phase-block {
  border-left: 2px solid var(--dos-border);
  padding: 6px 12px;
  margin: 10px 0;
}

.phase-title {
  display: block;
  color: var(--accent-yellow) !important;
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 3px;
}

.phase-link {
  display: inline-block;
  color: var(--dos-text-dim);
  text-decoration: underline;
  font-size: 0.9em;
  margin-top: 4px;
}

.phase-link:hover {
  color: var(--dos-text-bright);
}

.project-card {
  border: 1px solid var(--dos-border);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.project-card .img-frame {
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.cover-gallery-trigger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 100%;
  display: block;
}

.cover-gallery-trigger img {
  display: block;
  width: 100%;
  transition: transform 0.2s ease;
}

.cover-gallery-trigger:hover img {
  transform: scale(1.02);
}

.project-card > div {
  width: 100%;
}

.project-card .tags {
  color: var(--dos-text-dim);
  margin-top: 24px;
}

@media (max-width: 640px) {
  .project-card {
    flex-direction: column;
  }
  .project-card .img-frame {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }
}

/* ---------- Skill bars ---------- */
.skill-bar {
  white-space: pre;
}

/* ---------- Contact ---------- */
.contact-list {
  list-style: none;
  padding-left: 0;
}

.contact-list li {
  padding: 4px 0;
}

.contact-list .label {
  color: var(--dos-text-dim);
  display: inline-block;
  width: 10ch;
}

/* ---------- Footer status bar ---------- */
.status-bar {
  border-top: 1px solid var(--dos-border);
  margin-top: 44px;
  padding-top: 12px;
  color: var(--dos-text-dim);
  font-size: 0.85em;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

/* ---------- Skip hint ---------- */
.skip-hint {
  color: var(--dos-text-dim);
  font-size: 0.8em;
  position: fixed;
  bottom: 10px;
  right: 16px;
  z-index: 60;
  opacity: 0.7;
}

@media (max-width: 640px) {
  body { font-size: 17px; }
  .ascii-art { font-size: 10px; }
  h1 { font-size: 1.8em; }
}

/* ---------- Technical Sheet (Ficha Técnica) ---------- */
.tech-sheet {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}

@media (max-width: 700px) {
  .tech-sheet {
    grid-template-columns: 1fr;
  }
}

.tech-sheet-block {
  border: 1px solid var(--dos-border);
  padding: 14px 16px;
}

.tech-sheet-header {
  color: var(--dos-text-bright);
  letter-spacing: 3px;
  font-size: 1em;
  padding-bottom: 8px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--dos-border);
}

.tech-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px dotted rgba(86, 86, 86, 0.35);
  word-break: break-word;
}

.tech-row:last-child {
  border-bottom: none;
}

.tech-label {
  color: var(--dos-text-dim);
  font-size: 0.85em;
  padding-top: 2px;
}

.tech-value {
  color: var(--dos-text-bright);
}

/* ---------- Bibliography ---------- */
.bib-list {
  list-style: none;
  padding-left: 0;
  margin-top: 10px;
}

.bib-list li {
  padding: 5px 0 5px 16px;
  border-bottom: 1px dotted rgba(86, 86, 86, 0.35);
  font-size: 0.9em;
  color: var(--dos-text-dim);
  position: relative;
}

.bib-list li::before {
  content: "»";
  position: absolute;
  left: 0;
  color: var(--dos-text-dim);
}

.bib-list li:last-child {
  border-bottom: none;
}

.bib-list li em {
  color: var(--dos-text-bright);
  font-style: italic;
}

/* ---------- Fichas individuales de obra (Grids y Tarjetas) ---------- */
.fichas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.ficha-card {
  border: 1px solid var(--dos-border);
  padding: 12px 14px;
}

.ficha-title {
  color: var(--dos-text-bright);
  font-size: 1.05em;
  letter-spacing: 1px;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px dashed var(--dos-border);
}

.ficha-desc {
  color: var(--dos-text-dim);
  font-size: 0.85em;
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px dotted rgba(86, 86, 86, 0.3);
  font-style: italic;
}

/* Shared metadata bar for photo series */
.ficha-shared {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
  margin-bottom: 4px;
  padding: 8px 12px;
  border: 1px dotted var(--dos-border);
  color: var(--dos-text-dim);
  font-size: 0.8em;
}

/* ---------- Fase 1: Cada fotografia con su ficha tecnica ---------- */
.foto-ficha-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.foto-ficha-card {
  border: 1px solid var(--dos-border);
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  padding: 12px;
}

.foto-ficha-img {
  background: none;
  border: 1px solid var(--dos-border);
  padding: 0;
  cursor: pointer;
  width: 100%;
  aspect-ratio: 1;
  display: block;
  overflow: hidden;
  margin-bottom: 12px;
}

.foto-ficha-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.2s ease;
}

.foto-ficha-img:hover img {
  transform: scale(1.03);
}

.foto-ficha-meta {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* ---------- Fase 4: Obras layouts con detalles ---------- */
.obra-layout {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 16px;
  margin-bottom: 36px;
  max-width: 900px;
}

.obra-imagen {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.obra-img-main {
  background: none;
  border: 1px solid var(--dos-border);
  padding: 0;
  cursor: pointer;
  width: 100%;
  max-width: 500px;
  display: block;
  overflow: hidden;
}

.obra-img-main img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.2s ease;
}

.obra-img-main:hover img {
  transform: scale(1.02);
}

.obra-img-details {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px dashed var(--dos-border);
}

.obra-details-label {
  font-size: 0.85em;
  color: var(--dos-text-dim);
  letter-spacing: 1px;
}

.gallery-thumb-small {
  background: none;
  border: 1px solid var(--dos-border);
  padding: 0;
  cursor: pointer;
  width: 48px;
  height: 48px;
  display: block;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.gallery-thumb-small img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-thumb-small:hover {
  border-color: var(--dos-text-bright);
}

.gallery-thumb-small:hover img {
  transform: scale(1.05);
}

.obra-ficha {
  display: flex;
  flex-direction: column;
}

/* ---------- Reflection Blocks ---------- */
.reflection-block {
  border-left: 3px double var(--dos-border);
  padding-left: 16px;
  margin-top: 18px;
  margin-bottom: 18px;
  color: var(--dos-text-dim);
  font-family: 'VT323', monospace;
  font-size: 1.05em;
  background: rgba(86, 86, 86, 0.05);
  padding-top: 10px;
  padding-bottom: 10px;
  padding-right: 10px;
}

.reflection-header {
  color: var(--dos-text-bright);
  font-weight: bold;
  letter-spacing: 1px;
  margin-bottom: 6px;
  text-transform: uppercase;
}

/* =========================================================
   COLOR ACCENTS SYSTEM
   ========================================================= */

/* Ensure the main title link remains bright white under all states */
h1 a, h1.tw-line a,
h1 a:visited, h1.tw-line a:visited,
h1 a.clicked, h1.tw-line a.clicked {
  color: var(--dos-text-bright) !important;
}
h1 a:hover, h1.tw-line a:hover {
  color: var(--dos-text-bright) !important;
  text-decoration: underline;
}

/* Hyperlinks outside navigation, works list, and title */
a:not(h1 a):not(h1 *):not(.dos-nav a):not(.menu-list a):not(.dos-nav *):not(.menu-list *) {
  color: var(--accent-yellow);
}
a:not(h1 a):not(h1 *):not(.dos-nav a):not(.menu-list a):not(.dos-nav *):not(.menu-list *).clicked {
  color: var(--accent-green) !important;
}
a:not(h1 a):not(h1 *):not(.dos-nav a):not(.menu-list a):not(.dos-nav *):not(.menu-list *):hover {
  color: var(--dos-text-bright) !important;
  text-decoration: underline;
}
/* Ensure the works list (.menu-list) is white by default, project links turn blue when clicked */
.menu-list,
.menu-list .hint {
  color: var(--dos-text-bright) !important;
}
.menu-list a {
  color: var(--dos-text-bright) !important;
}
.menu-list ul li a.clicked {
  color: var(--accent-blue) !important;
}
.menu-list a:hover {
  color: var(--dos-text-bright) !important;
  text-decoration: underline;
}

/* Specific yellow override for the gallery link in works list (always yellow) */
.menu-list > li a,
.menu-list > li a:visited,
.menu-list > li a.clicked {
  color: var(--accent-yellow) !important;
}
.menu-list > li a:hover {
  color: var(--dos-text-bright) !important;
  text-decoration: underline;
}

/* Tagline styled in green */
.tagline, .tagline.tw-line {
  color: var(--accent-green) !important;
}

/* Italics (outside navigation and main works menu, excluding tagline) */
body :not(.dos-nav):not(.menu-list) em,
body :not(.dos-nav):not(.menu-list) i,
body :not(.dos-nav):not(.menu-list) [style*="font-style: italic"]:not(.tagline) {
  color: var(--accent-magenta) !important;
}

/* Bracket accents */
.accent-bracket {
  color: var(--accent-green) !important;
}

/* Quote accents */
.accent-quote {
  color: var(--accent-magenta) !important;
}

/* Right angle quote accents */
.accent-right-quote {
  color: var(--accent-magenta) !important;
}

/* Ensure quotes and brackets inside technical values (.tech-value) remain white */
.tech-value .accent-quote,
.tech-value .accent-bracket {
  color: var(--dos-text-bright) !important;
}

/* Phase headings in nonrestraint.html styled in green */
#fase-oscuridad > h2,
#fase-camino > h2,
#fase-penumbra > h2,
#fase-luz > h2 {
  color: var(--accent-green) !important;
}

/* Custom color override utility classes (with high specificity to beat global em/i rules) */
body :not(.dos-nav):not(.menu-list) em.accent-yellow-text,
body :not(.dos-nav):not(.menu-list) i.accent-yellow-text,
body :not(.dos-nav):not(.menu-list) .accent-yellow-text,
body :not(.dos-nav):not(.menu-list) .accent-yellow-text * {
  color: var(--accent-yellow) !important;
}

body :not(.dos-nav):not(.menu-list) em.accent-green-text,
body :not(.dos-nav):not(.menu-list) i.accent-green-text,
body :not(.dos-nav):not(.menu-list) .accent-green-text,
body :not(.dos-nav):not(.menu-list) .accent-green-text * {
  color: var(--accent-green) !important;
}

/* Contact page links styled in yellow */
.contact-list a,
.contact-list a.clicked {
  color: var(--accent-yellow) !important;
}