/* Travel Notes - Merged stylesheet (v2 Premium + v3 additions) */
@import url('https://fonts.googleapis.com/css2?family=Patrick+Hand&family=Lora:wght@400;500;600&family=Montserrat:wght@400;500;600;700&display=swap');

:root{
 --bg:#ebe8e2;
 --paper:#FCF7E8;
 --paper2:#faf3e1;
 --title:#A52A4D;
 --text:#383838;
 --muted:#666;
 --shadow:0 12px 30px rgba(0,0,0,.12);
 --radius:18px;
 --tape:#e7ddb8;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(#efede8,#e8e5df);font-family:Montserrat,sans-serif;color:var(--text)}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:2rem;padding:2rem;max-width:1500px;margin:auto}
.note{
 position:relative;
 border-radius:var(--radius);
 padding:1.4rem;
 background:
 radial-gradient(circle at 15% 12%,rgba(255,255,255,.55),transparent 35%),
 radial-gradient(circle at 90% 90%,rgba(0,0,0,.02),transparent 30%),
 repeating-linear-gradient(0deg,transparent 0 26px,rgba(0,0,0,.012) 26px 27px),
 linear-gradient(var(--paper),var(--paper2));
 box-shadow:var(--shadow);
 overflow:visible;
 transition:.28s ease;
}
.note:after{
content:"";
position:absolute;right:0;bottom:0;width:44px;height:44px;
background:linear-gradient(135deg,transparent 50%,rgba(0,0,0,.06) 51%,rgba(255,255,255,.45) 100%);
border-radius:0 0 var(--radius) 0;
opacity:.35;
}
.note:hover{transform:translateY(-8px) rotate(0)!important;box-shadow:0 20px 42px rgba(0,0,0,.18)}
.note-title{margin:0;text-align:center;font:400 clamp(2rem,4vw,2.6rem) "Patrick Hand";color:var(--title)}
.note-title:after{content:"";display:block;width:68%;height:3px;background:var(--title);opacity:.35;margin:.2rem auto;border-radius:2px}
.note-author{text-align:center;color:var(--muted);font-weight:600;font-size:.9rem;margin:.6rem 0 1rem}

.photo img{
  display: inline-block;
  width: 94%;
  max-width: 94%;
  height: 200px;
  object-fit: cover;
  object-position: center center;
  vertical-align: middle;
  border-radius: 10px;
  border: 1px solid rgba(80, 60, 20, 0.22);
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.22),
    0 10px 18px rgba(0, 0, 0, 0.18);
}
.photo:before{
content:"";position:absolute;left:var(--tx,20px);top:var(--ty,-12px);
width:82px;height:22px;border-radius:2px;
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 2px,transparent 2px 4px),
linear-gradient(rgba(255,255,255,.25),rgba(255,255,255,.02)),
var(--tape);
opacity:.88;transform:rotate(var(--tr,-12deg));
box-shadow:0 1px 4px rgba(0,0,0,.18)}
.note-text{font:400 1.08rem/1.8 Lora,serif;text-align:center;margin:1.2rem 0}
.note button{position:absolute;right:14px;bottom:14px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid #d6b7bf;background:#fff;border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.15);transition:.2s ease;z-index:40}
.note button:hover{background:#faf6f7;transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.2)}

/* ---- Paper tones (v3) ---- */
.note:nth-child(5n+1){--paper:#FCF7E8;--paper2:#F9F0DC;}
.note:nth-child(5n+2){--paper:#FBF5E5;--paper2:#F7EED9;}
.note:nth-child(5n+3){--paper:#FDF8EA;--paper2:#F8F1DE;}
.note:nth-child(5n+4){--paper:#FCF6E3;--paper2:#F6EBD3;}
.note:nth-child(5n){--paper:#FFF8E8;--paper2:#F8F0DD;}

/* Odd notes keep a warm ruled paper look */
.note:nth-child(odd){background:
radial-gradient(circle at 15% 12%,rgba(255,255,255,.55),transparent 35%),
repeating-linear-gradient(0deg,transparent 0 26px,rgba(0,0,0,.012) 26px 27px),
linear-gradient(var(--paper),var(--paper2))}

/* Card rotations */
.note:nth-child(5n+1){transform:rotate(-.8deg)}
.note:nth-child(5n+2){transform:rotate(.6deg)}
.note:nth-child(5n+3){transform:rotate(-.2deg)}
.note:nth-child(5n+4){transform:rotate(.9deg)}
.note:nth-child(5n){transform:rotate(.2deg)}

/* Tape positioning */
.note:nth-child(6n+1){--tx:18px;--ty:-12px;--tr:-18deg}
.note:nth-child(6n+2){--tx:72%;--ty:-10px;--tr:18deg}
.note:nth-child(6n+3){--tx:40%;--ty:-14px;--tr:-4deg}
.note:nth-child(6n+4){--tx:-28px;--ty:42%;--tr:90deg}
.note:nth-child(6n+5){--tx:calc(100% - 12px);--ty:42%;--tr:90deg}
.note:nth-child(6n){--tx:70%;--ty:calc(100% - 20px);--tr:30deg}

/* Photo image rotations */
.note:nth-child(6n+1) img{transform:rotate(-1.5deg)}
.note:nth-child(6n+2) img{transform:rotate(1.3deg)}
.note:nth-child(6n+3) img{transform:rotate(.6deg)}
.note:nth-child(6n+4) img{transform:rotate(-.9deg)}
.note:nth-child(6n+5) img{transform:rotate(1.5deg)}
.note:nth-child(6n) img{transform:rotate(-.3deg)}

/* Decoration reset (v3) */
.note::before,.note::after,.photo::before,.photo::after{pointer-events:none}


.editbutton{
	position:absolute;right:14px;bottom:14px;width:40px;height:40px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid #d6b7bf;background:#fff;border-radius:50%;font-size:1.1rem;line-height:1;cursor:pointer;box-shadow:0 3px 8px rgba(0,0,0,.15);transition:.2s ease;z-index:40
	
}
.editbutton:hover{
	background:#faf6f7;transform:translateY(-2px);box-shadow:0 6px 14px rgba(0,0,0,.2)
}

/* Pin variation (v3) */
.note:nth-child(8n+4)::before{
content:"";
position:absolute;
top:10px;left:50%;
width:14px;height:14px;
margin-left:-7px;
border-radius:50%;
background:#b02a49;
box-shadow:0 2px 3px rgba(0,0,0,.25), inset -2px -2px 3px rgba(0,0,0,.2), inset 2px 2px 2px rgba(255,255,255,.3);
z-index:30;
}

/* Double tape (v3) */
.note:nth-child(8n+3) .photo::after{
content:"";
position:absolute;
right:18px;
bottom:-10px;
width:78px;
height:20px;
transform:rotate(-18deg);
background:
repeating-linear-gradient(90deg,rgba(255,255,255,.12) 0 2px,transparent 2px 4px),
#e7ddb8;
opacity:.9;
}

/* Folded corner (v3) */
.note:nth-child(8n+5)::after{
content:"";
position:absolute;
right:0;bottom:0;
width:54px;height:54px;
background:linear-gradient(135deg,transparent 49%,#ddd1b7 50%,#fffdf5 100%);
border-bottom-right-radius:18px;
opacity:.8;
}

/* Photo offsets (v3) */
.note:nth-child(7n+1) .photo{transform:translateX(-4px)}
.note:nth-child(7n+2) .photo{transform:translateX(4px)}
.note:nth-child(7n+3) .photo{transform:translateY(-3px)}
.note:nth-child(7n+4) .photo{transform:translateY(3px)}
.note:nth-child(7n+5) .photo{transform:translate(-2px,2px)}

/* Varied shadows (v3) */
.note:nth-child(3n+1){box-shadow:0 10px 24px rgba(0,0,0,.12)}
.note:nth-child(3n+2){box-shadow:0 14px 30px rgba(0,0,0,.14)}
.note:nth-child(3n){box-shadow:0 8px 18px rgba(0,0,0,.10)}

@media(max-width:900px){.notes-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));padding:1.2rem;gap:1.2rem}.note-text{font-size:1rem}}
@media(max-width:600px){
.notes-grid{grid-template-columns:1fr;padding:1rem}
.note{padding:1rem}
.note-title{font-size:2rem}
.note:hover{transform:none!important}
.photo:before{width:68px;height:18px}
.note::before,.photo::after{display:none}



  .notas-navbar {
    min-height: 54px;
    padding: 0.35rem 0.5rem;
  }

  .notas-navbar .container-fluid {
    gap: 0.5rem;
  }

  .notas-brand {
    font-size: 1.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .notas-actions {
    gap: 0.15rem;
  }

  .notas-actions span {
    display: none;
  }

  .notas-actions .nav-link {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
  }

  .notas-actions i {
    font-size: 1.15rem;
  }

  .search-panel__title {
    font-size: 2.2rem;
  }

  .search-form__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-search,
  .btn-clear {
    width: 100%;
  }


}




/* =======================
   Navbar
   ======================= */

.notas-navbar {
  background: #111;
  border-bottom: 1px solid #2b2b2b;
  min-height: 60px;
  padding: 0.45rem 0.9rem;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.notas-navbar .container-fluid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.notas-brand {
  text-decoration: none;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.notas-brand:hover {
  opacity: 0.85;
}

.brand-a,
.brand-rest {
  color: #fff;
}

.brand-c,
.brand-dot {
  color: #dc3545;
}

.notas-actions {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-shrink: 0;
}

.notas-actions .nav-link {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: #d5d5d5;
  text-decoration: none;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.notas-actions .nav-link:hover {
  background: rgba(255, 255, 255, 0.08);
  color: white;
}

.notas-actions .nav-link.active {
  background: #dc3545;
  color: white;
}

.notas-actions i {
  font-size: 1rem;
}

.notas-actions span {
  font-size: 0.92rem;
}

.content-link {
  color: #bb1655 !important;
  text-decoration: none !important;
}