html {
    background-image: url(img/fondito6.gif);
    background-repeat: repeat;
    background-size: auto cover;
    background-position: center;
    margin: 0;
    height: 100%;
}

    /*Fonts*/ 


@font-face {
font-family: 'adabelle';
src: url(https://dl.dropbox.com/s/kp4x66rhekt1fz5/AdabelleHandwriting-Regular.ttf);

}

@font-face {
font-family: 'lovely script';
src: url(https://dl.dropbox.com/s/ss5bqbogijw4zfj/Lovely%20Script.otf);
}

@font-face {
font-family: 'hearts';
src: url(https://dl.dropbox.com/s/1479f8x52y3z5u4/rainyhearts.ttf);

}


body {
    font-family: 'MS Gothic', sans-serif;
    font-size: 12px;
    font-weight: 400;
  margin: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header2 {
    
    font-family: 'hearts';
}

.page-wrapper {
  /* que ocupe todo el ancho del viewport para que porcentajes tengan referencia */
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;   /* centra horizontalmente los hijos */
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}


.update-bar {
    align-self: center;      /* centra la barrita respecto al wrapper */
  width: min(1000px, 85vw);/* ancho coherente con el contenedor (ajusta si quieres) */
  box-sizing: border-box;
  z-index: 10;
  background: linear-gradient(145deg, #f6c9c9, #e8a8a8);
  border: 2px solid #d07a7a;
  border-radius: 12px 12px 0 0;
  color: #4a2323;
  font-family: 'MS Gothic', sans-serif;
  font-size: 14px;
  text-align: center;
  padding: 6px 10px;
  cursor: pointer;
  box-shadow: inset 2px 2px #ffffff, inset -2px -2px #b16f6f;
  transition: all 0.2s ease;
}

.update-bar:hover {
  background: linear-gradient(145deg, #ffd6d6, #f3b2b2);
  transform: translateY(-1px);
}

mark {
    
    background-color: #E3EDC7;
}

.default-view {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  color: #4a2323;
  font-family: 'hearts';
  background: #ffffffb8;
  border-radius: 15px;
  box-shadow:
    inset 3px 3px 6px #E6ECDD,
    inset -3px -3px 6px #ffffff;
  animation: fadeIn 0.6s ease;
}

.welcome-gif {
  width: 550px;
  height: auto;
  margin-bottom: 15px;
        border-width:7px;
border-style:solid;
border-image: url("img/bordecito7.gif") 7 fill round;
}
.update-label {
  font-weight: bold;
  margin-right: 6px;
  text-shadow: 1px 1px #fff;
}

.update-title {
  font-style: italic;
  text-decoration: underline;
}


.journal-container {
    display:flex;
    flex-direction: row;
  position: relative;
  /* ancho fijo máximo con fallback responsive */
  width: min(1100px, 90vw); /* 1100px máximo, o 90% de la ventana si es más pequeño */
  max-width: 1100px;
  /* si prefieres 80% exacto, reemplaza por: width: min(1100px, 80%); */
  flex: 0 0 auto; /* IMPORTANT: no crecer ni encogerse por flex */
  height: 70vh;   /* tu altura original */
  background: #FCFDFB;
  border-radius: 20px;
  border: 3px solid #E9F6D2;
  box-shadow:
    inset 4px 4px 8px #E6ECDD,
    inset -4px -4px 8px #ffffff,
    0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  box-sizing: border-box;
  margin: 0; /* aseguramos que no haya margen extra que afecte */
  align-self: center; /* adicionalmente lo centramos dentro del column flex */
}


/* Imagen tipo pegatina */
.journal-container::after {
  content: "";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 150px; /* ajusta tamaño */
  height: 150px;
  background: url('img/toro.png') no-repeat center/contain;
  pointer-events: none; /* que no interfiera con clicks */
  z-index: 5;
}

/* --- Sidebar --- */
/* --- Sidebar estilo tabla --- */
.sidebar {
  width: 25%;
  background: #E9F6D2;
  display: flex;
  flex-direction: column;
  padding: 0; /* sin margen interno */
  border-right: 2px solid #E6ECDD;
  box-shadow: inset -3px 0 6px #E6ECDD;
}

.random-btn {
  width: 100%;
  padding: 10px;
  background: linear-gradient(145deg, #E6ECDD, #ffffff);
  border: none;
  border-bottom: 2px solid #C9D5C1;
  font-family: 'hearts';
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: #4a4a4a;
  box-shadow: inset 1px 1px 2px #fff, inset -1px -1px 2px #c4d2b9;
}

.random-btn:hover {
  background: linear-gradient(145deg, #ffffff, #E6ECDD);
}


/* Cada categoría actúa como un bloque de tabla */
.category {
  display: flex;
  flex-direction: column;
  border-bottom: 2px solid #E6ECDD; /* separador suave */
}

/* Botones principales (meses) */
.category-btn {
  padding: 10px;
  width: 100%;
  background: linear-gradient(145deg, #EDA2A2, #f4c1c1);
  border: none;
  border-bottom: 1px solid #E6ECDD;
  color: #fff;
  font-weight: bold;
  font-family: 'hearts';     
  text-align: left;
  cursor: pointer;
  font-size: 13px;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
  box-shadow: inset 1px 1px 2px #fff, inset -1px -1px 2px #d36c6c;
  transition: background 0.2s, transform 0.2s;
}

.category-btn:hover {
  background: linear-gradient(145deg, #f4b5b5, #eda2a2);
}


/* Subentradas (entradas individuales) */
.subentries {
  display: none;
  flex-direction: column;
}

.category.active .subentries {
  display: flex;
}

/* Botones internos tipo celda */
.subentries button {
  width: 100%;
  padding: 8px 12px;
  border: none;
  border-top: 1px solid #E6ECDD;
  background: #FCFDFB;
  color: #444;
  text-align: left;
    font-family: 'hearts';
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
}

.subentries button:hover {
  background: #E6ECDD;
}

/* Último elemento con redondeado inferior si es el final */
.category:last-child .subentries button:last-child {
  border-radius: 0 0 8px 0;
}


/* --- Main entry view --- */
.entry-view {
  width: 75%;
  padding: 25px;
  position: relative;
  overflow-y: auto;
}

.entry-content {
  display: none;
  background: #ffffffb8;
  border-radius: 15px;
  padding: 20px;
  box-shadow:
    inset 3px 3px 6px #E6ECDD,
    inset -3px -3px 6px #ffffff;
}

.entry-content.active {
  display: block;
  animation: fadeIn 0.4s ease;
}

.nav-buttons {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.nav-buttons button {
  background: #E9F6D2;
  border: 1px solid #cdddc1;
  border-radius: 8px;
    font-family: 'MS Gothic';
  padding: 5px 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.nav-buttons button:hover {
  background: #EDA2A2;
  color: #fff;
}


.back-index-btn {
  position: fixed;
  top: 20px;
  left: 20px;
  display: block;
  z-index: 999;
  cursor: pointer;
  transition: transform 0.2s;
}

.back-index-btn img {
  width: 90px;
}

.back-index-btn:hover {
  transform: scale(1.05);
}



/* --- Animations --- */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }