/* styles.css — Pappelito.
   Paleta propia de marca (coral / lila / turquesa) + los 5 colores pastel con relieve, degradés y movimiento suave. */

:root{
  --coral: #ff9f87;
  --coral-light: #ffc4b3;
  --coral-hover: #ff8567;
  --turquesa: #5fd3c4;
  --turquesa-light: #a6eadf;
  --turquesa-texto: #2f8f80;
  --lavanda: #b79ced;
  --lavanda-light: #dcc9f7;
  --fucsia: #e6399c;

  --texto: #4a3b47;
  --texto-suave: #8a7a83;
  --borde: #f0ddd4;
  --borde-neutro: #4a3324;
  --rojo: #b3261e;
  --verde-estado: #1e7a34;
  --amarillo: #fff6dd;

  /* paleta propia del Planner: un color fijo por día, distinta de la de estado del Kanban */
  --dia-lunes: #f6c9a0;
  --dia-martes: #eec2d0;
  --dia-miercoles: #f5e8b8;
  --dia-jueves: #c9e8de;
  --dia-viernes: #d7dfae;
  --dia-sabado: #ddd0ec;
  --dia-domingo: #d8dde0;

  --gantt-etiqueta-ancho: 200px;
}

*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  color: var(--texto);
  font-size: 14px;
  background: linear-gradient(135deg, #f7f3ec 0%, #ebe7e1 45%, #efe6d6 100%);
  background-attachment: fixed;
  background-size: 200% 200%;
  animation: fondoVivo 22s ease-in-out infinite;
}
@keyframes fondoVivo{
  0%{ background-position: 0% 30%; }
  50%{ background-position: 100% 70%; }
  100%{ background-position: 0% 30%; }
}
@media (prefers-reduced-motion: reduce){
  body{ animation: none; }
}

.hidden{ display:none !important; }
button{ font-family: inherit; cursor: pointer; }

/* ===== Encabezado ===== */
.topbar{
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--texto);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 16px 26px;
  flex-wrap: wrap;
  gap: 14px;
  margin: 20px 24px 0;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(74,59,71,.12), 0 1px 0 rgba(255,255,255,.6) inset;
  border: 1px solid rgba(255,255,255,.6);
}
.topbar-brand{ display:flex; align-items:center; gap:16px; }
.logo{
  font-size: 26px; font-weight:900; letter-spacing:.4px;
  display:flex; align-items:baseline; line-height:1;
  filter: drop-shadow(0 2px 3px rgba(74,59,71,.15));
}
.logo-p, .logo-elito{ color: var(--texto); }
.logo-app{
  color: var(--turquesa);
  text-shadow: 0 0 14px rgba(95,211,196,.55);
  transition: text-shadow .3s;
}
.logo:hover .logo-app{ text-shadow: 0 0 20px rgba(95,211,196,.85); }
.logo-icono{ align-self:center; margin-left:9px; height:34px; width:auto; flex-shrink:0; }
.subtitle{ font-size:11.5px; color:var(--texto-suave); margin-top:3px; letter-spacing:.2px; }
.topbar-status{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }

.conn-status{ font-size:12px; padding:5px 12px; border-radius:14px; background:#fff; border:1px solid var(--borde); box-shadow:0 1px 3px rgba(0,0,0,.06); }
.conn-disconnected{ color:#a05a3a; }
.conn-connected{ color:var(--verde-estado); }
.contador-pappelitos{ font-size:12px; color:var(--texto-suave); white-space:nowrap; }
.badge-nuevas{
  font-size:12px; font-weight:700; color:var(--coral-hover);
  background:#fff6f3; border:1px solid var(--borde);
  padding:4px 10px; border-radius:12px; white-space:nowrap;
}

.btn{
  border:none;
  border-radius:9px;
  padding:9px 16px;
  font-size:13px;
  cursor:pointer;
  font-weight:700;
  transition: transform .15s, box-shadow .15s;
}
.btn-primary{
  background: linear-gradient(155deg, var(--coral-light), var(--coral));
  color:#fff;
  box-shadow: 0 4px 12px rgba(255,133,103,.45), 0 1px 0 rgba(255,255,255,.4) inset;
}
.btn-primary:hover{ transform:translateY(-2px); background: linear-gradient(155deg, var(--coral-light), var(--coral-hover)); box-shadow: 0 8px 18px rgba(255,133,103,.55), 0 1px 0 rgba(255,255,255,.4) inset; }
.btn-ghost{ background:#fff; color:var(--coral-hover); border:1px solid var(--borde); }
.btn-ghost:hover{ transform:translateY(-2px); box-shadow:0 6px 14px rgba(0,0,0,.08); }
.btn:disabled{ opacity:.55; cursor:not-allowed; }
.btn:disabled:hover{ transform:none; box-shadow:none; }

.connection-banner{
  background: var(--amarillo);
  color:#5c4a12;
  font-size:12.5px;
  padding:12px 20px;
  line-height:1.4;
  margin: 12px 24px 0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
}
.connection-banner strong{ color: var(--coral-hover); }

.vencimientos-banner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  background:#fbe6e4; color:#7a231d; border:1px solid var(--rojo);
  font-size:12.5px; font-weight:700; text-align:center;
  padding:9px 20px; line-height:1.4;
  margin: 12px 24px 0;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,.06);
  cursor:pointer; transition: transform .12s, box-shadow .12s;
}
.vencimientos-banner:hover{ transform:translateY(-1px); box-shadow: 0 8px 18px rgba(0,0,0,.1); }
.auto-archivado-banner{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:#e3f2f5; color:#1e5a66; border:1px solid var(--turquesa);
  font-size:12.5px; font-weight:600; text-align:center;
  padding:9px 20px; line-height:1.4; margin:12px 24px 0; border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.auto-archivado-cerrar{
  background:none; border:none; font-size:14px; line-height:1;
  color:#1e5a66; opacity:.65; flex-shrink:0;
}
.auto-archivado-cerrar:hover{ opacity:1; }

.version-tag{
  position:fixed; right:8px; bottom:6px; font-size:10px; color:var(--texto-suave);
  opacity:.55; pointer-events:none; z-index:5;
}

.vencimientos-banner-posponer{
  background:none; border:1px solid rgba(122,35,29,.4); border-radius:14px;
  color:#7a231d; font-size:11px; font-weight:700; padding:4px 11px; white-space:nowrap;
}
.vencimientos-banner-posponer:hover{ background:rgba(122,35,29,.1); border-color:#7a231d; }

/* ===== Popup "Vencidos y por vencer" ===== */
.vencimiento-fila{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:9px 12px; border-radius:8px; cursor:pointer;
  background:rgba(255,255,255,.7); transition: background .12s, transform .12s;
}
.vencimiento-fila:hover{ background:#fff; transform:translateX(2px); }
.vencimiento-fila-texto{ flex:1; min-width:120px; font-size:13px; color:var(--texto); word-break:break-word; }
.vencimiento-fila-columna{ font-size:11px; color:var(--texto-suave); white-space:nowrap; }

/* ===== Gantt ===== */
.gantt-leyenda{ display:flex; flex-wrap:wrap; gap:16px; font-size:12px; color:var(--texto-suave); padding-bottom:10px; }
.gantt-leyenda span{ display:inline-flex; align-items:center; gap:6px; }
.gantt-leyenda-punto{ width:10px; height:10px; border-radius:50%; display:inline-block; }
.gantt-leyenda-punto.gantt-barra-vencido{ background:var(--rojo); }
.gantt-leyenda-punto.gantt-barra-por-vencer{ background:var(--coral-hover); }
.gantt-leyenda-punto.gantt-barra-normal{ background:var(--turquesa); }

.gantt-chart{ position:relative; }
.gantt-header, .gantt-fila{ display:flex; align-items:center; }
.gantt-etiqueta-espacio{ flex:0 0 var(--gantt-etiqueta-ancho); }
.gantt-header{ padding-bottom:6px; margin-bottom:4px; border-bottom:1px solid var(--borde); }
.gantt-header-track{ flex:1; position:relative; height:16px; }
.gantt-marca-semana{
  position:absolute; top:0; transform:translateX(-50%);
  font-size:10.5px; color:var(--texto-suave); white-space:nowrap;
}
.gantt-filas{ position:relative; display:flex; flex-direction:column; }

.gantt-fila{
  gap:0; padding:6px 0; border-radius:8px; cursor:pointer;
  transition: background .12s, transform .12s;
}
.gantt-fila:hover{ background:rgba(255,255,255,.7); transform:translateX(2px); }

.gantt-etiqueta{
  flex:0 0 var(--gantt-etiqueta-ancho); display:flex; align-items:center; gap:6px;
  padding-right:10px; overflow:hidden;
}
.gantt-punto-color{
  width:11px; height:11px; min-width:11px; border-radius:50%;
  box-shadow: inset 0 0 0 1.5px rgba(43,22,33,.35); /* mismo recurso que "hoy" en el Planner Anual */
}
.gantt-punto-color.color-amarillo{ background:#fff3b0; }
.gantt-punto-color.color-rosa{ background:var(--lavanda-light); }
.gantt-punto-color.color-azul{ background:#cfe1f7; }
.gantt-punto-color.color-verde{ background:#d3ecd6; }
.gantt-punto-color.color-beige{ background:#eee7e4; }
.gantt-etiqueta-texto{
  font-size:12.5px; color:var(--texto); white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; flex:1;
}
.gantt-etiqueta-columna{
  font-size:10px; color:var(--texto-suave); white-space:nowrap;
  background:rgba(0,0,0,.05); border-radius:8px; padding:1px 7px;
}

.gantt-track{
  flex:1; position:relative; height:22px;
  background:rgba(0,0,0,.035); border-radius:6px;
}
.gantt-barra{
  position:absolute; top:2px; height:18px; border-radius:5px;
  box-shadow:0 1px 3px rgba(43,22,33,.15); overflow:hidden;
}
.gantt-barra-vencido{ background:rgba(179,38,30,.35); border:1.5px solid var(--rojo); }
.gantt-barra-por-vencer{ background:rgba(255,133,103,.32); border:1.5px solid var(--coral-hover); }
.gantt-barra-normal{ background:rgba(95,211,196,.28); border:1.5px solid var(--turquesa); }
/* "Evento puntual": un rombo en la fecha exacta en vez de una barra — mismas clases de color
   de urgencia de arriba (gantt-barra-vencido/por-vencer/normal), solo cambia la geometría. */
.gantt-marca-puntual{
  position:absolute; top:50%; width:15px; height:15px;
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:3px; box-shadow:0 1px 3px rgba(43,22,33,.15);
}
.gantt-barra-progreso{
  position:absolute; top:0; left:0; bottom:0;
  background:rgba(43,22,33,.22);
}

.gantt-hoy-linea{
  position:absolute; top:22px; bottom:0; width:2px;
  background:var(--coral-hover); opacity:.75; pointer-events:none;
}

/* ===== Tabs ===== */
.tabs{
  display:flex;
  border-bottom:1px solid var(--borde);
  padding:0 24px;
  max-width:1300px; margin:18px auto 0;
  overflow-x:auto;
}
.tab-btn{
  background:none; border:none; border-bottom:3px solid transparent;
  padding:12px 18px; font-size:14px; font-weight:600;
  color: var(--texto-suave); cursor:pointer; white-space:nowrap;
  transition: color .15s;
}
.tab-btn.active{ color:var(--coral-hover); border-bottom-color:var(--coral); }
/* Los botones "extra" (Mi día, Plantillas, oscuro, atajos) van juntos, alineados a la derecha,
   separados del grupo de solapas — un solo margin-left:auto acá los agrupa a todos. */
.tabs-extra{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; }
.btn-atajos{
  align-self:center; flex-shrink:0;
  background:none; border:1px solid var(--borde); border-radius:8px;
  padding:6px 10px; font-size:14px; color:var(--texto-suave);
}
.btn-atajos:hover{ border-color:var(--coral); color:var(--coral-hover); background:#fff6f3; }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; }

/* ===== Barra "quién sos" ===== */
.toolbar-notas{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  padding:16px 24px; max-width:1300px; margin:0 auto;
}
.campo-autor{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--texto-suave); }
.campo-autor input{
  padding:7px 10px; border:1px solid var(--borde); border-radius:5px;
  font-size:13px; font-family:inherit; background:#fff; color:var(--texto); width:170px;
}
.campo-autor input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }

/* ===== Misceláneas (pizarra de corcho) ===== */
.corkboard-wrap{
  padding:0 24px; max-width:1300px; margin:0 auto 18px;
}
.corkboard{
  position:relative;
  min-height:225px;
  background-image:url('assets/corkboard_bg.png');
  background-size:cover;
  background-position:center;
  background-color:#cfa984; /* respaldo mientras carga la imagen */
  border-radius:10px;
  border:7px solid #ad7f52;
  box-shadow:
    inset 0 0 0 2px rgba(255,235,200,.35),
    inset 0 0 0 3px rgba(60,35,15,.3),
    0 10px 24px rgba(43,22,33,.22);
  padding:16px 20px 20px;
}
.corkboard-titulo{
  display:inline-block;
  margin:0 0 12px;
  font-size:13.5px;
  font-weight:800;
  letter-spacing:.6px;
  text-transform:uppercase;
  color:#4a2f14;
  background:rgba(255,255,255,.85);
  padding:4px 12px;
  border-radius:4px;
  box-shadow:0 2px 5px rgba(0,0,0,.2);
}
.corkboard-titulo .corkboard-titulo-sub{
  text-transform:none;
  font-weight:600;
  letter-spacing:0;
  font-size:11px;
  color:#6b4a25;
}
.corkboard-notas{
  display:flex; flex-wrap:wrap; gap:16px 20px; align-items:flex-start;
  min-height:96px;
}
/* Header del corcho: título + toggle Ordenado/Pizarra libre */
.corkboard-header{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:12px; }
.corkboard-header .corkboard-titulo{ margin:0; }
.vista-miscelaneas{ display:inline-flex; gap:4px; background:rgba(255,255,255,.85); border-radius:9px; padding:3px; box-shadow:0 2px 5px rgba(0,0,0,.2); }
.vista-misc-btn{
  background:none; border:none; border-radius:7px; padding:5px 11px;
  font-size:12px; font-weight:700; color:#6b4a25; white-space:nowrap;
}
.vista-misc-btn:hover{ background:rgba(74,47,20,.1); }
.vista-misc-btn.active{ background:var(--coral); color:#fff; }
/* Modo pizarra libre: lienzo con los papelitos en posición absoluta y arrastrables */
.corkboard-notas.modo-libre{ display:block; }
.pizarra-lienzo{ position:relative; min-height:460px; }
.pizarra-lienzo .mini-pappelito{ cursor:grab; touch-action:none; }
.pizarra-lienzo .mini-pappelito.arrastrando-libre{ cursor:grabbing; z-index:50; box-shadow:0 16px 34px rgba(0,0,0,.4); }
.corkboard-vacio{
  font-size:12px; color:#4a2f14; font-style:italic;
  background:rgba(255,255,255,.7); padding:6px 10px; border-radius:6px;
  display:inline-block; align-self:flex-start;
}

/* mini pappelito pinchado */
.mini-pappelito{
  width:96px; height:96px; padding:15px 8px 6px;
  border-radius:3px; cursor:pointer;
  box-shadow:2px 4px 8px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5);
  font-size:10.5px; line-height:1.25;
  position:relative;
  transform:rotate(var(--rot, -3deg));
  transition:transform .18s, box-shadow .18s;
}
.mini-pappelito:hover{ transform:rotate(0deg) scale(1.08) translateY(-2px); box-shadow:3px 8px 16px rgba(0,0,0,.4); z-index:2; }
.mini-pappelito .mp-texto{
  display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical;
  overflow:hidden; word-break:break-word; color:rgba(43,22,33,.85);
}
.mini-pappelito .mp-pin{
  position:absolute; top:-7px; left:50%; transform:translateX(-50%);
  width:14px; height:14px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff9a8f, #b3261e 70%);
  box-shadow:0 2px 3px rgba(0,0,0,.45);
  border:1px solid rgba(0,0,0,.2);
}
.mini-pappelito .mp-autor-badge{
  position:absolute; bottom:3px; right:3px;
  width:15px; height:15px; border-radius:50%;
  background:rgba(43,22,33,.55); color:#fff;
  font-size:8.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.mini-pappelito .mp-link-badge{
  position:absolute; bottom:3px; left:5px; font-size:10px;
}
.mini-pappelito.color-amarillo{ background: linear-gradient(160deg, #fffbe0, #fff3b0); }
.mini-pappelito.color-rosa{ background: linear-gradient(160deg, #f6cfe0, var(--lavanda-light)); }
.mini-pappelito.color-azul{ background: linear-gradient(160deg, #e6f1fc, #cfe1f7); }
.mini-pappelito.color-verde{ background: linear-gradient(160deg, #e6f7e8, #d3ecd6); }
.mini-pappelito.color-beige{ background: linear-gradient(160deg, #f7f2f0, #eee7e4); }

.corkboard-notas > .mini-pappelito:nth-child(4n){ --rot: 4deg; }
.corkboard-notas > .mini-pappelito:nth-child(4n+1){ --rot: -3deg; }
.corkboard-notas > .mini-pappelito:nth-child(4n+2){ --rot: 2deg; }
.corkboard-notas > .mini-pappelito:nth-child(4n+3){ --rot: -1.5deg; }

.corkboard .form-pappelito-nuevo{
  background:rgba(255,255,255,.94); width:220px;
}

/* ===== Pappelito ampliado (se abre en grande al clickear uno chico de la pizarra) ===== */
.pappelito-ampliado-fondo{
  position:fixed; inset:0; background:rgba(43,22,33,.2);
  z-index:150; pointer-events:none;
}
.pappelito-ampliado{
  position:fixed; top:110px; left:50%; transform:translateX(-50%);
  width:280px; min-height:180px; padding:22px 20px 16px;
  border-radius:5px; cursor:grab;
  box-shadow:0 16px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
  z-index:151;
}
.pappelito-ampliado.dragging{ opacity:.35; }
.pappelito-ampliado .pa-pin{
  position:absolute; top:-11px; left:50%; transform:translateX(-50%);
  width:22px; height:22px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ff9a8f, #b3261e 70%);
  box-shadow:0 3px 6px rgba(0,0,0,.45);
  border:1px solid rgba(0,0,0,.2);
}
.pappelito-ampliado .pa-cerrar{
  position:absolute; top:8px; right:10px; background:none; border:none;
  font-size:18px; line-height:1; color:rgba(43,22,33,.5);
}
.pappelito-ampliado .pa-cerrar:hover{ color:var(--rojo); }
.pappelito-ampliado .pa-texto{
  white-space:pre-wrap; word-break:break-word;
  margin:10px 0 16px; font-size:14px; line-height:1.5;
}
.pappelito-ampliado .pa-meta{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  font-size:11px; color:rgba(43,22,33,.65); margin-bottom:12px;
}
.pappelito-ampliado .pa-acciones{
  display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  border-top:1px solid rgba(43,22,33,.15); padding-top:10px;
}
.pappelito-ampliado.color-amarillo{ background: linear-gradient(160deg, #fffbe0, #fff3b0); }
.pappelito-ampliado.color-rosa{ background: linear-gradient(160deg, #f6cfe0, var(--lavanda-light)); }
.pappelito-ampliado.color-azul{ background: linear-gradient(160deg, #e6f1fc, #cfe1f7); }
.pappelito-ampliado.color-verde{ background: linear-gradient(160deg, #e6f7e8, #d3ecd6); }
.pappelito-ampliado.color-beige{ background: linear-gradient(160deg, #f7f2f0, #eee7e4); }

/* ===== Tablero ===== */
main{ padding:20px 24px 60px; max-width:1300px; margin:0 auto; }

.kanban-board{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .kanban-board{ grid-template-columns:1fr; } }

.kanban-col{
  background:#fff; border-radius:14px;
  border: 1.5px solid var(--borde-neutro);
  min-height:340px; display:flex; flex-direction:column;
  box-shadow: 0 8px 20px rgba(74,59,71,.10);
  transition: transform .2s, box-shadow .2s;
}
.kanban-col:hover{ transform: translateY(-3px); box-shadow: 0 14px 26px rgba(74,59,71,.16); }
.kanban-col-header{
  padding:12px 16px; font-weight:800; font-size:13.5px; color:#fff;
  display:flex; justify-content:space-between; align-items:center;
  text-shadow: 0 1px 2px rgba(0,0,0,.15);
  position:relative; overflow:hidden;
  /* redondeo propio (no del contenedor entero) para no recortar menús flotantes,
     como el selector de emojis, que se abren dentro de la columna */
  border-radius:12.5px 12.5px 0 0;
}
.kanban-col-header::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.35), rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.kanban-col[data-columna="pendiente"] .kanban-col-header{ background:linear-gradient(135deg, var(--coral-light), var(--coral)); }
.kanban-col[data-columna="en-curso"] .kanban-col-header{ background:linear-gradient(135deg, var(--lavanda-light), var(--lavanda)); }
.kanban-col[data-columna="resuelta"] .kanban-col-header{ background:linear-gradient(135deg, var(--turquesa-light), var(--turquesa)); }
.btn-archivar-todos{
  position:relative; z-index:1; /* arriba del brillo decorativo ::after del header */
  background:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.55); border-radius:12px;
  color:#fff; font-size:10.5px; font-weight:700; padding:3px 9px; white-space:nowrap;
}
.btn-archivar-todos:hover{ background:rgba(255,255,255,.5); }

.kanban-col-body{
  padding:14px; display:flex; flex-direction:column; gap:12px; flex:1;
  transition:background .12s;
}
.kanban-col-body.drop-hover{ background: #fff6f3; }
/* Línea que marca dónde va a caer la tarjeta al reordenar dentro de la columna */
.drop-indicador{ height:0; border-top:3px solid var(--coral); border-radius:2px; margin:2px 0; box-shadow:0 0 6px rgba(255,133,103,.6); pointer-events:none; }
.col-vacia{ font-size:12.5px; color:var(--texto-suave); font-style:italic; padding:8px 4px; }

/* ===== Pappelito ===== */
.pappelito{
  border-radius:4px; padding:12px 14px 10px; cursor:grab;
  box-shadow:0 3px 8px rgba(43,22,33,.18), inset 0 1px 0 rgba(255,255,255,.5);
  font-size:13px; line-height:1.4;
  position:relative;
  transform:rotate(var(--rot, -1deg));
  transition:transform .12s, box-shadow .12s;
}
.pappelito:hover{ box-shadow:0 6px 16px rgba(43,22,33,.26); transform:rotate(0deg) translateY(-1px); }
.pappelito.dragging{ opacity:.4; }
.pappelito .pi-texto{ white-space:pre-wrap; word-break:break-word; margin-bottom:10px; }
.pappelito .pi-meta{
  display:flex; align-items:center; flex-wrap:wrap;
  font-size:11px; color:rgba(43,22,33,.65); gap:6px;
}
.pappelito .pi-autor{ font-weight:700; }
.pappelito .pi-acciones{ margin-left:auto; }
.pappelito .pi-acciones{ display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

/* Botones-ícono de acción, unificados entre el pappelito normal, el ampliado y el ítem de
   Historial — mismo aspecto en todos lados, cada uno con su tooltip al pasar el mouse. */
.nota-icon-btn{
  background:none; border:1px solid rgba(43,22,33,.3); border-radius:5px;
  padding:4px 7px; font-size:12.5px; line-height:1.3; color:rgba(43,22,33,.65);
}
.nota-icon-btn:hover{ border-color:var(--coral-hover); color:var(--coral-hover); }
.nota-icon-btn.peligro:hover{ border-color:var(--rojo); color:var(--rojo); background:#fbe6e4; }

/* ===== Vista compacta del Tablero: cada pappelito muestra solo lo esencial (texto, autor,
   ✏️💬➜✕) — badges, tags, checklist, el link y el resto de íconos (🕓📤⧉🗄️) quedan ocultos
   hasta que pasás el mouse por encima. No se pierde nada, solo se oculta hasta que hace falta. */
#vistaTarjetas.vista-compacta .pappelito .pi-estancado-badge,
#vistaTarjetas.vista-compacta .pappelito .pi-vencimiento-badge,
#vistaTarjetas.vista-compacta .pappelito .pi-checklist-badge,
#vistaTarjetas.vista-compacta .pappelito .tags-fila,
#vistaTarjetas.vista-compacta .pappelito .checklist-wrap,
#vistaTarjetas.vista-compacta .pappelito .pi-texto-link,
#vistaTarjetas.vista-compacta .pappelito .accion-secundaria{
  display:none;
}
#vistaTarjetas.vista-compacta .pappelito:hover .pi-estancado-badge,
#vistaTarjetas.vista-compacta .pappelito:hover .pi-vencimiento-badge,
#vistaTarjetas.vista-compacta .pappelito:hover .pi-checklist-badge,
#vistaTarjetas.vista-compacta .pappelito:hover .tags-fila,
#vistaTarjetas.vista-compacta .pappelito:hover .checklist-wrap,
#vistaTarjetas.vista-compacta .pappelito:hover .pi-texto-link,
#vistaTarjetas.vista-compacta .pappelito:hover .accion-secundaria{
  display:inline-block;
}
#vistaTarjetas.vista-compacta .pappelito:hover .checklist-wrap,
#vistaTarjetas.vista-compacta .pappelito:hover .tags-fila{
  display:flex;
}
#vistaTarjetas.vista-compacta .pappelito{ transition: box-shadow .15s; }

/* Botón "➜ mover" con menú propio (reemplaza a un <select> nativo del sistema operativo) —
   funciona igual con mouse o con el dedo, y no depende de que la columna destino esté visible. */
.mover-picker-cont{ position:relative; display:inline-block; }
.mover-menu{
  position:absolute; bottom:calc(100% + 4px); left:0; z-index:60;
  background:#fff; border:1px solid var(--borde); border-radius:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  padding:4px; display:flex; flex-direction:column; gap:2px;
  min-width:130px;
}
.mover-opcion{
  background:none; border:none; border-radius:5px;
  font-size:12px; font-weight:600; color:var(--texto);
  padding:6px 10px; text-align:left;
}
.mover-opcion:hover{ background:#fff6f3; color:var(--coral-hover); }

.compartir-picker-cont{ position:relative; display:inline-block; }
.compartir-menu{
  position:absolute; bottom:calc(100% + 4px); left:0; z-index:60;
  background:#fff; border:1px solid var(--borde); border-radius:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  padding:4px; display:flex; flex-direction:column; gap:2px;
  min-width:150px;
}
.compartir-opcion{
  background:none; border:none; border-radius:5px;
  font-size:12px; font-weight:600; color:var(--texto);
  padding:6px 10px; text-align:left; white-space:nowrap;
}
.compartir-opcion:hover{ background:#fff6f3; color:var(--coral-hover); }

.pappelito.color-amarillo .btn-mover, .pappelito-ampliado.color-amarillo .btn-mover{ background:rgba(255,243,176,.7); }
.pappelito.color-rosa .btn-mover, .pappelito-ampliado.color-rosa .btn-mover{ background:rgba(220,201,247,.7); }
.pappelito.color-azul .btn-mover, .pappelito-ampliado.color-azul .btn-mover{ background:rgba(207,225,247,.7); }
.pappelito.color-verde .btn-mover, .pappelito-ampliado.color-verde .btn-mover{ background:rgba(211,236,214,.7); }
.pappelito.color-beige .btn-mover, .pappelito-ampliado.color-beige .btn-mover{ background:rgba(238,231,228,.7); }

/* Edición in-place (pappelito normal, ampliado, ítem de Historial) */
.editar-textarea{
  width:100%; padding:8px 10px; border:1px solid var(--borde); border-radius:5px;
  font-size:13px; font-family:inherit; resize:vertical; min-height:56px;
  background:rgba(255,255,255,.75); color:var(--texto); margin-bottom:6px;
}
.editar-link{
  width:100%; padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:rgba(255,255,255,.75);
  color:var(--texto); margin-bottom:8px;
}
.editar-textarea:focus, .editar-link:focus{
  outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18);
}
.editar-botones{ display:flex; justify-content:flex-end; gap:8px; }

/* El texto principal es un <div contenteditable>, no un <textarea> — necesita su propio
   placeholder (no existe nativo en contenteditable) y que respete los saltos de línea. */
.editar-textarea[contenteditable]{
  white-space:pre-wrap; word-break:break-word; cursor:text; overflow-wrap:break-word;
}
.editar-textarea[contenteditable]:empty:before{
  content: attr(data-placeholder); color:var(--texto-suave); pointer-events:none;
}
/* Negrita/itálica/viñetas/resaltado dentro del texto — tanto editando como ya guardado. */
.editar-textarea ul, .pi-texto ul, .pa-texto ul, .hi-texto ul{ margin:4px 0; padding-left:20px; }
.editar-textarea li, .pi-texto li, .pa-texto li, .hi-texto li{ margin-bottom:2px; }
mark{
  background:#ffc93c; color:inherit; border-radius:2px; padding:0 2px;
  box-shadow: inset 0 -2px 0 rgba(43,22,33,.15);
}

/* Link opcional (carpeta, documento) — mismo estilo en pappelito normal, ampliado e Historial */
.pi-texto-link, .pa-texto-link, .hi-texto-link{
  display:inline-block; font-size:11.5px; font-weight:600;
  color:var(--turquesa-texto); text-decoration:none; margin:-4px 0 8px;
}
.pi-texto-link:hover, .pa-texto-link:hover, .hi-texto-link:hover{ text-decoration:underline; }

/* ===== Selector chico de emojis (comentarios — el texto principal usa la barra de formato) ===== */
.emoji-picker-cont{ position:relative; display:inline-block; }
.btn-emoji{
  background:none; border:1px solid var(--borde); border-radius:5px;
  font-size:15px; padding:4px 7px; line-height:1;
}
.btn-emoji:hover{ border-color:var(--coral); background:#fff6f3; }
.emoji-grilla{
  position:absolute; top:calc(100% + 4px); left:0; z-index:60;
  background:#fff; border:1px solid var(--borde); border-radius:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.2);
  padding:8px; display:grid; grid-template-columns:repeat(5, 1fr); gap:2px;
  width:180px;
}
.emoji-opcion{
  background:none; border:none; font-size:17px; padding:4px; border-radius:4px;
}
.emoji-opcion:hover{ background:#fff6f3; }

/* ===== Barra de formato + emoji del texto principal (un solo botón "Aa") ===== */
.formato-picker-cont{ position:relative; display:inline-block; }
.btn-formato{
  background:none; border:1px solid var(--borde); border-radius:5px;
  font-size:13px; font-weight:700; padding:4px 8px; line-height:1; color:var(--texto);
}
.btn-formato:hover{ border-color:var(--coral); background:#fff6f3; }
.btn-magia{
  background:none; border:1px solid var(--borde); border-radius:5px;
  font-size:14px; padding:4px 8px; line-height:1;
}
.btn-magia:hover{ border-color:var(--lavanda); background:#f6f1fd; }
.formato-panel{
  position:absolute; top:calc(100% + 4px); left:0; z-index:60;
  background:#fff; border:1px solid var(--borde); border-radius:8px;
  box-shadow:0 8px 22px rgba(0,0,0,.2); padding:8px; width:180px;
}
.formato-botones{
  display:grid; grid-template-columns:repeat(4, 1fr); gap:4px;
  padding-bottom:8px; margin-bottom:8px; border-bottom:1px solid var(--borde);
}
.formato-btn{
  background:none; border:1px solid var(--borde); border-radius:5px;
  font-size:14px; padding:6px 4px; color:var(--texto);
}
.formato-btn:hover{ border-color:var(--coral); background:#fff6f3; }
.formato-negrita{ font-weight:800; }
.formato-italica{ font-style:italic; }
.emoji-grilla-inline{ display:grid; grid-template-columns:repeat(5, 1fr); gap:2px; }

/* ===== Pappelito "estancado" (mucho tiempo sin moverse) ===== */
.pi-estancado-badge{
  position:absolute; top:-7px; right:10px;
  background:#fff3e0; border:1px solid #e0a94d; color:#8a5a10;
  font-size:10px; font-weight:700; padding:1px 7px; border-radius:10px;
  box-shadow:0 1px 3px rgba(0,0,0,.15);
}

/* ===== Asignación de un pappelito a una persona ===== */
.avatar-asignado{
  width:24px; height:24px; border-radius:50%;
  background:#b79ced; color:#fff; font-size:11px; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 2px 6px rgba(183,156,237,.45); flex-shrink:0;
}
.avatar-asignado.chico{ width:18px; height:18px; font-size:9.5px; }
.pappelito > .avatar-asignado{ position:absolute; top:8px; right:8px; z-index:1; }
.pappelito.tiene-asignado .pi-texto{ padding-right:26px; }
.mini-pappelito > .avatar-asignado{ position:absolute; top:3px; right:3px; }
/* Franja "Asignado a…" en el pappelito ampliado */
.pa-asignado{
  display:flex; align-items:center; gap:10px;
  background:rgba(183,156,237,.14); border:1px solid rgba(183,156,237,.4);
  border-radius:10px; padding:8px 10px; margin:0 0 10px;
}
.pa-asignado-txt{ display:flex; flex-direction:column; font-size:12.5px; color:var(--texto); line-height:1.3; min-width:0; }
.pa-asignado-txt b{ color:#6a4fb0; }
.pa-asignado-mail{ font-size:10.5px; color:var(--texto-suave); word-break:break-all; }
.pa-btn-avisar{
  margin-left:auto; background:#fff; border:1px solid var(--lavanda);
  color:#6a4fb0; border-radius:9px; padding:6px 12px; font-size:12px; font-weight:700; white-space:nowrap;
}
.pa-btn-avisar:hover{ background:#f6f1fd; }
/* Campo "Asignar a…" en los formularios */
.editar-asignar, .campo-asignar-nueva{
  width:100%; padding:7px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:#fff; color:var(--texto); margin-bottom:8px;
}
.editar-asignar:focus, .campo-asignar-nueva:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }

/* ===== Vencimiento opcional (fecha límite) ===== */
.pi-vencimiento-badge{
  font-size:10px; font-weight:700; padding:1px 8px; border-radius:10px; white-space:nowrap;
}
.pi-vencimiento-badge.vencimiento-normal{ background:rgba(43,22,33,.08); color:rgba(43,22,33,.6); }
.pi-vencimiento-badge.vencimiento-por-vencer{ background:#fff3e0; border:1px solid #e0a94d; color:#8a5a10; }
.pi-vencimiento-badge.vencimiento-vencido{ background:#fbe6e4; border:1px solid var(--rojo); color:var(--rojo); }

/* ===== Reacciones ===== */
.reacciones-barra{ display:flex; flex-wrap:wrap; gap:6px; margin:4px 0 2px; }
.reaccion-btn{
  background:#fff; border:1px solid var(--borde); border-radius:14px;
  padding:3px 10px; font-size:13px; line-height:1.2; color:var(--texto); cursor:pointer;
  transition: border-color .12s, background .12s, transform .12s;
}
.reaccion-btn:hover{ border-color:var(--coral); transform:translateY(-1px); }
.reaccion-btn.activa{ background:#fff0eb; border-color:var(--coral); font-weight:700; }
.reacciones-chips{ display:flex; gap:4px; flex-wrap:wrap; }
.reaccion-chip{
  background:rgba(43,22,33,.06); border-radius:10px; padding:1px 7px; font-size:11px; white-space:nowrap;
}

/* ===== @menciones ===== */
.mencion{ color:var(--lavanda); font-weight:700; }
.mencion-sugerencias{
  display:flex; flex-direction:column; margin:4px 0; border:1px solid var(--borde);
  border-radius:8px; overflow:hidden; background:#fff; box-shadow:0 6px 16px rgba(74,59,71,.12);
}
.mencion-sugerencia{
  text-align:left; background:#fff; border:none; padding:7px 11px; font-size:13px;
  color:var(--texto); cursor:pointer; border-bottom:1px solid #f3ece6;
}
.mencion-sugerencia:last-child{ border-bottom:none; }
.mencion-sugerencia:hover{ background:#fff6f3; color:var(--coral-hover); }

/* ===== Prioridad ===== */
.pi-prioridad-badge{ font-size:10px; font-weight:700; padding:1px 8px; border-radius:10px; white-space:nowrap; }
.pi-prioridad-badge.prioridad-alta{ background:#fbe0dd; border:1px solid #d9463b; color:#b3261e; }
.pi-prioridad-badge.prioridad-media{ background:#fff3e0; border:1px solid #e0a94d; color:#8a5a10; }
.pi-prioridad-badge.prioridad-baja{ background:#e3edfa; border:1px solid #6f9fd8; color:#2f5f9e; }
.select-prioridad{
  padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:#fff; color:var(--texto); margin-bottom:8px;
}
.select-prioridad:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }

/* Resalte del pappelito completo (no solo el badge chico) cuando está por vencer o vencido —
   mismo lenguaje visual que el resalte de "hoy" en el Planner, con su propio color por estado. */
.pappelito.vencimiento-card-por-vencer,
.mini-pappelito.vencimiento-card-por-vencer,
.mini-pegado.vencimiento-card-por-vencer{
  box-shadow:
    0 0 0 2.5px #e0a94d,
    0 0 18px 5px rgba(224,169,77,.85),
    0 3px 8px rgba(43,22,33,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
.pappelito.vencimiento-card-vencido,
.mini-pappelito.vencimiento-card-vencido,
.mini-pegado.vencimiento-card-vencido{
  box-shadow:
    0 0 0 2px rgba(179,38,30,.85),
    0 0 16px 3px rgba(179,38,30,.55),
    0 3px 8px rgba(43,22,33,.18), inset 0 1px 0 rgba(255,255,255,.5);
}
.pappelito-ampliado.vencimiento-card-por-vencer{
  box-shadow:
    0 0 0 3px #e0a94d,
    0 0 26px 6px rgba(224,169,77,.85),
    0 16px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.pappelito-ampliado.vencimiento-card-vencido{
  box-shadow:
    0 0 0 3px rgba(179,38,30,.85),
    0 0 24px 5px rgba(179,38,30,.5),
    0 16px 36px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.5);
}
.mes-celda .chip.vencimiento-card-por-vencer{ box-shadow: inset 0 0 0 1.5px #e0a94d; }
.mes-celda .chip.vencimiento-card-vencido{ box-shadow: inset 0 0 0 1.5px var(--rojo); }
.editar-vencimiento{
  padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:rgba(255,255,255,.75);
  color:var(--texto); margin-bottom:8px;
}
.editar-vencimiento:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }
.campo-vencimiento-nueva{
  padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:#fff; color:var(--texto);
}
.campo-vencimiento-nueva:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }

.editar-fila-fecha, .form-pappelito-nuevo-fecha{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.editar-fila-fecha .editar-vencimiento,
.form-pappelito-nuevo-fecha .campo-vencimiento-nueva{ flex:1; margin-bottom:0; min-width:120px; }
.editar-hora, .campo-hora-nueva{
  padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:#fff; color:var(--texto); margin-bottom:0;
}
.editar-hora:focus, .campo-hora-nueva:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }
/* Campos de fecha rotulados (Inicio / Límite) */
.campo-rotulado{ display:flex; flex-direction:column; gap:2px; margin-bottom:0; }
.campo-rotulo{ font-size:9.5px; font-weight:700; color:var(--texto-suave); text-transform:uppercase; letter-spacing:.3px; padding-left:2px; }
.editar-inicio, .campo-inicio-nueva{
  padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:#fff; color:var(--texto); margin-bottom:0;
}
.editar-inicio:focus, .campo-inicio-nueva:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }
.select-recurrencia{
  padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:#fff; color:var(--texto);
}
.select-recurrencia:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }
.check-evento-puntual{
  display:flex; align-items:center; gap:5px; flex-shrink:0;
  font-size:11px; color:var(--texto-suave); white-space:nowrap; cursor:pointer;
}
.check-evento-puntual input{ cursor:pointer; }

/* ===== Tags libres ===== */
.tags-fila{ display:flex; flex-wrap:wrap; gap:5px; margin:4px 0 8px; }
.tag-chip-solo{
  font-size:10px; font-weight:700; padding:2px 9px; border-radius:10px;
  background:var(--lavanda-light); color:#4a3b6b;
  cursor:pointer; transition: background .12s, transform .12s;
}
.tag-chip-solo:hover{ background:var(--lavanda); color:#fff; transform:translateY(-1px); }
.tags-editor{ margin-bottom:8px; }
.tags-chips{ display:flex; flex-wrap:wrap; gap:5px; margin-bottom:6px; }
.tags-chips:empty{ display:none; margin:0; }
.tag-chip{
  display:inline-flex; align-items:center; gap:4px;
  font-size:10.5px; font-weight:700; padding:2px 6px 2px 10px; border-radius:10px;
  background:var(--lavanda-light); color:#4a3b6b;
}
.tag-chip button{
  background:none; border:none; color:#4a3b6b; font-size:12px; line-height:1; padding:0 2px;
  opacity:.7;
}
.tag-chip button:hover{ opacity:1; color:var(--rojo); }
.tags-input{
  width:100%; padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:#fff; color:var(--texto);
}
.tags-input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }

/* ===== Checklist (subtareas) ===== */
.pi-checklist-badge{
  font-size:10px; font-weight:700; padding:1px 8px; border-radius:10px; white-space:nowrap;
  background:rgba(43,22,33,.08); color:rgba(43,22,33,.6);
}
.pi-checklist-badge.completo{ background:rgba(30,122,52,.15); color:var(--verde-estado); }
.checklist-wrap{
  margin:4px 0 14px; padding-top:10px; border-top:1px solid rgba(43,22,33,.12);
  display:flex; flex-direction:column; gap:4px;
}
.checklist-item{ display:flex; align-items:center; gap:8px; font-size:13px; }
.checklist-item input[type="checkbox"]{ flex-shrink:0; }
.checklist-item-texto{ flex:1; word-break:break-word; }
/* El tachado se hace con un pseudo-elemento (una línea con ancho animable) en vez de
   text-decoration, para poder "dibujarla" de izquierda a derecha al completar el ítem. */
.checklist-item.hecho .checklist-item-texto{ color:rgba(43,22,33,.45); position:relative; }
.checklist-item.hecho .checklist-item-texto::after{
  content:""; position:absolute; left:0; top:50%; height:2px; width:100%;
  background:currentColor; transform:translateY(-50%);
}
/* Al recién completarlo: rebote del casillero + la línea de tachado se dibuja sola. */
.checklist-item.recien-hecho input[type="checkbox"]{ animation: checkPop .32s ease; }
.checklist-item.recien-hecho .checklist-item-texto::after{ animation: tachar .3s ease .05s both; }
@keyframes checkPop{ 0%{ transform:scale(1); } 40%{ transform:scale(1.5); } 100%{ transform:scale(1); } }
@keyframes tachar{ from{ width:0; } to{ width:100%; } }
@media (prefers-reduced-motion: reduce){
  .checklist-item.recien-hecho input[type="checkbox"],
  .checklist-item.recien-hecho .checklist-item-texto::after{ animation:none; }
}
.checklist-item-borrar{
  background:none; border:none; font-size:15px; line-height:1;
  color:rgba(43,22,33,.35); flex-shrink:0;
}
.checklist-item-borrar:hover{ color:var(--rojo); }
.checklist-nueva{ margin-top:4px; }
.checklist-nueva input{
  width:100%; padding:6px 9px; border:1px dashed var(--borde); border-radius:5px;
  font-size:12.5px; font-family:inherit; background:rgba(255,255,255,.6); color:var(--texto);
}
.checklist-nueva input:focus{ outline:none; border-color:var(--coral); border-style:solid; box-shadow:0 0 0 3px rgba(255,159,135,.18); }

.pappelito.color-amarillo{ background: linear-gradient(160deg, #fffbe0, #fff3b0); }
.pappelito.color-rosa{ background: linear-gradient(160deg, #f6cfe0, var(--lavanda-light)); }
.pappelito.color-azul{ background: linear-gradient(160deg, #e6f1fc, #cfe1f7); }
.pappelito.color-verde{ background: linear-gradient(160deg, #e6f7e8, #d3ecd6); }
.pappelito.color-beige{ background: linear-gradient(160deg, #f7f2f0, #eee7e4); }

/* Rotación fija por posición (alternada), evita que se vea todo perfectamente derecho */
.kanban-col-body .pappelito:nth-child(3n){ --rot: 1.2deg; }
.kanban-col-body .pappelito:nth-child(3n+1){ --rot: -1deg; }
.kanban-col-body .pappelito:nth-child(3n+2){ --rot: 0.4deg; }

/* ===== Formulario de pappelito nuevo ===== */
.form-pappelito-nuevo{
  background:#fff; border:1.5px dashed var(--borde); border-radius:10px;
  padding:12px; display:flex; flex-direction:column; gap:8px;
  box-shadow: 0 4px 12px rgba(74,59,71,.06);
}
.campo-link-nueva{
  padding:6px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:12px; font-family:inherit; background:#fff; color:var(--texto);
}
.campo-link-nueva:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }
.form-pappelito-nuevo-fila{ display:flex; justify-content:space-between; align-items:center; gap:8px; }
.form-pappelito-nuevo-izquierda{ display:flex; align-items:center; gap:10px; }
.selector-colores{ display:flex; gap:6px; }
.selector-colores button{
  width:20px; height:20px; border-radius:50%; border:2px solid transparent; padding:0;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.selector-colores button.color-amarillo{ background:#fff3b0; }
.selector-colores button.color-rosa{ background:var(--lavanda-light); }
.selector-colores button.color-azul{ background:#cfe1f7; }
.selector-colores button.color-verde{ background:#d3ecd6; }
.selector-colores button.color-beige{ background:#eee7e4; }
.selector-colores button.activo{ border-color:var(--coral); }
.btn-nuevo-pappelito{
  width:100%; padding:11px; border:1.5px dashed var(--borde); border-radius:10px;
  background:#fff; color:var(--texto-suave); font-size:13px; font-weight:700;
  transition: transform .15s, box-shadow .15s, border-color .15s, color .15s;
}
.btn-nuevo-pappelito:hover{ background:#fff; color:var(--coral-hover); border-color:var(--coral); transform:translateY(-2px); box-shadow:0 8px 16px rgba(255,159,135,.28); }

/* ===== Filtros rápidos del tablero (chips) ===== */
.filtros-rapidos{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin:-4px 0 14px; padding:0 4px;
}
.filtros-rapidos-label{ font-size:12px; color:var(--texto-suave); font-weight:600; }
.filtro-rapido-btn{
  background:#fff; border:1px solid var(--borde); border-radius:16px;
  padding:5px 12px; font-size:12px; font-weight:600; color:var(--texto-suave); white-space:nowrap;
  transition: border-color .12s, color .12s, background .12s;
}
.filtro-rapido-btn:hover{ border-color:var(--coral); color:var(--coral-hover); }
.filtro-rapido-btn.activo{ background:var(--coral); border-color:var(--coral); color:#fff; }
.filtro-rapido-colores{ display:flex; gap:4px; align-items:center; }
.filtro-rapido-color{
  width:18px; height:18px; border-radius:50%; border:2px solid transparent;
  cursor:pointer; padding:0; transition: transform .12s, border-color .12s;
}
.filtro-rapido-color:hover{ transform:scale(1.15); }
.filtro-rapido-color.activo{ border-color:var(--texto); transform:scale(1.15); }
.filtro-rapido-color.color-amarillo{ background:#fff3b0; }
.filtro-rapido-color.color-rosa{ background:#ffd6e6; }
.filtro-rapido-color.color-azul{ background:#cfe1f7; }
.filtro-rapido-color.color-verde{ background:#d3ecd6; }
.filtro-rapido-color.color-beige{ background:#eee7e4; }
.filtro-rapido-limpiar{
  background:none; border:none; font-size:11.5px; font-weight:600; color:var(--coral-hover);
  cursor:pointer; text-decoration:underline; padding:4px 6px;
}
.filtro-rapido-limpiar:hover{ color:var(--rojo); }

/* ===== Historial ===== */
.toolbar{
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  margin-bottom:14px; background:#fff;
  padding:10px 14px; border-radius:10px;
  box-shadow: 0 4px 12px rgba(74,59,71,.06);
}
.toolbar input[type="text"]{
  flex:1; min-width:180px; padding:7px 10px; border:1px solid var(--borde);
  border-radius:5px; font-size:13px; font-family:inherit; background:#fff; color:var(--texto);
}
.toolbar input:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }
.contador-toolbar{ font-size:12px; color:var(--texto-suave); white-space:nowrap; }
.toolbar .btn-toggle-mios{
  background:#fff; border:1px solid var(--borde); border-radius:16px;
  padding:6px 12px; font-size:12.5px; font-weight:600; color:var(--texto-suave);
  white-space:nowrap;
}
.toolbar .btn-toggle-mios:hover{ border-color:var(--coral); color:var(--coral-hover); }
.toolbar .btn-toggle-mios.activo{ background:var(--coral); border-color:var(--coral); color:#fff; }

.vista-toggle{ display:flex; gap:4px; }
.vista-toggle-btn{
  background:#fff; border:1px solid var(--borde); border-radius:8px;
  padding:6px 9px; font-size:12px; font-weight:600; color:var(--texto-suave);
  white-space:nowrap;
}
.vista-toggle-btn:hover{ border-color:var(--coral); color:var(--coral-hover); }
.vista-toggle-btn.active{ background:#fff6f3; border-color:var(--coral); color:var(--coral-hover); }

/* ===== Vista de lista (tabla), alternativa a las tarjetas ===== */
.tabla-wrap{ background:#fff; border:1px solid var(--borde-neutro); border-radius:10px; overflow-x:auto; }
table.tabla-pappelitos{ width:100%; border-collapse:collapse; font-size:13px; }
table.tabla-pappelitos thead th{
  text-align:left; background:#fff6f3; color:var(--coral-hover);
  padding:9px 12px; border-bottom:1px solid var(--borde); white-space:nowrap;
  cursor:pointer; user-select:none;
}
table.tabla-pappelitos thead th:hover{ color:var(--rojo); }
table.tabla-pappelitos tbody td{ padding:8px 12px; border-bottom:1px solid #f1ece2; vertical-align:top; }
table.tabla-pappelitos tbody tr:hover{ background:#fdfaf5; }
.tabla-pappelitos .td-texto{ max-width:360px; white-space:pre-wrap; word-break:break-word; }
.tabla-pappelitos .badge-col{
  display:inline-block; padding:2px 9px; border-radius:12px;
  font-size:11px; font-weight:700; color:#fff; white-space:nowrap;
}
.tabla-pappelitos .badge-col-pendiente{ background:var(--coral); }
.tabla-pappelitos .badge-col-en-curso{ background:var(--lavanda); }
.tabla-pappelitos .badge-col-resuelta{ background:var(--turquesa-texto); }
.tabla-pappelitos .badge-col-miscelaneas{ background:#ad7f52; }
.tabla-pappelitos .badge-col-planner{ background:var(--fucsia); }
.tabla-vacia{ padding:24px; text-align:center; color:var(--texto-suave); font-size:13px; }

.historial-filtros{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:14px; }
.filtro-origen-btn{
  background:#fff; border:1px solid var(--borde); border-radius:14px;
  padding:5px 12px; font-size:11.5px; font-weight:600; color:var(--texto-suave);
}
.filtro-origen-btn:hover{ border-color:var(--coral); color:var(--coral-hover); }
.filtro-origen-btn.active{ background:var(--coral); border-color:var(--coral); color:#fff; }

.historial-lista{ display:flex; flex-direction:column; gap:8px; }
.historial-item{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  background:#fff; border-left:4px solid var(--texto-suave);
  border-radius:8px; padding:10px 14px; font-size:13px;
  box-shadow: 0 3px 10px rgba(74,59,71,.07);
  transition: transform .15s, box-shadow .15s;
}
.historial-item:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgba(74,59,71,.12); }
.historial-item.color-amarillo{ border-left-color:#e0c34a; }
.historial-item.color-rosa{ border-left-color:var(--lavanda); }
.historial-item.color-azul{ border-left-color:#4f8ddb; }
.historial-item.color-verde{ border-left-color:#4f9e5c; }
.historial-item.color-beige{ border-left-color:var(--texto-suave); }
.historial-item .hi-texto{ flex:1; min-width:200px; white-space:pre-wrap; word-break:break-word; }
.historial-item .hi-meta{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--texto-suave); white-space:nowrap; }
.hi-origen{
  font-size:10px; font-weight:700; padding:1px 8px; border-radius:10px; white-space:nowrap;
}
.hi-origen-resuelta{ background:rgba(30,122,52,.15); color:var(--verde-estado); }
.hi-origen-pendiente, .hi-origen-en-curso, .hi-origen-miscelaneas{
  background:rgba(43,22,33,.08); color:var(--texto-suave);
}
.historial-item .hi-acciones{ display:flex; gap:6px; }
.historial-item .hi-acciones button{
  background:none; border:1px solid var(--borde); border-radius:5px;
  padding:5px 9px; font-size:11px; color:var(--texto-suave); font-weight:600;
}
.historial-item .hi-acciones button:hover{ border-color:var(--turquesa-texto); color:var(--turquesa-texto); }
.historial-item .hi-acciones button.hi-eliminar:hover{ border-color:var(--rojo); color:var(--rojo); }
.texto-vacio{ font-size:12.5px; color:var(--texto-suave); font-style:italic; }

/* ===== Toast ===== */
#toast{
  position:fixed; bottom:18px; right:18px;
  background:var(--texto); color:#fff;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px; border-radius:8px; font-size:13px;
  opacity:0; transform:translateY(10px);
  transition:opacity .2s, transform .2s;
  pointer-events:none; max-width:360px; z-index:200;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
#toast.show{ opacity:1; transform:translateY(0); pointer-events:auto; }
#toast.error{ background:#7a231d; }
#toast .toast-accion{
  background:none; border:1px solid rgba(255,255,255,.5); border-radius:5px;
  color:#fff; font-weight:700; font-size:12px; padding:4px 10px; white-space:nowrap;
}
#toast .toast-accion:hover{ background:rgba(255,255,255,.15); border-color:#fff; }

/* ===== Confirmación de borrado (reemplaza el confirm() nativo del navegador) ===== */
.hn-fondo{
  position:fixed; inset:0; z-index:160;
  background:rgba(43,22,33,.35);
  backdrop-filter: blur(2px);
}
.hn-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(560px, 92vw); max-height:80vh; overflow-y:auto;
  background:rgba(255,255,255,.95);
  backdrop-filter: blur(8px);
  border-radius:14px;
  box-shadow:0 20px 50px rgba(0,0,0,.3);
  padding:20px 24px 24px;
  z-index:161;
}
.hn-header{ display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; }
.hn-header h3{ margin:0; font-size:16px; color:var(--coral-hover); }
.hn-header-botones{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.hn-cerrar{
  background:none; border:none; font-size:19px; line-height:1;
  color:var(--texto-suave); flex-shrink:0;
}
.hn-cerrar:hover{ color:var(--rojo); }
.hn-icono-btn{
  background:none; border:none; font-size:16px; line-height:1;
  color:var(--texto-suave); flex-shrink:0; padding:2px;
}
.hn-icono-btn:hover{ color:var(--coral-hover); }
.hn-preview{
  font-size:13px; color:var(--texto-suave); font-style:italic;
  background:#fff6f3; border-radius:8px; padding:10px 14px; margin-bottom:18px;
  white-space:pre-wrap; word-break:break-word;
}
.hn-lista{ display:flex; flex-direction:column; gap:10px; }
.hn-evento{
  display:flex; align-items:baseline; gap:10px;
  padding:9px 12px; border-left:3px solid var(--lavanda);
  background:rgba(255,255,255,.7); border-radius:0 8px 8px 0; font-size:13px;
}
.hn-evento.accion-creada{ border-left-color:var(--verde-estado); }
.hn-evento.accion-archivada, .hn-evento.accion-desarchivada{ border-left-color:var(--coral); }
.hn-evento.accion-editada{ border-left-color:var(--turquesa); }
.hn-evento.accion-comentario{
  display:block; border-left-color:var(--lavanda); background:rgba(183,156,237,.1);
}
.hn-evento-icono{ font-size:14px; }
.hn-evento-texto{ flex:1; color:var(--texto); }
.hn-evento-fecha{ font-size:11px; color:var(--texto-suave); white-space:nowrap; }
.hn-comentario-cab{ font-size:11.5px; font-weight:700; color:var(--coral-hover); margin-bottom:3px; }
.hn-comentario-texto{ font-size:13px; color:var(--texto); white-space:pre-wrap; word-break:break-word; }
.hn-comentario-acciones{ display:flex; gap:4px; margin-top:4px; }
.hn-comentario-acciones button{
  background:none; border:none; font-size:12px; line-height:1;
  color:rgba(43,22,33,.35); padding:2px;
}
.hn-comentario-acciones button:hover{ color:var(--coral-hover); }
.hn-comentario-editar-textarea{
  width:100%; padding:7px 9px; border:1px solid var(--borde); border-radius:5px;
  font-size:13px; font-family:inherit; resize:vertical; min-height:44px;
  margin-bottom:6px; background:#fff; color:var(--texto);
}
.hn-comentario-editar-textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }
.hn-comentario-editar-botones{ display:flex; justify-content:flex-end; gap:8px; }
.hn-form-comentario{ margin-top:14px; padding-top:14px; border-top:1px solid rgba(43,22,33,.12); }
.hn-form-comentario textarea{
  width:100%; padding:8px 10px; border:1px solid var(--borde); border-radius:5px;
  font-size:13px; font-family:inherit; resize:vertical; min-height:50px; margin-bottom:8px;
}
.hn-form-comentario textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,159,135,.18); }
.hn-form-comentario-fila{ display:flex; justify-content:flex-end; align-items:center; gap:8px; }

.confirmar-modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(320px, 88vw); background:#fff; border-radius:12px;
  box-shadow:0 20px 50px rgba(0,0,0,.3); padding:20px 22px; z-index:171;
  text-align:center;
}
.confirmar-modal p{ margin:0 0 16px; font-size:14px; color:var(--texto); }
.confirmar-botones{ display:flex; justify-content:center; gap:10px; }
.btn-peligro-lleno{
  background:var(--rojo); border:1px solid var(--rojo); color:#fff;
  border-radius:8px; padding:8px 16px; font-size:13px; font-weight:700;
}
.btn-peligro-lleno:hover{ background:#8f1f19; }

.footer-nota{ text-align:center; margin-top:10px; padding-bottom:10px; }
.btn-ayuda{
  background:#fff; border:1px solid var(--borde); border-radius:14px;
  padding:6px 14px; font-size:12px; font-weight:600; color:var(--texto-suave);
}
.btn-ayuda:hover{ border-color:var(--coral); color:var(--coral-hover); background:#fff6f3; }

#ayudaModal{ width:min(700px, 94vw); }
.ayuda-lista{
  margin:0; padding-left:20px; display:flex; flex-direction:column; gap:11px;
  font-size:13px; line-height:1.5; color:var(--texto);
}
.ayuda-lista strong{ color:var(--coral-hover); }
.titulo-app{ color:var(--turquesa); }

.ayuda-credito{
  margin-top:24px;
  text-align:center;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
  color:var(--texto-suave);
}
.ayuda-credito .credito-code{ color:var(--fucsia); }
.ayuda-credito .credito-vero{ color:var(--turquesa); }

/* ===== Exportar / Imprimir ===== */
.solo-imprimir{ display:none; }
@media print{
  body > *:not(.solo-imprimir){ display:none !important; }
  .solo-imprimir{
    display:block !important; font-family:Arial, Helvetica, sans-serif;
    color:#000; padding:20px;
  }
  .solo-imprimir h1{ font-size:18px; color:#4a3324; margin-bottom:4px; }
  .solo-imprimir .imprimir-fecha{ font-size:12px; color:#555; margin-bottom:18px; }
  .solo-imprimir h2{ font-size:14px; color:#4a3324; border-bottom:1px solid #ccc; padding-bottom:4px; margin-top:20px; }
  .solo-imprimir ul{ padding-left:20px; }
  .solo-imprimir li{ font-size:12.5px; margin-bottom:8px; line-height:1.4; }
}

/* ===== Planner ===== */
.planner-switcher{
  display:inline-flex; background:#fff; border-radius:12px; padding:4px; margin-bottom:14px;
  box-shadow:0 4px 12px rgba(74,59,71,.08);
}
.planner-switcher button{
  border:none; background:none; padding:8px 18px; border-radius:9px; font-size:13px; font-weight:700;
  color:var(--texto-suave); cursor:pointer; transition:.15s;
}
.planner-switcher button.activo{
  background:linear-gradient(155deg, var(--coral-light), var(--coral)); color:#fff;
  box-shadow:0 3px 8px rgba(255,133,103,.4);
}

.planner-nav{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:14px; font-weight:700; }
.planner-nav .nav-flecha{
  border:1.5px solid var(--borde-neutro); background:#fff; border-radius:8px;
  width:30px; height:30px; cursor:pointer; font-size:15px; line-height:1;
}
.planner-nav .nav-flecha:hover{ background:var(--dia-miercoles); }
.planner-nav .btn{ font-size:12px; padding:7px 14px; }

.planner-vista{ display:none; }
.planner-vista.activa{ display:block; }

/* --- semanal: grilla 3 col x 2 filas, findes apilados en la 3ra columna --- */
.semana-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
@media (max-width: 900px){ .semana-grid{ grid-template-columns:1fr; } }
.dia-card{
  border-radius:14px; padding:14px 16px 16px; min-height:190px;
  border:1.5px solid var(--borde-neutro);
  box-shadow:0 8px 18px rgba(74,59,71,.10);
  transition: transform .2s, box-shadow .2s;
}
.dia-card:hover{ transform:translateY(-2px); box-shadow:0 12px 24px rgba(74,59,71,.16); }
.dia-card h3{ margin:0 0 10px; font-size:15px; font-weight:800; color:var(--texto); }
.dia-card.dia-hoy{
  box-shadow:
    0 0 0 1.5px rgba(255,255,255,.75) inset,
    0 0 0 1px rgba(255,178,84,.6),
    0 0 22px 4px rgba(255,178,84,.5),
    0 10px 20px rgba(74,59,71,.14);
  transform: translateY(-2px);
}
.findes{ display:flex; flex-direction:column; gap:16px; }
.findes .dia-card{ min-height:87px; }
.dia-lunes{ background:var(--dia-lunes); }
.dia-martes{ background:var(--dia-martes); }
.dia-miercoles{ background:var(--dia-miercoles); }
.dia-jueves{ background:var(--dia-jueves); }
.dia-viernes{ background:var(--dia-viernes); }
.dia-sabado{ background:var(--dia-sabado); }
.dia-domingo{ background:var(--dia-domingo); }

.mini-pegado{
  border-radius:5px; padding:7px 9px; font-size:11.5px; margin-bottom:7px; line-height:1.35;
  box-shadow:0 2px 6px rgba(0,0,0,.16); cursor:pointer;
  word-break:break-word; white-space:pre-wrap;
  transform:rotate(-1deg); transition:transform .15s, box-shadow .15s;
}
.mini-pegado:hover{ transform:rotate(0deg) translateY(-1px); box-shadow:0 5px 12px rgba(0,0,0,.22); }
.mini-pegado:nth-child(3n){ transform:rotate(1deg); }
.mini-pegado.color-amarillo{ background: linear-gradient(160deg, #fffbe0, #fff3b0); }
.mini-pegado.color-rosa{ background: linear-gradient(160deg, #f6cfe0, var(--lavanda-light)); }
.mini-pegado.color-azul{ background: linear-gradient(160deg, #e6f1fc, #cfe1f7); }
.mini-pegado.color-verde{ background: linear-gradient(160deg, #e6f7e8, #d3ecd6); }
.mini-pegado.color-beige{ background: linear-gradient(160deg, #f7f2f0, #eee7e4); }

/* Reflejo: pappelito que en realidad vive en el Tablero, mostrado acá porque hoy vence */
.mini-pegado-reflejo{ border:1.5px dashed rgba(74,51,36,.4); }
.mini-pegado-etiqueta{
  font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;
  color:rgba(74,51,36,.7); margin-bottom:2px;
}
.mini-pegado-texto{ white-space:pre-wrap; word-break:break-word; }

.dia-card .form-pappelito-nuevo{ background:rgba(255,255,255,.85); margin-top:2px; }
.dia-card .btn-nuevo-pappelito{ background:rgba(255,255,255,.6); }
.dia-card .btn-nuevo-pappelito:hover{ background:#fff; }

/* --- mensual: calendario --- */
.mes-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.mes-grid .dow{ font-size:11px; font-weight:700; color:var(--texto-suave); text-align:center; padding-bottom:4px; }
.mes-celda{
  background:#fff; border:1px solid var(--borde-neutro); border-radius:8px; min-height:80px;
  padding:5px 6px; font-size:11px; position:relative; cursor:pointer; transition:background .15s;
}
.mes-celda:hover{ background:#fff8f0; }
.mes-celda .num{ font-weight:700; font-size:11.5px; }
.mes-celda.fuera-de-mes{ opacity:.4; }
.mes-celda.dia-hoy{
  border-color: transparent;
  background:#fffaf3;
  box-shadow:
    0 0 0 1px rgba(255,178,84,.65),
    0 0 14px 2px rgba(255,178,84,.5);
}
.mes-celda .chip{
  display:block; width:100%; border-radius:3px; font-size:9.5px; padding:2px 4px; margin-top:4px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; cursor:pointer;
}
.mes-celda .chip.color-amarillo{ background:#fff3b0; }
.mes-celda .chip.color-rosa{ background:var(--lavanda-light); }
.mes-celda .chip.color-azul{ background:#cfe1f7; }
.mes-celda .chip.color-verde{ background:#d3ecd6; }
.mes-celda .chip.color-beige{ background:#eee7e4; }

/* --- anual: 12 meses miniatura --- */
.anio-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
@media (max-width: 900px){ .anio-grid{ grid-template-columns:repeat(2,1fr); } }
.mes-mini{
  background:#fff; border:1px solid var(--borde-neutro); border-radius:10px; padding:8px;
  cursor:pointer; transition: transform .15s, box-shadow .15s;
}
.mes-mini:hover{ transform:translateY(-3px); box-shadow:0 8px 18px rgba(74,59,71,.15); }
.mes-mini h4{ margin:0 0 6px; font-size:12px; text-align:center; color:var(--texto); }
.mes-mini .mini-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:2px; }
.mes-mini .mini-dow span{ font-size:8px; line-height:1; text-align:center; color:var(--texto-suave); opacity:.7; }
.mes-mini .mini-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.mes-mini .mini-grid span{ width:100%; padding-top:100%; display:block; background:#f0ece4; border-radius:1px; }
/* Intensidad según cantidad de pappelitos ese día — mismo coral de siempre, en 3 pasos. */
.mes-mini .mini-grid span.nivel-1{ background:var(--coral-light); }
.mes-mini .mini-grid span.nivel-2{ background:var(--coral); }
.mes-mini .mini-grid span.nivel-3{ background:var(--coral-hover); }
/* "Hoy": un anillo fino en vez de relleno, para no competir con el color de actividad. */
.mes-mini .mini-grid span.es-hoy{ box-shadow: inset 0 0 0 1.5px var(--borde-neutro); }

/* ===== Recordatorio de backup en modo local (banner amarillo, como el de conexión) ===== */
.backup-banner{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:10px;
  background:var(--amarillo); color:#5c4a12; border:1px solid #e6c65a;
  font-size:12.5px; font-weight:600; text-align:center;
  padding:9px 20px; line-height:1.4; margin:12px 24px 0; border-radius:12px;
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.backup-banner-btn{ color:#5c4a12; border-color:rgba(92,74,18,.4); }
.backup-banner-btn:hover{ background:rgba(92,74,18,.1); border-color:#5c4a12; }

/* ===== Ventana "Recuperar desde un backup" (reusa .hn-modal / .hn-lista) ===== */
.backup-intro{ margin:0 0 14px; font-size:12.5px; line-height:1.5; color:var(--texto-suave); }
.backup-fila{
  display:block; width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,.7); border:1px solid var(--borde); border-radius:8px;
  padding:10px 12px; font-size:13px; font-weight:600; color:var(--texto);
  transition: background .12s, transform .12s, border-color .12s;
}
.backup-fila:hover{ background:#fff6f3; border-color:var(--coral); transform:translateX(2px); }
.backup-faltantes{ margin-top:4px; }
.backup-faltante{ cursor:default; }
.backup-faltante:hover{ transform:none; }
.backup-botones{ display:flex; justify-content:flex-end; gap:10px; margin-top:16px; flex-wrap:wrap; }

/* ===== Ventana de decisión al vuelo (reusa .confirmar-modal), para el choque al editar ===== */
.decision-modal{ width:min(400px, 90vw); }
.decision-modal .confirmar-botones{ flex-wrap:wrap; }

/* ===== Botones extra en la fila de solapas (Mi día, Plantillas) ===== */
.btn-header-extra{
  align-self:center; flex-shrink:0;
  background:none; border:1px solid var(--borde); border-radius:8px;
  padding:6px 11px; font-size:12.5px; font-weight:600; color:var(--texto-suave); white-space:nowrap;
}
.btn-header-extra:hover{ border-color:var(--coral); color:var(--coral-hover); background:#fff6f3; }

/* ===== Mi día ===== */
.midia-bloque{ margin-bottom:16px; }
.midia-bloque-titulo{ margin:0 0 8px; font-size:13.5px; color:var(--texto); }
.midia-vacio{ margin:0; font-size:12px; color:var(--texto-suave); font-style:italic; }
.midia-todo-ok{ text-align:center; font-size:14px; color:var(--texto-suave); padding:20px 0; }

/* ===== Plantillas ===== */
.plantilla-fila{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; border-radius:8px; background:rgba(255,255,255,.7);
  border-left:5px solid var(--texto-suave);
}
.plantilla-fila.color-amarillo{ border-left-color:#e0c34a; }
.plantilla-fila.color-rosa{ border-left-color:#e88bb0; }
.plantilla-fila.color-azul{ border-left-color:#7fb0e6; }
.plantilla-fila.color-verde{ border-left-color:#7cc98c; }
.plantilla-fila.color-beige{ border-left-color:#c4b3a8; }
.plantilla-info{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.plantilla-nombre{ font-size:13px; font-weight:600; color:var(--texto); word-break:break-word; }
.plantilla-meta{ font-size:11px; color:var(--texto-suave); }
.plantilla-acciones{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
.plantilla-usar{ padding:5px 12px; font-size:12px; }
.plantilla-borrar{ background:none; border:none; font-size:14px; opacity:.6; }
.plantilla-borrar:hover{ opacity:1; }

/* ===== Confeti de festejo (no recibe clicks, se destruye solo) ===== */
.confeti-canvas{ position:fixed; inset:0; z-index:9999; pointer-events:none; }

/* ===== Microanimaciones: pegar (pop-in) y salir (archivar/eliminar) ===== */
.pappelito.recien-pegado, .mini-pappelito.recien-pegado{ animation: pegarPop .38s cubic-bezier(.34,1.56,.64,1); }
@keyframes pegarPop{
  0%{ opacity:0; transform:scale(.6) rotate(-6deg); }
  60%{ opacity:1; transform:scale(1.06) rotate(1.5deg); }
  100%{ transform:scale(1) rotate(0); }
}
.pappelito.saliendo, .mini-pappelito.saliendo{ animation: salirPapel .3s ease forwards; pointer-events:none; }
@keyframes salirPapel{
  0%{ opacity:1; transform:scale(1) rotate(0); }
  100%{ opacity:0; transform:scale(.75) rotate(8deg) translateY(-14px); }
}
@media (prefers-reduced-motion: reduce){
  .pappelito.recien-pegado, .mini-pappelito.recien-pegado,
  .pappelito.saliendo, .mini-pappelito.saliendo{ animation:none; }
}

/* ===== Solapa Reportes ===== */
.rep-kpis{ display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-bottom:12px; }
@media (max-width:760px){ .rep-kpis{ grid-template-columns:repeat(2,1fr); } }
.rep-card{ background:#fff; border:1px solid var(--borde); border-radius:12px; padding:12px 14px; box-shadow:0 4px 12px rgba(74,59,71,.06); }
.rep-kpi-lbl{ font-size:11px; color:var(--texto-suave); font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.rep-kpi-num{ font-size:26px; font-weight:900; line-height:1; margin-top:4px; color:var(--texto); }
.rep-kpi-num.rojo{ color:var(--rojo); } .rep-kpi-num.ambar{ color:#d9843b; } .rep-kpi-num.verde{ color:var(--turquesa-texto); }
.rep-sub{ font-size:11px; color:var(--texto-suave); margin-top:2px; }
.rep-guino{ background:#fff4ef; border:1px solid var(--coral-light); border-radius:12px; padding:10px 14px; margin-bottom:12px; font-size:13px; font-weight:700; color:#99402a; }
.rep-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
@media (max-width:760px){ .rep-grid{ grid-template-columns:1fr; } }
.rep-sec-t{ font-size:12.5px; font-weight:800; color:var(--texto); margin:0 0 10px; }
.rep-vacio{ font-size:12px; color:var(--texto-suave); font-style:italic; margin:0; }
/* barras horizontales (columnas, personas) */
.rep-barra-fila, .rep-pers-fila{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.rep-barra-lbl{ font-size:12px; width:78px; flex-shrink:0; color:var(--texto); }
.rep-pers-nombre{ font-size:12px; width:70px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--texto); }
.rep-barra-track{ flex:1; height:14px; background:#f1ece2; border-radius:7px; overflow:hidden; }
.rep-barra-rel{ height:100%; background:var(--coral); border-radius:7px; min-width:2px; }
.rep-barra-num{ font-size:11px; font-weight:700; width:22px; text-align:right; flex-shrink:0; color:var(--texto); }
.col-barra-pendiente{ background:var(--coral); } .col-barra-en-curso{ background:var(--lavanda); }
.col-barra-resuelta{ background:var(--turquesa); } .col-barra-miscelaneas{ background:#c9a86a; } .col-barra-planner{ background:var(--fucsia); }
.rep-av{ width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; color:#fff; flex-shrink:0; }
/* dona de prioridad */
.rep-prioridad{ display:flex; gap:16px; align-items:center; }
.rep-dona{ width:92px; height:92px; border-radius:50%; flex-shrink:0; }
.rep-dona-leyenda{ font-size:11.5px; line-height:1.8; }
.rep-dona-item{ color:var(--texto); }
/* numeritos (tiempo/estancados/sin fecha) */
.rep-numeritos{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.rep-num-chico{ text-align:center; }
/* tendencia: barras verticales agrupadas */
.rep-barras-grupo{ display:flex; align-items:flex-end; justify-content:space-around; height:120px; gap:10px; }
.rep-barras-semana{ display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; gap:4px; }
.rep-barras-par{ display:flex; gap:4px; align-items:flex-end; height:100%; }
.rep-barra-v{ width:14px; border-radius:3px 3px 0 0; min-height:2px; }
.rep-barra-v.creados{ background:var(--coral); } .rep-barra-v.resueltos{ background:var(--turquesa); }
.rep-barras-et{ font-size:10px; color:var(--texto-suave); }
.rep-leyenda-mini{ font-size:11px; color:var(--texto-suave); margin-top:8px; }
.rep-tendencia{ grid-column:1 / -1; }
.rep-tags-card{ grid-column:1 / -1; }
.rep-chip{ display:inline-block; background:#f3ece6; border-radius:12px; padding:3px 10px; margin:3px; color:var(--texto); font-weight:700; }

/* ===================== MODO OSCURO ===================== */
/* Los pappelitos de colores quedan pastel a propósito (se ven como post-its iluminados sobre el
   fondo oscuro). Se oscurecen las superficies "blancas" grandes y se aclara el texto. */
:root[data-tema="oscuro"]{
  --texto:#e9e2ea;
  --texto-suave:#a99fb0;
  --borde:#4a4350;
  --borde-neutro:#6b6270;
  --amarillo:#3b3418;
}
:root[data-tema="oscuro"] body{
  background: linear-gradient(135deg, #211d28 0%, #1b1820 45%, #241f2c 100%);
}
:root[data-tema="oscuro"] .topbar{
  background: rgba(38,32,46,.82); border-color: rgba(255,255,255,.08);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
:root[data-tema="oscuro"] .topbar-title .subtitle,
:root[data-tema="oscuro"] .logo-p,
:root[data-tema="oscuro"] .logo-elito{ color: var(--texto); }
/* Superficies claras → superficie oscura */
:root[data-tema="oscuro"] .conn-status,
:root[data-tema="oscuro"] .btn-ghost,
:root[data-tema="oscuro"] .btn-nuevo-pappelito,
:root[data-tema="oscuro"] .vista-toggle-btn,
:root[data-tema="oscuro"] .filtro-rapido-btn,
:root[data-tema="oscuro"] .filtro-origen-btn,
:root[data-tema="oscuro"] .btn-header-extra,
:root[data-tema="oscuro"] .btn-atajos,
:root[data-tema="oscuro"] .btn-toggle-mios,
:root[data-tema="oscuro"] .toolbar,
:root[data-tema="oscuro"] .toolbar input[type="text"],
:root[data-tema="oscuro"] .campo-autor input,
:root[data-tema="oscuro"] .editar-textarea,
:root[data-tema="oscuro"] .editar-link,
:root[data-tema="oscuro"] .campo-link-nueva,
:root[data-tema="oscuro"] .editar-vencimiento,
:root[data-tema="oscuro"] .campo-vencimiento-nueva,
:root[data-tema="oscuro"] .editar-hora,
:root[data-tema="oscuro"] .campo-hora-nueva,
:root[data-tema="oscuro"] .editar-inicio,
:root[data-tema="oscuro"] .campo-inicio-nueva,
:root[data-tema="oscuro"] .select-recurrencia,
:root[data-tema="oscuro"] .tags-input,
:root[data-tema="oscuro"] .editar-asignar,
:root[data-tema="oscuro"] .campo-asignar-nueva,
:root[data-tema="oscuro"] .select-prioridad,
:root[data-tema="oscuro"] .reaccion-btn,
:root[data-tema="oscuro"] .mencion-sugerencias,
:root[data-tema="oscuro"] .mencion-sugerencia,
:root[data-tema="oscuro"] .tabla-wrap,
:root[data-tema="oscuro"] .plantilla-fila,
:root[data-tema="oscuro"] .backup-fila,
:root[data-tema="oscuro"] .vencimiento-fila,
:root[data-tema="oscuro"] .planner-switcher,
:root[data-tema="oscuro"] .form-pappelito-nuevo,
:root[data-tema="oscuro"] .plantilla-usar{
  background:#2c2633; color:var(--texto); border-color:var(--borde);
}
:root[data-tema="oscuro"] .hn-modal,
:root[data-tema="oscuro"] .confirmar-modal{
  background: rgba(40,34,48,.97); color:var(--texto);
}
:root[data-tema="oscuro"] .kanban-col-body{ background: rgba(255,255,255,.03); }
:root[data-tema="oscuro"] table.tabla-pappelitos tbody td{ border-bottom-color:#3a333f; }
:root[data-tema="oscuro"] table.tabla-pappelitos tbody tr:hover{ background:#332d3a; }
:root[data-tema="oscuro"] .historial-item{ background:#2c2633; }
:root[data-tema="oscuro"] .rep-card{ background:#2c2633; }
:root[data-tema="oscuro"] .rep-barra-track{ background:#3a333f; }
:root[data-tema="oscuro"] .rep-chip{ background:#3a333f; }
:root[data-tema="oscuro"] .rep-guino{ background:#3a2f2b; border-color:#7a4a3a; color:#ffc4b3; }
:root[data-tema="oscuro"] .corkboard-titulo{ color:var(--texto); }
:root[data-tema="oscuro"] .btn-ghost:hover,
:root[data-tema="oscuro"] .vista-toggle-btn:hover,
:root[data-tema="oscuro"] .btn-header-extra:hover,
:root[data-tema="oscuro"] .filtro-rapido-btn:hover{ background:#3a2f38; }
:root[data-tema="oscuro"] .vencimiento-fila:hover{ background:#3a333f; }