/* ============================================
   diary.exe — hoja de estilos
   Estética: Y2K / old-web, rosa + azul cielo

   Paleta (por si quieres cambiar colores a mano,
   busca y reemplaza el hex en todo el archivo):
   rosa fondo:      #fcf7df
   rosa lunares:     #a79a8a
   caja fondo:       #fff8fb
   caja fondo suave: #fff0f6
   borde rosa:       #ff9dc4
   borde azul:       #9ed7f0
   tinta (texto):    #6b4a5a
   tinta suave:      #9b7a8a
   corazón/acento:   #ff5f96
   cielo/azul:       #5fb8e0
   sol/amarillo:     #ffd23f
   ============================================ */
  @font-face {
  font-family: 'JosephSophia';
  src: url('fonts/josephsophia.ttf') format('truetype');
}
@font-face {
  font-family: 'Dunkin';
  src: url('fonts/Dunkin.otf') format('opentype');
}
@font-face {
  font-family: 'BirdsOfParadise';
  src: url('fonts//Birds of Paradise.ttf') format('truetype');
}
@font-face {
  font-family: 'Minecraft';
  src: url('fonts/Minecraft.ttf') format('truetype');
}
@font-face {
  font-family: 'Tempting';
  src: url('fonts/Tempting.ttf') format('truetype');
}
@font-face {
  font-family: 'C&L';
  src: url('fonts/Champagne & Limousines Bold.ttf') format('truetype');
}
html, body, div, aside, main, article, table, td, th, ul, li,
h1, h2, p, a, span, table {
  box-sizing: border-box;
}

body{
  margin: 0;
  font-family: 'C&L', sans-serif;
  color:#3a1129;
  background-color: #9567662;
  background-image:
    radial-gradient(#d9cdbf 2.5px, transparent 2.5px),
    radial-gradient(#d9cdbf 2.5px, transparent 2.5px);
  background-size: 26px 26px;
  background-position: 0 0, 13px 13px;
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- utility ---------- */
a{ color: #d9cdbf; text-decoration: none; }
a:hover{ color: #8c7d6e; text-decoration: underline wavy; }
::selection{ background: #ffd23f; color: #6b4a5a; }

.heart::before{ content:"♡ "; color: #ff5f96; }

/* ---------- page frame ---------- */
.page-frame{
  max-width: 1000px;
  margin: 22px auto;
  padding: 14px;
  background: repeating-linear-gradient(45deg, #ffd4e6, #ffd4e6 8px, #ffe3ee 8px, #ffe3ee 16px);
  border-radius: 22px;
  box-shadow: 0 6px 24px rgba(255, 95, 150, 0.18);
}

.page-inner{
  background: #fff8fb;
  border-radius: 16px;
  border: 3px dashed #f6e0b6;
  padding: 18px;
}

/* ---------- banner / header ---------- */
.banner{
  display: flex;
  align-items: center;
  gap: 18px;
  background: linear-gradient(120deg, #ffd6e8 0%, #cdeaf9 100%);
  border: 3px solid #ff9dc4;
  border-radius: 18px;
  padding: 16px 22px;
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}

.banner::after{
  content: "☆ ˚ ✦ ˚ ☆ ˚ ✦";
  position: absolute;
  right: 14px;
  top: 6px;
  font-size: 13px;
  color: #ffffffaa;
  letter-spacing: 4px;
}

.banner-avatar{
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: #fff8fb;
  border: 3px solid #fff;
  display: flex;
  align-items: center ;
  font-size: 30px;
  flex-shrink: 0;
  box-shadow: 0 3px 10px rgba(255, 95, 150, 0.18);
}

.banner h1{
  font-family: 'BirdsOfParadise', cursive;
  font-size: 2.5rem;
  margin: 0;
  color: #ff5f96;
  line-height: 1;
}

.banner p{
  margin: 6px 0 0;
  font-family: 'C&L', cursive;
  font-size: 1.25rem;
  color: #6b4a5a;
}

/* ---------- layout: 3 columns ---------- */
.layout{
  display: grid;
  grid-template-columns: 190px 1fr 220px;
  gap: 16px;
  align-items: flex-start;
}

@media (max-width: 820px){
  .layout{ grid-template-columns: 1fr; }
}

/* ---------- widget box (shared) ---------- */
.box{
  background: #fff0f6;
  border: 2px solid #ff9dc4;
  border-radius: 14px;
  margin-bottom: 14px;
  overflow: hidden;
}

.box-title{
  font-family: 'Minecraft', cursive;
  font-size: 1rem;
  background: #ff9dc4;
  color: #fff;
  padding: 6px 12px;
  letter-spacing: 0.5px;
}

.box-title.blue{ background: #5fb8e0; }

.box-body{ padding: 10px 12px; font-size: 0.9rem; }

/* ---------- nav ---------- */
.nav-list{ list-style: none; margin: 0; padding: 0; }
.nav-list li{ margin: 6px 0; }
.nav-list a{ color: #6b4a5a; font-weight: 600; }
.nav-list a:hover{ color: #ff5f96; }
.nav-sub{ font-size: 0.78rem; color: #9b7a8a; margin: 10px 0 4px; text-transform: uppercase; letter-spacing: 1px; }

/* ---------- diary entries ---------- */
.entry{
  background: #fff;
  border: 2px dashed #9ed7f0;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  position: relative;
}

.entry-date{
  display: inline-block;
  background: #ffd23f;
  color: #6b4a00;
  font-weight: 700;
  font-size: 0.78rem;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}

.entry h2{
  font-family: 'Tempting', cursive;
  color: #ff5f96;
  font-size: 1.4rem;
  margin: 0 0 6px;
}

.entry .mood{
  font-size: 0.85rem;
  color: #9b7a8a;
  margin-bottom: 8px;
}

.entry p{ margin: 0 0 10px; }

.entry-footer{
  font-size: 0.8rem;
  color: #9b7a8a;
  border-top: 1px dashed #9ed7f0;
  padding-top: 6px;
}

/* ---------- divider ---------- */
.divider{
  text-align: center;
  color: #ff9dc4;
  letter-spacing: 10px;
  margin: 16px 0;
}

/* ---------- calendar mini ---------- */
.mini-cal{
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  text-align: center;
}
.mini-cal th{ color: #5fb8e0; padding: 2px; }
.mini-cal td{ padding: 3px; color: #6b4a5a; }
.mini-cal .today{ background: #ff5f96; color: #fff; border-radius: 50%; font-weight: 700; }

/* ---------- blinkie strip ---------- */
.blinkie-strip{ display:flex; flex-direction:column; gap:6px; }
.blinkie{
  background: linear-gradient(90deg, #ffd6e8, #cdeaf9);
  border: 1px solid #ff9dc4;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 0.68rem;
  text-align: center;
  font-weight: 700;
  color: #6b4a5a;
}

/* ---------- guestbook ---------- */
.chat-msg{ border-bottom: 1px dashed #9ed7f0; padding: 6px 0; font-size: 0.82rem; }
.chat-msg b{ color: #ff5f96; }
.chat-msg .when{ color: #9b7a8a; font-size: 0.7rem; }

/* ---------- footer banner ---------- */
.foot-banner{
  text-align: center;
  font-family: 'Chewy', cursive;
  color: #ff5f96;
  background: linear-gradient(120deg, #cdeaf9, #ffd6e8);
  border: 3px solid #ff9dc4;
  border-radius: 14px;
  padding: 10px;
  margin-top: 16px;
  font-size: 1.1rem;
}