/* ==================================================================
   NOTAS — estilos exclusivos de esta sección y de su ventana Tokyo.
   1. Índice y tarjetas  2. Artículo  3. Compartir  4. Responsive
   El resto del diseño permanece en style.css, sin modificaciones.
   ================================================================== */

/* 1. ÍNDICE Y TARJETAS */
#notes .notes-status { margin: 0 0 24px; line-height: 1.6; }
#notes .notes-status:empty { display: none; }
/* La distribución, los márgenes y los títulos los define style.css,
   exactamente igual que en las tarjetas de la página original. */
#notes #notes-list > li { min-width: 0; }
#notes #notes-list .note-cover-link { display: block; width: 100%; }
#notes #notes-list .image { width: 100%; aspect-ratio: 16 / 9; }
#notes #notes-list .image img { opacity: 1; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
#notes #notes-list .list_inner:hover .image img { transform: scale(1.05); }
#notes #notes-list .date time { font: inherit; }
/* style.css conserva una regla antigua que ocultaba «Leer más» en Notas.
   Reactivamos solo este enlace, manteniendo la animación Tokyo original. */
#notes #notes-list .malka_tm_read_more { display: block; }
#notes #notes-list .list_inner:focus-within .read-more span { transform: translateX(0); }
#notes #notes-list a:focus-visible { outline: 2px solid #222; outline-offset: 5px; }
/* Al volver del modal con ratón o toque, evita el marco de foco persistente.
   Tab mantiene el indicador para navegación con teclado. No cambia medidas. */
#notes #notes-list.notes-pointer-mode a:focus { outline: none; }
#notes .notes-retry { display: inline-block; padding: 8px 14px; margin-left: 10px; border: 1px solid #bbb; background: #fff; cursor: pointer; }

/* 2. ARTÍCULO — reutiliza el mismo modal y botón X originales. */
.malka-modal[data-kind="note"] .malka-modal-scroll { padding: 50px; scrollbar-gutter: stable; }
.malka-modal[data-kind="note"] .note-article { width: 100%; min-width: 0; }
.malka-modal[data-kind="note"] .note-cover { margin: 0 0 30px; aspect-ratio: 16 / 9; overflow: hidden; background: #eee; }
.malka-modal[data-kind="note"] .note-cover img { width: 100%; height: 100%; margin: 0; object-fit: cover; }
.malka-modal[data-kind="note"] .note-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; padding-bottom: 8px; margin-bottom: 20px; border-bottom: 1px solid #ddd; font-family: Montserrat, sans-serif; font-size: 12px; font-style: italic; text-transform: uppercase; line-height: 30px; color: #767676; }
.malka-modal[data-kind="note"] .note-meta strong { color: inherit; font-weight: 400; }
.malka-modal[data-kind="note"] #note-title { margin: 0 0 30px; font-size: 23px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.malka-modal[data-kind="note"] .note-content { color: inherit; font: inherit; letter-spacing: inherit; overflow-wrap: anywhere; }
.malka-modal[data-kind="note"] .note-content p { margin: 0 0 22px; }
.malka-modal[data-kind="note"] .note-content > p:first-child { color: #888; font-size: 20px; margin-bottom: 33px; }
.malka-modal[data-kind="note"] .note-content h3 { margin: 30px 0 14px; font-size: 20px; font-weight: 600; line-height: 1.5; }
.malka-modal[data-kind="note"] .note-content h4 { margin: 24px 0 12px; font-size: 18px; font-weight: 600; line-height: 1.5; }
.malka-modal[data-kind="note"] .note-content ul,
.malka-modal[data-kind="note"] .note-content ol { margin: 0 0 24px; padding-left: 24px; }
.malka-modal[data-kind="note"] .note-content ul { list-style: disc; }
.malka-modal[data-kind="note"] .note-content ol { list-style: decimal; }
.malka-modal[data-kind="note"] .note-content li { margin: 5px 0; }
/* Citas Tokyo: comillas grandes y texto en cursiva. */
.malka-modal[data-kind="note"] .note-content blockquote {
  position: relative;
  margin: 10px 0 23px;
  padding: 8px 0 10px 70px;
  min-height: 66px;
  border: 0;
  font-size: 20px;
  font-style: italic;
  color: inherit;
}
.malka-modal[data-kind="note"] .note-content blockquote::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 0;
  width: 40px;
  height: 46px;
  background: url("../img/quote.svg") center / 100% 100% no-repeat;
}
.malka-modal[data-kind="note"] .note-content pre { margin: 20px 0; padding: 18px; background: #f5f5f5; overflow-x: auto; font-size: 14px; white-space: pre; }
.malka-modal[data-kind="note"] .note-content a { color: #111; text-decoration: underline; text-underline-offset: 3px; }
.malka-modal[data-kind="note"] .note-content img { height: auto; max-width: 100%; margin: 25px auto; }
.malka-modal[data-kind="note"] .note-error { line-height: 1.8; }

/* 3. COMPARTIR — iconos originales y enlace permanente al artículo. */
.malka-modal[data-kind="note"] .note-share { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 35px; padding-top: 24px; border-top: 1px solid #ddd; font-size: 13px; }
.malka-modal[data-kind="note"] .note-share a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; }
.malka-modal[data-kind="note"] .note-share img { display: block; width: 18px; height: 18px; margin: 0; }
.malka-modal[data-kind="note"] .note-share button,
.malka-modal[data-kind="note"] .note-error button { padding: 8px 14px; border: 1px solid #ccc; background: white; color: #333; font: inherit; cursor: pointer; }
.malka-modal[data-kind="note"] .note-share-feedback { flex-basis: 100%; line-height: 1.5; }
.malka-modal[data-kind="note"] .note-share-feedback:empty { display: none; }
.malka-modal[data-kind="note"] a:focus-visible,
.malka-modal[data-kind="note"] .note-share button:focus-visible { outline: 2px solid #555; outline-offset: 4px; }

/* 4. RESPONSIVE — solo Notas. */
@media (max-width: 767px) {
  .malka-modal[data-kind="note"] .malka-modal-scroll { padding: 26px 22px; }
  .malka-modal[data-kind="note"] .note-cover { margin-bottom: 24px; }
  .malka-modal[data-kind="note"] .note-content blockquote { padding-left: 0; }
  .malka-modal[data-kind="note"] .note-content blockquote::before { position: static; display: block; margin-bottom: 12px; }
}
@media (prefers-reduced-motion: reduce) { #notes #notes-list .image img { transition: none; } }