/* videos.css — la web nueva «Vídeos». Diseño de la maqueta: fondo claro, Barlow Condensed en títulos, IBM Plex
   en texto, tarjetas blancas, una columna en móvil y barra inferior. No comparte nada con estilo.css de Estudio. */

:root {
  --fondo: #F3F5F7;
  --papel: #FFFFFF;
  --tinta: #0E1726;
  --gris: #475467;
  --raya: #D5DAE1;
  --acento: #1F4FE0;
  --bien-fondo: #DDF3E7;  --bien-raya: #8CCFAB;  --bien-tinta: #0B4F32;
  --mal-fondo: #FCE4E4;   --mal-raya: #EBA9A9;   --mal-tinta: #7A1414;
  --duda-fondo: #FFE9B8;  --duda-raya: #E3B95A;  --duda-tinta: #5A3600;
  --titulos: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif;
  --texto: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  --radio: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 15px;
  line-height: 1.4;
}

a { color: var(--tinta); }
a:hover { color: var(--acento); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }

p { margin: 0; }
h1, h2, h3 { margin: 0; }
code { font-family: var(--mono); font-size: 12px; }

/* Estructura: columna centrada en móvil; en escritorio (>=768px) se expande con navegación superior y rejillas. */
.marco {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.con-barra .marco { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }

/* ── cabecera ─────────────────────────────────────────────────────────────── */
.cabecera {
  padding: calc(16px + env(safe-area-inset-top, 0px)) 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cabecera__fila-marca {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.marca { display: inline-flex; align-items: baseline; gap: 10px; text-decoration: none; color: var(--tinta); }
.marca:hover { color: var(--tinta); }
.ayuda-movil {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  color: var(--gris);
  border: 1px solid var(--raya);
  background: var(--papel);
  text-decoration: none;
}
.ayuda-movil:hover { color: var(--acento); border-color: var(--acento); }
.nav-escritorio { display: none; }
.marca__nombre {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: 0.5px;
  line-height: 1;
  text-transform: uppercase;
}
.marca__nombre--grande { font-size: 56px; }
.marca__canal { font-size: 13px; font-weight: 500; color: var(--gris); }

.cabecera--atras { display: flex; align-items: center; gap: 8px; padding: calc(14px + env(safe-area-inset-top, 0px)) 12px 8px; }
.atras { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; }
.cabecera__rotulo { display: flex; flex-direction: column; gap: 2px; }

.rotulo {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.05;
  text-transform: uppercase;
}
.mono { font-family: var(--mono); font-size: 13px; color: var(--gris); }
.hora { font-family: var(--mono); font-size: 13px; color: var(--gris); white-space: nowrap; }
.meta { font-size: 13px; color: var(--gris); }

/* ── contenido ────────────────────────────────────────────────────────────── */
.contenido { flex: 1; padding: 4px 20px 0; display: flex; flex-direction: column; gap: 18px; }

.seccion { display: flex; flex-direction: column; gap: 8px; }
.seccion__titulo { font-size: 13px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; color: var(--gris); }

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--raya);
  border-radius: var(--radio);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.tarjeta--enlace { text-decoration: none; color: var(--tinta); }
.tarjeta--enlace:hover { color: var(--tinta); border-color: #98A2B3; }
.tarjeta--vacia { gap: 4px; color: var(--gris); border-style: dashed; background: transparent; }
.tarjeta--vacia p:first-child { color: var(--tinta); }
.tarjeta--lista { padding: 0; gap: 0; }
.tarjeta__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.tarjeta__titulo { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }

.renglon { padding: 12px 16px; display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--tinta); }
.renglon + .renglon { border-top: 1px solid var(--raya); }
.renglon:hover { color: var(--tinta); background: #FAFBFC; }
.renglon:first-child { border-radius: var(--radio) var(--radio) 0 0; }
.renglon:last-child { border-radius: 0 0 var(--radio) var(--radio); }
.renglon:only-child { border-radius: var(--radio); }
.renglon__titulo { line-height: 1.3; overflow-wrap: anywhere; }

/* El estado de un vídeo: lo que YouTube enseñó en la última lectura. El color acompaña, el texto lo dice. */
.estado {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  background: #EEF0F3;
  color: var(--gris);
}
.estado__icono { flex: none; margin-top: 1px; }
.estado--bien { background: var(--bien-fondo); color: var(--bien-tinta); }
.estado--mal { background: var(--mal-fondo); color: var(--mal-tinta); }
.estado--duda { background: var(--duda-fondo); color: var(--duda-tinta); }
.estado--fino { padding: 0; background: transparent; font-weight: 400; }
.estado--fino.estado--bien { color: #0F6B43; }
.estado--fino.estado--mal { color: #A11B1B; }
.estado--fino.estado--duda { color: #7A4B00; }

.nota { font-size: 13px; line-height: 1.45; color: var(--gris); }
.nota--aviso {
  background: var(--duda-fondo);
  border: 1px solid var(--duda-raya);
  border-radius: var(--radio);
  padding: 14px 16px;
  color: var(--duda-tinta);
  font-size: 14px;
}
.nota--mal {
  background: var(--mal-fondo);
  border: 1px solid var(--mal-raya);
  border-radius: var(--radio);
  padding: 12px 16px;
  color: var(--mal-tinta);
  font-size: 14px;
}

/* ── pantalla Aduana ──────────────────────────────────────────────────────── */
.video { display: flex; flex-direction: column; gap: 4px; }
.video__titulo { font-size: 16px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.video__miniatura {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--raya);
  margin-bottom: 8px;
  background: #E4E7EC;
}

.veredicto {
  border: 1px solid var(--raya);
  background: var(--papel);
  border-radius: var(--radio);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.veredicto__icono { flex: none; }
.veredicto__titular { font-family: var(--titulos); font-weight: 700; font-size: 24px; line-height: 1.05; text-transform: uppercase; }
.veredicto__detalle { font-size: 14px; line-height: 1.4; margin-top: 4px; }
.veredicto--bien { background: var(--bien-fondo); border-color: var(--bien-raya); color: var(--bien-tinta); }
.veredicto--bien .veredicto__icono { color: #0F6B43; }
.veredicto--mal { background: var(--mal-fondo); border-color: var(--mal-raya); color: var(--mal-tinta); }
.veredicto--duda { background: var(--duda-fondo); border-color: var(--duda-raya); color: var(--duda-tinta); }

.tiempos {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  background: var(--papel);
  border: 1px solid var(--raya);
  border-radius: var(--radio);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.tiempos__punto { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: baseline; }
.tiempos__punto .hora { white-space: normal; }
.tiempos__punto--pendiente .tiempos__texto { color: var(--gris); }
.tiempos__punto--mal .tiempos__texto { color: #A11B1B; font-weight: 500; }

.dato { font-size: 14px; font-weight: 500; }
.enlaces { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 14px; font-weight: 500; }
.enlaces a { min-height: 44px; display: inline-flex; align-items: center; }

/* ── entrar ───────────────────────────────────────────────────────────────── */
.entrar { display: flex; flex-direction: column; gap: 16px; padding-top: 12vh; }
.entrar__marca { display: flex; flex-direction: column; gap: 6px; }
.entrar__formulario { gap: 14px; padding: 18px 16px; }
.entrar__pie { text-align: center; }
.formulario { display: flex; flex-direction: column; gap: 16px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 13px; font-weight: 600; color: var(--gris); }
.campo input, .campo select {
  height: 48px;
  border: 1px solid #98A2B3;
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;            /* 16 px: iOS no hace zoom al enfocar */
  color: var(--tinta);
  background: var(--papel);
}

.opcion-radio {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  cursor: pointer;
}
.opcion-radio + .opcion-radio {
  border-top: 1px solid var(--raya);
}
.opcion-radio input[type="radio"] {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  accent-color: var(--acento);
  cursor: pointer;
}
.opcion-radio__texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.opcion-radio__titulo {
  font-weight: 600;
  font-size: 15px;
  color: var(--tinta);
}

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 1px solid #98A2B3;
  border-radius: 12px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.boton--principal { border-color: var(--acento); background: var(--acento); color: #FFFFFF; }
.boton--principal:hover { color: #FFFFFF; background: #1941BD; }

/* ── errores ──────────────────────────────────────────────────────────────── */
.error-pagina { display: flex; flex-direction: column; gap: 12px; padding-top: 8vh; }
.error-pagina__codigo { font-family: var(--mono); font-size: 13px; color: var(--gris); }

/* ── pie y barra inferior ─────────────────────────────────────────────────── */
.pie {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 24px 20px 16px;
  font-size: 12px;
  color: var(--gris);
}
.pie a { color: var(--gris); }

.barra {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  max-width: 480px;
  margin: 0 auto;
  background: var(--papel);
  border-top: 1px solid var(--raya);
  padding: 6px 8px calc(10px + env(safe-area-inset-bottom, 0px));
}
.barra__pestana {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 52px;
  text-decoration: none;
  color: var(--gris);
  font-size: 12px;
  font-weight: 500;
  border-radius: 10px;
}
.barra__pestana:hover { color: var(--tinta); }
.barra__pestana[aria-current="page"] { color: var(--acento); font-weight: 600; }

@media (min-width: 481px) and (max-width: 767px) {
  .barra { border: 1px solid var(--raya); border-bottom: 0; border-radius: var(--radio) var(--radio) 0 0; }
}

/* ── Rejillas y adaptaciones para escritorio (>=768px) ─────────────────────── */
.cuadricula-2col, .cuadricula-lateral, .cuadricula-hoy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.paso-badge {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--acento);
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-family: var(--titulos);
  font-size: 15px;
  flex: none;
}

@media (min-width: 768px) {
  .marco {
    max-width: 1080px;
    padding: 0 28px;
  }
  .con-barra .marco {
    padding-bottom: 36px;
  }
  .cabecera {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 22px 0 16px;
    border-bottom: 1px solid var(--raya);
    margin-bottom: 14px;
  }
  .cabecera__fila-marca {
    width: auto;
  }
  .ayuda-movil {
    display: none;
  }
  .nav-escritorio {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .nav-escritorio__enlace {
    padding: 8px 14px;
    border-radius: 10px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--gris);
    transition: background-color 140ms, color 140ms;
  }
  .nav-escritorio__enlace:hover {
    color: var(--tinta);
    background: #EAEFF5;
  }
  .nav-escritorio__enlace[aria-current="page"] {
    color: var(--acento);
    background: #E4ECFC;
    font-weight: 600;
  }
  .nav-escritorio__separador {
    width: 1px;
    height: 18px;
    background: var(--raya);
    margin: 0 4px;
  }
  .nav-escritorio__enlace--salir {
    color: #8C2020;
  }
  .nav-escritorio__enlace--salir:hover {
    color: #B42318;
    background: #FEE4E2;
  }
  .barra {
    display: none;
  }
  .contenido {
    padding: 0;
  }
  .pie {
    padding: 28px 0 20px;
  }

  /* Rejillas para escritorio */
  .cuadricula-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  .cuadricula-lateral {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 24px;
    align-items: start;
  }
  .cuadricula-hoy {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 24px;
    align-items: start;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .tarjeta--enlace, .renglon, .barra__pestana, .boton, .nav-escritorio__enlace {
    transition: color 120ms, background-color 120ms, border-color 120ms;
  }
}