/* =========================================================
   profes · la plataforma de las maestras (fase 6)
   Las variables llevan «--pl-» delante: la ficha de la vista previa pone las suyas en :root (--t-texto, --tinta…) y no
   pueden pisarse.
   Copiado una vez de la web de la editorial (web/sitio/css/estilos.css) y adaptado: mismos colores (azul petróleo,
   mostaza, crema), mismas fuentes (Nunito para títulos y botones, Andika para leer), mismos botones redondeados y
   cajas, y la misma escala de seis tamaños de letra (17 px de texto en el móvil, 18 px en el ordenador). Las fichas
   llevan sus propios grises (los del libro: ficha/ficha.css). Nada en mayúsculas sostenidas.
   ========================================================= */
:root {
  --pl-petroleo: #1F5A6E;
  --pl-petroleo-oscuro: #163F4D;
  --pl-petroleo-claro: #E3EDF0;
  --pl-mostaza: #E9A23B;          /* solo detalles, nunca texto */
  --pl-crema: #F4EBDD;
  --pl-crema-suave: #FBF7F0;
  --pl-tinta: #22343B;
  --pl-tinta-suave: #4A5A60;
  --pl-gris-medio: #8A8A8A;
  --pl-linea: #E2DCD2;
  --pl-blanco: #FFFFFF;
  --pl-rojo: #A3361F;
  --pl-verde: #2E6B3E;
  --pl-f-titulo: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  --pl-f-texto: "Andika", "Segoe UI", system-ui, sans-serif;
  --pl-radio: 14px;
  --pl-radio-grande: 22px;
  --pl-sombra: 0 1px 2px rgba(22, 63, 77, .06), 0 8px 24px rgba(22, 63, 77, .08);
  --pl-ancho: 1160px;
  --pl-gutter: clamp(16px, 4vw, 32px);
  --pl-t-titular: 1.75rem; --pl-t-seccion: 1.5rem; --pl-t-subtitulo: 1.25rem; --pl-t-texto: 1.0625rem; --pl-t-pequeno: .9375rem; --pl-t-etiqueta: .8125rem;
}
@media (min-width: 601px) {
  :root { --pl-t-titular: 2.5rem; --pl-t-seccion: 2rem; --pl-t-subtitulo: 1.375rem; --pl-t-texto: 1.125rem; --pl-t-pequeno: 1rem; --pl-t-etiqueta: .875rem; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--pl-blanco); color: var(--pl-tinta); font-family: var(--pl-f-texto); font-size: var(--pl-t-texto); line-height: 1.6; overflow-x: hidden; }
a { color: var(--pl-petroleo); text-underline-offset: 3px; }
a:hover { color: var(--pl-petroleo-oscuro); }
:focus-visible { outline: 3px solid var(--pl-mostaza); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: var(--pl-f-titulo); font-weight: 700; color: var(--pl-petroleo); line-height: 1.15; margin: 0 0 .5em; text-wrap: balance; }
h1 { font-size: var(--pl-t-titular); } h2 { font-size: var(--pl-t-seccion); } h3 { font-size: var(--pl-t-subtitulo); }
p { margin: 0 0 1em; }
.oculto { display: none !important; }
.contenedor { width: 100%; max-width: var(--pl-ancho); margin: 0 auto; padding: 0 var(--pl-gutter); }
.contenedor--estrecho { max-width: 760px; }
.saltar { position: absolute; left: -999px; top: 8px; background: var(--pl-petroleo); color: #fff; padding: 8px 14px; border-radius: 8px; z-index: 100; }
.saltar:focus { left: 8px; }
.suave { color: var(--pl-tinta-suave); }
.pequeno { font-size: var(--pl-t-pequeno); }

/* ---------- Botones (los de la web) ---------- */
.boton { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px;
  background: var(--pl-petroleo); color: #fff; font-family: var(--pl-f-titulo); font-weight: 700; font-size: var(--pl-t-texto); line-height: 1.2;
  border: 2px solid var(--pl-petroleo); border-radius: 999px; text-decoration: none; cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s; }
.boton:hover { background: var(--pl-petroleo-oscuro); border-color: var(--pl-petroleo-oscuro); color: #fff; box-shadow: 0 6px 16px rgba(22, 63, 77, .2); }
.boton:disabled { opacity: .5; cursor: default; box-shadow: none; }
.boton--secundario { background: transparent; color: var(--pl-petroleo); }
.boton--secundario:hover { background: var(--pl-petroleo-claro); color: var(--pl-petroleo-oscuro); }
.boton--pequeno { min-height: 40px; padding: 8px 16px; font-size: var(--pl-t-pequeno); }
.boton--mostaza { background: var(--pl-mostaza); border-color: var(--pl-mostaza); color: #1E2A30; }
.boton--mostaza:hover { background: #F2B65C; border-color: #F2B65C; color: #1E2A30; }
.boton--texto { background: none; border: 0; color: var(--pl-petroleo); padding: 6px 4px; min-height: 40px; text-decoration: underline; font-weight: 600; }
.boton--texto:hover { background: none; color: var(--pl-petroleo-oscuro); box-shadow: none; }
.botones { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 20px 0; }

/* ---------- Cabecera ---------- */
.cabecera-plataforma { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .96); border-bottom: 1px solid var(--pl-linea); }
.cabecera__fila { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 72px; }
.cabecera__logo { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; }
.cabecera__logo svg { height: 30px; width: auto; overflow: visible; }
.navegacion { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.navegacion a, .navegacion button.enlace { font-family: var(--pl-f-titulo); font-weight: 600; font-size: var(--pl-t-pequeno); color: var(--pl-tinta);
  text-decoration: none; padding: 8px 12px; border-radius: 999px; background: none; border: 0; cursor: pointer; }
.navegacion a:hover, .navegacion button.enlace:hover { background: var(--pl-petroleo-claro); color: var(--pl-petroleo-oscuro); }
.navegacion a.activa { background: var(--pl-petroleo-claro); color: var(--pl-petroleo); }
.navegacion .contador { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--pl-mostaza);
  color: #1E2A30; font-size: var(--pl-t-etiqueta); text-align: center; }
.navegacion .contador--aviso { background: #B4533C; color: #fff; }
.navegacion a.navegacion__web { color: var(--pl-petroleo); }
.navegacion select { font-family: var(--pl-f-titulo); font-size: var(--pl-t-pequeno); padding: 6px 10px; border-radius: 999px; border: 2px solid var(--pl-linea); background: #fff; }
.cabecera__menu { display: none; align-items: center; gap: 8px; background: none; border: 2px solid var(--pl-petroleo); color: var(--pl-petroleo);
  border-radius: 999px; padding: 6px 14px; font-family: var(--pl-f-titulo); font-weight: 700; font-size: var(--pl-t-pequeno); min-height: 44px; cursor: pointer; }
.cabecera__menu-icono, .cabecera__menu-icono::before, .cabecera__menu-icono::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; position: relative; }
.cabecera__menu-icono::before, .cabecera__menu-icono::after { content: ""; position: absolute; left: 0; }
.cabecera__menu-icono::before { top: -5px; } .cabecera__menu-icono::after { top: 5px; }
@media (max-width: 1023px) {
  .cabecera__menu { display: inline-flex; }
  .navegacion { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--pl-linea);
    box-shadow: 0 12px 24px rgba(22, 63, 77, .08); flex-direction: column; align-items: stretch; padding: 8px var(--pl-gutter) 16px; display: none; }
  .navegacion.abierta { display: flex; }
  .navegacion a, .navegacion button.enlace { font-size: var(--pl-t-texto); padding: 12px 8px; border-radius: 10px; text-align: left; }
  .cabecera__logo svg { height: 26px; }
}

/* ---------- Secciones y cajas ---------- */
main { min-height: 60vh; outline: none; }
.seccion { padding: clamp(28px, 5vw, 56px) 0; }
.seccion--crema { background: var(--pl-crema-suave); }
.antetitulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pl-f-titulo); font-weight: 700; color: #B4533C; margin: 0 0 12px; font-size: var(--pl-t-pequeno); }
.ruedin { position: relative; width: 22px; height: 18px; flex: none; }
.ruedin::before { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border: 3px solid currentColor; border-radius: 50%; }
.ruedin::after { content: ""; position: absolute; right: 0; bottom: 0; width: 8px; height: 8px; border: 2.5px solid var(--pl-mostaza); border-radius: 50%; }
.seccion__cabecera { max-width: 760px; margin-bottom: clamp(26px, 4vw, 44px); }
.seccion__entrada { color: var(--pl-tinta-suave); }
.seccion--petroleo { background: var(--pl-petroleo); color: #fff; }
.seccion--petroleo h2 { color: #fff; }

/* ---------- Portada (la de la web de la editorial, adaptada: el libro en 3D pasa a ser la ficha de muestra) ---------- */
.hero { padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); background: linear-gradient(180deg, #fff 0%, var(--pl-crema-suave) 100%); overflow: hidden; }
.hero__rejilla { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero__rejilla > * { min-width: 0; }          /* la ficha de muestra mide su ancho real aunque se vea reducida */
.muestra__hoja .vista__ficha { width: 0; }
.hero h1 { color: var(--pl-petroleo); }
.hero__entrada { color: var(--pl-tinta-suave); max-width: 34em; font-size: var(--pl-t-subtitulo); line-height: 1.5; }
.hero__puntos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.hero__puntos li { position: relative; padding-left: 34px; color: var(--pl-tinta); }
.hero__puntos li::before { content: ""; position: absolute; left: 0; top: .2em; width: 20px; height: 20px; border-radius: 50%; background: var(--pl-petroleo-claro); }
.hero__puntos li::after { content: ""; position: absolute; left: 7px; top: calc(.2em + 4px); width: 5px; height: 10px; border-right: 2.5px solid var(--pl-petroleo);
  border-bottom: 2.5px solid var(--pl-petroleo); transform: rotate(45deg); }
.muestra { position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; padding: clamp(12px, 3vw, 36px) 0; }
.muestra__rueda { position: absolute; width: 92%; aspect-ratio: 1; border-radius: 50%; border: clamp(18px, 2.4vw, 30px) solid var(--pl-petroleo-claro);
  left: 4%; top: 50%; transform: translateY(-54%); }
.muestra__ruedin { position: absolute; width: 22%; aspect-ratio: 1; border-radius: 50%; border: clamp(10px, 1.4vw, 16px) solid #F7DEB4; right: 0; bottom: 4%; }
.muestra__hoja { position: relative; width: min(100%, 420px); overflow: hidden; background: #fff; border-radius: 6px; transform: rotate(-1.5deg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 6px 14px 34px rgba(22, 50, 60, .22); user-select: none; -webkit-user-select: none; }
.muestra__hoja .ficha { transform-origin: 0 0; }
.muestra__pie { position: relative; margin-top: 18px; font-family: var(--pl-f-titulo); font-weight: 700; font-size: var(--pl-t-pequeno); color: var(--pl-tinta-suave);
  background: #fff; padding: 6px 14px; border-radius: 999px; box-shadow: var(--pl-sombra); }
@media (max-width: 860px) { .hero__rejilla { grid-template-columns: 1fr; } .muestra__hoja { width: min(100%, 380px); } }
.pasos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.pasos--tres { grid-template-columns: repeat(3, 1fr); }
.paso-portada { position: relative; background: #F1F1EF; border-radius: var(--pl-radio-grande); padding: 64px 24px 24px; }
.seccion--crema .paso-portada { background: #fff; }
.paso__num { position: absolute; top: 20px; left: 24px; width: 34px; height: 34px; border-radius: 50%; background: var(--pl-mostaza); color: #1E2A30;
  font-family: var(--pl-f-titulo); font-weight: 700; display: grid; place-items: center; }
.paso-portada h3 { color: var(--pl-tinta); margin-bottom: .35em; }
.paso-portada p { color: var(--pl-tinta-suave); margin: 0; }
@media (max-width: 960px) { .pasos { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pasos, .pasos--tres { grid-template-columns: 1fr; } }
.ruedines { margin-top: clamp(36px, 5vw, 60px); max-width: 760px; }
.indicador-nivel { display: inline-flex; gap: 4px; vertical-align: middle; }
.indicador-nivel i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; display: block; }
.indicador-nivel[data-nivel="1"] i:nth-child(-n+1), .indicador-nivel[data-nivel="2"] i:nth-child(-n+2), .indicador-nivel[data-nivel="3"] i:nth-child(-n+3),
.indicador-nivel[data-nivel="4"] i { background: currentColor; }
.niveles-muestra { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.niveles-muestra li { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 999px; background: var(--pl-petroleo-claro);
  color: var(--pl-petroleo); font-family: var(--pl-f-titulo); font-weight: 700; font-size: var(--pl-t-pequeno); }
.llamada { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 40px; }
.llamada p { color: #DCE8EC; margin: 0; max-width: 36em; }
.boton--claro { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.boton--claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.caja { background: #fff; border-radius: var(--pl-radio-grande); padding: clamp(18px, 3vw, 28px); box-shadow: var(--pl-sombra); }
.caja--crema { background: var(--pl-crema-suave); box-shadow: none; }
.caja--petroleo { background: var(--pl-petroleo-claro); box-shadow: none; }

/* ---------- Formularios ---------- */
.formulario { display: grid; gap: 16px; }
.campo { display: grid; gap: 6px; }
.campo label, .campo .etiqueta { font-family: var(--pl-f-titulo); font-weight: 700; font-size: var(--pl-t-pequeno); color: var(--pl-tinta); }
.campo input, .campo select, .campo textarea { font: inherit; font-size: var(--pl-t-texto); padding: 12px 14px; border: 2px solid var(--pl-linea);
  border-radius: 12px; background: #fff; color: var(--pl-tinta); width: 100%; }
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--pl-petroleo); outline: none; }
.campo .ayuda { font-size: var(--pl-t-pequeno); color: var(--pl-tinta-suave); }
.campo.con-error input, .campo.con-error select { border-color: var(--pl-rojo); }
.campo--casilla { display: flex; gap: 12px; align-items: flex-start; }
.campo--casilla input { width: 24px; height: 24px; margin-top: 3px; flex: none; accent-color: var(--pl-petroleo); }
.campo--casilla label { font-family: var(--pl-f-texto); font-weight: 400; font-size: var(--pl-t-texto); }
.dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 640px) { .dos-columnas { grid-template-columns: 1fr; } }
.contrasena { display: flex; gap: 8px; } .contrasena input { flex: 1; }
.aviso-alumnos { padding: 12px 16px; border-radius: 12px; background: var(--pl-crema); font-family: var(--pl-f-titulo); font-weight: 700; }
.error { color: var(--pl-rojo); font-family: var(--pl-f-titulo); font-weight: 700; }
.bien { color: var(--pl-verde); font-family: var(--pl-f-titulo); font-weight: 700; }

/* ---------- Biblioteca ---------- */
.barra-filtros { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: flex-end; margin: 6px 0 18px; }
.barra-filtros .campo { min-width: 200px; flex: 1 1 200px; }
.barra-filtros .campo--buscar { flex: 2 1 280px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--pl-petroleo-claro);
  color: var(--pl-petroleo); font-family: var(--pl-f-titulo); font-weight: 700; font-size: var(--pl-t-etiqueta); }
.chip--mostaza { background: #FBEBD3; color: #6B4A12; }
.chip--verde { background: #E2F0E5; color: var(--pl-verde); }
.ciclo { margin: 34px 0 10px; }
.ciclo > h2 { border-bottom: 3px solid var(--pl-mostaza); padding-bottom: 6px; display: inline-block; }
.sentido > h3 { margin: 22px 0 10px; color: var(--pl-tinta); }
.unidad { margin: 0 0 26px; }
.unidad__cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; margin-bottom: 10px; }
.unidad__cab h4 { margin: 0; font-family: var(--pl-f-titulo); font-size: var(--pl-t-subtitulo); color: var(--pl-petroleo); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tarjeta { background: #fff; border: 1px solid var(--pl-linea); border-radius: var(--pl-radio); padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.tarjeta__cab { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; }
.tarjeta__codigo { font-family: var(--pl-f-titulo); font-weight: 700; color: var(--pl-petroleo); }
.tarjeta__texto { color: var(--pl-tinta); }
.tarjeta__datos { font-size: var(--pl-t-pequeno); color: var(--pl-tinta-suave); }
.niveles { display: flex; flex-wrap: wrap; gap: 6px; }
.niveles button { font-family: var(--pl-f-titulo); font-weight: 700; font-size: var(--pl-t-pequeno); min-height: 40px; padding: 6px 12px; border-radius: 999px;
  border: 2px solid #CFC6B8; background: #fff; color: var(--pl-tinta); cursor: pointer; }
.niveles button[aria-pressed="true"] { border-color: var(--pl-petroleo); background: var(--pl-petroleo); color: #fff; }
.tarjeta__botones { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.propuesta { margin: 8px 0 26px; }

/* ---------- Vista previa ---------- */
.dialogo { position: fixed; inset: 0; background: rgba(22, 40, 48, .55); z-index: 200; display: flex; align-items: flex-start; justify-content: center;
  overflow: auto; padding: 24px 12px; }
.dialogo__caja { background: #fff; border-radius: var(--pl-radio-grande); padding: clamp(18px, 3vw, 30px); width: min(760px, 100%); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.vista { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: start; }
@media (max-width: 720px) { .vista { grid-template-columns: 1fr; } }
.vista__marco { position: relative; overflow: hidden; border: 1px solid var(--pl-linea); border-radius: 8px; background: #fff; justify-self: center;
  user-select: none; -webkit-user-select: none; }
.vista__marco .ficha { transform-origin: 0 0; }
.vista__agua { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.vista__agua span { transform: rotate(-35deg); font-family: var(--pl-f-titulo); font-weight: 700; font-size: 44px; color: rgba(180, 83, 60, .35);
  white-space: nowrap; border: 4px solid rgba(180, 83, 60, .3); padding: 6px 18px; border-radius: 12px; }
@media print { .dialogo, .vista__marco { display: none !important; } }

/* ---------- Mi selección ---------- */
.lista-sel { display: grid; gap: 10px; margin: 18px 0; }
.item-sel { display: grid; grid-template-columns: auto 1fr auto; gap: 10px 14px; align-items: center; background: #fff; border: 1px solid var(--pl-linea);
  border-radius: var(--pl-radio); padding: 12px 14px; }
.item-sel.no-disponible { border-color: var(--pl-rojo); background: #FCF1EE; }
.item-sel__num { font-family: var(--pl-f-titulo); font-weight: 700; color: var(--pl-petroleo); min-width: 2em; }
.item-sel__que { display: grid; gap: 6px; }
.item-sel__selects { display: flex; flex-wrap: wrap; gap: 8px; }
.item-sel__selects select { font: inherit; font-size: var(--pl-t-texto); padding: 6px 10px; border-radius: 10px; border: 2px solid var(--pl-linea); }
.item-sel__botones { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 640px) { .item-sel { grid-template-columns: auto 1fr; } .item-sel__botones { grid-column: 1 / -1; justify-content: flex-start; } }
.descargar { display: grid; gap: 10px; padding: 20px; border-radius: var(--pl-radio-grande); background: var(--pl-petroleo-claro); }

/* ---------- Listas (selecciones, historial) ---------- */
.lista { display: grid; gap: 12px; }
.fila-lista { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; background: #fff;
  border: 1px solid var(--pl-linea); border-radius: var(--pl-radio); padding: 14px 16px; }
.fila-lista__que { display: grid; gap: 2px; }
.fila-lista__titulo { font-family: var(--pl-f-titulo); font-weight: 700; color: var(--pl-petroleo); }

/* ---------- Aviso breve y pie ---------- */
.aviso { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 300; max-width: min(92vw, 640px); padding: 14px 20px;
  border-radius: 14px; background: var(--pl-petroleo-oscuro); color: #fff; font-family: var(--pl-f-titulo); font-weight: 700; box-shadow: var(--pl-sombra); }
.aviso.error { background: var(--pl-rojo); }
/* El pie, como el de la web de la editorial: oscuro, con el logo en blanco y la web de la editorial */
.pie-plataforma { margin-top: 48px; padding: 40px 0 36px; background: var(--pl-petroleo-oscuro); color: #C9D9DE; font-size: var(--pl-t-pequeno); }
main:has(> .seccion--petroleo:last-child) + .pie-plataforma { margin-top: 0; }
.pie-plataforma__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; }
.pie-plataforma__marca svg { height: 30px; width: auto; overflow: visible; }
.pie-plataforma a { color: #fff; font-family: var(--pl-f-titulo); font-weight: 700; text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.pie-plataforma a:hover { text-decoration: underline; color: #fff; }
.pie-plataforma__texto { margin: 12px 0 0; }

/* ---------- Mi buzón: una bandeja de correo y, dentro, el hilo como un correo ---------- */
.contenedor--medio { max-width: 960px; }
.visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.bandeja__cab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.bandeja__cab p { margin: 0; }
.bandeja { border: 1px solid var(--pl-linea); border-radius: var(--pl-radio); background: #fff; overflow: hidden; }
.bandeja__fila { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; grid-template-areas: "punto asunto estado fecha" "punto tema estado fecha";
  gap: 2px 16px; align-items: center; padding: 14px 18px; text-decoration: none; color: var(--pl-tinta); border-top: 1px solid var(--pl-linea); }
.bandeja__fila:first-child { border-top: 0; }
.bandeja__fila:hover { background: var(--pl-crema-suave); }
.bandeja__punto { grid-area: punto; width: 10px; height: 10px; border-radius: 50%; }
.bandeja__fila--nueva .bandeja__punto { background: #B4533C; }
.bandeja__asunto { grid-area: asunto; font-family: var(--pl-f-titulo); font-weight: 600; color: var(--pl-petroleo); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja__fila--nueva .bandeja__asunto { font-weight: 800; }
.bandeja__tema { grid-area: tema; font-size: var(--pl-t-pequeno); color: var(--pl-tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bandeja__estado { grid-area: estado; }
.bandeja__fecha { grid-area: fecha; font-size: var(--pl-t-pequeno); color: var(--pl-tinta-suave); white-space: nowrap; }
@media (max-width: 640px) {
  .bandeja__fila { grid-template-columns: 14px minmax(0, 1fr); grid-template-areas: "punto asunto" "punto tema" "punto estado" "punto fecha"; }
}
.hilo-correo { background: #fff; border: 1px solid var(--pl-linea); border-radius: var(--pl-radio); margin-bottom: 22px; overflow: hidden; }
.hilo-correo__cab { padding: 20px 22px 14px; border-bottom: 1px solid var(--pl-linea); }
.hilo-correo__cab h1 { font-size: var(--pl-t-seccion); margin: 0 0 8px; overflow-wrap: anywhere; }
.hilo-correo__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: var(--pl-tinta-suave); font-size: var(--pl-t-pequeno); }
.correo-msg { padding: 16px 22px 18px; border-top: 1px solid var(--pl-linea); }
.correo-msg:nth-of-type(1) { border-top: 0; }
.correo-msg--editorial { background: var(--pl-crema-suave); }
.correo-msg__de { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin: 0 0 8px; font-family: var(--pl-f-titulo); }
.correo-msg__de b { color: var(--pl-petroleo); }
.correo-msg__de .suave { font-size: var(--pl-t-pequeno); }
.correo-msg__texto { overflow-wrap: anywhere; }
.cargando { padding: 40px 0; color: var(--pl-tinta-suave); }