/* Bitácora (diseño §10): papel, tinta, sellos y pases de abordar. El color de la agencia reemplaza al óxido
   (--h-principal y --h-acento, por CSSOM). Todo bajo .hoja[data-estilo="bitacora"]. */
.hoja[data-estilo="bitacora"] { --h-fondo: #F5EFE4; --h-hoja: #FFFDF8; --h-letra: #1B2433; --h-suave: #6F604C; }
.hoja[data-estilo="bitacora"] .hoja__titulo { font-variation-settings: "opsz" 144; }
.hoja[data-estilo="bitacora"] .hoja__foto {
  margin: 22px 10px 0; padding: 10px 10px 36px; background: #FFFFFF; transform: rotate(-1.6deg);
  box-shadow: 0 14px 26px -14px rgba(40, 30, 20, .5), 0 1px 0 rgba(0, 0, 0, .05);
}
.hoja[data-estilo="bitacora"] .hoja__foto figcaption { position: absolute; left: 14px; bottom: 10px; margin: 0; font: italic 400 13px var(--h-titulo); color: #5E5245; }
.hoja[data-estilo="bitacora"] .hoja__sello {
  position: absolute; right: -8px; bottom: 22px; display: grid; place-items: center; width: 94px; height: 94px; padding: 10px;
  border: 2.5px solid var(--h-principal); border-radius: 50%; color: var(--h-acento); text-align: center;
  font: 700 12px/1.1 var(--h-texto); letter-spacing: .12em; text-transform: uppercase; overflow-wrap: anywhere;
  mix-blend-mode: multiply; transform: rotate(-14deg); animation: hoja-sello 400ms cubic-bezier(.2, .9, .25, 1.25) 300ms both;
}
.hoja[data-estilo="bitacora"] .hoja__sello:empty { display: none; }
@keyframes hoja-sello { from { opacity: 0; transform: scale(2.2) rotate(-30deg); } to { opacity: .92; transform: scale(1) rotate(-14deg); } }
.hoja[data-estilo="bitacora"] .hoja__paletas { display: none; }
/* El resumen es un pase de abordar: la tira desprendible es la línea punteada de arriba, con sus dos muescas. */
.hoja[data-estilo="bitacora"] .hoja__resumen {
  position: relative; box-shadow: 0 10px 22px -14px rgba(40, 30, 20, .55), 0 0 0 1px rgba(27, 36, 51, .07);
  animation: hoja-sube 400ms cubic-bezier(.2, .8, .2, 1) 150ms both;
}
.hoja[data-estilo="bitacora"] .hoja__cuenta { padding-bottom: 12px; border-bottom: 1.5px dashed rgba(27, 36, 51, .25); }
.hoja[data-estilo="bitacora"] .hoja__cuenta-texto { font: italic 400 20px/1.2 var(--h-titulo); color: var(--h-acento); }
.hoja[data-estilo="bitacora"] .hoja__dia {
  box-shadow: 0 10px 22px -16px rgba(40, 30, 20, .55), 0 0 0 1px rgba(27, 36, 51, .07);
  background-image: repeating-linear-gradient(transparent 0 27px, rgba(27, 36, 51, .04) 27px 28px);
  animation: hoja-sube 400ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: min(calc(var(--i, 0) * 60ms), 600ms);
}
@keyframes hoja-sube { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hoja[data-estilo="bitacora"] .hoja__tipo {
  display: inline-flex; align-items: center; height: 20px; padding: 0 9px 0 15px; margin-bottom: 4px; background: #1B2433; color: #F5EFE4;
  clip-path: polygon(7px 0, 100% 0, 100% 100%, 7px 100%, 0 50%);
}
.hoja[data-estilo="bitacora"] .hoja__servicio { box-shadow: 0 0 0 1px rgba(27, 36, 51, .07); border-left: 4px solid var(--h-secundario); }
.hoja[data-estilo="bitacora"] .hoja__codigo { color: var(--h-acento); }
.hoja[data-estilo="bitacora"] .hoja__hecho { font-style: italic; }