/* ════════ Modo Panel — pantalla táctil 1920x720 junto a la PC ════════
   Una agenda con pestañas sobre el framework "papel" de la PC (css/papel.css + js/pp.js, COPIAS: ver su
   encabezado). En el modo panel el <head> pone en <html>: modo-panel, pp-pantalla (base táctil 1920x720)
   y pp-papel (fondo, tinta, letra y la barrita de inicio; el modo oscuro lo pone PanelPC.exe y lo aplica pp.js).
   Acá va solo lo propio (prefijo pv-).
   Todo va bajo html.modo-panel o con clases pv-: el modo PC (sin ?modo=panel) no cambia en nada. */

#panelView { display: none; }

html.modo-panel body { touch-action: pan-y; }   /* las listas se deslizan; de costado lo maneja PP.deslizar */
html.modo-panel .sidebar, html.modo-panel .main, html.modo-panel #loadBar,
html.modo-panel #alarmBanner, html.modo-panel .modal-overlay, html.modo-panel .search-overlay { display: none !important; }

html.modo-panel #panelView { display: block; position: relative; width: 1920px; height: 720px; }   /* entra y sale: PP.escena */

/* ── Membrete ─────────────────────────────────────────────────── */
.pv-cab { position: absolute; top: 0; left: 60px; right: 60px; }

/* ── Hojas (una por pestaña) ──────────────────────────────────── */
.pv-hojas { position: absolute; top: 98px; left: 0; right: 0; bottom: 0; }
.pv-pag { display: none; position: absolute; inset: 0; padding: 16px 60px 30px; box-sizing: border-box; flex-direction: column; }
.pv-pag.on { display: flex; }   /* la elegida (PP.pestanas); entra con .pp-entra-der / .pp-entra-izq */

.pv-lista { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; }
.pv-lista::-webkit-scrollbar { display: none; }
/* Solo si hay más para deslizar: el borde de abajo se desvanece */
.pv-lista.desborda { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 30px), transparent); padding-bottom: 24px; }
.pv-vacio { padding: 30px 0; font: italic 400 22px/1.3 var(--pp-serif); color: var(--pp-gris); }
/* toque en espera mientras llegan los datos nuevos (al mostrarse la página) */
.pv-espera .pv-check, .pv-espera.pv-apunte { animation: pv-pulso .5s ease-in-out infinite alternate; }
@keyframes pv-pulso { to { transform: scale(.94); opacity: .55; } }

/* ── Hábitos: la casilla de hoy pegada al nombre (2 columnas) + mini tablero a la derecha ── */
.pv-pag.pv-pag-hab.on { display: grid; grid-template-columns: minmax(0, 1fr) 540px; column-gap: 56px; }
.pv-habs { display: grid; grid-template-columns: 1fr 1fr; column-gap: 40px; align-content: start; }
/* alto de fila: lo calcula panel.js (_pvMedir) según cuántos hábitos hay */
.pv-hab { display: flex; align-items: center; gap: 18px; height: var(--pv-fila, 88px); box-sizing: border-box; border-bottom: 1.5px solid var(--pp-renglon); transition: background .15s; }
.pv-hab:active { background: var(--pp-velo); }
.pv-hab .pp-casilla { --t: 40px; }
.pv-nom { flex: 1; min-width: 0; font: 600 24px/1.1 var(--pp-txt); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-hab.hecho .pv-nom { color: var(--pp-gris); }
.pv-nom small { display: block; margin-top: 5px; font: italic 400 17px/1 var(--pp-serif); color: var(--pp-gris); }
.pv-valor { flex: none; font: 700 24px/1 var(--pp-num); color: var(--pp-rojo); white-space: nowrap; }
.pv-hab.hecho .pv-valor { color: var(--pp-gris); }
.pv-valor i { font-style: normal; font-size: 18px; font-weight: 500; color: var(--pp-gris); }
.pv-paso { flex: none; display: flex; gap: 8px; }
.pv-paso .pp-boton { width: 52px; height: min(46px, calc(var(--pv-fila, 88px) - 12px)); }

.pv-tablero { border-left: 1.5px solid var(--pp-tinta); padding-left: 44px; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }   /* (14 px: así entran los 6 meses) */
.pv-bloque > .pp-etiqueta { display: block; margin-bottom: 11px; }
.pv-hoy { display: flex; align-items: baseline; gap: 16px; }
.pv-hoy b { font: 700 72px/.8 var(--pp-num); }
.pv-hoy b i { font-style: normal; font-size: 34px; color: var(--pp-gris); }
.pv-hoy span { font-size: 22px; color: var(--pp-gris); }
.pv-tiras { display: flex; gap: 5px; margin-top: 14px; }
.pv-tiras i { flex: 1; height: 12px; border-radius: 3px; background: var(--pp-pista); }
.pv-tiras i.si { background: var(--pp-tinta); }
.pv-semana { display: flex; gap: 14px; }
.pv-dia { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.pv-barra { position: relative; width: 100%; height: 50px; border-radius: 5px; background: var(--pp-pista); overflow: hidden; box-sizing: border-box; }
.pv-barra i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--pp-tinta); }
.pv-dia.hoy .pv-barra i { background: var(--pp-rojo); }
.pv-dia.fut .pv-barra { background: transparent; border: 2px dashed var(--pp-futuro); }
.pv-dia small { font: 700 15px/1 var(--pp-txt); letter-spacing: .1em; color: var(--pp-gris); }
.pv-dia.hoy small { color: var(--pp-rojo); }
.pv-racha-fila { display: flex; align-items: baseline; gap: 12px; height: 32px; border-bottom: 1.5px solid var(--pp-renglon); font-size: 21px; }
.pv-racha-fila .pp-cursiva { flex: none; font-size: 17px; color: var(--pp-gris); }
.pv-racha-fila b { margin-left: auto; font: 700 24px/1 var(--pp-num); color: var(--pp-verde); }
/* Los últimos 6 meses, como el mapa de la web: una columna por semana (26), de lunes (arriba) a domingo */
.pv-calor { --pv-c: 13px; --pv-g: 3px; }
.pv-calor-cab { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.pv-ley { display: flex; align-items: center; gap: 4px; font: italic 400 14px/1 var(--pp-serif); color: var(--pp-gris); }
.pv-ley i { width: 11px; height: 11px; }
.pv-calor-meses { display: grid; grid-template-columns: 18px repeat(26, var(--pv-c)); column-gap: var(--pv-g); height: 14px; margin-bottom: 3px; }
.pv-calor-meses span { grid-row: 1; grid-column: var(--pv-col) / span 4; font: 700 12px/14px var(--pp-txt); letter-spacing: .1em; color: var(--pp-gris); white-space: nowrap; }
.pv-calor-meses span.hoy { color: var(--pp-tinta); }
.pv-calor-dias { display: grid; grid-template-columns: 18px; grid-template-rows: repeat(7, var(--pv-c)); grid-auto-flow: column; grid-auto-columns: var(--pv-c); gap: var(--pv-g); }
.pv-calor-dias b { font: 700 11px/var(--pv-c) var(--pp-txt); letter-spacing: .06em; color: var(--pp-gris); }
.pv-calor-dias b.suave { color: var(--pp-suave); }
.pv-calor i { border-radius: 3px; background: var(--pp-pista); }
.pv-calor i.n1 { background: var(--pp-nivel1); } .pv-calor i.n2 { background: var(--pp-nivel2); }
.pv-calor i.n3 { background: var(--pp-nivel3); } .pv-calor i.n4 { background: var(--pp-nivel4); }
.pv-calor-dias i.fut { background: transparent; }
.pv-calor-dias i.hoy { outline: 2px solid var(--pp-rojo); outline-offset: 1px; }

/* ── Tareas: kanban ───────────────────────────────────────────── */
.pv-kanban { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.pv-col { display: flex; flex-direction: column; min-height: 0; }
.pv-col .pp-titulo-col { flex: none; margin-bottom: 16px; }
.pv-tarea { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 14px; padding: 16px 16px 14px 18px; transition: opacity .3s, transform .3s; }
.pv-tarea .pv-check { position: relative; width: 30px; height: 30px; margin-top: 2px; }
.pv-tarea .pv-check::before { content: ""; position: absolute; inset: -16px; }   /* zona de toque de ~62 px (el dibujo no cambia) */
.pv-tarea.vencida .pv-check { border-color: var(--pp-rojo); }
.pv-tarea.saliendo { opacity: 0; transform: translateX(30px); }
.pv-ttl { flex: 1; min-width: 0; font: 500 22px/1.25 var(--pp-txt); overflow-wrap: anywhere; }
.pv-ttl small { display: flex; align-items: center; gap: 12px; margin-top: 8px; font: italic 400 18px/1 var(--pp-serif); color: var(--pp-gris); }
.pv-cuando { font-weight: 400; }
.pv-tarea.hoy .pv-cuando { color: var(--pp-tinta); font-weight: 700; }
.pv-tarea.vencida .pv-cuando { color: var(--pp-rojo); font-weight: 700; }
.pv-rep { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--pp-gris); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pv-mover { all: unset; flex: none; position: relative; width: 48px; height: 48px; box-sizing: border-box; border: 2px solid var(--pp-claro); border-radius: 10px; display: grid; place-items: center; transition: background .12s, border-color .12s; }
.pv-mover::before { content: ""; position: absolute; inset: -8px; }
.pv-mover:active { background: var(--pp-tinta); border-color: var(--pp-tinta); }
.pv-mover svg { width: 24px; height: 24px; fill: none; stroke: var(--pp-gris); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pv-mover:active svg { stroke: var(--pp-papel); }
.pv-tarea.hecha { background: transparent; border-style: dashed; box-shadow: none; }
.pv-tarea.hecha .pv-ttl { color: var(--pp-gris); text-decoration: line-through; text-decoration-color: var(--pp-claro); }
.pv-mas { padding-left: 4px; font-size: 19px; color: var(--pp-gris); }

/* ── Apuntes ──────────────────────────────────────────────────── */
.pv-apuntes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; align-content: start; padding: 4px 2px 10px; }
.pv-apunte { position: relative; height: 262px; padding: 20px 22px 50px; box-sizing: border-box; overflow: hidden; transition: transform .12s; }
.pv-apunte:active { transform: scale(.985); }
.pv-apunte.fija::before { content: ""; position: absolute; top: 0; right: 22px; width: 28px; height: 8px; background: var(--pp-rojo); border-radius: 0 0 3px 3px; }
.pv-apunte h3, .pv-leer-cab h2 { margin: 0; font: italic 700 25px/1.2 var(--pp-serif); color: var(--pp-tinta); }
.pv-apunte h3 { margin-bottom: 12px; padding-right: 30px; }
.pv-cuerpo { max-height: 164px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.pv-cuerpo p, .pv-leer-cuerpo p { margin: 0; font: 400 19px/1.45 var(--pp-txt); color: var(--pp-tinta); white-space: pre-wrap; overflow-wrap: anywhere; }
.pv-pie { position: absolute; left: 22px; right: 22px; bottom: 16px; font-size: 16px; color: var(--pp-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-item { display: flex; align-items: center; gap: 12px; min-height: 40px; font-size: 19px; }
.pv-item .pp-casilla { --t: 26px; }
.pv-item.si span { color: var(--pp-gris); text-decoration: line-through; text-decoration-color: var(--pp-claro); }
.pv-apunte table, .pv-leer-cuerpo table { border-collapse: collapse; width: 100%; font-size: 17px; }
.pv-apunte td, .pv-apunte th, .pv-leer-cuerpo td, .pv-leer-cuerpo th { border-bottom: 1.5px solid var(--pp-renglon); padding: 7px 6px; text-align: left; }
.pv-apunte th, .pv-leer-cuerpo th { font: 700 13px/1 var(--pp-txt); letter-spacing: .12em; text-transform: uppercase; color: var(--pp-gris); }
.pv-apunte.cifrado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; font-size: 21px; color: var(--pp-gris); }
.pv-apunte.cifrado svg { width: 44px; height: 44px; fill: none; stroke: var(--pp-gris); stroke-width: 2.4; stroke-linecap: round; }
.pv-apunte.cifrado .pv-pie { text-align: center; }

/* Lectura: el apunte abierto en grande (sin editar: la pantalla no tiene teclado) */
.pv-leer { position: absolute; inset: 98px 0 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--pp-papel) 82%, transparent); }
.pv-leer[hidden] { display: none; }
.pv-leer-hoja { width: 1180px; max-height: 574px; box-sizing: border-box; padding: 26px 34px 30px; display: flex; flex-direction: column; box-shadow: 0 18px 40px -20px rgba(60, 40, 10, .45); }   /* abre y cierra: PP.capa */
.pv-leer-cab { display: flex; align-items: baseline; gap: 18px; padding-bottom: 16px; border-bottom: 1.5px solid var(--pp-tinta); }
.pv-leer-cab h2 { font-size: 32px; flex: none; max-width: 760px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-leer-cab .pp-cursiva { font-size: 18px; color: var(--pp-gris); }
.pv-leer-cab .pv-cerrar { margin-left: auto; padding: 12px 22px; font: 700 16px/1 var(--pp-txt); letter-spacing: .14em; text-transform: uppercase; align-self: center; }
.pv-leer-cuerpo { flex: 1; min-height: 0; overflow-y: auto; padding-top: 18px; touch-action: pan-y; scrollbar-width: none; }
.pv-leer-cuerpo p { font-size: 22px; line-height: 1.55; }
.pv-leer-cuerpo .pv-item { min-height: 54px; font-size: 22px; border-bottom: 1.5px solid var(--pp-renglon); }
.pv-leer-cuerpo .pv-item .pp-casilla { --t: 32px; }
.pv-leer-cuerpo table { font-size: 20px; }

/* ── Deshacer (tarea movida por error) ────────────────────────── */
.pv-deshacer { position: fixed; left: 50%; bottom: 34px; z-index: 60;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: opacity .25s, transform .25s; }
.pv-deshacer.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }

/* ── Piezas del modo PC que se ven en el panel: carga, login y avisos ── */
html.modo-panel #loader { background: var(--pp-papel); backdrop-filter: none; }
html.modo-panel .loader-name { color: var(--pp-tinta); font: italic 700 26px/1 var(--pp-serif); }
html.modo-panel .loader-icon { background: var(--pp-rojo); color: var(--pp-papel); }
html.modo-panel .loader-dots span { background: var(--pp-tinta); }
html.modo-panel .auth-overlay { background: var(--pp-papel); }
html.modo-panel .auth-card { max-width: 520px; padding: 36px 40px; gap: 16px; background: var(--pp-tarjeta); border: 1.5px solid var(--pp-tinta); border-radius: 16px;
  box-shadow: 0 16px 34px -18px rgba(60, 40, 10, .45); color: var(--pp-tinta); cursor: auto; }
html.modo-panel .auth-title { color: var(--pp-tinta); font: italic 700 32px/1.1 var(--pp-serif); }
html.modo-panel .auth-sub { color: var(--pp-gris); font-size: 17px; }
html.modo-panel .auth-card .form-input { height: 60px; font-size: 20px; border-radius: 10px; background: var(--pp-papel); color: var(--pp-tinta); border: 2px solid var(--pp-claro);
  cursor: text; user-select: text; -webkit-user-select: text; }
html.modo-panel .auth-card .btn-primary { height: 60px; font-size: 20px; border-radius: 10px; background: var(--pp-tinta); color: var(--pp-papel); font-weight: 700; }
html.modo-panel .auth-logo { background: var(--pp-rojo); color: var(--pp-papel); }
html.modo-panel .auth-card .form-input:focus { border-color: var(--pp-tinta); box-shadow: none; }
html.modo-panel .auth-err { font-size: 16px; color: var(--pp-rojo); }
html.modo-panel #toast { left: 60px; right: auto; bottom: 34px; }
html.modo-panel .toast { background: var(--pp-tinta); border-color: var(--pp-tinta); color: var(--pp-papel); font-size: 18px; padding: 14px 18px; }
html.modo-panel .toast > span:first-child { display: none; }   /* el emoji del aviso: en el panel, sin emojis */
html.modo-panel .offline-bar { background: var(--pp-tinta); color: var(--pp-papel); border-radius: 14px; box-shadow: none; font-size: 16px; }