@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap');

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

/* ----- Variables globables ----- */
:root {
  /* Colores base */
  --accent-color      : #ff0000;
  --grey-color        : #909090;
  --grey-color-alt    : #ccc;
  --border-color      : rgba(0, 0, 0, 0.1);

  /* Colores de fondo */
  --bg-color          : #fff;
  --bg-color-alt      : #f9f9f9;
  --bg-color-active   : #e5e5e5;

  /*  Colores de texto*/
  --text-color        : #030303;
  --text-color-alt    : #606060;
  --text-color-white  : #fff;

  /* Fuentes */
  --body-font         : 'Roboto', sans-serif;
  --icon-font         : 'icomoon';

  /* Tamaño de texto */
  --big-font-size     : 1.125rem; /* 18px */
  --normal-font-size  : 1rem; /* 16px */
  --small-font-size   : 0.875rem; /* 14px */
  --smaller-font-size : 0.75rem; /* 12px */
  --font-bold         : 500;

  /* Otros */
  --header-height     : 56px;
  --sidebar-width     : 240px;
  --z-tooltip         : 25;
  --z-fixed           : 100;
  --border-radius     : 2px;
  --transition-time   : 0.25s;

  /* Scroll */
  --scroll-size       : 16px;
  --scroll-bg         : transparent;
  --scroll-radius     : 8px;
  --scroll-padding    : 4px;
  --thumb-bg          : var(--grey-color);
  --thumb-bg-alt      : var(--grey-color-alt);
}

body {
  font-family      : var(--body-font);
  background-color : var(--bg-color-alt);
  line-height      : 1.15rem;
  padding-top      : var(--header-height);
  padding-left     : var(--sidebar-width);
}

h1,
h2,
h3,
h4,
h5,
h6,
b {
  font-weight : var(--font-bold);
}

button {
  font-family : var(--body-font);
}

img {
  width : 100%;
}

hr {
  --spacing     : 0.75rem;
  border        : none;
  border-bottom : 1px solid var(--border-color);
  margin-bottom : var(--spacing);
  padding-top   : var(--spacing);
}

hr.big {
  margin-bottom : 1rem;
}

.flex {
  display : flex;
}

.place-center {
  display         : flex;
  justify-content : center;
  align-items     : center;
}

.buttons-container {
  display : flex;
  gap     : 0.5rem;
}

/* Clases para recortar líneas de texto */
[class*='rows-text'] {
  display            : -webkit-box;
  -webkit-line-clamp : var(--rows);
  -webkit-box-orient : vertical;
  overflow           : hidden;
}

.rows-text-1 {
  --rows : 1;
}

.rows-text-2 {
  --rows : 2;
}

.rows-text-3 {
  --rows : 3;
}

/* ----- Scroll ----- */
.scroll::-webkit-scrollbar {
  width  : var(--scroll-size); /* Scroll en Y*/
  height : var(--scroll-size); /* Scroll en X*/
}

.scroll::-webkit-scrollbar-thumb {
  background-color : var(--thumb-bg);
  border-radius    : var(--scroll-radius);
  border           : var(--scroll-padding) solid transparent;
  background-clip  : content-box;
}

.scroll::-webkit-scrollbar-thumb:hover {
  background-color : var(--thumb-bg-alt);
}

.scroll:not(body)::-webkit-scrollbar-thumb {
  display          : none;
  background-color : var(--thumb-bg-alt);
}

.scroll:not(body):hover::-webkit-scrollbar-thumb {
  display : block;
}

/* ----- Cabecera principal del sitio ----- */
.main-header {
  position         : fixed;
  width            : 100%;
  left             : 0;
  top              : 0;
  display          : flex;
  justify-content  : space-between;
  align-items      : center;
  padding          : 0 1rem;
  height           : var(--header-height);
  background-color : var(--bg-color);
  z-index          : var(--z-fixed);
}

.main-header .start .action-button {
  margin-right : 1rem;
}

.main-header .logo {
  width : 6rem;
}

.main-header .middle {
  flex-basis : 720px;
  padding    : 0 2rem;
}

.main-header .form-search {
  flex-grow   : 1;
  align-items : stretch;
}

.main-header .input {
  flex-grow     : 1;
  padding       : 0.5rem;
  border        : 1px solid var(--border-color);
  border-right  : 0;
  border-radius : var(--border-radius) 0 0 var(--border-radius);
}

.main-header .submit {
  padding       : 0 1.5rem;
  border        : 1px solid var(--border-color);
  color         : var(--text-color-alt);
  font-size     : 1.25rem;
  border-radius : 0 var(--border-radius) var(--border-radius) 0;
  cursor        : pointer;
}

.main-header .user {
  padding : 0 1rem;
}

/* ----- Avatar del usuario ----- */
.user-avatar {
  --size : 2rem;
  width  : var(--size);
  height : var(--size);
  cursor : pointer;
  flex   : none;
}

.user-avatar .image {
  width         : 100%;
  height        : 100%;
  object-fit    : cover;
  border-radius : 50%;
}

/* ----- Botones de acción ----- */
.action-button,
.action-button .icon {
  --size          : 2.5rem;
  display         : flex;
  justify-content : center;
  align-items     : center;
  height          : var(--size);
  border          : 1px solid transparent;
  background      : none;
  cursor          : pointer;
  transition      : border-color var(--transition-time);
}

.action-button.has-text {
  text-transform : uppercase;
  color          : var(--text-color-alt);
  font-weight    : var(--font-bold);
  font-size      : var(--small-font-size);
}

.action-button.has-text .icon {
  --size : 2.25rem;
  color  : var(--grey-color);
}

.action-button:not(.has-text),
.action-button .icon {
  width         : var(--size);
  border-radius : 50%;
}

.action-button::before,
.action-button .icon {
  color     : var(--text-color-alt);
  font-size : 1.5rem;
}

.action-button:not(.has-text):active,
.action-button .icon:active {
  background-color : var(--bg-color-active);
  border-color     : var(--bg-color-active);
}

/* ----- Tooltip ----- */
[data-tooltip] {
  position : relative;
}

[data-tooltip]:hover::after {
  opacity : 1;
}

[data-tooltip]::after {
  content          : attr(data-tooltip);
  position         : absolute;
  left             : 50%;
  top              : 3.5rem;
  transform        : translateX(-50%);
  padding          : 0.5rem;
  background-color : var(--text-color-alt);
  color            : var(--text-color-white);
  font-family      : var(--body-font);
  font-size        : var(--smaller-font-size);
  border-radius    : var(--border-radius);
  white-space      : nowrap;
  opacity          : 0;
  pointer-events   : none;
  transition       : opacity var(--transition-time);
  z-index          : var(--z-tooltip);
}

/* ----- Botón básico ----- */
.button {
  --button-color      : #CC0000;
  --text-button-color : white;
  --cursor-button     : pointer;

  padding             : 0.5rem 1rem;
  background-color    : var(--button-color);
  color               : var(--text-button-color);
  text-transform      : uppercase;
  font-size           : var(--small-font-size);
  font-weight         : var(--font-bold);
  border              : none;
  border-radius       : var(--border-radius);
  cursor              : var(--cursor-button);
}

.button[disabled] {
  --button-color      : var(--bg-color-active);
  --text-button-color : var(--grey-color);
  --cursor-button     : initial;
}

.button.link {
  --text-button-color : var(--text-color-alt);
  --button-color      : transparent;
}

/* ----- Menú lateral ----- */
.main-sidebar {
  --main-nav-padding : 0.5rem 1.5rem;
  position           : fixed;
  top                : var(--header-height);
  left               : 0;
  z-index            : 1;
  height             : calc(100vh - var(--header-height));
  width              : var(--sidebar-width);
  background-color   : var(--bg-color);
  padding            : 0.75rem 0;
  overflow           : auto;
}

/* Items de navegación */
.main-nav .link {
  display         : flex;
  align-items     : center;
  padding         : var(--main-nav-padding);
  color           : var(--text-color);
  font-size       : var(--small-font-size);
  text-decoration : none;
  white-space     : nowrap;
}

.main-nav .link.is-active,
.main-nav .link:hover {
  background-color : var(--bg-color-alt);
}

.main-nav .link.is-active {
  font-weight : var(--font-bold);
}

/* Íconos de la navegación */
.main-nav .link .icon {
  font-size : 1.5rem;
  color     : var(--text-color-alt);
}

.main-nav .link.is-in-live::after,
.main-nav .link.is-new::after {
  content     : var(--link-icon);
  font-family : var(--icon-font);
  margin-left : auto;
}

.main-nav .link.is-in-live::after {
  content : '\e911';
  color   : var(--accent-color);
}

.main-nav .link.is-new::after {
  content   : '\e91b';
  color     : #065FD4;
  font-size : 0.5rem;
}

.main-nav .link .user-avatar {
  --size : 1.5rem;
}

.main-nav .link .icon,
.main-nav .link .user-avatar {
  margin-right : 1.5rem;
}

.main-nav .link.is-active .icon {
  color : var(--accent-color);
}

/* Título de secciones en navegación lateral */
.nav-title {
  padding        : var(--main-nav-padding);
  color          : var(--text-color-alt);
  font-size      : var(--small-font-size);
  text-transform : uppercase;
}

/* Footer de la navegación lateral */
.main-nav-footer {
  display   : grid;
  gap       : 0.75rem;
  padding   : var(--main-nav-padding);
  font-size : var(--smaller-font-size);
}

.main-nav-footer .link-footer {
  margin-right    : 0.5rem;
  line-height     : 1.4;
  text-decoration : none;
  font-weight     : var(--font-bold);
  color           : var(--text-color-alt);
}

.main-nav-footer .copyright {
  opacity : 0.6;
  color   : var(--text-color-alt);
  margin  : 0;
}

/* ----- Tarjeta de video ----- */
.card-video a {
  text-decoration : none;
  color           : inherit;
}

.card-video .cover {
  display       : block;
  position      : relative;
  aspect-ratio  : 16 / 9;
  margin-bottom : 0.75rem;
}

.card-video .image {
  display    : block;
  height     : 100%;
  object-fit : cover;
}

.card-video .time {
  position         : absolute;
  right            : 0.5rem;
  bottom           : 0.5rem;
  padding          : 0 0.25rem;
  background-color : rgba(0, 0, 0, 0.8);
  color            : var(--text-color-white);
  font-size        : var(--smaller-font-size);
  border-radius    : var(--border-radius);
}

.card-video .user-avatar {
  --size       : 36px;
  margin-right : 0.75rem;
}

.card-video .content {
  font-size : var(--small-font-size);
  color     : var(--text-color-alt);
}

.card-video .title {
  color         : var(--text-color);
  margin-bottom : 0.25rem;
}

/* Card video cuando está en el sidebar*/
.cards-sidebar {
  display           : grid;
  gap               : 1rem;
  grid-column-start : span 3;
}

.card-video.in-sidebar {
  display   : flex;
  flex-wrap : nowrap;
  gap       : 1rem;
}

.card-video.in-sidebar .cover {
  margin-bottom : 0;
  min-width     : 200px;
  max-width     : 250px;
}

.card-video.in-sidebar .content {
  flex-grow : 1;
}

/* Información del video*/
.video-information .views {
  display : inline-flex;
}

.video-information .views::after {
  content     : '\e91b';
  padding     : 0 0.25rem;
  font-family : var(--icon-font);
  font-size   : 0.25rem;
}

/* ----- Grid de videos ----- */
.card-grid {
  display               : grid;
  grid-template-columns : repeat(auto-fill, minmax(300px, 1fr));
  gap                   : 2rem 1rem;
  padding               : 1rem 2rem;
  max-width             : 1800px;
  margin-inline         : auto;
}


/* ----- Página de video ----- */

body.video-page {
  padding-left : 0;
}

.video-page-grid {
  --gap-page            : 1.5rem;
  width                 : calc(100% - (var(--gap-page) * 2));
  max-width             : 1600px;
  display               : grid;
  gap                   : var(--gap-page);
  grid-template-columns : repeat(11, 1fr);
  margin-inline         : auto;
  padding-top           : var(--gap-page);
}

.video-column {
  grid-column-start : span 8;
}

.video-player .video {
  aspect-ratio  : 16 / 9;
  width         : 100%;
  margin-bottom : 1rem;
}

.video-player .title {
  font-weight : normal;
  font-size   : var(--big-font-size);
}

.video-player .video-information {
  font-size : var(--small-font-size);
  color     : var(--text-color-alt)
}

.video-player .actions {
  display         : flex;
  align-items     : center;
  justify-content : space-between;
}

.video-player .buttons-container.likes {
  border-bottom : 2px solid var(--grey-color);
}

.video-player .border {
  padding-top : 0;
}

/* ----- Estilos para la informacion del video ----- */
.video-player-information {
  gap   : 1rem;
  color : var(--text-color);
}

.video-player-information .user-avatar {
  --size : 3rem;
}

.video-player-information .content {
  width : 100%;
}

.video-player-information .channel-name {
  color           : inherit;
  text-decoration : none;
  font-size       : var(--small-font-size);
  font-weight     : var(--font-bold);
}

.video-player-information .subs-count {
  color     : var(--text-color-alt);
  font-size : var(--smaller-font-size);
}

.video-player-information .header {
  margin-bottom : 1rem;
}

.video-player-information .header .button {
  margin-left : auto;
}

.video-player-information .caption {
  max-width   : 600px;
  line-height : 1.25rem;
  font-size   : var(--small-font-size);
}

/* ----- Sección de comentarios ----- */
.comments-information {
  align-items   : center;
  margin-bottom : 0.5rem;
}

.comment-form {
  gap : 1rem;
}

.comment-form .form {
  display        : flex;
  flex-direction : column;
  flex-grow      : 1;
}

.comment-form .input {
  position      : relative;
  margin-bottom : 1rem;
  padding       : 0.5rem 0;
  font-size     : var(--small-font-size);
  box-shadow    : 0 -1px inset var(--grey-color);
  outline       : none;
}

.comment-form .input:empty::before {
  content : 'Agrega un comentario público';
  color   : var(--text-color-alt);
}

.comment-form .input::after {
  content          : '';
  position         : absolute;
  bottom           : 0;
  left             : 50%;
  width            : 0;
  height           : 2px;
  background-color : #000;
  transition       : left var(--transition-time),
  width var(--transition-time);
}

.comment-form .input:focus::after {
  width : 100%;
  left  : 0;
}

.comment-form .user-avatar {
  --size : 2.5rem;
}

.comment-form .buttons-container {
  margin-left : auto;
}

/* ----- Componente comentario ----- */
.comments-grid {
  display : grid;
  gap     : 1.5rem;
}

.comment {
  gap       : 1rem;
  font-size : var(--small-font-size);
}

.comment- .user-avatar {
  --size : 2.5rem;
}

.comment .header {
  font-size     : var(--smaller-font-size);
  margin-bottom : 0.25rem;
}

.comment .name {
  margin-right    : 0.25rem;
  text-decoration : none;
  color           : var(--text-color);
}

.comment .time {
  color : var(--text-color-alt);
}

.comment .buttons-container {
  margin-left : -0.5rem;
}

.comment .action-button,
.comment .action-button .icon {
  --size    : 2rem;
  font-size : var(--normal-font-size);
}

.comment .action-button:hover,
.comment .action-button:hover .icon {
  color : var(--text-color-alt);
}

.comment .action-button .text {
  font-size : var(--smaller-font-size);
}