@font-face {
  font-family: mssansserif;
  src: url("../../fonts/mssansserif.ttf");
}

/* --- VARIABLES GLOBALES (MODO CLARO) --- */
:root {
  /* Paleta principal */
  --theme-bg: #ffffff;
  --theme-light-bg: #ffffff;
  --theme-text-primary: #000000;
  --theme-text-secondary: #666666;
  --theme-border-color: #cccccc;
  --theme-border-dark: #999999;
  --theme-accent: #143bff;
  --theme-link-color: #143bff;
  --theme-link-hover: #ffffff;
  --theme-windowbar-gradient-start: navy;
  --scroll-thumb: var(--theme-accent);
  --scroll-track: var(--theme-bg);

  /* Variables para el efecto 3D de las ventanas */
  --win-highlight: #ffffff;
  --win-shadow: #dfdfdf;

  /* Compatibility Aliases for components using old variable names */
  --bg-highlight: var(--theme-accent);
  --bg-accent-soft: var(--theme-light-bg);
  --bg-card: var(--theme-light-bg);
  --color-border: var(--theme-border-color);
  --color-text: var(--theme-text-primary);
}

/* --- VARIABLES MODO OSCURO --- */
html.dark-mode {
  --theme-bg: #101010;
  --theme-light-bg: #101010;
  --theme-text-primary: #e0e0e0;
  --theme-text-secondary: #a0a0a0;
  --theme-border-color: #58664e;
  --theme-border-dark: #1a1a1a;
  --theme-accent: #b0c123;
  --theme-link-color: #b0c123;
  --theme-link-hover: #e0e0e0;
  --theme-windowbar-gradient-start: #0f9908;

  /* Efecto 3D ajustado para oscuro */
  --win-highlight: #606060;
  --win-shadow: #404040;

  --scroll-thumb: #b0c123;
  --scroll-track: #202020;
}


body.dark-mode img {
  opacity: 0.9;
}

* {

  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
  scrollbar-width: thin;
}

/* --- WINDOWS --- */

.right-column {
  display: flex;
  flex-direction: column;
  gap: 15px;
  flex: 1;
  min-width: 250px;
}

.window-container {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 15px;
}


.title-bar,
.window,
button,
input,
label,
legend,
li[role=tab],
option,
select,
table,
textarea,
ul.tree-view {
  -webkit-font-smoothing: none;
  font-size: 11px;
}


.window {
  background: var(--theme-border-color);

  box-shadow: inset -1px -1px var(--theme-border-dark),
    inset 1px 1px var(--win-shadow),
    inset -1px -1px var(--theme-border-color),
    inset 2px 2px var(--win-highlight);
  padding: 2px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}


.window-body {
  margin: 2px;
  padding: 10px;
  background-color: var(--theme-light-bg);
  color: var(--theme-text-primary);
  flex-grow: 1;
  /* Para que llenen la altura en el grid */
}

.title-bar {
  align-items: center;
  background: linear-gradient(90deg, var(--theme-windowbar-gradient-start), var(--theme-accent));
  display: flex;
  justify-content: space-between;
  padding: 3px 2px 3px 8px;
}

.title-bar.inactive {
  background: linear-gradient(90deg, grey, #b5b5b5);

}

.title-bar-text {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
  margin-right: 24px;
}

.title-bar-text-inactive {
  color: #fff;
  font-weight: 700;
  letter-spacing: 0;
  margin-right: 24px;
  padding-left: 8px;
}

.title-bar-controls {
  display: flex;
}

.title-bar-controls button {
  display: block;
  min-height: 14px;
  min-width: 16px;
  padding: 0;
}

.title-bar-controls button:active {
  padding: 0;
}

.title-bar-controls button:focus {
  outline: none;
}

.smallimage {
  width: 180px;
  height: 180px;
}

/* --- GLOBAL --- */

html {
  font-family: 'mssansserif', monospace;
  font-size: 14px;
  background-color: var(--theme-bg);
  color: var(--theme-text-primary);
  letter-spacing: 0px;
  line-height: 1.5;
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--theme-bg);
  color: var(--theme-text-primary);
}

main {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2rem;
}

/* Navigation */
nav {
  border-bottom: 0px solid var(--theme-border-color);
  background: var(--theme-light-bg);
  width: fit-content;
  margin: 0 auto;
}

nav ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: row;
  gap: 0;
}

nav li {
  margin: 0;
  border-right: 1px solid var(--theme-border-color);
}

nav li:last-child {
  border-right: none;
}

nav a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: var(--theme-link-color);
  font-weight: 700;
  border-bottom: 2px solid transparent;
  transition: all 0.1s;
  font-size: 0.9rem;
  letter-spacing: 0.5px;
}

nav a:hover {
  background: linear-gradient(90deg, var(--theme-windowbar-gradient-start), var(--theme-link-color));
  color: var(--theme-link-hover);
  border-bottom-color: var(--theme-link-color);
  text-decoration: underline;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--theme-text-primary);
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
  padding: 0;
}

h1 {
  font-size: 1.8rem;
  margin-bottom: 0.75rem;
  border-bottom: 1px solid var(--theme-border-color);
  padding-bottom: 0.5rem;
}

h2 {
  font-size: 1.2rem;
  margin: 0.75rem 0 0.5rem 0;
  border-bottom: 1px solid var(--theme-border-color);
  padding-bottom: 0.25rem;
}

h3 {
  font-size: 1rem;
  margin: 0.5rem 0 0.25rem 0;
  font-weight: 700;
}

p {
  margin: 0.5rem 0;
  line-height: 1.5;
  letter-spacing: 1px;
}

time {
  display: block;
  padding-left: 0.5rem;
  color: var(--theme-text-secondary);
  font-size: 0.95rem;
}

time:hover {
  color: var(--theme-link-color);
}

a {
  color: var(--theme-link-color);
  text-decoration: underline;
  transition: all 0.2s ease;
}

a:hover {
  color: var(--theme-accent);
  text-decoration: none;
}

/* Content sections */
article,
section {
  border: 1px solid var(--theme-border-color);

  padding: 1.5rem;
  margin-bottom: 1rem;
}

/* Container grid for layout */
.layout-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 1000px) {
  .layout-container {
    grid-template-columns: 250px 1fr 250px;
  }
}

/* Portfolio grid - theme-style grid gallery */
.portfolio-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1rem 0;
}

.portfolio-thumbnail {
  border: 1px solid var(--theme-border-color);
  background: var(--theme-light-bg);
  overflow: hidden;
  box-shadow: none;
  transition: all 0.1s;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.portfolio-thumbnail:hover {
  border: 3px solid var(--theme-accent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.portfolio-thumbnail-image {
  width: 100%;
  height: 420px;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  color: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  border-bottom: 1px solid var(--theme-border-color);
  flex-shrink: 0;
}

.portfolio-thumbnail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portfolio-thumbnail-title {
  padding: 1rem 1rem 0.5rem 1rem;
  background: none;
  border: none;
  color: var(--theme-text-primary);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
}

.portfolio-thumbnail-description {
  padding: 0 1rem 0.75rem 1rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--theme-text-secondary);
  flex-grow: 1;
}

.portfolio-thumbnail-tags {
  padding: 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-bottom: 0.75rem;
}

.portfolio-thumbnail-tag {
  display: inline-block;
  padding: 2px 6px;
  background: transparent;
  color: var(--theme-link-color);
  font-size: 0.75rem;
  border: 1px solid var(--theme-border-color);
  font-weight: 400;
  text-decoration: none;
  transition: all 0.1s;
}

.portfolio-thumbnail-tag:hover {
  background: linear-gradient(90deg, rgb(16, 16, 193), var(--theme-link-color));
  color: var(--theme-link-hover);
  border-color: var(--theme-link-color);
  text-decoration: none;
}

.portfolio-thumbnail-link {
  display: none;
  padding: 0.75rem 1rem;
  margin: 0;
  background: transparent;
  color: var(--theme-link-color);
  text-decoration: underline;
  text-align: center;
  font-weight: 700;
  border-top: 1px solid var(--theme-border-color);
  transition: all 0.1s;
  font-size: 0.9rem;
  width: 100%;
  box-sizing: border-box;
}

.portfolio-thumbnail-link:hover {
  background: var(--theme-link-color);
  color: var(--theme-link-hover);
}

.portfolio-thumbnail-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.portfolio-thumbnail-meta {
  padding: 0 1rem;
  color: var(--theme-text-secondary);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
}

/* Buttons */
button,
.btn {
  padding: 0.4rem 0.8rem;
  background: var(--theme-border-color);
  border: 1px solid var(--theme-text-secondary);
  color: var(--theme-text-primary);
  font-family: 'Courier Prime', monospace;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.1s;
  font-size: 0.85rem;
}

button:hover,
.btn:hover {
  background-color: #f0f0f0;
  border-color: var(--theme-border-dark);
}

button:active,
.btn:active {
  transform: translate(1px, 1px);
}

/* Code blocks */
code {
  background: #f5f5f5;
  padding: 2px 4px;
  border: 1px solid var(--theme-border-color);
  font-family: 'mssansserif', monospace;
  color: var(--theme-text-primary);
  font-size: 0.9rem;
}

pre {
  background: #f5f5f5;
  padding: 0.75rem;
  border: 1px solid var(--theme-border-color);
  overflow-x: auto;
  line-height: 1.4;
}

pre code {
  background: none;
  padding: 0;
  border: none;
}

/* Lists */
ul,
ol {
  margin: 0.5rem 0;
  margin-left: 1.5rem;
  line-height: 1.6;
  list-style-type: "‣☽‎ ";
}

li {
  margin-bottom: 0.25rem;
}

/* Blockquotes */
blockquote {
  border-left: 4px solid var(--theme-accent);
  padding-left: 0.75rem;
  margin-left: 0;
  color: var(--theme-accent);
  font-style: italic;
}

/* Pagination */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1.5rem 0;
  gap: 1rem;
  border: 1px solid var(--theme-border-color);
  padding: 0.75rem;
  background: var(--theme-light-bg);
}

.pagination a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  background: var(--theme-light-bg);
  border: 1px solid var(--theme-border-color);
  color: var(--theme-link-color);
  text-decoration: none;
  font-weight: 700;
  transition: all 0.1s;
  font-size: 0.85rem;
}

.pagination a:hover {
  background: #f0f0f0;
}

/* Tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 1rem 0 0.75rem 0;
  padding-left: 0.5rem;
}

.tag {
  display: inline-block;
  padding: 3px 8px;
  background: transparent;
  color: var(--theme-link-color);
  border: 1px solid var(--theme-border-color);
  font-size: 0.8rem;
  font-weight: 400;
  text-decoration: none;
  transition: all 0.1s;
  cursor: pointer;
}

.tag:hover {
  background: linear-gradient(90deg, rgb(16, 16, 193), var(--theme-link-color));
  color: var(--theme-link-hover);
  border-color: var(--theme-link-color);
  text-decoration: none;
}

/* Horizontal rule */
hr {
  border: none;
  height: 1px;
  background: var(--theme-border-color);
  margin: 1rem 0;
}

/* Images */
img {
  max-width: 100%;
  height: auto;
  border: 0px solid var(--theme-border-color);
  display: block;
  margin: 0.75rem 0;
}

/* Article content padding */
article {
  padding: 1rem;
}

article>* {
  margin-left: 0;
  margin-right: 0;
}

section {
  padding: 1rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
  .right-column {
    width: 100%;
    min-width: 0;
    order: -1;
  }

  .flex-container {
    flex-direction: column;
  }

  .window {
    width: 100%;
    min-width: 0;
  }

  .window-container {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
  }

  body {
    padding: 0;
  }

  main {
    padding: 1rem;
  }

  html {
    font-size: 12px;
  }

  h1 {
    font-size: 1.4rem;
  }

  h2 {
    font-size: 1rem;
  }

  nav ol {
    flex-direction: row;
  }

  nav li {
    border-right: 1px solid var(--theme-border-color);
    border-bottom: 0px solid var(--theme-border-color);
  }

  nav li:last-child {
    border-bottom: none;
  }

  .portfolio-thumbnail-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
  }

  .portfolio-thumbnail-image {
    height: 150px;
  }

  .portfolio-thumbnail-title {
    font-size: 1rem;
    padding: 0.75rem 0.75rem 0.35rem 0.75rem;
  }

  .portfolio-thumbnail-description {
    padding: 0 0.75rem 0.5rem 0.75rem;
    font-size: 0.8rem;
  }

  .portfolio-thumbnail-link {
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    /* .area-skills is used in dashboard, but here defined generally? */
  }
}

/* --- HOME BENTO DASHBOARD --- */

.hero-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 3rem;
  padding: 0rem;
}

.home-hero {
  /* This is now just the text box on the left */
  /* Reverting to box appearance */
  padding: 4rem 1rem 6rem 1rem;
  background-image: url('../../images/');
  background-position: center;
  background-size: cover;
  border: none;
  flex: 1;
  min-width: 300px;
}


.hero-profile {
  width: 100%;
  /* Default to full width for stacking/mobile */
  flex: 0 0 100%;
  max-width: 100%;
}


.dashboard-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  padding-bottom: 2rem;
}

/* En pantallas grandes (Tablets/PC) */
/* En pantallas grandes (Tablets/PC) */

@media (min-width: 1000px) {

  /* Remove old home-hero padding override if no longer needed, or adjust */
  .home-hero {
    padding: 8rem 1rem 10rem 1rem;
    /* Big box feel */
  }

  /* Desktop Layout for Hero Profile */
  .hero-profile {
    flex: 0 0 250px;
    /* Fixed width on desktop */
    max-width: 300px;
  }


  /* Since Home Page moved sidebar to hero, we need to handle layouts differently */
  /* If this grid is used by OTHER pages (like About) that still have sidebar, we need to be careful */
  /* But for Index page, the sidebar area is now empty/removed HTML-side */

  .dashboard-grid {
    /* Default behaviour: if 2 items (Main + Sidebar), use 1fr 280px */
    /* But if sidebar is gone in HTML, this might still reserve space? No, grid auto-placement usually handles it but explicit template might force it. */
    /* Let's make it flexible. */
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto auto;
  }

  /* OVERRIDE FOR HOME PAGE SPECIFICALLY if possible, but we don't have a specific body class mentioned. */
  /* However, since we removed the sidebar HTML from index.md, we can just ensure .area-hero takes full width if it's the only child. */
  /* Actually, let's change .dashboard-grid to just 1fr 280px generally for About page support */
  /* And add a rule that if area-sidebar doesn't exist, it fills? */

  /* Let's keep it 1fr 280px for the About page.
     For Index page, we removed .area-sidebar div entirely.
     If we keep grid-template-columns: 1fr 280px;, the first column will take available space minus 280px.
     Wait, if there is only one child, it will go into the first column (1fr). The 2nd column (280px) remains empty.
     The first column will stretch? No, `1fr` in `1fr 280px` means "1 fraction of available space".
     It will leave a 280px gap on the right. 
     
     We need to check if we can differentiate.
     Maybe we can assume .index-page logic or just modify the grid to be responsive to content?
     No, CSS grid doesn't auto-detect "missing HTML element" to change template unless we use :has() or similar modern CSS.
     
     Easier fix: Make .dashboard-grid just `display: block` or `grid-template-columns: 1fr` by default?
     But About page needs the sidebar.
     
     Let's CHANGE .dashboard-grid to `grid-template-columns: 1fr auto;` or just rely on the fact that About page works.
     To fix Index page occupying full width, we can add an inline style or a specific class in index.md?
     Or better:
     Let's simple remove the explicit grid definition here and rely on page specific structure?
     
     Actually, looking at `modern.css` previously...
     The user layout has `area-hero` (col 1) and `area-sidebar` (col 2).
     On Index, I removed `area-sidebar`.
     So `area-hero` is now the only child.
     It will sit in col 1.
     Col 2 will be empty.
     
     We want `area-hero` to Span 2 columns if sidebar is missing?
     We can't do that with pure CSS without a class.
     
     Let's check `layout.html`? I can't.
     
     I will add `style="grid-column: 1 / -1;"` to the `area-hero` div in `index.md`.
     This forces recent works to take full width regardless of the grid template.
  */

  .dashboard-grid {
    grid-template-columns: 1fr 280px;
    grid-template-rows: auto auto;
  }

  .area-hero {
    grid-column: 1;
    grid-row: 1;
  }

  .area-sidebar {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .area-skills {
    grid-column: 1;
    grid-row: 2;
  }
}

/* Estilo para la "Status Bar" o Info rápida dentro de ventanas */
.status-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  border-bottom: 1px dotted var(--theme-border-color);
  padding-bottom: 4px;
}

.status-item:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.status-label {
  font-weight: bold;
  font-size: 0.75rem;
  color: var(--theme-text-secondary);
  text-transform: uppercase;
}

/* Mejoras en los chips de skills */
.skills-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.skills-cloud li {
  background: var(--theme-light-bg);
  border: 1px solid var(--theme-border-color);
  padding: 6px 12px;
  font-size: 0.85rem;
  /* Un toque moderno sutil */
  cursor: default;
  transition: all 0.2s;
  box-shadow: 2px 2px 0px var(--theme-border-color);
  margin-bottom: 0 !important;
}

.skills-cloud li:hover {
  background: var(--theme-accent);
  color: #fff;
  border-color: var(--theme-accent);
  transform: translate(-1px, -1px);
  box-shadow: 3px 3px 0px var(--theme-border-dark);
}

/* =========================================
   CUSTOM LAYOUT OVERRIDES (Maintaining Recent Fixes)
   ========================================= */

/* Fix for All Posts Grid */
.portfolio-thumbnail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
  gap: 1.5rem;
  margin: 2rem 0;
  padding: 1rem 0;
}

/* Fix for Index Posts (Strict 3 Columns for equal dimensions) */
.portfolio-masonry-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  width: 100%;
  margin: 2rem 0;
}

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

/* --- SIMPLE PROJECT CARDS (About Page) --- */
/* --- SIMPLE PROJECT CARDS (About Page) --- */
.project-simple-card {
  border: 1px solid var(--theme-border-color);
  background: var(--theme-bg);
  padding: 1rem;
  margin-bottom: 1.5rem;
  box-shadow: 3px 3px 0 var(--theme-border-color);
  position: relative;

  /* Grid Layout Setup */
  display: grid;
  gap: 0 1.5rem;
  grid-template-columns: 1fr;
  /* Mobile default */
}

/* Grid layout for Desktop */
@media (min-width: 650px) {
  .project-simple-card {
    grid-template-columns: 200px 1fr;
    /* Fixed width sidebar for meta, rest for content */
  }

  .project-simple-card h2 {
    grid-column: 1 / -1;
    margin-bottom: 1rem !important;
    /* Reset margin override */
  }

  /* Client Name (Second Header) */
  .project-simple-card h3 {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
  }

  /* Date (First Paragraph usually contains the date in italics) */
  .project-simple-card p:nth-of-type(1) {
    grid-column: 1;
    grid-row: 3;
    margin-top: 0;
  }

  /* Role & Description (Second Paragraph) */
  .project-simple-card p:nth-of-type(2) {
    grid-column: 2;
    grid-row: 2 / span 3;
    /* Span down next to meta info */
    margin-top: 0;
  }
}

.project-simple-card::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  bottom: 3px;
  right: 3px;
  border: 1px dotted var(--theme-border-color);
  pointer-events: none;
  z-index: 0;
}

.project-simple-card>* {
  position: relative;
  z-index: 1;
}

.project-simple-card h2 {
  margin-top: 0 !important;
  font-size: 1.1rem;
  border-bottom: 1px solid var(--theme-border-color);
  padding-bottom: 0.5rem;
  background: var(--theme-light-bg);
  /* The negative margins pull the header to edge */
  margin: -1rem -1rem 1rem -1rem !important;
  padding: 0.75rem 1rem;
}

.project-simple-card h3 {
  font-size: 0.85rem;
  text-transform: uppercase;
  color: var(--theme-text-secondary);
  margin-bottom: 0.25rem;
  font-weight: bold;
}

.project-simple-card p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.project-simple-card em {
  font-size: 0.8rem;
  display: block;
  margin-bottom: 0.5rem;
  color: var(--theme-text-primary);
  opacity: 0.7;
  font-style: normal;
  font-family: 'Courier Prime', monospace;
  border-left: 2px solid var(--theme-accent);
  padding-left: 8px;
}