/* ===========================================================================
   MARCAS — resaltados y notas.
   Portado tal cual del piloto de Obstetricia: el CSS ya estaba probado.
   Solo se agregan los tokens de color, que en Obstetricia viven en tokens.css.
   =========================================================================== */
:root{
  --hl-yellow-bg: #FCEEB0;   --hl-yellow-mark: #8A6708;
  --hl-green-bg: #CDEFDA;    --hl-green-mark: #196A42;
  --hl-blue-bg: #CFE4F7;     --hl-blue-mark: #205683;
  --hl-orange-bg: #F8D9C0;   --hl-orange-mark: #9C4C16;
}
:root[data-theme="dark"]{
  --hl-yellow-bg: #4A3B12;   --hl-yellow-mark: #E6C55C;
  --hl-green-bg: #123A28;    --hl-green-mark: #5CD79A;
  --hl-blue-bg: #12293D;     --hl-blue-mark: #7EB8E8;
  --hl-orange-bg: #3D2211;   --hl-orange-mark: #E8935C;
}

/* Y el oscuro del SISTEMA, que es el que usa casi todo el mundo: nadie toca
   el botoncito, tiene el telefono en oscuro y listo.

   Esto faltaba, y el resultado era que el texto resaltado desaparecia: la
   tinta se volvia clara (eso lo hace tokens.css, que si contempla las dos
   formas) pero el fondo del resaltado seguia siendo amarillo claro. Claro
   sobre claro. Se veia un rectangulo vacio en el medio de la frase. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --hl-yellow-bg: #4A3B12;   --hl-yellow-mark: #E6C55C;
    --hl-green-bg: #123A28;    --hl-green-mark: #5CD79A;
    --hl-blue-bg: #12293D;     --hl-blue-mark: #7EB8E8;
    --hl-orange-bg: #3D2211;   --hl-orange-mark: #E8935C;
  }
}

/* ============ RESALTADO Y NOTAS PERSONALES ============ */
/* El color del texto se declara SIEMPRE, y no se hereda. El navegador le pone
   a <mark> un color propio por defecto, asi que sin esta linea el resaltado
   depende de que cada tema acierte por su cuenta. Con esto, aunque un tema
   futuro se olvide de definir algo, lo resaltado se lee igual. */
mark.hl { color: var(--color-ink); border-radius: 3px; padding: 0 1px; box-decoration-break: clone; -webkit-box-decoration-break: clone; cursor: pointer; }
mark.hl--yellow { background: var(--hl-yellow-bg); }
mark.hl--green  { background: var(--hl-green-bg); }
mark.hl--blue   { background: var(--hl-blue-bg); }
mark.hl--orange { background: var(--hl-orange-bg); }
mark.hl--plain  { background: transparent; border-bottom: 2px dotted var(--color-ink-faint); }

.ann-note-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-left: 2px; font-size: 12px; line-height: 1;
  border: none; background: var(--color-paper-raised); border-radius: var(--radius-full);
  box-shadow: var(--shadow-inset); cursor: pointer; vertical-align: middle;
}

.ann-toolbar {
  position: absolute; z-index: 400; display: none; align-items: center; gap: 6px;
  background: var(--color-ink); padding: 6px; border-radius: var(--radius-full);
  box-shadow: var(--shadow-hover);
}
.ann-swatch {
  width: 22px; height: 22px; border-radius: var(--radius-full); border: 2px solid rgba(255,255,255,.25);
  cursor: pointer; padding: 0;
}
.ann-swatch--yellow { background: var(--hl-yellow-mark); }
.ann-swatch--green  { background: var(--hl-green-mark); }
.ann-swatch--blue   { background: var(--hl-blue-mark); }
.ann-swatch--orange { background: var(--hl-orange-mark); }
.ann-toolbar-note {
  font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
  color: var(--color-paper); background: transparent; border: 1px solid rgba(255,255,255,.3);
  border-radius: var(--radius-full); padding: 4px 10px; cursor: pointer;
}
.ann-toolbar-note:hover { background: rgba(255,255,255,.12); }

.ann-popover {
  position: absolute; z-index: 401; width: 260px;
  background: var(--color-paper-raised); border: 1px solid var(--color-line);
  border-radius: var(--radius-md); box-shadow: var(--shadow-hover); padding: var(--space-4);
}
.ann-popover__types { display: flex; gap: 6px; margin-bottom: var(--space-3); }
.ann-type-btn {
  flex: 1; font-size: 16px; padding: 6px 0; border-radius: var(--radius-sm);
  border: 1px solid var(--color-line); background: var(--color-paper); cursor: pointer;
}
.ann-type-btn.is-active { border-color: var(--accent-primary); background: var(--accent-primary-soft); }
.ann-popover__textarea {
  width: 100%; min-height: 72px; resize: vertical; font-family: var(--font-body); font-size: var(--fs-sm);
  color: var(--color-ink); background: var(--color-paper); border: 1px solid var(--color-line);
  border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3);
}
.ann-popover__actions { display: flex; align-items: center; gap: 8px; }
.ann-popover__actions button { font-family: var(--font-body); font-size: var(--fs-xs); font-weight: 600; border-radius: var(--radius-full); padding: 6px 12px; cursor: pointer; border: 1px solid transparent; }
.ann-popover__delete { color: var(--color-danger); background: var(--color-danger-soft); }
.ann-popover__cancel { color: var(--color-ink-soft); background: var(--color-paper-alt); }
.ann-popover__save { color: var(--color-paper); background: var(--accent-primary); }

/* ===========================================================================
   TACTIL — la barra al pie, no encima de la seleccion.

   El menu del sistema (Copiar / Seleccionar todo / Compartir) sale SIEMPRE
   pegado a lo seleccionado, y no hay forma de correrlo ni de adelantarsele.
   Mientras nuestra barra apuntaba al mismo lugar, en tablet y telefono
   quedaba tapada o justo debajo, fuera de alcance: por eso los clientes no
   podian subrayar.

   La barra y la hoja de nota bajan entonces al pie de la pantalla, anchas y
   con botones de 40px. El menu del sistema arriba, el nuestro abajo.
   =========================================================================== */
.ann-toolbar-cerrar { display: none; }

.ann-toolbar[data-anclaje="pie"] {
  position: fixed;
  top: auto; left: 0; right: 0; bottom: 0;
  width: 100%;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .32);
  z-index: 500;
}
.ann-toolbar[data-anclaje="pie"] .ann-swatch { width: 40px; height: 40px; }
.ann-toolbar[data-anclaje="pie"] .ann-toolbar-note {
  min-height: 40px; padding: 0 16px; font-size: 14px;
}
.ann-toolbar[data-anclaje="pie"] .ann-toolbar-cerrar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; margin-left: 4px;
  font-family: var(--font-body); font-size: 15px;
  color: var(--color-paper); background: transparent;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: var(--radius-full);
  cursor: pointer;
}

.ann-popover[data-anclaje="pie"] {
  position: fixed;
  top: auto; left: 0; right: 0; bottom: 0;
  width: auto;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-left: 0; border-right: 0; border-bottom: 0;
  padding: var(--space-4) var(--space-4) calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 30px rgba(0, 0, 0, .32);
  z-index: 501;
}
.ann-popover[data-anclaje="pie"] .ann-type-btn { padding: 10px 0; font-size: 18px; }
/* 16px no es un capricho: por debajo de eso, iOS hace zoom solo al enfocar
   el campo y deja el capitulo torcido. */
.ann-popover[data-anclaje="pie"] .ann-popover__textarea {
  min-height: 88px; font-size: 16px;
}
.ann-popover[data-anclaje="pie"] .ann-popover__actions button {
  min-height: 40px; padding: 0 16px; font-size: 13px;
}

/* Tocar un resaltado ya hecho —y su iconito de nota— con el dedo, no con
   la punta de un mouse. */
@media (pointer: coarse) {
  .ann-note-icon { width: 24px; height: 24px; font-size: 14px; }
}

.ann-toast {
  position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 500;
  background: var(--color-ink); color: var(--color-paper); font-family: var(--font-body); font-size: var(--fs-sm);
  padding: 10px 18px; border-radius: var(--radius-full); box-shadow: var(--shadow-hover);
}