:root { --tinta: #1a1a1a; --papel: #fff; --gris: #666; --linea: #e3e3e3; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body { margin: 0; font: 16px/1.5 -apple-system, system-ui, sans-serif;
       color: var(--tinta); background: var(--papel); padding-bottom: 4.5rem; }
.cabecera { position: sticky; top: 0; z-index: 10; background: var(--tinta);
            padding-top: env(safe-area-inset-top); }
.franja { padding: .6rem 1rem .1rem; color: #fff; font-size: .85rem; font-weight: 600; }
.cabecera.vieja { background: #a15c00; }
.sello { padding: 0 1rem .5rem; color: rgba(255, 255, 255, .62); font-size: .68rem;
         letter-spacing: .02em; }
.pantalla { display: none; padding: 1rem; }
.pantalla.activa { display: block; }
#p-lector.activa { padding: 0; display: flex; flex-direction: column; }
.lector-barra { display: flex; align-items: center; gap: .6rem; padding: .4rem;
                border-bottom: 1px solid var(--linea); }
#lector-titulo { font-size: .8rem; color: var(--gris); overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
#visor { width: 100%; height: calc(100vh - 9rem); border: 0; background: #fff; }
.volver { padding: .5rem .9rem; border: 1px solid var(--linea); background: #fff;
          border-radius: 8px; font-size: .9rem; }
h2 { font-size: 1rem; margin: 1.6rem 0 .6rem; }
.accion { padding: .9rem 1.2rem; font-size: 1rem; border: 1px solid var(--tinta);
          background: var(--tinta); color: #fff; border-radius: 8px; margin: .3rem .3rem .3rem 0; }
.accion[disabled] { opacity: .45; }
.accion.peligro { background: #b00020; border-color: #b00020; }
.barra { height: 14px; background: var(--linea); border-radius: 7px; overflow: hidden; margin: .6rem 0; }
.relleno { height: 100%; width: 0; background: var(--tinta); transition: width .25s; }
.pie { color: var(--gris); font-size: .85rem; margin: .2rem 0 1rem; }
.estado { margin-top: 1.5rem; padding: 1.2rem; border-radius: 10px;
          font-size: 1.15rem; font-weight: 600; }
.estado:empty { display: none; }
.estado.bien { background: #d8f3dc; color: #14532d; }
.estado.ojo  { background: #fff3cd; color: #7a5200; }
.estado.malo { background: #fde2e1; color: #7f1d1d; }
.portada { display: block; width: 100%; text-align: left; padding: 1rem;
           margin-bottom: .5rem; border: 1px solid var(--linea); border-radius: 10px;
           background: #fff; font-size: 1rem; font-weight: 600; }
.portada small { display: block; font-weight: 400; color: var(--gris); font-size: .8rem; }
.barra-nav { position: fixed; bottom: 0; left: 0; right: 0; display: flex;
             border-top: 1px solid var(--linea); background: #fff; z-index: 10;
             padding-bottom: env(safe-area-inset-bottom); }
.barra-nav button { flex: 1; padding: .9rem .2rem; border: 0; background: none;
                    font-size: .8rem; color: var(--gris); }
.barra-nav button.activa { color: var(--tinta); font-weight: 700; }
input[type=url] { width: 100%; padding: .8rem; font-size: 1rem;
                  border: 1px solid var(--linea); border-radius: 8px; }
ul { list-style: none; padding: 0; }
li { margin: .5rem 0; padding: .7rem; border: 1px solid var(--linea); border-radius: 8px;
     display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
li small { color: var(--gris); display: block; font-size: .75rem; word-break: break-all; }
li button { padding: .4rem .7rem; border: 1px solid var(--linea); background: #fff;
            border-radius: 6px; font-size: .8rem; }

.aviso { background: #eef2ff; color: #1e3a8a; border-radius: 10px;
         padding: .9rem 1rem; margin-bottom: 1rem; font-size: .9rem; }
.aviso .barra { margin: .6rem 0 0; height: 8px; }
.aviso .relleno { background: #1e3a8a; }

.ficha { border: 1px solid var(--linea); border-radius: 10px; padding: .9rem;
         margin-bottom: .8rem; }
.ficha h3 { margin: 0 0 .4rem; font-size: .95rem; }
.ficha .dato { font-size: .85rem; color: var(--gris); margin: .15rem 0; }
.ficha .dato b { color: var(--tinta); }
.ficha.nada { color: var(--gris); font-size: .85rem; }
.desglose { margin-top: .6rem; padding-top: .6rem; border-top: 1px solid var(--linea); }
.desglose div { display: flex; justify-content: space-between; font-size: .82rem;
                padding: .12rem 0; }