/* ==========================================================================
   Norte . estilos del Diario (.jr-)
   Esto es texto para leer, no una tabla: Inter 15px, interlineado 1.6 y la línea
   cortada a unos 68 caracteres. Las etiquetas de campo, pequeñas y discretas.
   Solo tokens de norte.css. Separadores rectos de 1px solid var(--line).
   Naranja solo para impacto: el resaltado de la búsqueda, el punto del calendario
   y el botón de escribir.
   ========================================================================== */

/* ---------- seis pestañas en el móvil: caben si la etiqueta baja un punto ---------- */
@media (max-width:420px){
  .tabbar .tab{font-size:8px;letter-spacing:.04em;gap:2px}
  .tabbar .tab svg{width:20px;height:20px}
}

/* ---------- barra de arriba: buscar, rango, campo y vista ---------- */
.jr-bar{
  position:sticky;top:var(--head);z-index:15;display:flex;flex-direction:column;gap:10px;
  margin:-18px calc(-1 * var(--pad)) 16px;padding:12px var(--pad);
  background:rgba(5,5,5,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.jr-searchbox{position:relative;display:flex;align-items:center}
.jr-searchbox>svg{position:absolute;left:13px;width:16px;height:16px;color:var(--tx3);pointer-events:none}
.jr-search{padding-left:38px;min-height:44px}
.jr-search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.jr-bar-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.jr-bar-row .nsel:first-child{flex:1;min-width:0;max-width:260px}
/* en móvil el rango se queda con su propia línea: el nombre largo no se corta */
@media (max-width:560px){.jr-bar-row .nsel:first-child{flex:1 1 100%;max-width:none}}
.jr-bar-row .nsel:first-child .nsel-btn{width:100%;justify-content:space-between;min-height:44px;font-size:14px;font-weight:600}
.jr-view{margin-left:auto;flex:none}
.jr-view button{display:inline-flex;align-items:center;gap:7px;min-height:38px}
.jr-view button svg{width:16px;height:16px}
.jr-view button span{display:none}
.jr-meta{font-size:12.5px}
@media (min-width:900px){
  .jr-bar{position:static;margin:0 0 18px;padding:0 0 14px;background:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .jr-bar-row{gap:12px}
  .jr-view button span{display:inline}
  .jr-meta{font-size:13px}
}
.jr-dates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.jr-dates input[type=date]{color-scheme:dark;font-variant-numeric:tabular-nums}
@media (max-width:420px){.jr-dates{grid-template-columns:1fr}}
.jr-note{font-size:12.5px;line-height:1.5}

/* ---------- la columna de tarjetas: una sola, ancha y centrada ---------- */
.jr-list{display:flex;flex-direction:column;gap:14px;width:100%;max-width:760px;margin-inline:auto}
.jr-card{padding:16px 16px 18px;display:flex;flex-direction:column;gap:12px;border:1px solid transparent;transition:border-color .2s,background .2s}
.jr-card.is-edit{border-color:var(--line2);background:var(--card2)}
.jr-card.is-today{border-color:var(--or-line)}
.jr-card.is-focus{border-color:var(--line2)}
@media (min-width:900px){.jr-card{padding:20px 24px 22px}}

/* cabecera de la tarjeta: la fecha manda, el contexto va detrás y en pequeño */
.jr-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.jr-when{display:flex;flex-direction:column;gap:7px;min-width:0}
/* en español la fecha empieza en minúscula: se sube solo la primera letra, nunca palabra a palabra */
.jr-date{font-size:18px;letter-spacing:-.03em;line-height:1.15}
.jr-date::first-letter{text-transform:uppercase}
@media (min-width:900px){.jr-date{font-size:20px}}
.jr-hint{font-size:12.5px;color:var(--tx3);line-height:1.45;max-width:46ch}
.jr-ctx{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center}
.jr-tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:500;color:var(--tx3);font-variant-numeric:tabular-nums}
.jr-tag .jr-dot{width:6px;height:6px;border-radius:100px;background:currentColor;flex:none}
.jr-tag.s-good,.jr-tag.s-warn,.jr-tag.s-bad{color:var(--tx2)}
.jr-tag.s-good .jr-dot{background:var(--good)}
.jr-tag.s-warn .jr-dot{background:var(--warn)}
.jr-tag.s-bad .jr-dot{background:var(--bad)}
.jr-acts{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
.jr-open{color:var(--tx3);border-color:var(--line)}
.jr-open svg{width:14px;height:14px}

/* ---------- el texto: un cuaderno, no un formulario ---------- */
.jr-bodywrap{display:flex;flex-direction:column;gap:8px;position:relative}
.jr-body{display:flex;flex-direction:column;gap:14px}
.jr-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.jr-lab{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.jr-text{font-family:var(--f);font-size:15px;line-height:1.6;color:var(--tx);max-width:68ch;white-space:pre-wrap;overflow-wrap:anywhere}
.jr-text mark{background:var(--or-soft);color:var(--or);border-radius:3px;padding:0 2px}

/* tarjeta larga: se recorta y se sigue leyendo en el sitio */
.jr-body.is-clip{max-height:260px;overflow:hidden;position:relative}
.jr-body.is-clip::after{content:'';position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(180deg,transparent,var(--card));pointer-events:none}
.jr-card.is-edit .jr-body.is-clip::after{background:linear-gradient(180deg,transparent,var(--card2))}
.jr-more{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:36px;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);
}
.jr-more:hover{color:var(--tx)}
.jr-more svg{width:15px;height:15px}

/* ---------- escribir en la propia tarjeta ---------- */
.jr-edit{gap:14px}
.jr-ta{
  min-height:44px;padding:10px 12px;resize:none;overflow:hidden;
  font-size:15px;line-height:1.6;max-width:68ch;
}
.jr-sync{display:inline-flex;align-items:center;gap:6px;min-height:22px;font-size:11.5px;color:var(--tx3);font-variant-numeric:tabular-nums}
.jr-sync-dot{width:8px;height:8px;border-radius:100px;flex:none;display:grid;place-items:center;background:var(--tx4);transition:background .2s}
.jr-sync-dot svg{width:11px;height:11px;stroke-width:2.4}
.jr-sync-txt{white-space:nowrap;transition:opacity .5s var(--ease)}
.jr-sync.is-saving .jr-sync-dot{background:var(--or);animation:jrPulse 1.1s ease-in-out infinite}
.jr-sync.is-saving .jr-sync-txt{color:var(--tx2)}
.jr-sync.is-saved .jr-sync-dot{width:auto;height:auto;background:none;color:var(--tx3)}
.jr-sync.is-saved.quiet .jr-sync-txt{opacity:0}
@keyframes jrPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}
@media (prefers-reduced-motion:reduce){
  .jr-sync.is-saving .jr-sync-dot{animation:none}
  .jr-sync-txt{transition:none}
}

/* ---------- calendario ---------- */
.jr-calwrap{display:flex;flex-direction:column;gap:14px;padding:16px;max-width:760px;margin-inline:auto}
@media (min-width:900px){.jr-calwrap{padding:22px 24px}}
.jr-cal-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.jr-cal-title{font-size:17px}
.jr-cal-title::first-letter{text-transform:uppercase}
.jr-cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.jr-wd{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--tx3);text-align:center;padding-bottom:4px}
.jr-cell{
  position:relative;min-height:46px;border-radius:var(--r);border:1px solid var(--line);background:var(--card2);
  display:flex;align-items:flex-start;justify-content:flex-start;padding:7px 8px;
  transition:background .18s,border-color .18s,transform .15s var(--ease);
}
.jr-cell:hover:not([disabled]){border-color:var(--line2);background:var(--card3)}
.jr-cell:active:not([disabled]){transform:scale(.97)}
.jr-cell.blank{border-color:transparent;background:none;min-height:0}
.jr-cell-n{font-size:13px;color:var(--tx3);font-weight:700}
.jr-cell.has{background:var(--card3);border-color:var(--line2)}
.jr-cell.has .jr-cell-n{color:var(--tx)}
.jr-cell-dot{position:absolute;right:7px;bottom:7px;width:7px;height:7px;border-radius:100px;background:var(--or)}
.jr-cell.today{border-color:var(--line3)}
.jr-cell[disabled]{opacity:.35;pointer-events:none}
.jr-cell.out{opacity:.25}
@media (min-width:600px){
  .jr-cal{gap:7px}
  .jr-cell{min-height:62px;padding:9px 10px}
  .jr-cell-n{font-size:15px}
}

/* ---------- estados vacíos ---------- */
.jr-empty{max-width:520px;margin:24px auto 0;padding:40px 18px}
.jr-empty p{font-size:13px;max-width:42ch}