/* =============================================
   Horarios Johns Hopkins Master College 2026
   Subir junto a: horarios_jhmc_2026.html y logo.png
============================================= */

/* ── TOKENS ── */
  :root {
    --navy:   #1C2B4B;
    --navy2:  #162240;
    --gold:   #C9991A;
    --gold2:  #E8B832;
    --gold-light: #F5E5A0;
    --white:  #FFFFFF;
    --gray1:  #F4F5F7;
    --gray2:  #E8EAED;
    --gray3:  #B0B7C3;
    --text:   #1a2035;
    --break-bg: #EDF0F5;
    --break-txt: #6B7A9A;
    --radius: 10px;
    --shadow: 0 4px 24px rgba(28,43,75,.12);
    --shadow-lg: 0 12px 48px rgba(28,43,75,.18);
  }

  /* ── RESET ── */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { font-size: 16px; scroll-behavior: smooth; }
  body {
    font-family: 'Instagram Sans', 'Helvetica Neue', Arial, sans-serif;
    background: #EEF0F6;
    color: var(--text);
    min-height: 100vh;
  }

  /* ── TOP STRIPE ── */
  .top-stripe {
    height: 5px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--gold) 60%, var(--gold2) 100%);
  }

  /* ── HEADER ── */
  header {
    background: var(--navy2);
    padding: 28px 40px 22px;
    display: flex;
    align-items: center;
    gap: 28px;
    box-shadow: 0 2px 16px rgba(0,0,0,.28);
    position: relative;
    overflow: hidden;
  }
  header::after {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 80% 50%, rgba(201,153,26,.08) 0%, transparent 65%);
    pointer-events: none;
  }
  .logo-wrap img {
    height: 72px;
    width: auto;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.3));
  }
  .header-text { flex: 1; }
  .header-text h1 {
    font-family: 'Instagram Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--white);
    letter-spacing: .5px;
    line-height: 1.1;
  }
  .header-text h1 span { color: var(--gold2); }
  .header-text p {
    font-size: .82rem;
    color: var(--gray3);
    margin-top: 4px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
  }
  .header-badge {
    background: linear-gradient(135deg, var(--gold) 0%, var(--gold2) 100%);
    color: var(--navy2);
    font-family: 'Instagram Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    padding: 8px 22px;
    border-radius: 8px;
    letter-spacing: 1px;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(201,153,26,.35);
  }

  /* ── CONTROLS ── */
  .controls-bar {
    background: var(--white);
    padding: 20px 40px;
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--gray2);
    box-shadow: 0 2px 8px rgba(0,0,0,.05);
  }
  .controls-bar label {
    font-size: .85rem;
    font-weight: 600;
    color: var(--navy);
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: nowrap;
  }
  .select-wrap {
    position: relative;
    flex: 1;
    max-width: 420px;
    min-width: 240px;
  }
  .select-wrap::after {
    content: '▾';
    position: absolute;
    right: 14px; top: 50%;
    transform: translateY(-50%);
    color: var(--gold);
    font-size: 1.1rem;
    pointer-events: none;
  }
  select {
    width: 100%;
    padding: 11px 40px 11px 16px;
    border: 2px solid var(--gray2);
    border-radius: var(--radius);
    font-family: 'Instagram Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: .95rem;
    font-weight: 500;
    color: var(--navy);
    background: var(--gray1);
    appearance: none;
    cursor: pointer;
    transition: border-color .2s;
    outline: none;
  }
  select:focus { border-color: var(--gold); }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border: none;
    border-radius: var(--radius);
    font-family: 'Instagram Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    letter-spacing: .3px;
  }
  .btn-print {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
    color: var(--white);
    box-shadow: 0 3px 12px rgba(28,43,75,.25);
  }
  .btn-print:hover { transform: translateY(-1px); box-shadow: 0 5px 18px rgba(28,43,75,.35); }
  .btn-print svg { flex-shrink: 0; }

  /* ── MAIN CONTENT ── */
  main {
    padding: 30px 40px;
    max-width: 1200px;
    margin: 0 auto;
  }

  /* ── SCHEDULE CARD ── */
  .schedule-card {
    background: var(--white);
    border-radius: 14px;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    animation: fadeUp .35s ease both;
  }
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .card-header {
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy2) 100%);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .card-header .accent-line {
    width: 4px; height: 36px;
    background: linear-gradient(180deg, var(--gold) 0%, var(--gold2) 100%);
    border-radius: 4px;
    flex-shrink: 0;
  }
  .card-header h2 {
    font-family: 'Instagram Sans', 'Helvetica Neue', Arial, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--white);
  }
  .card-header .section-pill {
    margin-left: auto;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--gold2);
    font-size: .78rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    letter-spacing: 1px;
    text-transform: uppercase;
  }

  /* ── TABLE ── */
  .table-wrap { overflow-x: auto; }
  table {
    width: 100%;
    border-collapse: collapse;
    font-size: .875rem;
  }
  thead th {
    background: var(--navy);
    color: var(--white);
    font-weight: 600;
    padding: 14px 10px;
    text-align: center;
    letter-spacing: .8px;
    text-transform: uppercase;
    font-size: .75rem;
    border-right: 1px solid rgba(255,255,255,.08);
  }
  thead th:first-child {
    text-align: center;
    min-width: 108px;
    background: linear-gradient(135deg, var(--navy2) 0%, #243555 100%);
  }
  thead th.day-col { min-width: 150px; }
  thead th.day-lun { background: #233255; }
  thead th.day-mar { background: #1e2e50; }
  thead th.day-mie { background: #1a2a4a; }
  thead th.day-jue { background: #162646; }
  thead th.day-vie { background: #122240; }

  tbody tr { transition: background .15s; }
  tbody tr:hover:not(.break-row) { background: rgba(201,153,26,.05); }

  tbody td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--gray2);
    border-right: 1px solid var(--gray2);
    vertical-align: top;
    line-height: 1.45;
  }
  tbody td:last-child { border-right: none; }

  .time-cell {
    text-align: center;
    font-weight: 600;
    font-size: .78rem;
    color: var(--navy);
    white-space: nowrap;
    background: linear-gradient(180deg, var(--gray1) 0%, #eceef3 100%);
    border-right: 2px solid var(--gray2) !important;
    vertical-align: middle !important;
  }
  .time-cell .time-start { font-size: .92rem; color: var(--navy2); }
  .time-cell .time-sep { color: var(--gold); margin: 2px 0; font-size: .7rem; }
  .time-cell .time-end { font-size: .84rem; color: var(--gray3); }

  .subject-cell {
    font-size: .83rem;
    color: var(--text);
  }
  .subject-name {
    font-weight: 600;
    color: var(--navy);
    display: block;
    font-size: .85rem;
  }
  .teacher-name {
    display: block;
    font-size: .74rem;
    color: #5A6A8A;
    margin-top: 2px;
    font-weight: 400;
  }

  /* Break rows */
  .break-row td {
    background: var(--break-bg);
    text-align: center;
    color: var(--break-txt);
    font-weight: 600;
    font-size: .78rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 7px 12px;
    border-bottom: 1px solid #dde1eb;
  }
  .break-row .time-cell {
    background: #e2e5ef;
    color: var(--break-txt);
    font-size: .74rem;
  }
  .break-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(90,106,138,.12);
    border-radius: 20px;
    padding: 3px 12px;
    color: #4A5A7A;
  }

  /* ── FOOTER ── */
  .page-footer {
    text-align: center;
    padding: 28px 40px;
    color: var(--gray3);
    font-size: .78rem;
    letter-spacing: .5px;
  }
  .page-footer strong { color: var(--navy); }

  /* ── PRINT ── */
  @media print {
    @page { margin: 0.4cm; size: A4 landscape; }
    html, body { background: white; }

    /* Ocultar controles y footer */
    .top-stripe, .controls-bar, .btn, .page-footer,
    .mobile-cards { display: none !important; }
    .table-wrap    { display: block !important; }

    /* Header compacto */
    header {
      padding: 5px 14px;
      box-shadow: none;
      -webkit-print-color-adjust: exact;
      print-color-adjust: exact;
    }
    .logo-wrap img  { height: 36px; }
    .header-text h1 { font-size: .95rem; }
    .header-text p  { font-size: .58rem; margin-top: 1px; }
    .header-badge   { font-size: .85rem; padding: 3px 10px;
                      -webkit-print-color-adjust: exact; print-color-adjust: exact; }

    /* Cuerpo sin padding */
    main { padding: 2px 6px; max-width: 100%; }

    /* Card sin sombra */
    .schedule-card  { box-shadow: none; border: 1px solid #ccc;
                      page-break-inside: avoid; break-inside: avoid; }

    .card-header    { padding: 5px 12px;
                      -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .card-header h2 { font-size: .88rem; }
    .accent-line    { height: 20px; }
    .section-pill   { font-size: .58rem; padding: 1px 8px; }

    /* Tabla muy compacta */
    table           { font-size: .58rem; table-layout: fixed; width: 100%; }
    thead th        { padding: 4px 3px; font-size: .56rem;
                      -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    thead th:first-child  { width: 62px; }
    thead th.day-col      { width: auto; }

    tbody td        { padding: 3px 4px; line-height: 1.25;
                      border-bottom: 1px solid #ddd; }
    .time-cell      { min-width: 62px; }
    .time-cell .time-start { font-size: .62rem; }
    .time-cell .time-sep   { font-size: .5rem; margin: 0; }
    .time-cell .time-end   { font-size: .58rem; }

    .subject-name   { font-size: .58rem; }
    .teacher-name   { font-size: .52rem; margin-top: 0; }

    .break-row td   { padding: 2px 4px; font-size: .55rem;
                      -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .break-badge    { font-size: .55rem; padding: 1px 6px; }
  }

  /* Mobile cards: hidden on desktop, shown on mobile */
  .mobile-cards  { display: none; }
  .m-slot        { border: 1px solid var(--gray2); border-radius: 10px; overflow: hidden; margin-bottom: 10px; background: var(--white); box-shadow: 0 2px 8px rgba(28,43,75,.07); }
  .m-slot-break  { background: var(--break-bg); border-radius: 8px; padding: 9px 16px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; color: var(--break-txt); font-size: .78rem; font-weight: 600; letter-spacing: .8px; }
  .m-time-bar    { background: linear-gradient(90deg, var(--navy2) 0%, #243660 100%); padding: 8px 14px; display: flex; align-items: center; gap: 8px; }
  .m-time-bar span { color: var(--white); font-size: .85rem; font-weight: 600; }
  .m-time-bar .m-sep { color: var(--gold2); font-size: .7rem; }
  .m-row         { display: flex; align-items: stretch; border-bottom: 1px solid var(--gray2); min-height: 48px; }
  .m-row:last-child { border-bottom: none; }
  .m-day         { width: 82px; min-width: 82px; background: var(--navy); color: var(--white); font-size: .6rem; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; text-align: center; padding: 6px 4px; display: flex; align-items: center; justify-content: center; }
  .m-day.d-lun   { background: #233255; }
  .m-day.d-mar   { background: #1e2e50; }
  .m-day.d-mie   { background: #1a2a4a; }
  .m-day.d-jue   { background: #162646; }
  .m-day.d-vie   { background: #122240; }
  .m-subject     { flex: 1; padding: 8px 12px; display: flex; flex-direction: column; justify-content: center; }

  /* ── RESPONSIVE TABLET ── */
  @media (max-width: 900px) {
    main { padding: 20px 16px; }
    header { padding: 18px 20px; }
    .controls-bar { padding: 14px 20px; }
    thead th.day-col { min-width: 110px; }
  }

  /* ── RESPONSIVE MOBILE ── */
  @media (max-width: 640px) {
    header { padding: 12px 14px; flex-wrap: wrap; gap: 10px; }
    .logo-wrap img { height: 44px; }
    .header-text h1 { font-size: 1.1rem; }
    .header-text p { font-size: .65rem; }
    .header-badge { display: none; }

    .controls-bar { padding: 12px 14px; gap: 8px; flex-direction: column; align-items: stretch; }
    .btn-print { justify-content: center; }
    .select-wrap { max-width: 100%; }

    main { padding: 10px 8px; }

    .card-header h2 { font-size: 1rem; }
    .section-pill { font-size: .62rem; padding: 3px 10px; }

    /* Hide desktop table, show mobile cards */
    .table-wrap    { display: none !important; }
    .mobile-cards  { display: block !important; }
  }