:root {
    --pink-deep: #e91e8c;
    --pink-mid: #ff6eb4;
    --pink-light: #ffd6ec;
    --pink-pale: #fff0f8;
    --red-bow: #e8003d;
    --white: #ffffff;
    --yellow: #ffe066;
    --mint: #b8f0d8;
    --lavender: #dcd0ff;
    --peach: #ffd4b8;
    --sky: #c8e8ff;
    --shadow: rgba(233,30,140,0.15);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  body {
    background: var(--pink-pale);
    font-family: 'Nunito', sans-serif;
    min-height: 100vh;
    padding: 30px 20px;
    background-image: 
      radial-gradient(circle at 10% 20%, #ffc8e8 0%, transparent 40%),
      radial-gradient(circle at 90% 80%, #ffd6f0 0%, transparent 40%),
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='10' cy='10' r='3' fill='%23ffb3d9' opacity='0.4'/%3E%3Ccircle cx='40' cy='40' r='2' fill='%23ff88c8' opacity='0.3'/%3E%3Ctext x='28' y='18' font-size='10' opacity='0.15'%3E❤%3C/text%3E%3Ctext x='5' y='50' font-size='8' opacity='0.15'%3E★%3C/text%3E%3C/svg%3E");
  }

  .page-wrapper {
    max-width: 960px;
    margin: 0 auto;
  }

  /* ── HEADER ── */
  .header {
    text-align: center;
    margin-bottom: 28px;
    position: relative;
  }

  .kitty-banner {
    background: white;
    border-radius: 30px;
    padding: 22px 30px 18px;
    box-shadow: 0 8px 32px var(--shadow), 0 2px 8px rgba(233,30,140,0.1);
    border: 3px solid var(--pink-mid);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
  }

  /* Hello Kitty face in CSS */
  .kitty-face {
    width: 70px;
    height: 65px;
    position: relative;
    flex-shrink: 0;
  }
  .kitty-face svg { width: 100%; height: 100%; }

  .header-text h1 {
    font-family: 'Baloo 2', cursive;
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--pink-deep);
    line-height: 1;
    text-shadow: 2px 2px 0 var(--pink-light), 3px 3px 0 rgba(233,30,140,0.2);
    letter-spacing: 1px;
  }

  .header-text p {
    font-size: 1rem;
    color: var(--pink-mid);
    font-weight: 700;
    margin-top: 4px;
    letter-spacing: 2px;
    text-transform: uppercase;
  }

  /* Stars decoration */
  .stars-row {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 1.3rem;
  }

  /* ── TABLE ── */
  .schedule-wrapper {
    background: white;
    border-radius: 24px;
    padding: 20px;
    box-shadow: 0 10px 40px var(--shadow);
    border: 3px solid var(--pink-light);
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 5px;
    min-width: 600px;
  }

  /* Day headers */
  thead th {
    font-family: 'Baloo 2', cursive;
    font-size: 1.1rem;
    font-weight: 800;
    padding: 12px 6px;
    border-radius: 14px;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    position: relative;
  }

  thead th.period-header {
    background: var(--pink-light);
    color: var(--pink-deep);
    width: 40px;
    font-size: 0.8rem;
  }

  thead th.lunes   { background: linear-gradient(135deg, #ffb3d9, #ff88c8); color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); }
  thead th.martes  { background: linear-gradient(135deg, #c8a8f8, #b090f0); color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); }
  thead th.miercoles { background: linear-gradient(135deg, #88d8f8, #60c8f0); color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); }
  thead th.jueves  { background: linear-gradient(135deg, #a8e8c8, #80d8a8); color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); }
  thead th.viernes { background: linear-gradient(135deg, #ffd080, #ffc040); color: white; text-shadow: 1px 1px 2px rgba(0,0,0,0.15); }

  /* Add a little bow emoji to each day header */
  thead th.lunes::before   { content: "🎀 "; }
  thead th.martes::before  { content: "⭐ "; }
  thead th.miercoles::before { content: "🌸 "; }
  thead th.jueves::before  { content: "🍀 "; }
  thead th.viernes::before { content: "✨ "; }

  /* Period number cells */
  td.period-num {
    text-align: center;
    font-family: 'Baloo 2', cursive;
    font-weight: 800;
    font-size: 0.85rem;
    color: var(--pink-deep);
    background: var(--pink-light);
    border-radius: 10px;
    padding: 4px;
    min-width: 32px;
  }

  /* Subject cells */
  td.subject {
    text-align: center;
    font-weight: 700;
    font-size: 0.82rem;
    padding: 10px 6px;
    border-radius: 12px;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    cursor: default;
    line-height: 1.3;
  }

  td.subject:hover {
    transform: scale(1.06);
    box-shadow: 0 4px 14px rgba(233,30,140,0.25);
    z-index: 2;
    position: relative;
  }

  td.subject.empty {
    background: #faf5fd;
    color: transparent;
  }

  /* Subject color coding */
  .s-lenguaje    { background: #ffd6ec; color: #c0006c; }
  .s-historia    { background: #ffd4b8; color: #b05000; }
  .s-ingles      { background: #c8e8ff; color: #005fa0; }
  .s-ciencias    { background: #b8f0d8; color: #007040; }
  .s-matematicas { background: #dcd0ff; color: #5000b0; }
  .s-musica      { background: #ffe8a0; color: #906000; }
  .s-edfisica    { background: #ffc8a0; color: #a04000; }
  .s-religion    { background: #f8c8e8; color: #900050; }
  .s-artes       { background: #e8d0ff; color: #6800b0; }
  .s-tecnologia  { background: #c0f0f8; color: #006880; }
  .s-cc          { background: #d8f0c0; color: #406000; }
  .s-orientacion { background: #ffe0f0; color: #a00060; }

  /* footer */
  .footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: var(--pink-mid);
    font-weight: 700;
    letter-spacing: 1px;
  }

  /* PRINT */
  @media print {
    body { background: white; padding: 10px; }
    .schedule-wrapper { box-shadow: none; border: 2px solid #eee; }
    td.subject:hover { transform: none; }
  }