@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Patrick+Hand&display=swap');

/* General setup */
body {
  font-family: 'Patrick Hand', 'Caveat', cursive;
  background-color: #FDFBF7;
  background-image:
    radial-gradient(circle at 25px 25px, #e8e4d9 1px, transparent 1px),
    linear-gradient(#f0ece0 1px, transparent 1px);
  background-size: 50px 50px, 100% 24px;
  color: #2D3436;
  min-height: 100vh;
  padding-bottom: 50px;
}

/* Hand-drawn backgrounds */
.garabato-sol,
.garabato-estrella {
  position: fixed;
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}
.garabato-sol { top: 20px; right: 20px; }
.garabato-estrella { bottom: 20px; left: 20px; }

/* Custom School Typography */
.school-title-main {
  font-family: 'Caveat', cursive;
  font-weight: 700;
}
.school-title {
  font-family: 'Caveat', cursive;
  font-size: 2.6rem;
  color: #FF6B6B;
  text-shadow: 2px 2px 0 #FFE66D;
  margin-bottom: 15px !important;
}
.school-subtitle-main {
  font-family: 'Patrick Hand', cursive;
}
.school-subtitle {
  font-family: 'Patrick Hand', cursive;
  color: #4ECDC4;
}
.school-label {
  font-family: 'Caveat', cursive;
  font-size: 1.4rem !important;
  color: #2D3436 !important;
  text-align: left;
}

/* Custom School Box */
.school-box {
  background: #FFFEF9 !important;
  border: 3px dashed #4ECDC4 !important;
  border-radius: 16px !important;
  box-shadow:
    6px 6px 0px #FFE66D,
    8px 8px 12px rgba(0,0,0,0.08) !important;
  padding: 30px !important;
  transition: transform 0.2s ease;
}

/* Custom School Inputs */
.school-input {
  border: 3px dashed #4ECDC4 !important;
  border-radius: 12px !important;
  background-color: #FFFEF9 !important;
  font-family: 'Patrick Hand', cursive !important;
  font-size: 1.15rem !important;
  color: #2D3436 !important;
  box-shadow: none !important;
  transition: border-color 0.2s, border-style 0.2s;
}
.school-input:focus {
  border-color: #FF6B6B !important;
  border-style: solid !important;
  background-color: #FFF !important;
}

/* Bulma Hero School Override */
.school-hero {
  background: linear-gradient(135deg, #4ECDC4, #66dfd6) !important;
  border: 4px dashed #FF6B6B !important;
  box-shadow: 6px 6px 0px #FFE66D;
}

/* Sticker Buttons */
.school-btn,
.school-btn-main {
  font-family: 'Caveat', cursive !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  height: auto !important;
  padding: 12px 30px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow:
    0 4px 0 #cc4444,
    0 6px 10px rgba(0,0,0,0.15) !important;
  transition: all 0.1s ease !important;
}
.school-btn {
  background: linear-gradient(135deg, #FF6B6B, #ff8e8e) !important;
  color: white !important;
}
.school-btn-main {
  background: linear-gradient(135deg, #FF6B6B, #ff8e8e) !important;
  color: white !important;
}
.school-btn-main-secundario {
  background: linear-gradient(135deg, #4ECDC4, #7eddd6) !important;
  color: white !important;
  font-family: 'Caveat', cursive !important;
  font-size: 1.4rem !important;
  font-weight: bold !important;
  height: auto !important;
  padding: 12px 30px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow:
    0 4px 0 #2fa89f,
    0 6px 10px rgba(0,0,0,0.15) !important;
  transition: all 0.1s ease !important;
}
.school-btn-secundario {
  background: linear-gradient(135deg, #e0e0e0, #f5f5f5) !important;
  color: #555 !important;
  font-family: 'Caveat', cursive !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
  height: auto !important;
  padding: 8px 25px !important;
  border-radius: 50px !important;
  border: 1px solid #ccc !important;
  box-shadow: 0 3px 0 #bbb !important;
  transition: all 0.1s ease !important;
}

.school-btn:hover,
.school-btn-main:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #cc4444,
    0 8px 15px rgba(0,0,0,0.2) !important;
}
.school-btn-main-secundario:hover {
  transform: translateY(-2px);
  box-shadow:
    0 6px 0 #2fa89f,
    0 8px 15px rgba(0,0,0,0.2) !important;
}
.school-btn-secundario:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #bbb !important;
}

.school-btn:active,
.school-btn-main:active {
  transform: translateY(4px);
  box-shadow:
    0 0px 0 #cc4444,
    0 2px 5px rgba(0,0,0,0.15) !important;
}
.school-btn-main-secundario:active {
  transform: translateY(4px);
  box-shadow:
    0 0px 0 #2fa89f,
    0 2px 5px rgba(0,0,0,0.15) !important;
}
.school-btn-secundario:active {
  transform: translateY(3px);
  box-shadow: 0 0px 0 #bbb !important;
}

/* Card custom layout */
.school-card {
  background: #FFFEF9 !important;
  border: 3px dashed #FF6B6B !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow:
    5px 5px 0 #4ECDC4,
    8px 8px 15px rgba(0,0,0,0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.school-card:hover {
  transform: translateY(-4px);
  box-shadow:
    5px 5px 0 #4ECDC4,
    10px 12px 20px rgba(0,0,0,0.1) !important;
}
.school-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: repeating-linear-gradient(
    90deg,
    #FFE66D 0px, #FFE66D 15px,
    #FF6B6B 15px, #FF6B6B 30px,
    #4ECDC4 30px, #4ECDC4 45px
  );
  z-index: 5;
}

.school-card-image {
  border-bottom: 3px dashed #FF6B6B;
}

.school-card-content {
  padding: 20px !important;
}

.school-card-title {
  font-family: 'Caveat', cursive !important;
  font-size: 1.6rem !important;
  color: #FF6B6B !important;
  margin-bottom: 10px !important;
}

.school-tag {
  font-family: 'Patrick Hand', cursive !important;
  border-radius: 8px !important;
  font-weight: bold !important;
}

/* Stamp Effect */
.school-stamp {
  position: absolute;
  top: 15px;
  right: 15px;
  background-color: #4ECDC4;
  color: white;
  font-family: 'Caveat', cursive;
  font-size: 1.2rem;
  font-weight: bold;
  padding: 6px 18px;
  border-radius: 20px;
  transform: rotate(-10deg);
  box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
  border: 2px solid white;
  z-index: 4;
}

.school-file-input {
  margin-bottom: 10px;
}
.school-file-input .file-cta:hover {
  transform: scale(1.02);
}