/* AlertaClick — hoja unica. Sin dependencias, sin fuentes externas: el CSP es
   `default-src 'self'` y traer una fuente de un CDN obligaria a abrirlo. */
:root{--tinta:#1b2733;--suave:#5b6b7c;--linea:#dde5ec;--fondo:#f7f9fb;--acento:#0b5fa5;--alarma:#a4212f}
*{box-sizing:border-box}
body{margin:0;background:var(--fondo);color:var(--tinta);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--acento)}
main{max-width:60rem;margin:0 auto;padding:1.5rem 1rem 3rem}

.cab{background:#fff;border-bottom:1px solid var(--linea);padding:1rem;
  display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.marca{font-weight:700;font-size:1.25rem;text-decoration:none;color:var(--tinta)}
.lema{margin:0;color:var(--suave);font-size:.9rem}

h1{font-size:1.5rem;margin:0 0 1rem}
h2{font-size:1.15rem;margin:2rem 0 .75rem;padding-bottom:.25rem;border-bottom:1px solid var(--linea)}
h3{font-size:1rem;margin:1.25rem 0 .5rem;color:var(--suave)}

.filtros{background:#fff;border:1px solid var(--linea);border-radius:.5rem;
  padding:1rem;display:grid;gap:.75rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.campo{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.campo.ancho{grid-column:1/-1}
label{font-size:.8rem;color:var(--suave)}
input,select{padding:.5rem;border:1px solid var(--linea);border-radius:.25rem;
  font:inherit;background:#fff;min-width:0}
.acciones{flex-direction:row;align-items:end;gap:.75rem}
button{padding:.55rem 1.25rem;border:0;border-radius:.25rem;background:var(--acento);
  color:#fff;font:inherit;cursor:pointer}
.limpiar{align-self:center;font-size:.9rem}

.error{background:#fdecee;border-left:4px solid var(--alarma);padding:.75rem 1rem;
  border-radius:.25rem;margin:0 0 1rem}
.conteo,.vacio,.nota{color:var(--suave);font-size:.9rem}
.nota{margin-top:2rem;border-top:1px solid var(--linea);padding-top:.75rem}

.resultados{list-style:none;padding:0;margin:1rem 0 0;display:grid;gap:.75rem}
.resultados li{background:#fff;border:1px solid var(--linea);border-radius:.5rem;padding:1rem}
.titulo{font-weight:600;text-decoration:none;display:block;margin-bottom:.4rem}
.titulo:hover{text-decoration:underline}
.meta,.datos{margin:.25rem 0;display:flex;flex-wrap:wrap;gap:.5rem 1rem;font-size:.85rem}
.meta{color:var(--tinta)}
.datos{color:var(--suave)}
.inst{font-weight:600}
.estado,.tipo,.adj{background:var(--fondo);border:1px solid var(--linea);
  border-radius:1rem;padding:.05rem .6rem;font-size:.8rem}
.adj{background:#e8f4ea;border-color:#bcd9c2}
.monto{font-variant-numeric:tabular-nums}

.paginas{display:flex;gap:1rem;align-items:center;justify-content:center;margin:1.5rem 0}

.ficha{background:#fff;border:1px solid var(--linea);border-radius:.5rem;padding:1.5rem}
.volver{margin:0 0 1rem;font-size:.9rem}
.cabecera{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:.4rem 1rem;margin:0}
.cabecera dt{color:var(--suave);font-size:.85rem}
.cabecera dd{margin:0}
.ausente{color:var(--suave);background:var(--fondo);border:1px dashed var(--linea);
  border-radius:.25rem;padding:.75rem}

.tabla-scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:.9rem}
th,td{text-align:left;padding:.5rem;border-bottom:1px solid var(--linea);vertical-align:top}
th{color:var(--suave);font-weight:600}

.cronologia,.actos{list-style:none;padding:0;margin:0;display:grid;gap:.4rem}
.cronologia li,.actos li{display:flex;gap:1rem;font-size:.9rem;flex-wrap:wrap}
.cuando{color:var(--suave);min-width:6rem;font-variant-numeric:tabular-nums}
.desierto{color:var(--alarma);font-weight:600}

.aviso{background:#fff;border:1px solid var(--linea);border-radius:.5rem;padding:2rem;text-align:center}
.detalle{text-align:left;background:var(--fondo);padding:.75rem;overflow-x:auto;font-size:.8rem}

.marcar{display:inline-flex;align-items:center;gap:.35rem;float:right;
  font-size:.8rem;color:var(--suave);cursor:pointer}
.marcar input{padding:0}
.acciones-comparar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin:1rem 0 0}
.nota-en-linea{color:var(--suave);font-size:.8rem}

.comparativa th[scope=row]{white-space:nowrap;width:14rem}
.comparativa thead th{vertical-align:bottom;min-width:12rem}
.comparativa thead .titulo{margin-bottom:.25rem}
.comparativa .codigo,.comparativa .quitar{display:block;font-size:.75rem;font-weight:400}
.comparativa .campo-nombre{width:14rem}
.comparativa tr.difiere{background:#fff8e6}
.comparativa tr.difiere th[scope=row]{border-left:3px solid #d9a441}
.sin-dato{color:var(--suave);font-style:italic}
.inferido{margin-left:.4rem;font-size:.7rem;font-weight:400;color:var(--suave);
  border:1px dashed var(--linea);border-radius:.25rem;padding:0 .3rem}

.pie{max-width:60rem;margin:0 auto;padding:1.5rem 1rem 3rem;color:var(--suave);
  font-size:.85rem;border-top:1px solid var(--linea)}
.pie .menor{font-size:.8rem}

/* --- Cabecera con navegacion (acceso web) ------------------------------- */
.cab{justify-content:space-between}
.cab-marca{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.cab-nav{display:flex;align-items:center;gap:1rem}
.nav-enlace{color:var(--suave);text-decoration:none;font-size:.95rem}
.nav-enlace:hover{color:var(--acento)}
.nav-salir{margin:0}

/* --- Botones ------------------------------------------------------------ */
.boton{display:inline-block;padding:.6rem 1.35rem;border-radius:.3rem;
  text-decoration:none;font:inherit;font-weight:600;cursor:pointer;border:1px solid transparent}
.boton-primario{background:var(--acento);color:#fff}
.boton-primario:hover{background:#094e88}
.boton-secundario{background:#fff;color:var(--acento);border-color:var(--linea)}
.boton-secundario:hover{border-color:var(--acento)}
.boton-sobrio{background:#fff;color:var(--tinta);border-color:var(--linea);
  padding:.4rem 1rem;font-weight:500;font-size:.95rem}
.boton-sobrio:hover{border-color:var(--acento);color:var(--acento)}
.boton-ancho{width:100%;text-align:center}

/* --- Portada ------------------------------------------------------------ */
.hero{padding:3rem 0 2.5rem;border-bottom:1px solid var(--linea);text-align:center}
.hero-kicker{margin:0 0 .75rem;color:var(--acento);font-size:.8rem;
  font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.hero-titulo{font-size:2.1rem;line-height:1.2;margin:0 auto 1rem;max-width:30ch}
.hero-bajada{margin:0 auto 1.75rem;max-width:52ch;color:var(--suave);font-size:1.05rem}
.hero-acciones{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap;margin:0 0 1rem}
.hero-nota{margin:0;color:var(--suave);font-size:.85rem}

.valor-titulo{border:0;text-align:center;font-size:1.35rem;margin:2.5rem 0 1.5rem}
.tarjetas{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr))}
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:.5rem;padding:1.25rem;
  display:flex;flex-direction:column}
.tarjeta h3{margin:0 0 .5rem;color:var(--tinta);font-size:1.05rem}
.tarjeta p{margin:0 0 .75rem;color:var(--suave);font-size:.95rem;flex:1}
.tarjeta-estado{margin:0;font-size:.75rem;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;flex:0}
.tarjeta-estado-listo{color:#1c7a4a}
.tarjeta-estado-proximo{color:var(--suave)}

.fuente{margin-top:2.5rem;background:#fff;border:1px solid var(--linea);
  border-radius:.5rem;padding:1.5rem}
.fuente p{margin:0 0 .75rem}
.fuente p:last-child{margin:0}

/* --- Acceso ------------------------------------------------------------- */
.acceso{max-width:24rem;margin:3rem auto;background:#fff;border:1px solid var(--linea);
  border-radius:.5rem;padding:2rem}
.acceso-titulo{margin:0 0 .35rem;font-size:1.4rem}
.acceso-bajada{margin:0 0 1.5rem;color:var(--suave);font-size:.9rem}
.acceso-form{display:flex;flex-direction:column;gap:1rem}
.acceso-form .campo{gap:.35rem}
.campo-nombre{font-size:.85rem;color:var(--suave)}
.campo-caja{padding:.6rem;border:1px solid var(--linea);border-radius:.25rem;font:inherit}
.campo-caja:focus{outline:2px solid var(--acento);outline-offset:1px}
.acceso-error{margin:0 0 1rem;padding:.7rem .9rem;border-radius:.3rem;
  background:#fdecee;border:1px solid #f3c2c8;color:var(--alarma);font-size:.9rem}
.acceso-pie{margin:1.5rem 0 0;text-align:center}

@media (max-width:34rem){
  .hero-titulo{font-size:1.6rem}
  .cab{flex-direction:column;align-items:flex-start;gap:.75rem}
}

/* --- Ficha 5B-2: bloques ------------------------------------------------ */
.bloque{margin-top:2rem;padding-top:.5rem}
.bloque>h2{margin-top:0}
.bloque h4{font-size:.9rem;margin:1.25rem 0 .5rem;color:var(--suave);
  text-transform:uppercase;letter-spacing:.04em}

.aviso-metodo{background:#fff8e6;border:1px solid #f0dfae;border-left:3px solid #c99a2e;
  border-radius:.3rem;padding:.8rem 1rem;margin:0 0 1.25rem;font-size:.9rem}

.item-bloque{background:#fff;border:1px solid var(--linea);border-radius:.5rem;
  padding:1rem 1.25rem;margin-bottom:1rem}
.item-bloque>h3{margin-top:0;color:var(--tinta);font-size:1rem}

.ausente-inline{color:var(--suave);font-style:italic;font-size:.85rem}
.nota-columna{margin-top:.6rem}
td.num{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
th{white-space:nowrap}

@media (max-width:40rem){
  .item-bloque{padding:.85rem}
  .aviso-metodo{font-size:.85rem}
  /* Las tablas ya viven dentro de .tabla-scroll, que desplaza en horizontal:
     el cuerpo de la pagina nunca se desplaza lateralmente. */
}

/* --- Busqueda 5B-3 ------------------------------------------------------ */
.pista{font-size:.72rem;color:var(--suave);line-height:1.35;margin-top:.15rem}
.pista code{background:var(--fondo);padding:0 .2rem;border-radius:.15rem}

.filtros-activos{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:.9rem 0 0}
.filtros-activos-titulo{font-size:.8rem;color:var(--suave)}
.chip{display:inline-flex;align-items:center;gap:.35rem;background:#fff;
  border:1px solid var(--linea);border-radius:1rem;padding:.2rem .65rem;
  font-size:.8rem;text-decoration:none;color:var(--tinta)}
.chip:hover{border-color:var(--acento);color:var(--acento)}
.chip-x{color:var(--suave);font-weight:700}
.chip-limpiar{border-style:dashed;color:var(--suave)}

.avisos-busqueda{margin:.9rem 0 0;padding:.7rem .9rem .7rem 2rem;
  background:#fff8e6;border:1px solid #f0dfae;border-left:3px solid #c99a2e;
  border-radius:.3rem;font-size:.85rem}
.avisos-busqueda li{margin:.15rem 0}

/* Urgencia. Tres niveles, y el color NUNCA va solo: la etiqueta dice lo mismo
   en texto, porque un daltonico no debe perder el plazo de una licitacion. */
.urgencia{margin:.4rem 0 0;font-size:.8rem;font-weight:600;display:inline-block;
  padding:.15rem .55rem;border-radius:.9rem;border:1px solid transparent}
.urgencia-alta{background:#fdecee;border-color:#f3c2c8;color:#a4212f}
.urgencia-media{background:#fff4e0;border-color:#f0dcb4;color:#8a5a10}
.urgencia-baja{background:#eaf5ee;border-color:#c5e3d1;color:#1c7a4a}
.urgencia-nula{background:var(--fondo);border-color:var(--linea);color:var(--suave);font-weight:500}

.sin-resultados{background:#fff;border:1px solid var(--linea);border-radius:.5rem;
  padding:1.5rem;margin-top:1rem}
.sin-resultados .vacio{margin:0 0 .75rem;font-size:1.05rem}
.sugerencias{margin:0 0 .4rem;color:var(--suave);font-size:.9rem}
.sugerencias-lista{margin:0;padding-left:1.2rem;font-size:.9rem}
.sugerencias-lista li{margin:.25rem 0}

@media (max-width:40rem){
  .filtros{grid-template-columns:1fr}
  .filtros-activos{gap:.3rem}
  .chip{font-size:.75rem}
}

/* --- Panel de mercado 5B-5 ---------------------------------------------- */
.panel-cab{display:flex;justify-content:space-between;align-items:flex-end;
  gap:1rem;flex-wrap:wrap;margin-bottom:1.5rem}
.panel-cab h1{margin:0 0 .3rem}
.panel-bajada{margin:0;color:var(--suave);font-size:.92rem;max-width:46ch}
.periodo{display:flex;align-items:center;gap:.5rem;margin:0}
.periodo label{font-size:.8rem;color:var(--suave)}

.bloque-titulo{font-size:1.1rem;margin:2.25rem 0 .9rem;padding-bottom:.3rem;
  border-bottom:1px solid var(--linea)}

.kpis{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.kpi{background:#fff;border:1px solid var(--linea);border-radius:.5rem;padding:1.1rem 1.25rem}
.kpi-cifra{margin:0;font-size:1.9rem;font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.kpi-nombre{margin:.3rem 0 .2rem;font-weight:600;font-size:.92rem}
.kpi-nota{margin:0;color:var(--suave);font-size:.78rem;line-height:1.35}
.kpi-variacion{margin:.3rem 0 0;font-size:.8rem;font-weight:600}
.kpi-plataforma{border-style:dashed;background:var(--fondo)}
.sube{color:#1c7a4a}
.baja{color:var(--alarma)}

/* Serie mensual. Barras en CSS puro: el CSP tiene script-src 'none' y no se
   relaja para dibujar un grafico. La anchura sale de una clase de un juego
   CERRADO de 21 pasos, calculada en el servidor. */
.serie{background:#fff;border:1px solid var(--linea);border-radius:.5rem;padding:1rem 1.25rem}
.serie-fila{display:grid;grid-template-columns:4.5rem 1fr 3.5rem;align-items:center;
  gap:.75rem;padding:.22rem 0}
.serie-mes{font-size:.8rem;color:var(--suave);font-variant-numeric:tabular-nums}
.serie-barra{display:block;background:var(--fondo);border-radius:.15rem;height:1.05rem;overflow:hidden}
.barra{display:block;height:100%;background:var(--acento);border-radius:.15rem}
.serie-valor{text-align:right;font-size:.85rem;font-variant-numeric:tabular-nums}
.serie-parcial .barra{background:repeating-linear-gradient(45deg,
  var(--suave),var(--suave) 3px,transparent 3px,transparent 6px)}
.serie-parcial .serie-mes::after{content:' *';color:var(--alarma);font-weight:700}
.barra-0{width:0%}
.barra-5{width:5%}
.barra-10{width:10%}
.barra-15{width:15%}
.barra-20{width:20%}
.barra-25{width:25%}
.barra-30{width:30%}
.barra-35{width:35%}
.barra-40{width:40%}
.barra-45{width:45%}
.barra-50{width:50%}
.barra-55{width:55%}
.barra-60{width:60%}
.barra-65{width:65%}
.barra-70{width:70%}
.barra-75{width:75%}
.barra-80{width:80%}
.barra-85{width:85%}
.barra-90{width:90%}
.barra-95{width:95%}
.barra-100{width:100%}

.senales{list-style:none;margin:0;padding:0;display:grid;gap:.7rem}
.senal{background:#fff;border:1px solid var(--linea);border-left:3px solid var(--acento);
  border-radius:.35rem;padding:.7rem .95rem}
.senal-apertura{border-left-color:#c99a2e}
.senal-sujeto{display:block;font-weight:600;font-size:.95rem}
.senal-detalle{display:block;color:var(--suave);font-size:.82rem;margin-top:.1rem}
.senal-frase{display:block;color:var(--suave);font-size:.85rem;margin-top:.25rem}

@media (max-width:40rem){
  .panel-cab{flex-direction:column;align-items:stretch}
  .serie-fila{grid-template-columns:3.6rem 1fr 2.6rem;gap:.5rem}
  .kpi-cifra{font-size:1.6rem}
}

/* =========================================================================
   5B-7 · El espacio privado: oportunidades guardadas y busquedas guardadas
   =========================================================================
   Reutiliza `.resultados`, `.chip`, `.boton` y `.ausente`, que ya existen: una
   lista de oportunidades guardadas ES una lista de resultados con otra cabecera,
   y darle clases propias produciria dos estilos que divergen a la primera
   correccion. Lo que se anade aqui es solo lo que no tenia forma todavia. */

.guardadas{max-width:62rem;margin:0 auto;padding:1.5rem 1rem 3rem}
.guardadas h1{margin:0 0 .35rem}

/* La accion suelta dentro de una fila. Un `<form>` es de bloque y romperia la
   linea; esto lo devuelve al flujo sin tocar el resto. */
.linea-accion{display:inline-flex;flex-wrap:wrap;align-items:flex-end;gap:.6rem;margin:.5rem 0 0}
.linea-accion .campo{margin:0}

.acciones-guardada{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.9rem;margin-top:.6rem;
  padding-top:.6rem;border-top:1px solid var(--linea)}

/* La nota privada del cliente. Se distingue del dato del corpus a proposito:
   son dos mundos y confundirlos en pantalla es como se acaban confundiendo en
   la cabeza de quien lee. */
.nota-privada{background:var(--fondo);border-left:3px solid var(--acento);
  border-radius:.25rem;padding:.5rem .7rem;margin:.5rem 0 0;font-size:.9rem}
.nota-privada .etiqueta{color:var(--suave);font-weight:600;margin-right:.3rem}

/* El titulo de una fila que no enlaza a ninguna parte: el cartel ya no consta,
   o es el nombre de una busqueda guardada. */
.titulo-ausente{font-weight:600;font-size:1rem;margin:0}

/* Guardar la busqueda actual. Va debajo de los filtros, separado. */
.guardar-busqueda{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.8rem;
  background:#fff;border:1px solid var(--linea);border-radius:.5rem;
  padding:.9rem 1rem;margin:1rem 0 0}
.guardar-busqueda .campo{margin:0;min-width:18rem;flex:1 1 18rem}
.guardar-busqueda .marcar{float:none}

/* La ficha: guardar / quitar. */
.acciones-ficha{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.9rem;
  background:#fff;border:1px solid var(--linea);border-radius:.5rem;
  padding:.8rem 1rem;margin:.75rem 0 1rem}
.acciones-ficha .campo{margin:0;min-width:16rem;flex:1 1 16rem}
.marca-guardada{display:inline-flex;align-items:center;gap:.35rem;
  color:var(--acento);font-weight:600;font-size:.92rem}

@media (max-width:40rem){
  .guardar-busqueda,.acciones-ficha,.acciones-guardada{flex-direction:column;align-items:stretch}
  .guardar-busqueda .campo,.acciones-ficha .campo{min-width:0}
}

/* =========================================================================
   5B-8 · Perfil comercial y compatibilidad
   =========================================================================
   Reutiliza `.chip`, `.bloque`, `.resultados` y `.guardar-busqueda`, que ya
   existen: un concepto del perfil ES un chip y el formulario de agregar ES el
   mismo formulario en linea que el de guardar una busqueda. Darles clases
   propias produciria dos estilos que divergen a la primera correccion. */

.perfil{max-width:62rem;margin:0 auto;padding:1.5rem 1rem 3rem}
.perfil h1{margin:0 0 .35rem}
.perfil .bloque{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--linea)}

/* Un concepto excluido se distingue del que se ofrece. No es decoracion: una
   exclusion DESCARTA oportunidades, y confundirla visualmente con lo que la
   empresa si vende es como se configura lo contrario de lo que se queria. */
.chip-excluido{border-color:var(--alarma);color:var(--alarma)}

/* El boton de quitar vive dentro del chip. `<form>` es de bloque y romperia la
   linea; esto lo devuelve al flujo sin tocar el resto. */
.chip-quitar{display:inline;margin:0}
.chip-quitar .chip-x{background:none;border:0;padding:0 0 0 .2rem;cursor:pointer;
  color:var(--suave);font-weight:700;font-size:.85rem;line-height:1}
.chip-quitar .chip-x:hover{color:var(--alarma)}

/* La compatibilidad en la ficha. Los niveles reutilizan la escala de urgencia
   —tres colores, sin leyenda que aprenderse— y anaden el caso «excluida». */
.compatibilidad .sugerencias-lista{margin:.2rem 0 .9rem}
.compatibilidad .codigo{color:var(--suave);font-size:.78rem;margin-left:.35rem}
.compat-alta{background:#e8f5ea;border-color:#2e7d32;color:#1b5e20}
.compat-media{background:#fff8e1;border-color:#c99a2e;color:#7a5b12}
.compat-baja{background:var(--fondo);border-color:var(--linea);color:var(--suave)}
.compat-excluida{background:#fdecea;border-color:var(--alarma);color:#8e1b13;font-weight:600}
.compat-nula{background:var(--fondo);border-color:var(--linea);color:var(--suave)}

/* =========================================================================
   5B-9 · Bandeja personalizada
   ========================================================================= */
.bandeja{max-width:62rem;margin:0 auto;padding:1.5rem 1rem 3rem}
.bandeja h1{margin:0 0 .35rem}
.tarjeta-oportunidad .titulo{display:block;margin:.3rem 0}
.razones-tarjeta{margin:.35rem 0 .5rem;font-size:.88rem}
.razon-coincide::marker{content:'✓  '}
.razon-penaliza::marker{content:'•  '}
.razon-penaliza{color:var(--suave)}
.chip-activo{border-color:var(--acento);color:var(--acento);font-weight:600}

/* =========================================================================
   5B-10 · Centro de alertas
   -------------------------------------------------------------------------
   Se reutiliza el vocabulario que ya existe —`resultados`, `meta`, `datos`,
   `titulo`, `inst`, `paginas`, `chip`, `razones-tarjeta`, `compat-*`— y aqui
   solo entra lo que de verdad es nuevo. Una hoja paralela que repitiera lo
   mismo con otros nombres envejeceria por separado, y a los dos meses las
   tarjetas de alerta y las de oportunidad no se pareceran.
   ========================================================================= */
.alertas{max-width:62rem;margin:0 auto;padding:1.5rem 1rem 3rem}
.cabecera-alertas h1{margin:0 0 .35rem}

/* La tarjeta hereda de `.resultados li`; solo se distingue la NO LEIDA. */
.tarjeta-alerta{background:#fff;border:1px solid var(--linea);border-radius:.5rem;padding:1rem}

/* La barra lateral es lo unico que separa una alerta nueva de una leida. Un
   fondo de color entero convertiria la bandeja en un semaforo y dejaria de
   poder leerse cuando hubiera veinte. */
.alerta-nueva{border-left:3px solid var(--acento)}

.etiqueta-nueva{display:inline-block;padding:.1rem .45rem;border-radius:.2rem;
  background:var(--acento);color:#fff;font-size:.7rem;font-weight:700;letter-spacing:.04em}

/* La insignia de la barra de navegacion y la de la pestana. */
.insignia{display:inline-block;min-width:1.25rem;padding:0 .3rem;border-radius:.75rem;
  background:var(--acento);color:#fff;font-size:.72rem;line-height:1.25rem;
  text-align:center;font-weight:700}

.filtros-alertas{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:1rem 0 .5rem}

/* El formulario de politica: una linea, sin cuadricula, porque son dos campos. */
.politica-alertas{display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;
  background:var(--fondo);border:1px solid var(--linea);border-radius:.5rem;
  padding:.85rem 1rem;margin:1rem 0}
.politica-alertas .casilla{display:flex;gap:.4rem;align-items:center}
.politica-alertas select{padding:.35rem .5rem;border:1px solid var(--linea);border-radius:.25rem}

/* Un formulario dentro de una linea de acciones no debe romper el flujo. */
.en-linea{display:inline}

.aviso-alertas{background:#eef4fb;border:1px solid var(--linea);border-left:3px solid var(--acento);
  border-radius:.35rem;padding:.85rem 1rem;margin:1rem 0}
.aviso-alertas p{margin:.25rem 0}

/* «Calculada con una version anterior de su perfil». Se ADVIERTE, no se
   corrige: el hecho historico permanece tal como se registro. */
.aviso-obsoleto{font-style:italic}