/* Importación de Google Fonts para la placa */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,300;1,400;1,700&family=Outfit:wght@300;400;600;700;800;900&display=swap');

:root {
  --vl-green: #003d29;       /* Verde oscuro del zócalo */
  --vl-orange: #e65c00;        /* Naranja HK */
  --vl-grey: #e9e9e9;          /* Gris claro del zócalo */
}

/* ========================================== */
/* COMPONENTE: PORTABLE VIDEOLOTE WRAPPER     */
/* ========================================== */

.videolote-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  background-color: #000;
  /* Habilita container queries para que la placa se autoredimensione */
  container-type: inline-size;
  container-name: videolote;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.video-container iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placa Overlay Container */
.placa-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 10;
  display: flex;
  flex-direction: column;
  pointer-events: auto; /* Permitir interacciones */
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
  user-select: none;
}

/* Modificadores de Visibilidad */
.placa-container.placa-hidden {
  transform: translateY(80%);
  opacity: 0.4;
}

.placa-container.placa-hidden:hover {
  opacity: 0.9;
  transform: translateY(75%);
}

/* Barra Superior */
.placa-top {
  position: relative;
  background-color: var(--vl-grey);
  height: 8.0cqw;
  display: flex;
  align-items: center;
  padding-left: 0;
  padding-right: 1.5cqw;
  box-shadow: 0 -0.2cqw 0.5cqw rgba(0,0,0,0.15);
}

/* Logotipo Cuadrado */
.logo-square {
  background-color: #ffffff;
  width: 12.5cqw;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.6cqw;
  flex-shrink: 0;
  box-shadow: 0.2cqw 0 0.8cqw rgba(0,0,0,0.1);
  z-index: 12;
}

.logo-img {
  width: auto;
  height: auto;
  max-width: 95%;
  max-height: 95%;
  object-fit: contain;
}

/* Columnas */
.placa-cols {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  padding-left: 1.5cqw;
}

.placa-col {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  height: 100%;
  font-family: 'Barlow Condensed', sans-serif;
  color: var(--vl-green);
  padding-top: 0.6cqw;
}

.col-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-grow: 1;
  height: 0;
  padding-bottom: 0.4cqw;
}

/* Tamaños de columnas proporcionales */
.col-cantidad   { width: 11%; }
.col-categoria  { width: 22%; }
.col-peso       { width: 24%; }
.col-plazo      { width: 14%; }
.col-sanidad    { width: 19%; }
.col-lote       { width: 10%; margin-left: auto; margin-right: 1.5cqw; }

.placa-divider {
  width: 2px;
  height: 5.6cqw;
  background-color: var(--vl-green);
  opacity: 0.85;
  flex-shrink: 0;
}

/* Estilos de Textos en Columnas */
.col-label {
  font-size: 1.1cqw;
  font-weight: 700;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  gap: 0.3cqw;
  margin-bottom: 0.1cqw;
  color: var(--vl-green);
}

.col-icon {
  width: 1.2cqw;
  height: 1.2cqw;
  flex-shrink: 0;
}

.col-value {
  font-size: 2.8cqw;
  font-weight: 600; /* Reducido de 900 */
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

.val-plazo.val-long {
  font-size: 1.9cqw;
  font-weight: 600;
  letter-spacing: -0.03em;
  margin-top: 0.1cqw;
}

/* Colores específicos de los valores */
.val-cantidad {
  font-size: 4.8cqw; /* Aumentado sustancialmente para llenar el espacio */
  font-weight: 700;
  line-height: 0.8;
  color: var(--vl-orange);
  margin-top: 0.1cqw;
}

.val-categoria {
  font-size: 2.1cqw;
  font-weight: 600; /* Reducido de 800 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  letter-spacing: -0.01em;
  color: var(--vl-orange);
}

.col-sublabel {
  font-size: 0.75cqw;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-top: 0.1cqw;
  color: #555;
}

.col-subvalue {
  font-size: 1.15cqw;
  font-weight: 700; /* Reducido de 800 */
  line-height: 1;
  color: var(--vl-green);
}

/* Sanidad específica */
.val-sanidad {
  font-size: 1.35cqw;
  font-weight: 600; /* Reducido de 700 */
  line-height: 1.15;
  text-align: left;
  letter-spacing: 0.02em;
}

.sanidad-row span {
  font-weight: 700; /* Reducido de 900 */
}

/* Lote específica */
.font-lote {
  font-size: 1.6cqw;
  font-weight: 800;
  letter-spacing: 0.1em;
  margin-bottom: 0;
}

.val-lote {
  font-size: 3.6cqw;
  font-weight: 700; /* Reducido de 900 */
  color: var(--vl-green);
  line-height: 0.9;
}

/* Barra Inferior */
.placa-bottom {
  background-color: var(--vl-green);
  height: 2.4cqw;
  display: flex;
  align-items: center;
  padding-left: 14.0cqw;
  gap: 3.5cqw;
  margin-top: -0.05cqw; /* Evitar separación por decimales de render */
  z-index: 9;
}

.bottom-item {
  display: flex;
  align-items: center;
  gap: 0.5cqw;
  color: #ffffff;
  font-family: 'Barlow Condensed', sans-serif;
}

.bottom-icon {
  width: 1.3cqw;
  height: 1.3cqw;
  color: var(--vl-orange);
  flex-shrink: 0;
}

.bottom-text {
  font-size: 1.35cqw;
  font-weight: 400; /* Reducido de 600 */
  letter-spacing: 0.05em;
}

.bottom-text span {
  font-weight: 600; /* Reducido de 800 */
}

/* Botón Ocultar/Ver Placa */
.placa-toggle {
  position: absolute;
  right: 1.5cqw;
  top: -2.8cqw;
  width: 2.4cqw;
  height: 2.4cqw;
  border-radius: 50%;
  background-color: var(--vl-green);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  box-shadow: 0 0.2cqw 0.5cqw rgba(0,0,0,0.3);
  transition: all 0.2s ease;
  z-index: 15;
  padding: 0.5cqw;
}

.placa-toggle:hover {
  background-color: var(--vl-orange);
  transform: scale(1.1);
}

.placa-toggle svg {
  width: 100%;
  height: 100%;
  display: block;
}