/* Reality Check. Hereda la paleta de site.css (tema de lectura) y sigue el
   aspecto de la calculadora de batería. */

#realidad [hidden] { display: none !important; }
#realidad .entrada { font-size: 21px; color: var(--texto); margin-top: 4px; }
#realidad .privado { font-family: var(--mono); font-size: 13px; letter-spacing: .04em; color: var(--verde-vivo); }

/* la zona para soltar el archivo */
.zona { display: block; border: 1px dashed var(--azul); border-radius: 8px; padding: 26px 20px; margin: 22px 0 14px;
        text-align: center; cursor: pointer; transition: background .15s; }
.zona:hover, .zona.encima { background: rgba(47, 127, 224, .08); }
.zona input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.zona-titulo { display: block; font-family: var(--mono); font-size: 15px; color: var(--texto); }
.zona-ayuda { display: block; font-size: 13.5px; color: var(--tenue); margin-top: 8px; }
.ejemplos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; font-size: 14.5px; color: var(--suave); }

#realidad fieldset { border: 1px solid var(--borde); border-radius: 6px; padding: 16px 18px 18px; margin: 22px 0; }
#realidad legend { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; color: var(--verde-vivo); padding: 0 6px; }
#realidad label:not(.zona) { display: block; font-size: 14.5px; color: var(--suave); }
#realidad input[type=number] {
  font-family: var(--mono); font-size: 14px; color: var(--texto); background: var(--fondo-2, rgba(255,255,255,.03));
  border: 1px solid var(--borde); border-radius: 4px; padding: 7px 9px; width: 100%; margin-top: 5px;
}
#realidad input[type=number]:focus { outline: 0; border-color: var(--azul); }
.campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 18px; }
.ayuda { font-size: 13.5px; color: var(--tenue); margin-top: 10px; max-width: 70ch; }
.error { font-family: var(--mono); font-size: 14px; color: var(--rojo); border: 1px solid var(--rojo); border-radius: 6px; padding: 12px 14px; }

/* resultado */
.resultado, .error { scroll-margin-top: 90px; }
.resultado { border: 1px solid var(--azul); border-radius: 6px; padding: 20px 22px; margin: 26px 0; }
.resultado[data-veredicto="robusto"] { border-color: var(--verde-vivo); }
.resultado[data-veredicto="suerte"], .resultado[data-veredicto="pierde"] { border-color: var(--rojo); }
.encabezado { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.puntaje { font-family: var(--mono); font-size: 54px; line-height: 1; color: var(--azul); }
.puntaje small { font-size: 18px; color: var(--tenue); }
.resultado[data-veredicto="robusto"] .puntaje { color: var(--verde-vivo); }
.resultado[data-veredicto="suerte"] .puntaje, .resultado[data-veredicto="pierde"] .puntaje { color: var(--rojo); }
.encabezado .k, .cifra .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: .1em; color: var(--suave); }
.veredicto { font-size: 16px; color: var(--texto); margin-top: 4px; max-width: 60ch; }
.origen { font-family: var(--mono); font-size: 12.5px; color: var(--tenue); margin-top: 6px; }
.cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px; margin-top: 22px; }
.cifra .v { font-family: var(--mono); font-size: 24px; color: var(--texto); margin-top: 4px; }
.cifra .v.neg { color: var(--rojo); }
.resultado h3 { font-family: var(--mono); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--verde-vivo); margin: 26px 0 6px; }
.lectura { font-size: 17px; color: var(--texto); }

/* gráficas */
#g-suerte, #g-curva { width: 100%; height: auto; display: block; margin-top: 10px; }
#realidad svg .barra { fill: var(--azul); }
#realidad svg .barra.neg { fill: var(--rojo); }
#realidad svg .eje { stroke: var(--borde); stroke-width: 1; }
#realidad svg .cero { stroke: var(--suave); stroke-width: 1.5; stroke-dasharray: 5 5; }
#realidad svg .linea { fill: none; stroke: var(--verde-vivo); stroke-width: 2.5; }
#realidad svg .linea.neg { stroke: var(--rojo); }
#realidad svg .etq { font-family: var(--mono); font-size: 20px; fill: var(--suave); }
#realidad svg .titulo { font-family: var(--mono); font-size: 20px; fill: var(--tenue); }

.banderas { margin: 6px 0 0 18px; font-size: 15.5px; }
.banderas li { margin: 6px 0; color: var(--texto); }
.banderas li.ok { color: var(--verde-vivo); list-style: none; margin-left: -18px; }