/* ── NOTES ── */
.notes-layout{display:grid;grid-template-columns:220px 1fr;gap:14px}
.notes-side{display:flex;flex-direction:column;gap:9px}
.cat-list{display:flex;flex-direction:column;gap:2px}
.cat-item{padding:9px 11px;border-radius:9px;cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted);transition:all .12s;display:flex;align-items:center;justify-content:space-between;border:1.5px solid transparent;-webkit-user-select:none;user-select:none}
.cat-item:hover{background:var(--bubu-soft);color:var(--bubu-dark)}
.cat-item.active{background:var(--bubu-soft);border-color:var(--bubu);color:var(--bubu-dark)}
.cat-count{font-size:10.5px;background:var(--border-soft);padding:1px 7px;border-radius:99px}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:11px;align-content:start}
@media(max-width:780px){
    .notes-grid{
        grid-template-columns:1fr;
    }
}
.note-card{border-radius:12px;border:1.5px solid var(--border-soft);padding:13px;cursor:pointer;transition:all .17s;position:relative}
.note-card:hover{border-color:var(--bubu);box-shadow:var(--sh-md);transform:translateY(-1px)}
.nc-title{font-weight:800;font-size:13px;margin-bottom:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nc-preview{font-size:11.5px;color:var(--muted);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nc-footer{display:flex;align-items:center;justify-content:space-between;margin-top:9px;padding-top:8px;border-top:1px solid rgba(0,0,0,.06)}
.nc-date{font-size:10px;color:var(--muted)}
.nc-cat{font-size:10px;padding:2px 7px;border-radius:99px;background:var(--dudu-soft);color:var(--dudu-dark);font-weight:700}
.note-category-hint{margin-top:5px;font-size:11px;color:var(--muted)}
.nc-cat{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nc-actions{position:absolute;top:7px;right:7px;opacity:0;transition:opacity .12s;display:flex;gap:3px}
.note-card:hover .nc-actions,.note-card:focus-within .nc-actions{opacity:1}
.nd-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.nd-dot{border-radius:10px;cursor:pointer;border:2.5px solid transparent;transition:all .15s;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:10.5px;font-weight:800;line-height:1.2;text-align:center;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.nd-dot:hover{transform:translateY(-1px);box-shadow:0 3px 10px rgba(0,0,0,.13)}
.nd-dot.active{border-color:#333;box-shadow:0 0 0 2px #333,0 3px 10px rgba(0,0,0,.15);transform:translateY(-1px)}
.nd-dot-swatch{width:28px;height:28px;border-radius:50%;flex-shrink:0;border:2px solid rgba(0,0,0,.08)}
.nd-dot-label{color:#555;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* color-chip badge on note cards */
.nc-color-badge{font-size:9.5px;padding:2px 8px;border-radius:99px;font-weight:800;letter-spacing:.2px}
/* notes color legend in sidebar */
.color-legend-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:8px;cursor:pointer;transition:all .12s;border:1.5px solid transparent}
.color-legend-row:hover{background:var(--cream);border-color:var(--border-soft)}
.color-legend-row.active{border-color:var(--bubu);background:var(--bubu-soft)}
.color-legend-swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:2px solid rgba(0,0,0,.12)}
.color-legend-label{font-size:12px;font-weight:700;color:var(--text);flex:1}
.color-legend-count{font-size:10px;background:var(--border-soft);padding:1px 6px;border-radius:99px;color:var(--muted);font-weight:700}
.nt-tabs{display:flex;gap:5px;margin-bottom:11px}
.nt-tab{flex:1;padding:8px;border-radius:8px;font-size:12px;font-weight:700;border:1.5px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .12s;font-family:'Nunito',sans-serif}
.nt-tab.active{background:var(--bubu-soft);border-color:var(--bubu);color:var(--bubu-dark)}
.cl-area{border:1.5px solid var(--border);border-radius:var(--r-sm);overflow:hidden;background:var(--cream)}
.cl-item{display:flex;align-items:center;gap:7px;padding:9px 11px;border-bottom:1px solid var(--border-soft)}
.cl-item:last-child{border-bottom:none}
.cl-item input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--bubu);flex-shrink:0}
.cl-item input[type=text]{flex:1;border:none;background:transparent;font-family:'Nunito',sans-serif;font-size:13px;color:var(--text);outline:none;min-width:0;padding:2px 0}
.cl-item input[type=text].done{text-decoration:line-through;opacity:.5}
.cl-item .rm{background:none;border:none;color:var(--muted);cursor:pointer;font-size:16px;padding:2px 5px;border-radius:4px;flex-shrink:0;line-height:1;touch-action:manipulation}
.cl-item .rm:hover{color:#ef4444}
.cl-add{display:flex;align-items:center;gap:5px;padding:10px 12px;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer;background:none;border:none;font-family:'Nunito',sans-serif;width:100%;text-align:left;border-top:1px solid var(--border-soft);transition:color .12s;touch-action:manipulation}
.cl-add:hover{color:var(--bubu)}
.cl-prev{display:flex;flex-direction:column;gap:3px}
.cl-prev-item{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.cl-prev-item.done{text-decoration:line-through;opacity:.45}
.s-btn{padding:5px 11px;border-radius:99px;font-size:11.5px;font-weight:700;border:1.5px solid var(--border);background:transparent;color:var(--muted);cursor:pointer;transition:all .12s;font-family:'Nunito',sans-serif;-webkit-user-select:none;user-select:none}
.s-btn.active,.s-btn:hover{border-color:var(--bubu);background:var(--bubu-soft);color:var(--bubu-dark)}

/* ══ NOTES EMOTION COLORS ══ */
.note-emotion-label{font-size:10px;padding:2px 8px;border-radius:99px;font-weight:700;display:inline-flex;align-items:center;gap:3px;margin-top:4px}



/* ══════════════════════════════════════════════
   NOTAS — REDISEÑO MÓVIL (solo ≤780px)
   Filtros en chips horizontales, tarjetas más claras,
   y el modal de nota cuidado como hoja inferior.
   Escritorio intacto.
   ══════════════════════════════════════════════ */
@media(max-width:780px){

  /* ── Cabecera de sección ── */
  #sec-notes .sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
  #sec-notes .sh .btn{border-radius:999px;padding:9px 16px;font-size:12.5px;white-space:nowrap;flex-shrink:0}

  /* ── Layout: una columna ── */
  .notes-layout{grid-template-columns:minmax(0,1fr);gap:10px}

  /* Sidebar → filas de chips horizontales con scroll */
  .notes-side{flex-direction:column;gap:8px}
  .notes-side .card{
    padding:0!important;background:none;border:none;box-shadow:none;
  }
  .notes-side .card-title{
    font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase;
    letter-spacing:.5px;margin:0 0 6px 2px!important;
  }
  .notes-side #color-legend-list,
  .notes-side .cat-list,
  .notes-side .card:last-child>div[style]{
    display:flex!important;flex-direction:row!important;gap:7px!important;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding-bottom:2px;
  }
  .notes-side #color-legend-list::-webkit-scrollbar,
  .notes-side .cat-list::-webkit-scrollbar,
  .notes-side .card:last-child>div[style]::-webkit-scrollbar{display:none}

  /* Chips: color legend */
  .color-legend-row{
    flex-shrink:0;padding:7px 12px 7px 8px;border-radius:999px;
    background:var(--card);border:1.5px solid var(--border-soft);
  }
  .color-legend-row.active{background:var(--bubu);border-color:var(--bubu)}
  .color-legend-row.active .color-legend-label{color:#fff}
  .color-legend-row.active .color-legend-count{background:rgba(255,255,255,.3);color:#fff}
  .color-legend-label{white-space:nowrap}
  .color-legend-swatch{width:16px;height:16px}

  /* Chips: categorías */
  .cat-item{flex-shrink:0;padding:7px 13px;border-radius:999px;background:var(--card);border:1.5px solid var(--border-soft);white-space:nowrap;gap:6px}
  .cat-item.active{background:var(--bubu);border-color:var(--bubu);color:#fff}
  .cat-item.active .cat-count{background:rgba(255,255,255,.3);color:#fff}

  /* Chips: ordenar */
  .notes-side .card:last-child>div[style]{gap:7px!important}
  .s-btn{flex-shrink:0;padding:7px 13px;border-radius:999px}
  .s-btn.active{background:var(--bubu);border-color:var(--bubu);color:#fff}

  /* ── Tarjetas de nota ── */
  .notes-grid{gap:10px}
  .note-card{
    overflow:hidden;border-radius:18px;border-width:1px;padding:16px 16px 13px 18px;
    background-image:linear-gradient(145deg,rgba(255,255,255,.58),rgba(255,255,255,.14) 58%,rgba(255,255,255,.34))!important;
    box-shadow:0 4px 14px rgba(61,44,30,.075),inset 0 1px rgba(255,255,255,.6);
    transition:transform .16s ease,box-shadow .16s ease;
  }
  .note-card::before{
    position:absolute;inset:0 auto 0 0;width:4px;
    background:linear-gradient(180deg,rgba(156,92,72,.68),rgba(156,92,72,.16));
    content:"";pointer-events:none;
  }
  .note-card:active{transform:scale(.99);box-shadow:0 2px 8px rgba(61,44,30,.08)}
  .nc-title{padding-right:38px;font-size:14px;line-height:1.35;white-space:normal;overflow-wrap:anywhere;margin-bottom:7px;color:#493629}
  .nc-preview{font-size:12.5px;line-height:1.55;-webkit-line-clamp:3;color:#705f53}
  .note-card .cl-prev,.note-card .cl-prev-item{min-width:0;overflow-wrap:anywhere}
  .nc-actions{opacity:1;top:10px;right:10px}
  .nc-actions .ic-btn{
    width:32px;height:32px;border:1px solid rgba(156,92,72,.12);border-radius:50%;
    display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.88)!important;
    box-shadow:0 2px 7px rgba(61,44,30,.1);font-size:13px!important;
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)
  }
  .nc-footer{gap:7px;margin-top:12px;padding-top:10px;border-top:1px solid rgba(61,44,30,.1)}
  .nc-date{font-size:10.5px;font-weight:700;white-space:nowrap}
  .nc-cat,.nc-color-badge{max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .nc-cat{padding:4px 9px;border:1px solid rgba(160,120,56,.12)}
  .nc-color-badge{font-size:10px;padding:4px 9px;border-radius:999px}

  /* ══ MODAL "Nueva nota": hoja inferior cuidada ══ */
  #mo-note{align-items:flex-end;padding:0}
  #mo-note .modal{
    position:relative;max-width:none!important;width:100%;max-height:92dvh;
    display:flex;flex-direction:column;overflow:hidden;
    border-radius:24px 24px 0 0;padding:0;
    border:1px solid rgba(200,133,110,.16);
    box-shadow:0 -12px 40px rgba(48,31,18,.18);
    background:linear-gradient(180deg,#fff 0%,#fffdfa 100%);
    transform:translateY(100%);
  }
  #mo-note.open .modal{transform:translateY(0)}
  #mo-note .modal::before{
    content:'';position:absolute;top:9px;left:50%;width:42px;height:5px;margin-left:-21px;
    border-radius:99px;background:var(--border);z-index:3;
  }

  /* Cabecera fija */
  #mo-note .mh{
    position:sticky;top:0;z-index:4;flex-shrink:0;margin:0;padding:22px 18px 14px;
    border-bottom:1px solid var(--border-soft);background:rgba(255,253,250,.96);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
  }
  #mo-note .mt{font-size:18px}
  #mo-note .mc{width:34px;height:34px;border:1px solid rgba(156,92,72,.1);border-radius:50%;background:#fff8f2}

  /* Cuerpo con scroll propio, entre cabecera y footer */
  #mo-note .modal>.fg{padding-left:18px;padding-right:18px;flex:0 0 auto}
  #mo-note .modal{overflow-y:auto;-webkit-overflow-scrolling:touch}
  #mo-note .mh~.fg:first-of-type{margin-top:16px}
  #mo-note .mf{order:99}

  /* Campos */
  #mo-note .fl{font-size:10px;letter-spacing:.7px;margin-bottom:7px;color:#8b6b59}
  #mo-note .fi,#mo-note .ft{
    border-radius:14px;padding:12px 13px;border-color:#eee1d7;
    background:#fffaf6;font-size:15px;box-shadow:inset 0 1px 2px rgba(61,44,30,.025)
  }
  #mo-note .fi:focus,#mo-note .ft:focus{border-color:var(--bubu);background:#fff;box-shadow:0 0 0 3px rgba(200,133,110,.12)}
  #mo-note .fg{margin-bottom:15px}
  #mo-note #note-content{min-height:140px;line-height:1.7}

  /* Selector de color: fila con scroll horizontal, chips más compactos */
  #mo-note .nd-colors{
    display:flex!important;grid-template-columns:none;gap:9px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    padding:2px 2px 6px;margin:0 -2px;
  }
  #mo-note .nd-colors::-webkit-scrollbar{display:none}
  #mo-note .nd-dot{flex-shrink:0;width:62px;padding:9px 4px;border:1px solid rgba(61,44,30,.08);border-radius:14px}
  #mo-note .nd-dot.active{border:2px solid var(--bubu-dark);box-shadow:0 0 0 3px rgba(200,133,110,.15),0 5px 12px rgba(61,44,30,.1);transform:translateY(-2px)}
  #mo-note .nd-dot-swatch{width:26px;height:26px}
  #mo-note .nd-dot-label{font-size:10px}
  #mo-note #nd-selected-label{text-align:center}

  /* Tabs tipo de nota */
  #mo-note .nt-tabs{gap:8px;padding:4px;border:1px solid var(--border-soft);border-radius:999px;background:#faf5ef}
  #mo-note .nt-tab{border-color:transparent;border-radius:999px;padding:10px 8px;font-size:12.5px}
  #mo-note .nt-tab.active{background:#fff;border-color:rgba(200,133,110,.28);box-shadow:0 2px 6px rgba(61,44,30,.07)}

  /* Checklist */
  #mo-note .cl-area{border-color:#eee1d7;border-radius:14px;background:#fffdfa;box-shadow:0 2px 8px rgba(61,44,30,.035)}
  #mo-note .cl-item{padding:11px 12px}
  #mo-note .cl-item input[type=checkbox]{width:20px;height:20px}
  #mo-note .cl-item input[type=text]{font-size:14.5px}
  #mo-note .cl-item .rm{font-size:19px;padding:4px 7px}
  #mo-note .cl-add{
    text-align:center;padding:12px!important;border-radius:12px!important;
    border:1.5px dashed var(--border)!important;background:var(--cream)!important;
    color:var(--bubu-dark);font-weight:700;font-size:12.5px;
    justify-content:center;border-top:none!important;margin-top:8px;
  }

  /* Footer fijo, botones anchos */
  #mo-note .mf{
    position:sticky;bottom:0;z-index:4;margin:0;padding:12px 18px max(14px,env(safe-area-inset-bottom));
    border-top:1px solid var(--border-soft);background:rgba(255,253,250,.97);gap:8px;
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)
  }
  #mo-note .mf .btn{
    flex:1;display:inline-flex;align-items:center;justify-content:center;
    min-height:44px;border-radius:999px;padding:12px 14px;font-size:13.5px;margin:0!important;
  }
  #mo-note .mf #note-del-btn{flex-basis:100%;order:-1}
}

@media(max-width:360px){
  .nc-title{font-size:13px}
  #mo-note .nd-dot{width:56px}
}

@media(max-width:780px){
  #mo-note .modal{
    background:#f7f0e9;
    border:0;
    box-shadow:0 -16px 48px rgba(39,25,16,.28);
  }
  #mo-note .mh{
    min-height:76px;
    padding:25px 18px 15px;
    border:0;
    background:linear-gradient(125deg,#674331,#8c5a43 68%,#a86d55);
  }
  #mo-note .mt{color:#fff8f1;font-size:19px}
  #mo-note .mc{
    border:1px solid rgba(255,255,255,.25);
    background:rgba(255,255,255,.14);
    color:#fff8f1;
  }
  #mo-note .mc:hover{background:rgba(255,255,255,.25);color:#fff}
  #mo-note .modal::before{background:rgba(255,244,232,.55)}
  #mo-note .modal>.fg{
    margin:10px 14px 0;
    padding:12px 13px;
    border:1px solid #ecded2;
    border-radius:17px;
    background:#fffdfa;
    box-shadow:0 3px 11px rgba(61,44,30,.045);
  }
  #mo-note .mh~.fg:first-of-type{margin-top:14px}
  #mo-note .fl{color:#94634c;font-size:9.5px;letter-spacing:1px}
  #mo-note .fi,#mo-note .ft{
    border:1px solid #e8d8ca;
    background:#fbf5ef;
    box-shadow:none;
  }
  #mo-note .fi:focus,#mo-note .ft:focus{
    border-color:#a96e55;
    background:#fff;
    box-shadow:0 0 0 3px rgba(169,110,85,.15);
  }
  #mo-note .note-category-hint{color:#9a8171;font-size:10.5px}
  #mo-note .nd-dot{box-shadow:0 3px 8px rgba(61,44,30,.08)}
  #mo-note .nd-dot.active{
    border-color:#704630;
    box-shadow:0 0 0 3px rgba(169,110,85,.2),0 5px 12px rgba(61,44,30,.14);
  }
  #mo-note .nt-tabs{background:#f5ece3;border-color:#ead9ca}
  #mo-note .nt-tab{color:#8e7766}
  #mo-note .nt-tab.active{
    color:#784b36;
    border-color:#d9b8a1;
    background:#fff;
    box-shadow:0 2px 7px rgba(61,44,30,.1);
  }
  #mo-note #note-content{background:#fff;min-height:150px}
  #mo-note .cl-area{background:#fff;border-color:#ead9ca}
  #mo-note .mf{
    margin-top:12px;
    padding:12px 14px max(14px,env(safe-area-inset-bottom));
    border-top:1px solid #e8d8ca;
    background:#fffdfa;
    box-shadow:0 -5px 16px rgba(61,44,30,.06);
  }
  #mo-note .mf .btn-primary{
    background:linear-gradient(135deg,#a96e55,#824b38);
    box-shadow:0 5px 12px rgba(130,75,56,.22);
  }
  #mo-note .mf .btn-ghost{border:1px solid #e5d4c7;background:#fff;color:#795b47}
  #mo-note .mf .btn-danger{background:#fff0ee;border:1px solid #f3d4d0;color:#a33f39}
}