:root{
    --gray-100:#f5f5f5;
    --gray-200:#e0e0e0;
    --gray-300:#ccc;
    --gray-700:#616161;
    --black:#000;
    --white:#fff;
    --chip-height:30px;
    --menu-width:18%;
    --radius-8:8px;
    --radius-999:999px;
}

*{box-sizing:border-box}
body{
    margin:0;
    font-family:'Roboto',sans-serif;
    color:#000;
    background:#fff;
}

/* Layout general */
.page{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    width:100%;
}

/* Las nuevas clases de iconos de material-icons son: 
material-icons-outlined, material-icons-rounded y material-icons-sharp */ 
/* 1. Estilo Base para todos los símbolos */
.material-symbols-outlined {
    /* Establece los valores predeterminados si no se especifican */
    font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

/* 2. Icono Rellenado (Filled) */
.icon-filled {
    /* Cambia el eje FILL a 1 para un icono sólido */
    font-variation-settings: 'FILL' 1;
}

/* 3. Icono más Grueso (Bold) */
.icon-bold {
    /* Aumenta el peso del trazo */
    font-variation-settings: 'wght' 700;
}

/* Header en tres zonas */
.header {
    display: grid;
    /* CAMBIO: Usamos 'auto' en la izquierda para que no empuje el centro */
    grid-template-columns: auto 1fr auto; 
    align-items: center;
    gap: 16px; /* Un poco más de espacio entre zonas */
    padding: 8px 16px;
    border-bottom: 1px solid var(--gray-100);
    background-color: var(--white); /* Asegurar fondo blanco */
    position: sticky; /* Opcional: para que se quede fijo al bajar */
    top: 0;
    z-index: 100;
}

/* Zona start: iconos menú + logo */
.header-start {
    display: flex;
    align-items: center;
    gap: 16px; /* Ajuste visual */
    padding-right: 24px; /* Espacio antes de que empiece la zona central */
}

/* Zona center: Buscador + microfono*/
.header-center {
    display: flex;
    align-items: center;
    justify-content: center; /* ESTO CENTRA EL BUSCADOR EN LA PANTALLA */
    gap: 16px; /* Espacio entre el buscador y el micro */
    width: 100%;
}

/* Zona end: botón Crear + avatar */
.header-end{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px;
}

.menu-icon{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;height:40px;
    border-radius:50%;
    transition:all .25s ease;
    cursor:pointer;
}

.menu-icon:hover{
    background-color:var(--gray-200);
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}

.menu-icon .material-symbols-outlined{
    font-size:28px;
    color:#000
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
}

.logo img{
    height:24px;
}

/* Contenedor que define la forma y el borde exterior */
/* Además, tiene ajuste en el search-container para que sea flexible pero no gigante */
.search-container {
    display: flex;
    width: 100%; /* Intenta ocupar espacio */
    max-width: 600px; /* Pero no pases de 600px */
    border: 1px solid #ccc;
    border-radius: 20px;
    overflow: hidden;
    margin-left: 32px; /* Un pequeño margen para equilibrar visualmente si es necesario */
}

/* Efecto de foco (focus-within) */
.search-container:focus-within {
    border-color: #1a73e8; /* Borde azul al enfocar */    
}

/* Campo de Texto (Input) */
.search-input {
    flex-grow: 1; /* Ocupa todo el espacio disponible */
    padding: 10px 15px;
    border: none; /* Quitar el borde nativo */
    outline: none; /* Quitar el contorno al hacer clic */
    font-size: 16px;
    min-width: 0; /* Permite que se encoja correctamente en Flexbox */
}

/* Botón de Búsqueda */
.search-button {
    background-color: #f8f8f8; /* Fondo gris ligeramente más oscuro que el input */
    border: none;
    padding: 8px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Línea de separación visible entre el input y el botón */
    border-left: 1px solid #ccc; 
}

/* Efecto al pasar el ratón por encima de la lupa */
.search-button:hover {
    background-color: var(--gray-200); /* Usa tu variable de gris más oscuro */
    box-shadow: 0 1px 2px rgba(0,0,0,0.1); /* (Opcional) Un toque sutil de sombra */
}

/* Micrófono con hover circular y texto alternativo */
.mic{
    background-color: var(--gray-100);
    display: flex;
    align-items:center;
    justify-content:center;
    width:40px;height:40px;
    border-radius:50%;
    transition:all .25s ease;
    cursor:pointer;
    flex-shrink: 0; /* Evita que el micro se aplaste si la pantalla es pequeña */
}

.mic:hover{
    background-color:var(--gray-200);
    box-shadow:0 2px 6px rgba(0,0,0,.25);
}
.mic .material-symbols-outlined{
    font-size:24px;
    color:#000
}
.mic[title]{ /* nada especial, solo para recordar el alt text */ }

/* Botón Crear (+ texto) */
.btn-create{
    display:flex;
    align-items:center;
    gap:8px;
    height:40px;
    padding:0 14px;
    border-radius:var(--radius-999);
    background:var(--gray-100);;
    color:#000;
    font-weight:200;
    cursor:default;
    transition:background-color .2s ease, box-shadow .2s ease;
}
.btn-create:hover{
    background-color:var(--gray-200);
    box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.btn-create .material-symbols-outlined{
    font-size:28px
}

/* Avatar */
.avatar{
  width: 32px;
  height: 32px;
  overflow: hidden;       /* recorta cualquier exceso */
  border-radius: 50%;     /* convierte el contenedor en círculo */
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Main layout: menú izquierdo + contenido derecho */
.main{
    display:grid;
    grid-template-columns: var(--menu-width) 1fr;
    gap:12px;
    padding:12px;
}

/* Menú vertical (izquierda) */
.menu-vertical{
    height:calc(100vh - 80px); /* espacio disponible bajo el header (ajustable) */
    display:flex;flex-direction:column;
    overflow-y:auto;
    padding:8px;
}

.menu-btn{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    padding:10px;
    background:#fff;
    color:#000;
    border-radius:8px;
    font-size:15px;
    font-weight:500;
    transition:background-color .2s ease, box-shadow .2s ease;
    cursor:default;
}

/* Nuevo estilo para el SVG dentro del botón del menú */
.menu-btn .menu-icon-svg {
    width: 24px;   /* Define el ancho correcto */
    height: 24px;  /* Define el alto correcto */
    margin-right: 20px; /* Mantener la separación del texto */
    fill: currentColor; /* Asegura que el color de trazo se herede del texto */
}

.menu-btn .material-symbols-outlined {
    font-size:28px;
    margin-right:20px
}

.menu-btn img{
  width: 24px;   /* Define el ancho correcto */
  height: 24px;  /* Define el alto correcto */
  margin-right:20px;
}

/* Nueva clase para fondo gris permanente */
.menu-btn.bg-gray-always {
    background: var(--gray-200); 
}

.menu-btn:hover{background:var(--gray-200)}
.menu-btn.active{background:#000;color:#fff}

.separador{
    border-top:1px solid var(--gray-300);
    margin:10px 0;
}

/* Contenido derecho: fila de filtros redondeados */
.content{
    padding:8px;
}
.filters{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    margin-bottom:16px;
}
.filter-chip{
    display:flex;
    align-items:center;
    height:25px;
    padding:0 12px;
    border-radius:var(--radius-8);
    background:var(--gray-200);
    color:#000;
    font-size:14px;
    transition:background-color .2s ease, color .2s ease;
    cursor:default;
}
.filter-chip.active{
    background:#000;
    color:#eeeeee;
}
.filter-chip:hower{
    color:#ffffff;
}

/* Ejemplo de contenido */
.placeholder{
    height:240px;
    border:1px dashed var(--gray-300);
    border-radius:8px;
}

.company-information {
    color: var(--gray-700);
    background-color: var(--gray-100);
    padding:10px;
}

.company-information .fontsize-down1{
    font-size:11px;
}

.company-information .fontsize-down2{
    font-size:9px;
}

.company-information br{
    font-size:10px;
}
    
.video-grid-content {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}
/* GRID DE VIDEOS (Parte inferior de la zona derecha) */
.videos-normales {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* tres columnas fijas */
  gap: 16px;
}

.videos-shorts {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* cinco columnas fijas */
  gap: 12px;
}

.video-card,
.short-card {
  display: flex;
  flex-direction:column;
  width: 100%;
}
.video-card:hover,
.short-card:hover {
    background-color: var(--gray-100);
}

.thumbnail {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
}

.video-info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  margin-top: 10px;
  align-items: start;
}

.text-block {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.title {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: #111;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.channel,
.meta {
  font-size: 13px;
  color: #606060;
  line-height: 1.3;
}

/* Botón M3 */
.more-btn {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  border-radius: 50%;                /* típico M3 */
}

.more-btn:hover {
  background: rgba(0,0,0,0.08);       /* efecto ripple-like */
}

.shorts-title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12 12px;
}

.thumbnail-shorts {
  width: 32px;
  height: 32px;
  display: flex;         /* mejor flex para centrar la imagen */
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;      /* evita que la imagen sobresalga */
}

.thumbnail-shorts img {
  width: 100%;           /* fuerza a que la imagen se ajuste */
  height: 100%;
  object-fit: contain;   /* mantiene proporción sin deformar */
}