/* ==================================================
   ALBERO TV
   DISEÑO GENERAL
   ================================================== */

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
}

html {
  background: #06111f;
}

body {
  background:
    radial-gradient(
      circle at 50% 5%,
      rgba(29, 112, 190, 0.22),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #071522 0%,
      #06111f 100%
    );

  color: #ffffff;

  font-family:
    Arial,
    Helvetica,
    sans-serif;
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
}


/* ==================================================
   CABECERA
   ================================================== */

.topbar {
  position: relative;
  z-index: 1000;

  width: 100%;
  height: 82px;

  padding:
    env(safe-area-inset-top)
    34px
    0;

  display: flex;
  align-items: center;

  background:
    rgba(
      5,
      20,
      35,
      0.97
    );

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  box-shadow:
    0
    8px
    28px
    rgba(
      0,
      0,
      0,
      0.18
    );

  backdrop-filter:
    blur(20px);

  -webkit-backdrop-filter:
    blur(20px);
}


.topbar-inner {
  width: 100%;
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 32px;
}


/* ==================================================
   LOGO
   ================================================== */

.brand {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;

  color: inherit;

  font-size: 31px;
  line-height: 1;

  font-weight: 900;
  font-style: italic;

  letter-spacing: -1.8px;

  text-decoration: none;

  transform:
    skewX(-4deg);
}


.brand-albero,
.brand-tv {
  display: inline-block;
}


/*
   Dos colores sólidos, sin degradado:
   ALBERO rosa y TV amarillo.
*/

.brand-albero {
  color: #f23891;

  text-shadow:
    0
    1px
    0
    rgba(
      255,
      255,
      255,
      0.08
    );
}


.brand-tv {
  margin-left: 1px;

  color: #ffd62f;

  text-shadow:
    0
    0
    7px
    rgba(
      255,
      214,
      47,
      0.42
    ),
    0
    0
    16px
    rgba(
      255,
      214,
      47,
      0.18
    );
}


/* ==================================================
   NAVEGACIÓN DE CATEGORÍAS
   ================================================== */

.category-nav {
  flex: 1;
  min-width: 0;

  overflow: hidden;
}


.category-list {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 9px;

  overflow-x: auto;
  overflow-y: hidden;

  padding:
    4px
    4px
    4px
    0;

  scrollbar-width: none;

  -webkit-overflow-scrolling:
    touch;

  overscroll-behavior-x:
    contain;
}


.category-list::-webkit-scrollbar {
  display: none;
}


.category-pill {
  flex-shrink: 0;

  min-height: 39px;

  padding:
    9px
    15px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 7px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.09
    );

  border-radius: 999px;

  background:
    rgba(
      17,
      49,
      80,
      0.96
    );

  color: #e7f4ff;

  font-size: 12px;
  line-height: 1;

  font-weight: 900;
  font-style: italic;

  letter-spacing: 0.1px;

  white-space: nowrap;

  box-shadow:
    0
    4px
    12px
    rgba(
      0,
      0,
      0,
      0.15
    );

  user-select: none;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease,
    transform 180ms ease;
}


.category-pill:hover {
  border-color:
    rgba(
      104,
      211,
      255,
      0.38
    );

  background: #173f67;

  color: #ffffff;

  box-shadow:
    0
    7px
    18px
    rgba(
      0,
      0,
      0,
      0.22
    );

  transform:
    translateY(-1px);
}


/* Colores discretos por categoría */

.category-pill.corridas {
  border-color:
    rgba(
      242,
      56,
      145,
      0.32
    );
}


.category-pill.rejones {
  border-color:
    rgba(
      166,
      101,
      213,
      0.34
    );
}


.category-pill.novilladas {
  border-color:
    rgba(
      255,
      174,
      52,
      0.35
    );
}


.category-pill.recortes {
  border-color:
    rgba(
      238,
      78,
      78,
      0.34
    );
}


.category-pill.programas {
  border-color:
    rgba(
      74,
      179,
      235,
      0.37
    );
}


.category-pill.otros {
  border-color:
    rgba(
      150,
      174,
      195,
      0.30
    );
}


/* ==================================================
   CONTENIDO PRINCIPAL
   ================================================== */

.main-content,
main {
  width: 100%;

  height:
    calc(
      100dvh - 82px
    );

  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;
}


.timeline-shell {
  position: relative;

  flex: 1;
  min-height: 0;

  width: 100%;

  overflow: hidden;
}


/* ==================================================
   CINTA CONTINUA
   ================================================== */

.timeline {
  position: relative;

  width: 100%;
  height: 100%;

  display: flex;
  align-items: center;

  gap: 12px;

  overflow-x: auto;
  overflow-y: hidden;

  padding:
    18px
    calc(
      50vw - 160px
    );

  scrollbar-width: none;

  scroll-snap-type: none;
  scroll-behavior: auto;

  overscroll-behavior:
    contain;

  -webkit-overflow-scrolling:
    touch;

  touch-action:
    pan-x;

  cursor: grab;
}


.timeline.is-dragging {
  cursor: grabbing;
  user-select: none;
}


.timeline::-webkit-scrollbar {
  display: none;
}


/* ==================================================
   TARJETA DEL DÍA
   ================================================== */

.day {
  position: relative;

  flex:
    0
    0
    320px;

  width: 320px;

  height:
    min(
      590px,
      calc(
        100% - 72px
      )
    );

  min-height: 390px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border:
    1px solid
    rgba(
      88,
      178,
      255,
      0.13
    );

  border-radius: 23px;

  background:
    linear-gradient(
      180deg,
      rgba(
        14,
        51,
        88,
        0.94
      ),
      rgba(
        5,
        28,
        52,
        0.97
      )
    );

  transform-origin:
    center center;

  opacity: 0.30;

  filter:
    blur(1.5px)
    brightness(0.65);

  box-shadow:
    0
    10px
    30px
    rgba(
      0,
      0,
      0,
      0.15
    );

  will-change:
    transform,
    opacity,
    filter;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}


/* ==================================================
   TARJETA CENTRAL
   ================================================== */

.day.active {
  border-color:
    rgba(
      103,
      211,
      255,
      0.75
    );

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(
        83,
        169,
        255,
        0.50
      ),
      transparent 43%
    ),
    linear-gradient(
      155deg,
      #277ed8,
      #12518d
    );

  box-shadow:
    0
    25px
    80px
    rgba(
      0,
      0,
      0,
      0.45
    );
}


/* ==================================================
   CABECERA DEL DÍA
   ================================================== */

.day-header {
  flex-shrink: 0;

  padding:
    20px
    20px
    15px;

  background:
    linear-gradient(
      180deg,
      rgba(
        255,
        255,
        255,
        0.035
      ),
      transparent
    );

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.08
    );
}


.label {
  min-height: 18px;

  text-align: center;

  color: #67d3ff;

  font-size: 12px;
  line-height: 1.2;

  font-weight: 900;
  font-style: italic;

  letter-spacing: 2px;
}


.date {
  margin:
    7px
    0
    4px;

  text-align: center;

  color: #ffffff;

  font-size: 29px;
  line-height: 1.05;

  font-weight: 900;
  font-style: italic;

  letter-spacing: -0.8px;

  white-space: nowrap;
}


.date.today-date {
  color: #ff3b30;
}


.weekday {
  text-align: center;

  font-size: 15px;
  line-height: 1.2;

  font-weight: 800;
  font-style: italic;
}


/* ==================================================
   CONTENIDO VERTICAL DEL DÍA
   ================================================== */

.events {
  flex: 1;
  min-height: 0;

  padding:
    14px
    14px
    22px;

  display: flex;
  flex-direction: column;

  gap: 10px;

  overflow-x: hidden;
  overflow-y: auto;

  overscroll-behavior:
    contain;

  scrollbar-width:
    thin;

  scrollbar-color:
    rgba(
      103,
      211,
      255,
      0.55
    )
    transparent;
}


.events::-webkit-scrollbar {
  width: 6px;
}


.events::-webkit-scrollbar-track {
  background: transparent;
}


.events::-webkit-scrollbar-thumb {
  border-radius: 999px;

  background:
    rgba(
      103,
      211,
      255,
      0.48
    );
}


/* ==================================================
   EVENTO GENERAL
   ================================================== */

.event {
  flex-shrink: 0;

  padding: 14px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  border-radius: 14px;

  background:
    rgba(
      4,
      39,
      72,
      0.91
    );

  box-shadow:
    0
    8px
    22px
    rgba(
      0,
      0,
      0,
      0.13
    );
}


.event-topline {
  margin-bottom: 9px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


.time {
  color: #ffffff;

  font-size: 16px;
  line-height: 1.1;

  font-weight: 900;
  font-style: italic;
}


.channel {
  min-width: 0;

  color: #8bdcff;

  font-size: 12px;
  line-height: 1.15;

  text-align: right;

  font-weight: 900;
  font-style: italic;

  overflow-wrap: anywhere;
}


/* ==================================================
   PROGRAMA TAURINO
   ================================================== */

.program-event {
  position: relative;

  overflow: hidden;

  padding: 15px;

  border:
    1px solid
    rgba(
      160,
      227,
      255,
      0.68
    );

  background:
    radial-gradient(
      circle at 85% 10%,
      rgba(
        255,
        255,
        255,
        0.32
      ),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      rgba(
        95,
        196,
        244,
        0.96
      ),
      rgba(
        32,
        127,
        194,
        0.98
      )
    );

  box-shadow:
    0
    12px
    30px
    rgba(
      1,
      24,
      46,
      0.30
    );
}


.program-event::after {
  content: "";

  position: absolute;

  right: -32px;
  bottom: -42px;

  width: 110px;
  height: 110px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.17
    );

  border-radius: 50%;

  pointer-events: none;
}


.program-heading {
  position: relative;
  z-index: 1;

  margin-bottom: 12px;

  display: flex;
  align-items: center;

  gap: 8px;
}


.program-icon {
  width: 29px;
  height: 29px;

  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.38
    );

  border-radius: 9px;

  background:
    rgba(
      3,
      45,
      83,
      0.28
    );

  font-size: 16px;
  line-height: 1;
}


.program-label {
  color: #ffffff;

  font-size: 10px;
  line-height: 1.2;

  font-weight: 900;
  font-style: italic;

  letter-spacing: 1.2px;
}


.program-topline {
  position: relative;
  z-index: 1;

  margin-bottom: 10px;
  padding-bottom: 10px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      0.20
    );
}


.program-event .time {
  font-size: 18px;
}


.program-event .channel {
  color:
    rgba(
      255,
      255,
      255,
      0.90
    );
}


.program-title {
  position: relative;
  z-index: 1;

  margin-top: 0;

  font-size: 21px;
  line-height: 1.08;

  letter-spacing: -0.35px;
}


.program-description {
  position: relative;
  z-index: 1;

  margin-top: 8px;

  color:
    rgba(
      255,
      255,
      255,
      0.82
    );

  font-size: 12px;
  line-height: 1.4;
}


.program-link {
  position: relative;
  z-index: 1;

  margin-top: 13px;

  padding:
    8px
    12px;

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.36
    );

  border-radius: 999px;

  background:
    rgba(
      1,
      45,
      82,
      0.26
    );

  color: #ffffff;

  font-size: 11px;
  line-height: 1;

  font-weight: 900;

  text-decoration: none;

  transition:
    background 180ms ease,
    transform 180ms ease;
}


.program-link:hover {
  background:
    rgba(
      1,
      45,
      82,
      0.48
    );

  text-decoration: none;

  transform:
    translateY(-1px);
}


/* ==================================================
   ETIQUETAS DE FESTEJOS
   ================================================== */

.event-type {
  display: inline-flex;
  align-items: center;

  width: fit-content;
  max-width: 100%;

  margin-bottom: 8px;

  padding:
    5px
    9px;

  border-radius: 7px;

  color: #ffffff;

  font-size: 9px;
  line-height: 1.15;

  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: 0.25px;

  overflow-wrap: anywhere;

  box-shadow:
    0
    3px
    9px
    rgba(
      0,
      0,
      0,
      0.18
    );
}


.event-type.type-corrida {
  background: #e83e8c;
}


.event-type.type-novillada-picadores {
  background: #f28c28;
}


.event-type.type-novillada-sin-picadores {
  background: #d9a514;
}


.event-type.type-novillada {
  background: #c97816;
}


.event-type.type-rejones {
  background: #8e44ad;
}


.event-type.type-festival {
  background: #299b63;
}


.event-type.type-recortes {
  background: #d63b3b;
}


.event-type.type-clase-practica {
  background: #258bc4;
}


.event-type.type-becerrada {
  background: #138f8f;
}


.event-type.type-tentadero {
  background: #96623c;
}


.event-type.type-mixta {
  background: #9b3e58;
}


.event-type.type-other {
  background: #60758a;
}


/* ==================================================
   INFORMACIÓN DEL EVENTO
   ================================================== */

.event-title {
  margin: 0;

  color: #ffffff;

  font-size: 17px;
  line-height: 1.16;

  font-weight: 900;
  font-style: italic;

  overflow-wrap: anywhere;
}


.people {
  margin-top: 7px;

  color:
    rgba(
      255,
      255,
      255,
      0.93
    );

  font-size: 12px;
  line-height: 1.38;
}


.people.pending {
  color:
    rgba(
      255,
      255,
      255,
      0.58
    );

  font-style: italic;
}


.breeding {
  margin-top: 7px;

  color: #75d2ff;

  font-size: 12px;
  line-height: 1.35;

  font-weight: 800;
}


.breeding::before {
  content: "Ganadería: ";

  color:
    rgba(
      255,
      255,
      255,
      0.65
    );

  font-weight: 600;
}


.event-link {
  display: inline-block;

  margin-top: 8px;

  color: #78d3ff;

  font-size: 11px;

  font-weight: 800;

  text-decoration: none;
}


.event-link:hover {
  text-decoration: underline;
}


/* ==================================================
   SIN PROGRAMACIÓN
   ================================================== */

.empty {
  min-height: 210px;

  display: flex;
  flex-direction: column;

  align-items: center;
  justify-content: center;

  gap: 7px;

  padding:
    30px
    10px;

  text-align: center;

  color: #c8deef;

  font-size: 13px;
  line-height: 1.4;
}


.empty b {
  font-size: 14px;
}


/* ==================================================
   INDICADOR INTERIOR
   ================================================== */

.day-scroll-indicator {
  flex-shrink: 0;

  min-height: 27px;

  padding:
    7px
    10px;

  border-top:
    1px solid
    rgba(
      255,
      255,
      255,
      0.07
    );

  background:
    rgba(
      2,
      20,
      38,
      0.52
    );

  color:
    rgba(
      200,
      222,
      239,
      0.58
    );

  text-align: center;

  font-size: 9px;

  font-weight: 700;

  letter-spacing: 0.2px;
}


/* ==================================================
   FLECHAS
   ================================================== */

.edge-arrow {
  position: absolute;

  top: 50%;
  z-index: 500;

  width: 46px;
  height: 46px;

  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(
      123,
      205,
      255,
      0.16
    );

  border-radius: 50%;

  background:
    rgba(
      15,
      53,
      88,
      0.86
    );

  color: #dcefff;

  font-size: 30px;
  line-height: 1;

  box-shadow:
    0
    10px
    30px
    rgba(
      0,
      0,
      0,
      0.25
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transform:
    translateY(-50%);

  transition:
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}


.edge-arrow:hover {
  border-color:
    rgba(
      103,
      211,
      255,
      0.45
    );

  background: #174b77;

  transform:
    translateY(-50%)
    scale(1.05);
}


.edge-arrow.left {
  left: 14px;
}


.edge-arrow.right {
  right: 14px;
}


/* ==================================================
   INDICACIÓN INFERIOR
   ================================================== */

.hint {
  flex-shrink: 0;

  min-height: 30px;

  padding:
    5px
    0
    9px;

  text-align: center;

  color: #83a9c7;

  font-size: 12px;

  font-weight: 700;

  transition:
    opacity 220ms ease;
}


.hint.hidden {
  opacity: 0;
}


/* ==================================================
   ERROR
   ================================================== */

.error-card {
  opacity: 1 !important;

  filter: none !important;

  transform: none !important;
}


/* ==================================================
   PANTALLAS CON POCA ALTURA
   ================================================== */

@media (
  max-height: 760px
) and (
  min-width: 801px
) {

  .topbar {
    height: 72px;
  }


  .main-content,
  main {
    height:
      calc(
        100dvh - 72px
      );
  }


  .brand {
    font-size: 28px;
  }


  .category-pill {
    min-height: 36px;

    padding:
      8px
      13px;
  }


  .day {
    height:
      calc(
        100% - 56px
      );

    min-height: 345px;
  }


  .day-header {
    padding:
      15px
      18px
      12px;
  }


  .date {
    font-size: 25px;
  }


  .events {
    padding:
      10px
      12px
      15px;
  }


  .event {
    padding: 11px;
  }


  .program-title {
    font-size: 19px;
  }

}


/* ==================================================
   TABLET
   ================================================== */

@media (
  max-width: 1050px
) {

  .topbar {
    padding-left: 22px;
    padding-right: 22px;
  }


  .topbar-inner {
    gap: 20px;
  }


  .brand {
    font-size: 28px;
  }


  .category-list {
    gap: 7px;
  }


  .category-pill {
    min-height: 37px;

    padding:
      8px
      12px;

    font-size: 11px;
  }

}


/* ==================================================
   MÓVIL
   ================================================== */

@media (
  max-width: 800px
) {

  .topbar {
    height: 118px;

    padding:
      max(
        10px,
        env(safe-area-inset-top)
      )
      0
      8px;

    align-items: stretch;
  }


  .topbar-inner {
    height: 100%;

    display: flex;
    flex-direction: column;

    align-items: stretch;
    justify-content: center;

    gap: 10px;
  }


  .brand {
    align-self: flex-start;

    margin-left:
      max(
        16px,
        env(safe-area-inset-left)
      );

    font-size: 27px;

    letter-spacing: -1.5px;
  }


  .category-nav {
    width: 100%;

    overflow: visible;
  }


  .category-list {
    width: 100%;

    gap: 7px;

    padding:
      3px
      max(
        16px,
        env(safe-area-inset-right)
      )
      5px
      max(
        16px,
        env(safe-area-inset-left)
      );

    overflow-x: auto;

    scroll-snap-type:
      x proximity;
  }


  .category-pill {
    min-height: 36px;

    padding:
      8px
      13px;

    font-size: 11px;

    scroll-snap-align:
      start;
  }


  .main-content,
  main {
    height:
      calc(
        100dvh - 118px
      );
  }


  .timeline {
    gap: 8px;

    padding:
      8px
      calc(
        50vw - 142px
      )
      10px;
  }


  .day {
    flex-basis: 284px;

    width: 284px;

    height:
      calc(
        100% - 34px
      );

    min-height: 330px;

    border-radius: 20px;
  }


  .day-header {
    padding:
      14px
      15px
      11px;
  }


  .label {
    min-height: 15px;

    font-size: 11px;
  }


  .date {
    margin:
      5px
      0
      3px;

    font-size: 24px;
  }


  .weekday {
    font-size: 13px;
  }


  .events {
    padding:
      10px
      10px
      15px;

    gap: 8px;
  }


  .event {
    padding: 11px;

    border-radius: 12px;
  }


  .event-topline {
    margin-bottom: 7px;
  }


  .time {
    font-size: 15px;
  }


  .channel {
    font-size: 11px;
  }


  .event-title {
    font-size: 16px;
  }


  .program-heading {
    margin-bottom: 9px;
  }


  .program-icon {
    width: 26px;
    height: 26px;

    font-size: 14px;
  }


  .program-title {
    font-size: 18px;
  }


  .program-description {
    font-size: 11px;
  }


  .day-scroll-indicator {
    min-height: 24px;

    padding:
      6px
      8px;

    font-size: 8px;
  }


  .edge-arrow {
    display: none;
  }


  .hint {
    min-height: 24px;

    padding:
      3px
      0
      6px;

    font-size: 10px;
  }

}


/* ==================================================
   MÓVILES PEQUEÑOS
   ================================================== */

@media (
  max-width: 380px
) {

  .topbar {
    height: 112px;
  }


  .brand {
    font-size: 25px;
  }


  .category-pill {
    min-height: 34px;

    padding:
      7px
      11px;

    font-size: 10px;
  }


  .main-content,
  main {
    height:
      calc(
        100dvh - 112px
      );
  }


  .timeline {
    padding-left:
      calc(
        50vw - 134px
      );

    padding-right:
      calc(
        50vw - 134px
      );
  }


  .day {
    flex-basis: 268px;

    width: 268px;
  }


  .date {
    font-size: 22px;
  }

}


/* ==================================================
   SAFARI / NAVEGADORES SIN 100DVH
   ================================================== */

@supports not (
  height: 100dvh
) {

  .main-content,
  main {
    height:
      calc(
        100vh - 82px
      );
  }


  @media (
    max-height: 760px
  ) and (
    min-width: 801px
  ) {

    .main-content,
    main {
      height:
        calc(
          100vh - 72px
        );
    }

  }


  @media (
    max-width: 800px
  ) {

    .main-content,
    main {
      height:
        calc(
          100vh - 118px
        );
    }

  }


  @media (
    max-width: 380px
  ) {

    .main-content,
    main {
      height:
        calc(
          100vh - 112px
        );
    }

  }

}