/* ============================================================================ Modo revisión — solo se activa con ?revision=1 Sin esa clase en , nada de esto existe. ========================================================================== */ .en-revision .rev-bloque { position: relative; outline: 2px dashed var(--verde); outline-offset: -2px; border-radius: 4px; } .en-revision .rev-bloque--con-nota { outline: 3px solid var(--ambar); background-color: rgb(232 163 23 / .06); } .rev-chapa { position: absolute; top: 4px; left: 4px; z-index: 40; min-width: 30px; height: 24px; padding: 0 .45em; font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--tinta); background: var(--verde); border-radius: 5px; box-shadow: 0 1px 4px rgb(0 0 0 / .25); transition: transform var(--sal-rapida), background var(--sal-rapida); } .rev-chapa:hover { transform: scale(1.12); background: var(--amarillo); } .rev-bloque--con-nota > .rev-chapa { background: var(--ambar); color: #fff; } /* --- diálogo de nota -------------------------------------------------- */ .rev-dialogo { width: min(94vw, 460px); padding: 1.5rem; border: 0; border-radius: var(--radio-lg); background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-3); } .rev-dialogo::backdrop { background: rgb(18 35 46 / .55); } .rev-dialogo__cod { font-family: var(--mono); font-size: var(--t-xs); font-weight: 700; letter-spacing: .1em; color: var(--verde-hondo); } .rev-dialogo__nombre { font-size: var(--t-md); margin-block: .1em .8em; } .rev-dialogo textarea { width: 100%; padding: .7em .85em; border: 2px solid var(--linea); border-radius: var(--radio-sm); background: var(--crema); font-size: var(--t-base); resize: vertical; } .rev-dialogo textarea:focus { border-color: var(--verde); outline: none; } .rev-dialogo menu { display: flex; justify-content: flex-end; gap: .5rem; margin: 1rem 0 0; padding: 0; } .rev-btn { min-height: 44px; padding: .5em 1.3em; font-weight: 700; font-size: var(--t-sm); color: var(--tinta); background: var(--verde); border-radius: var(--radio-pill); transition: background var(--sal-rapida); } .rev-btn:hover { background: var(--verde-hover); } .rev-btn--plano { background: transparent; box-shadow: inset 0 0 0 2px var(--linea); } .rev-btn--plano:hover { background: var(--crema); } /* --- barra flotante --------------------------------------------------- */ .rev-barra { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 60; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; justify-content: center; max-width: calc(100vw - 1.5rem); padding: .55rem .75rem; background: var(--tinta); border-radius: var(--radio-pill); box-shadow: var(--sombra-3); } .rev-barra__n { padding-inline: .6rem; font-size: var(--t-sm); font-weight: 700; color: #fff; white-space: nowrap; } .rev-aviso { position: fixed; left: 50%; bottom: 5.5rem; transform: translateX(-50%); z-index: 70; padding: .65em 1.2em; background: var(--verde-hondo); color: #fff; font-weight: 700; font-size: var(--t-sm); border-radius: var(--radio-pill); box-shadow: var(--sombra-2); animation: revAviso 2.6s ease both; } @keyframes revAviso { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%,88% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; transform: translate(-50%, -6px); } } /* el visor del catálogo ya usa la parte baja: la barra sube un poco */ .body--visor .rev-barra { bottom: 4.5rem; } @media (max-width: 520px) { .rev-barra { gap: .35rem; padding: .45rem .55rem; } .rev-btn { padding: .45em .9em; font-size: var(--t-xs); } } /* dentro de la barra oscura el botón plano necesita contraste propio */ .rev-barra .rev-btn--plano { color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .3); } .rev-barra .rev-btn--plano:hover { background: rgb(255 255 255 / .12); }