/* 🖍️ Leer y escuchar: resaltar, subrayar, tachar y notas (lectura.js) + «↩ Volver» tras un salto */

.sb-amarillo { --sb: #ffe066; --sb-fuerte: #e8a400; }
.sb-verde    { --sb: #8ce99a; --sb-fuerte: #2f9e44; }
.sb-azul     { --sb: #91a7ff; --sb-fuerte: #3b5bdb; }
.sb-celeste  { --sb: #99e9f2; --sb-fuerte: #1098ad; }
.sb-rosa     { --sb: #fcc2d7; --sb-fuerte: #d6336c; }

.texto-cuerpo .sb { color: var(--texto); cursor: pointer; }
.texto-cuerpo .sb-resaltado { background: color-mix(in srgb, var(--sb) 70%, transparent); border-radius: 0; padding: 2px 0; }
.texto-cuerpo .sb-subrayado { text-decoration: underline 3px var(--sb-fuerte); text-underline-offset: 4px; text-decoration-skip-ink: none; }
.texto-cuerpo .sb-tachado { text-decoration: line-through 2px var(--sb-fuerte); color: var(--tenue); }
.texto-cuerpo .sb-nota::after { content: '✎'; font: 700 11px var(--sans); color: var(--sb-fuerte); vertical-align: super; margin-left: 2px; }
:root[data-tema="oscuro"] .texto-cuerpo .sb-resaltado { background: color-mix(in srgb, var(--sb) 32%, transparent); }

/* La barra que sale al seleccionar */
.barra-sub { position: fixed; z-index: 72; display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra-2); user-select: none; -webkit-user-select: none; }
.barra-sub button { background: none; border: 0; color: var(--texto); font: 700 15px var(--sans); min-width: 34px; height: 34px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 8px; }
.barra-sub button:hover { background: color-mix(in srgb, var(--texto) 8%, transparent); }
.barra-sub .sep { width: 1px; height: 22px; background: var(--borde); margin: 0 4px; }
.barra-sub .ic { width: 18px; height: 18px; }
.barra-sub [data-sub-mas] { font-size: 13px; }

.punto-sub { width: 26px !important; min-width: 26px !important; height: 26px !important; padding: 0 !important; border-radius: 50% !important;
  background: var(--sb) !important; border: 2px solid color-mix(in srgb, var(--sb-fuerte) 45%, transparent) !important; }
.punto-sub.elegido { outline: 3px solid var(--sb-fuerte); outline-offset: 2px; }

/* Al tocar una marca */
.editar-sub { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; }
.editar-sub .fila-sub { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.editar-sub .espacio { flex: 1; }
.editar-sub textarea { width: 100%; resize: vertical; }

/* «↩ Volver a 21:03» tras un salto grande */
.volver-salto { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(22px + env(safe-area-inset-bottom)); z-index: 40;
  display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--panel); border: 1px solid var(--borde); box-shadow: var(--sombra-2);
  animation: volver-entra .25s ease-out; }
.volver-salto .btn { white-space: nowrap; }
@keyframes volver-entra { from { opacity: 0; transform: translate(-50%, 10px); } }

@media (pointer: coarse) {
  .barra-sub button { min-width: 40px; height: 40px; }
  .punto-sub { width: 30px !important; min-width: 30px !important; height: 30px !important; }
}
@media (max-width: 440px) {
  .barra-sub { gap: 2px; padding: 4px 6px; }
  .barra-sub button { min-width: 36px; padding: 0 6px; }
  .barra-sub .punto-sub { width: 27px !important; min-width: 27px !important; height: 27px !important; margin: 0 1px; }
  .barra-sub .sep { margin: 0 2px; }
  .barra-sub [data-sub-mas] { font-size: 12px; }
}

/* En «Mi cuaderno»: la frase con el mismo color que en el libro */
.nota-tarjeta .cita-sub { color: var(--texto); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.nota-tarjeta .cita-sub.sb-resaltado { background: color-mix(in srgb, var(--sb) 70%, transparent); padding: 1px 2px; }
.nota-tarjeta .cita-sub.sb-subrayado { text-decoration: underline 3px var(--sb-fuerte); text-underline-offset: 4px; }
.nota-tarjeta .cita-sub.sb-tachado { text-decoration: line-through 2px var(--sb-fuerte); color: var(--tenue); }
:root[data-tema="oscuro"] .nota-tarjeta .cita-sub.sb-resaltado { background: color-mix(in srgb, var(--sb) 32%, transparent); }