/* Charlightning: hoja de estilos con aire de 2005. Paleta de Windows XP «Luna»: azul de la
   barra de título, verde del botón Inicio, beige #ECE9D8 de las ventanas y #7F9DB9 de las casillas. */

:root {
  --fondo: #d9dfe8;
  --papel: #ffffff;
  --texto: #222222;
  --suave: #666666;
  --borde: #8a9bb5;
  --azul: #1c3f7a;
  --azul-claro: #e8eef7;
  --enlace: #0033cc;
  --visitado: #551a8b;
  --bien: #1f5fae;      /* cumple: azul, como el programa (no verde: daltonismo) */
  --mal: #ff0000;       /* no cumple: rojo puro */
  --error: #c0392b;
  --aviso-fondo: #fdf3ec;
  --aviso-borde: #d9a27e;
  --verde-xp: #3c9b3c;
  --verde-xp-oscuro: #2a7a2a;
  --beige-xp: #ece9d8;
  --casilla-xp: #7f9db9;
  --seleccion-xp: #c5d9f3;
  color-scheme: light;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 12px 0 24px;
  background: var(--fondo) repeating-linear-gradient(45deg, transparent 0 6px, rgba(255,255,255,.25) 6px 7px);
  color: var(--texto);
  font: 12px/1.5 Verdana, Tahoma, Geneva, sans-serif;
}

a { color: var(--enlace); }
a:visited { color: var(--visitado); }
a:hover { color: var(--error); }

#pagina {
  max-width: 900px;
  margin: 0 auto;
  background: var(--papel);
  border: 1px solid var(--borde);
  box-shadow: 3px 3px 0 #b3bccb;
}

/* --- Encabezado ---------------------------------------------------------- */

#cabecera {
  padding: 18px 16px 14px;
  background: linear-gradient(#3a80f3 0%, #1f5fd8 45%, #0a3ca6 100%);
  border-bottom: 3px solid var(--verde-xp);
  color: #fff;
}

#cabecera .titulo {
  font: bold 28px Georgia, "Times New Roman", serif;
  color: #fff;
  text-decoration: none;
  text-shadow: 2px 2px 0 #0d2347;
}

#cabecera .lema { font-size: 11px; color: #d6e2f5; margin-top: 2px; }

#barra {
  padding: 3px 16px;
  background: linear-gradient(#fbfaf6, var(--beige-xp));
  border-bottom: 1px solid #aca899;
  font-size: 10px;
  color: var(--suave);
}

/* --- Cuerpo: menú a la izquierda, contenido a la derecha ------------------ */

#cuerpo { display: flex; align-items: stretch; }

#menu {
  flex: 0 0 170px;
  background: var(--azul-claro);
  border-right: 1px solid var(--borde);
  padding: 10px 8px;
}

.menu-titulo {
  background: linear-gradient(#5a83c4, #2c548f);
  color: #fff;
  font-weight: bold;
  font-size: 11px;
  padding: 2px 6px;
  margin: 8px 0 4px;
  border: 1px solid #1c3f7a;
}

#menu ul { list-style: none; margin: 0 0 6px; padding: 0; }

#menu li a {
  display: block;
  padding: 3px 4px 3px 14px;
  border-bottom: 1px dotted var(--borde);
  text-decoration: none;
  position: relative;
}

#menu li a::before { content: "»"; position: absolute; left: 3px; color: var(--verde-xp); }
#menu li a:hover { background: #fff; text-decoration: underline; }
#menu li a[aria-current="page"] { font-weight: bold; color: var(--texto); background: #fff; }

main {
  flex: 1;
  min-width: 0;
  padding: 14px 18px 20px;
}

/* --- Texto --------------------------------------------------------------- */

h1 {
  font: bold 20px Georgia, "Times New Roman", serif;
  color: var(--azul);
  margin: 0 0 8px;
  border-bottom: 2px solid var(--azul);
  padding-bottom: 3px;
}

h2 {
  font-size: 13px;
  color: var(--azul);
  margin: 18px 0 6px;
  border-bottom: 1px solid #c8d2e2;
}

.subtitulo { color: var(--suave); font-style: italic; margin-top: 0; }
.pequeno { color: var(--suave); font-size: 10px; }

/* --- Cajas --------------------------------------------------------------- */

.tarjeta {
  background: #fafbfd;
  border: 1px solid var(--borde);
  padding: 8px 10px;
  margin: 10px 0;
}

.tarjeta > h2:first-child {
  margin: -8px -10px 8px;
  padding: 3px 10px;
  background: linear-gradient(#eef2f8, #d3dcea);
  border-bottom: 1px solid var(--borde);
}

.rejilla {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* --- Botones y formularios ---------------------------------------------- */

.boton, button {
  display: inline-block;
  font: bold 11px Tahoma, Verdana, sans-serif;
  padding: 3px 12px;
  color: #000;
  background: linear-gradient(#ffffff, #f3f2ec 60%, #d6d0c0);
  border: 1px solid #003c74;
  border-radius: 3px;
  text-decoration: none;
  cursor: pointer;
}

.boton:hover, button:hover:not(:disabled) { box-shadow: inset 0 0 0 2px #b9d1f3, 0 0 0 1px #3a80f3; }

.boton:visited { color: #000; }
.boton:active, button:active { background: linear-gradient(#d6d0c0, #f3f2ec); }
.boton.secundario, button.secundario { font-weight: normal; }
button:disabled { color: #888; cursor: wait; }

label { display: block; font-weight: bold; margin: 8px 0 2px; font-size: 11px; }

input, select, textarea {
  font: 12px Verdana, Tahoma, sans-serif;
  color: #000;
  background: #fff;
  border: 1px solid var(--casilla-xp);
  padding: 2px 3px;
  max-width: 100%;
}

textarea {
  width: 100%;
  min-height: 300px;
  font: 12px/1.35 "Courier New", Courier, monospace;
}

.fila { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: end; }
.fila > div { min-width: 0; }

/* --- Tablas --------------------------------------------------------------- */

.tabla-envuelta { overflow-x: auto; }

table {
  border-collapse: collapse;
  width: 100%;
  border: 1px solid var(--borde);
  font-variant-numeric: tabular-nums;
}

th, td { text-align: left; padding: 3px 6px; border: 1px solid #c8d2e2; }
th { background: linear-gradient(#eef2f8, #d3dcea); color: var(--azul); font-size: 11px; }
tbody tr:nth-child(even) td { background: #f3f6fb; }
td.num, th.num { text-align: right; }
td.num { white-space: nowrap; }

.cumple { color: var(--bien); font-weight: bold; }
.no-cumple { color: var(--mal); font-weight: bold; }

.aviso {
  background: var(--aviso-fondo);
  border: 1px solid var(--aviso-borde);
  padding: 4px 8px;
  margin: 6px 0;
}

.aviso::before { content: "\26A0  "; color: #b5471b; }

.error { color: var(--error); font-weight: bold; }
.multilinea { white-space: pre-line; }

pre {
  background: #f8f8f8;
  border: 1px dashed var(--borde);
  padding: 8px;
  overflow-x: auto;
  font: 11px "Courier New", Courier, monospace;
}

.qr img { width: 100%; max-width: 200px; height: auto; border: 1px solid #000; background: #fff; }

/* --- Pie ------------------------------------------------------------------- */

#pie {
  border-top: 3px solid var(--verde-xp);
  background: linear-gradient(#1f5fd8, #0a3ca6);
  color: #d6e2f5;
  font-size: 10px;
  text-align: center;
  padding: 8px 12px;
}

#pie .resolucion { color: #9fb6da; font-style: italic; }

/* --- En el celular el menú pasa arriba (en 2005 no hacía falta; hoy sí). --- */

@media (max-width: 640px) {
  body { padding: 0; }
  #pagina { border: 0; box-shadow: none; }
  #cuerpo { flex-direction: column; }
  #menu { flex: none; border-right: 0; border-bottom: 1px solid var(--borde); padding: 4px 8px 8px; }
  #menu ul { display: flex; flex-wrap: wrap; }
  #menu li a { border-bottom: 0; }
  #menu .enlaces, #menu .insignias { display: none; }
  /* El menú se reparte: Menú y Ejemplos arriba, el contador al final de la página. */
  #menu { display: contents; }
  #menu > .seccion { background: var(--azul-claro); padding: 4px 8px; }
  #menu > .seccion.principal { padding-top: 6px; }
  #menu > .seccion.ejemplos { padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
  main { order: 1; }
  #menu > .seccion.visitas { order: 2; left: 0; top: 0; padding: 6px 8px 10px; border-top: 1px solid var(--borde); }
  #menu .contador { margin: 4px 0 0; }
  #menu .contador br { display: none; }
  main { padding: 12px 16px 16px; }
}

/* --- Formularios de la calculadora (como los LabelFrame del programa) ------------- */

fieldset {
  border: 1px solid var(--borde);
  margin: 10px 0;
  padding: 6px 10px 10px;
  background: #fafbfd;
  min-width: 0;
}

legend {
  font-weight: bold;
  color: var(--azul);
  padding: 0 4px;
}

fieldset fieldset { background: #fff; }

.campo {
  display: grid;
  grid-template-columns: minmax(130px, 42%) minmax(0, 1fr);
  gap: 2px 8px;
  align-items: center;
  padding: 2px 0;
  border-bottom: 1px dotted #e1e6ee;
}

.campo > label { font-weight: normal; margin: 0; font-size: 11px; }
.campo .control { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-width: 0; }
.campo select { width: 100%; max-width: 420px; }
.campo .unidad { color: var(--suave); font-size: 11px; }
.campo.en-error > label { color: var(--error); font-weight: bold; }
.campo.en-error input, .campo.en-error select { border-color: var(--error); }

.radios { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 2px 0 6px; }
.radios label { display: inline; font-weight: normal; margin: 0; }
.aviso-ng { margin: 6px 0 0; font-size: 11px; color: var(--suave); }

/* Pestañas (el Notebook de ttk) */
.pestanas { margin: 8px 0; }
.pestanas-barra { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 1px solid var(--borde); }
.pestanas-barra button {
  border: 1px solid var(--borde);
  border-bottom: 0;
  background: linear-gradient(#f4f4f4, #d8dde6);
  font-weight: normal;
  margin-bottom: -1px;
}
.pestanas-barra button[aria-selected="true"] {
  background: #fff;
  font-weight: bold;
  border-bottom: 1px solid #fff;
}
.pestanas-panel { border: 1px solid var(--borde); border-top: 0; padding: 6px 8px; background: #fff; }

/* La lista de elementos arriba y el formulario del elegido debajo (ListaDeFormularios).
   En el programa la lista va a la izquierda; aquí hay menos ancho y el formulario lo necesita. */
.lista-doble { display: grid; grid-template-columns: 1fr; gap: 8px; }
.lista-izquierda { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: flex-start; }
.lista-izquierda select { flex: 1 1 200px; max-width: 320px; }
.lista-botones { display: flex; flex-direction: column; gap: 4px; }
.lista-botones button { padding: 2px 10px; }
.lista-izquierda .pequeno { flex-basis: 100%; }
.lista-derecha { min-width: 0; }

/* Barra de botones de arriba */
.barra-herramientas {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding: 4px;
  background: linear-gradient(#fbfaf6, var(--beige-xp));
  border: 1px solid #aca899;
}
.barra-herramientas .evaluar { margin-left: 8px; font-size: 11px; }
.barra-herramientas .evaluar label { display: inline; font-weight: normal; margin: 0 4px 0 0; }

details.proyecto { margin: 8px 0; border: 1px solid var(--borde); padding: 4px 8px; background: #fafbfd; }
details.proyecto summary { cursor: pointer; font-weight: bold; color: var(--azul); }

/* Resultados */
.resultados tr.riesgo td { border-top: 2px solid var(--borde); }
.resultados tr.riesgo.cumple td, .resultados tr.cumple td { color: var(--bien); }
.resultados tr.riesgo.no-cumple td { color: var(--mal); }
.resultados tbody tr { cursor: pointer; }
.resultados tr.elegida td { background: var(--seleccion-xp) !important; }
.resultados td.sangria { padding-left: 22px; }
.resultados.obsoleto td, .resultados.obsoleto .aviso { color: #8a8a8a !important; }
.resultados.obsoleto #resumen { color: #8a8a8a; font-style: italic; }
#resumen.cumple, #desglose-titulo.cumple { color: var(--bien); font-weight: bold; }
#resumen.no-cumple, #desglose-titulo.no-cumple { color: var(--mal); font-weight: bold; }

body.trabajando, body.trabajando * { cursor: progress !important; }

@media (max-width: 640px) {
  .campo { grid-template-columns: 1fr; }
}


/* El contador de visitas: dígitos de odómetro, verde fósforo sobre negro */
.contador { margin: 6px 0 4px; color: #fff; }
.odometro {
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  background: #222;
  border: 2px outset #777;
  vertical-align: middle;
}
.odometro span {
  display: inline-block;
  width: 1.05em;
  padding: 1px 0;
  text-align: center;
  font: bold 14px/1.1 "Courier New", Courier, monospace;
  color: #39ff14;
  text-shadow: 0 0 4px #39ff14aa;
  background: linear-gradient(#000 0%, #1c1c1c 50%, #000 51%, #111 100%);
}

/* --- Menú: contador y botoncitos de 88x31 ------------------------------------------ */

#menu .contador { color: var(--texto); font-size: 10px; text-align: center; margin: 4px 0 8px; line-height: 1.8; }

.insignias { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 12px; }

.b88 {
  display: flex;
  width: 88px;
  height: 31px;
  border: 1px solid #000;
  outline: 1px solid #fff;
  text-decoration: none;
  font: 9px/1.05 Verdana, Tahoma, sans-serif;
  color: #fff;
  overflow: hidden;
  background: var(--fondo-b88);
}
.b88:visited, .b88:hover { color: #fff; }
.b88:hover { filter: brightness(1.15); }
.b88 b {
  flex: 0 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  font: bold 12px Verdana, sans-serif;
  background: var(--logo-b88, #fff);
  color: var(--letra-logo, #000);
  border-right: 1px solid #000;
}
.b88 i { font-style: normal; font-weight: bold; padding: 3px 4px; display: flex; flex-direction: column; justify-content: center; }
.b88 small { font-weight: normal; font-size: 8px; }
.b88.linux   { --fondo-b88: linear-gradient(#444, #000); }
.b88.linux b { font-size: 17px; background: #fff; }
.b88.gnu     { --fondo-b88: linear-gradient(#a42e2b, #6d1715); --logo-b88: #fff; --letra-logo: #a42e2b; }
.b88.python  { --fondo-b88: linear-gradient(#3b78a8, #1f4a6e); --logo-b88: #fff; --letra-logo: #306998; }
.b88.debian  { --fondo-b88: linear-gradient(#e0244f, #a80030); --logo-b88: #fff; --letra-logo: #d70a53; }
.b88.debian b { font-size: 18px; }
.b88.firefox { --fondo-b88: linear-gradient(#2a5db0, #102f6b); --logo-b88: #ff8a00; }
.b88.firefox b { font-size: 16px; }
.b88.w3c     { --fondo-b88: linear-gradient(#1a66b5, #0b3e75); --logo-b88: #fff; --letra-logo: #005a9c; }

/* --- Barra de la calculadora: archivo a la izquierda, lo importante grande a la derecha --- */

.barra-herramientas { justify-content: space-between; gap: 8px; padding: 6px 8px; }
.grupo-archivo { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.grupo-archivo .evaluar { margin-left: 0; }
.grupo-acciones { display: flex; gap: 6px; margin-left: auto; }

button.grande {
  font-size: 14px;
  padding: 7px 18px;
  color: #fff;
  border-radius: 4px;
  text-shadow: 1px 1px 0 #0006;
}
button.grande.verde {
  background: linear-gradient(#5fc35f, #3c9b3c 50%, #2a7a2a);
  border: 1px solid #1d5a1d;
}
button.grande.azul {
  background: linear-gradient(#5b9cf5, #2c6fe0 50%, #1a4fb0);
  border: 1px solid #0b3a8a;
}
button.grande:hover:not(:disabled) { filter: brightness(1.08); box-shadow: 0 0 0 1px #fff, 0 0 0 2px #0003; }
button.grande:active { filter: brightness(0.92); }

@media (max-width: 640px) {
  .grupo-acciones { margin-left: 0; width: 100%; }
  button.grande { flex: 1; }
}

/* --- Lo hecho a mano en 2005 ---------------------------------------------------------- */

/* La franja: la fecha a la izquierda y un letrero que corre, como un <marquee>. */
#barra { display: flex; gap: 12px; align-items: center; overflow: hidden; white-space: nowrap; }
#barra .fecha { flex: none; }
#barra .letrero { flex: 1; overflow: hidden; color: #b00000; font-weight: bold; }
#barra .letrero span { display: inline-block; padding-left: 100%; animation: letrero 28s linear infinite; }
@keyframes letrero { to { transform: translateX(-100%); } }
@media (prefers-reduced-motion: reduce) {
  #barra .letrero span { animation: none; padding-left: 0; }
}

/* Cuadros que quedaron un poquito corridos (nadie los arregló nunca). */
#menu .visitas { position: relative; left: 3px; top: 1px; }
.b88.debian { position: relative; left: 4px; }
#cabecera .lema { position: relative; left: 1px; top: 2px; }
.tarjeta:nth-of-type(3) { position: relative; top: 3px; }

.en-construccion {
  margin: 12px 0;
  padding: 6px 10px;
  border: 2px dashed #000;
  background: repeating-linear-gradient(45deg, #ffffff 0 10px, #e9e9e9 10px 20px);
  font-weight: bold;
  text-align: center;
}

/* «Apoyar el proyecto»: verde fosforescente parpadeando, sobre negro para que se lea. */
#menu li a.apoyar,
#menu li a.apoyar[aria-current="page"] {
  color: #39ff14;
  background: #000;
  font-weight: bold;
  text-shadow: 0 0 4px #39ff14;
  animation: parpadeo 1s steps(1, end) infinite;
}
#menu li a.apoyar::before { color: #39ff14; }
#menu li a.apoyar:hover { background: #111; text-decoration: underline; }
@keyframes parpadeo { 50% { color: transparent; text-shadow: none; } }
@media (prefers-reduced-motion: reduce) {
  #menu li a.apoyar { animation: none; }
}

/* BROMA (temporal): el anuncio flotante de Laura, de los que estorban. Para quitarlo,
   borrar este bloque y el <div class="publicidad"> al comienzo del <main> de cada página. */
.publicidad {
  position: fixed;
  right: 24px;
  top: 45%;
  z-index: 50;
  padding: 10px 16px 10px 12px;
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: 3px 3px 0 #0a3ca6;
  animation: flotar 3s ease-in-out infinite;
}
.publicidad a { color: #0000ee; text-decoration: underline; font: bold 13px Verdana, sans-serif; }
.publicidad a:visited { color: #0000ee; }
.publicidad .cerrar {
  position: absolute;
  top: 1px;
  right: 2px;
  padding: 0 3px;
  border: 0;
  border-radius: 0;
  background: none;
  color: #999;
  font: 9px/1 Verdana, sans-serif;
  box-shadow: none;
}
@keyframes flotar { 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .publicidad { animation: none; } }
@media (max-width: 640px) { .publicidad { right: 8px; top: auto; bottom: 16px; } }

/* Formulario de contacto: el campo trampa no se ve (solo lo llenan los robots). */
.trampa { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
#contacto textarea { width: 100%; min-height: 140px; font: 12px Verdana, Tahoma, sans-serif; }

/* Ayuda de un campo: qué es el dato y cuándo cambiarlo. */
.campo .ayuda { flex-basis: 100%; color: var(--suave); font-size: 10px; line-height: 1.35; }

/* Cuando un riesgo no cumple: la oferta de hacer el estudio, discreta. */
.cta-servicio { margin: 6px 0 0; padding: 6px 10px; background: #eef5e6; border: 1px solid #9cc47a; }
.resultados.obsoleto .cta-servicio { display: none; }

/* Una lista cuyo valor guardado coincide con varias filas de la norma: hay que elegir cuál. */
.campo select.por-elegir { border: 1px dashed #3a80f3; background: #eef3fa; font-style: italic; }

/* El globo de ayuda de una casilla, como los globos de Windows XP (pero sin amarillo). */
.campo .globo {
  display: none;
  grid-column: 1 / -1;
  position: relative;
  margin: 4px 0 6px;
  padding: 6px 9px 6px 26px;
  background: #f3f7fd;
  border: 1px solid #7f9db9;
  border-radius: 4px;
  box-shadow: 2px 2px 0 #c5d9f3;
  font-size: 11px;
  line-height: 1.45;
}
.campo .globo::before {
  content: "i";
  position: absolute;
  left: 7px;
  top: 6px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #2c6fe0;
  color: #fff;
  font: bold italic 10px/13px Georgia, serif;
  text-align: center;
}
.campo.activo .globo { display: block; }
.campo.activo > label { color: var(--azul); font-weight: bold; }

/* Las tres pestañas grandes del caso (Estructura, Zonas, Líneas): son los pasos, se notan. */
.pestanas.principales { margin-top: 14px; }
.pestanas.principales > .pestanas-barra { gap: 3px; border-bottom: 2px solid #0a3ca6; padding-left: 4px; }
.pestanas.principales > .pestanas-barra > button {
  font: bold 12px Tahoma, Verdana, sans-serif;
  padding: 4px 10px 3px;
  color: #fff;
  background: linear-gradient(#5b9cf5, #2c6fe0 55%, #1a4fb0);
  border: 1px solid #0b3a8a;
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  text-shadow: 1px 1px 0 #0005;
  margin-bottom: 0;
}
.pestanas.principales > .pestanas-barra > button:hover:not([aria-selected="true"]) { filter: brightness(1.1); box-shadow: none; }
.pestanas.principales > .pestanas-barra > button[aria-selected="true"] {
  color: #0a3ca6;
  background: #fff;
  border: 2px solid #0a3ca6;
  border-bottom: 0;
  border-top: 2px solid var(--verde-xp);
  box-shadow: none;
  text-shadow: none;
  position: relative;
  top: 2px;
  padding-bottom: 5px;
}
.pestanas.principales > .pestanas-barra .paso {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #fff;
  color: #0a3ca6;
  font-size: 9px;
  line-height: 14px;
  text-align: center;
  margin-right: 2px;
}
.pestanas.principales > .pestanas-barra > button[aria-selected="true"] .paso { background: #0a3ca6; color: #fff; }
.pestanas.principales > .pestanas-barra .cuantas { font-weight: normal; font-size: 11px; opacity: .9; }
.pestanas.principales > .pestanas-panel { border: 1px solid #0a3ca6; border-top: 0; padding: 8px; }
@media (max-width: 640px) {
  .pestanas.principales > .pestanas-barra > button { flex: 1; padding: 4px 4px 3px; font-size: 12px; }
}

/* Las pestañas de cada zona (R1–R4 y Sistemas internos): un escalón por debajo de las grandes.
   Las de los riesgos que no están marcados en «Evaluar» quedan en gris. */
.pestanas.riesgos > .pestanas-barra > button {
  font: bold 11px Tahoma, Verdana, sans-serif;
  color: #0a3ca6;
  background: linear-gradient(#f5f9ff, #c5d9f3);
  border-color: #7f9db9;
}
.pestanas.riesgos > .pestanas-barra > button[aria-selected="true"] {
  background: #fff;
  border-top: 2px solid var(--verde-xp);
}
body.sin-r1 .pestanas.riesgos .riesgo-1,
body.sin-r2 .pestanas.riesgos .riesgo-2,
body.sin-r3 .pestanas.riesgos .riesgo-3,
body.sin-r4 .pestanas.riesgos .riesgo-4 {
  color: #8a8a8a;
  background: linear-gradient(#fafafa, #e4e4e4);
  border-color: #c0c0c0;
  font-weight: normal;
  font-style: italic;
}

/* Datos del proyecto: el resumen de lo escrito se ve aunque el recuadro esté cerrado. */
details.proyecto { background: linear-gradient(#f5f9ff, #e4edf9); border-color: #7f9db9; }
details.proyecto summary { padding: 2px 0; }
details.proyecto summary::before { content: "\1F4CB  "; }
details.proyecto summary .sin-llenar { color: var(--suave); font-weight: normal; font-style: italic; }
details.proyecto[open] { background: #fafbfd; }