/* --- Your Upgraded Responsive Styles --- */

/* Color Palette (preserved from your original) */
/*
bg #0b0b0c
panel #111214
texto #EEEDEA
muted #9C9387
acento–ámbar #FFB300
borde #2A2620
peligro #E14D2A
*/

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  background: #0b0b0c;
  color: #EEEDEA;
  font-family: sans-serif;
  line-height: 1.5;
}

/* ✅ NO CHANGES NEEDED HERE - Your NAV is perfect */
nav {
  white-space: pre;
  width: 100%;
  background:#0b0b0c;
  color:#EEEDEA;
  padding: 8px 12px;
  border-bottom: 2px solid #2A2620;
  overflow-x: auto;
  font-family: monospace;
  font-size: clamp(8px, 2vw, 14px);
  box-sizing: border-box;
}

/* * ✅ UPGRADE 1: Using CSS Grid for a stronger layout.
 * This replaces your flexbox rules for .content-wrapper.
 * It creates two columns: the first takes up all available space (1fr),
 * and the second is fixed at 240px. This forces the sidebar to stay on the right.
*/
.content-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px; /* Main content | Sidebar */
  padding: 15px;
  gap: 25px;
}

/* * ✅ FIX 1: Controlling text line length for readability.
 * We set a `max-width` using the `ch` unit (character width).
 * This limits the text to about 65 characters per line, which is ideal.
 * We also remove `white-space: pre` which was forcing long lines.
*/
.main {
  /* No special rules needed here anymore, the grid handles it. */
}
.full-post,
.post-preview {
    max-width: 65ch; /* Limits line length for easy reading */
}

.rightbar {
  /* No flex rules needed, the grid handles positioning. */
  background: #111214;
  border: 2px solid #FFB300;
  padding: 15px;
  color: #EEEDEA;
  font-family: monospace;
  font-size: 14px;
  box-sizing: border-box;
}

a {
  color: #FFB300;
}

/* * ✅ UPGRADE 2: Responsive Fallback for Phones.
 * On screens smaller than 768px (most phones), we switch the grid
 * to a single column. This stacks the sidebar neatly under the main content,
 * which is necessary for small screens to be usable. On anything larger
 * (tablets, desktops), it will remain as two columns.
*/
@media (max-width: 768px) {
  .content-wrapper {
    grid-template-columns: 1fr; /* Switch to a single column */
  }
}

/* --- Styles for Blog Post and Comments (from before) --- */
.full-post h1 {
  color: #FFB300;
  margin-top: 0;
}
.post-meta {
  color: #9C9387;
  font-size: 0.9em;
  font-style: italic;
  border-bottom: 1px solid #2A2620;
  padding-bottom: 10px;
  margin-bottom: 20px;
}
.full-post div {
    white-space: pre-wrap;
}
hr {
  border: none;
  border-top: 1px solid #2A2620;
  margin: 30px 0;
}
.comments-section h2 {
  color: #EEEDEA;
  border-bottom: 1px solid #2A2620;
  padding-bottom: 5px;
}
.comments-section form {
    margin: 20px 0;
    background: #111214;
    padding: 20px;
    border: 1px solid #2A2620;
    border-radius: 5px;
}
.comments-section label {
    display: block;
    margin-bottom: 5px;
    color: #9C9387;
}
.comments-section input,
.comments-section textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #2A2620;
    background: #0b0b0c;
    color: #EEEDEA;
    font-size: 1em;
}
.comments-section button {
    background: #FFB300;
    color: #0b0b0c;
    font-weight: bold;
    border: none;
    padding: 10px 15px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 1em;
}
.comments-section button:hover {
    filter: brightness(1.2);
}
.comment {
    border: 1px solid #2A2620;
    padding: 15px;
    border-radius: 5px;
    margin-top: 20px;
    background: #111214;
}
.comment strong {
    color: #FFB300;
}
.comment p {
    margin: 5px 0;
    white-space: pre-wrap;
}
.comment small {
    color: #9C9387;
    font-size: 0.8em;
}
.delete-button {
    background-color: #E14D2A;
    color: #EEEDEA;
    border: 1px solid #2A2620;
    padding: 5px 10px;
    font-size: 0.8em;
    cursor: pointer;
    border-radius: 4px;
    float: right;
    margin-bottom: 10px;
}
.delete-button:hover {
    filter: brightness(1.2);
}