.class-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px;}
  .class-card{position:relative; overflow:hidden; cursor:pointer;}
  .class-card .bar{height:5px; border-radius:5px; margin:-18px -18px 14px; }
  .class-card h4{margin:0 0 4px; font-size:16px; font-weight:700;}
  .class-card .meta{font-size:12.5px; color:var(--ink-500); display:flex; gap:14px; margin-top:10px;}
  .class-card .meta b{color:var(--ink-900); font-weight:700;}
  .class-card .del{position:absolute; top:10px; right:10px; background:rgba(255,255,255,.85); border:none; width:26px;height:26px;border-radius:8px; color:var(--ink-500); font-size:14px; opacity:0; transition:opacity .15s, color .15s, background .15s;}
  .class-card .edit-class{position:absolute; top:10px; right:44px; background:rgba(255,255,255,.85); border:none; width:26px;height:26px;border-radius:8px; color:var(--ink-500); font-size:13px; opacity:0; transition:opacity .15s, color .15s, background .15s;}
  .class-card:hover .del, .class-card:hover .edit-class{opacity:1;}
  .class-card .edit-class:hover{color:var(--blue-700); background:var(--blue-100);}
  .class-card .del:hover{color:#dc2626; background:#fee2e2;}
  .add-class-card{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; border:1.5px dashed var(--blue-200); border-radius:var(--radius); background:var(--blue-50); color:var(--blue-700); font-weight:600; font-size:13.5px; min-height:110px; transition:background .15s,border-color .15s;}
  .add-class-card:hover{background:var(--blue-100); border-color:var(--blue-400);}

  .list{display:flex; flex-direction:column; gap:12px;}
  .item-row{display:flex; gap:14px; align-items:flex-start; transition:background .15s;}
  .item-row .tag{font-size:11px; font-weight:700; padding:3px 9px; border-radius:100px; color:#fff; white-space:nowrap; margin-top:2px;}
  .item-body{flex:1; min-width:0;}
  .item-body h4{margin:0 0 3px; font-size:14.5px; font-weight:700;}
  .item-body p{margin:0; font-size:13.5px; color:var(--ink-500); line-height:1.5;}
  .item-foot{display:flex; align-items:center; gap:10px; margin-top:10px; flex-wrap:wrap;}
  .file-chip{display:inline-flex; align-items:center; gap:6px; background:var(--blue-50); color:var(--blue-700); font-size:12px; font-weight:600; padding:4px 10px; border-radius:100px; text-decoration:none;}
  .file-chip:hover{background:var(--blue-100);}
  .item-actions{display:flex; gap:6px; flex-shrink:0;}
  .icon-btn{width:30px;height:30px;border:none;border-radius:8px;background:var(--surface);color:var(--ink-500);display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s;}
  .icon-btn:hover{background:#fee2e2;color:#dc2626;}
  .check-btn{width:22px;height:22px;border-radius:7px;border:2px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;transition:all .15s;}
  .check-btn.done{background:var(--green);border-color:var(--green);}
  .check-btn svg{opacity:0;transform:scale(.5);transition:all .15s;}
  .check-btn.done svg{opacity:1;transform:scale(1);}
  .done-text{text-decoration:line-through; color:var(--ink-500) !important;}
  .empty-state{text-align:center; padding:50px 20px; color:var(--ink-500); background:#fff; border:1.5px dashed var(--border); border-radius:var(--radius); font-size:14px;}

  .panel-overlay{position:fixed; inset:0; background:rgba(15,28,49,.4); backdrop-filter:blur(2px); z-index:40; display:none; align-items:center; justify-content:center; padding:20px;}
  .panel-overlay.show{display:flex;}
  .panel{width:100%; max-width:440px; background:#fff; border-radius:18px; padding:26px; box-shadow:var(--shadow-lg); max-height:88vh; overflow:auto; animation:popIn .28s cubic-bezier(.22,.9,.32,1) both;}
  .panel h3{margin:0 0 18px; font-size:17px; font-weight:800;}
  .swatches{display:flex; gap:8px; flex-wrap:wrap;}
  .swatch{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent; transition:transform .12s;}
  .swatch.active{border-color:var(--ink-900); transform:scale(1.12);}
  .panel-actions{display:flex; gap:10px; margin-top:22px;}
  .panel-actions .btn{flex:1;}
  .file-input-wrap{border:1.5px dashed var(--border); border-radius:10px; padding:14px; text-align:center; font-size:13px; color:var(--ink-500); position:relative; background:var(--surface); cursor:pointer; transition:border-color .15s, background .15s;}
  .file-input-wrap:hover{border-color:var(--blue-400); background:var(--blue-50);}
  .file-input-wrap input{position:absolute; inset:0; opacity:0; cursor:pointer;}
  #file-preview{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;}

  /* Editor de texto enriquecido (ribbon estilo Word) */
  .etb{width:26px; height:26px; border:none; border-radius:6px; background:transparent; color:var(--ink-700); font-size:12.5px; font-weight:700; display:flex; align-items:center; justify-content:center; transition:background .12s, color .12s, transform .12s;}
  .etb:hover{background:var(--blue-100); color:var(--blue-700); transform:translateY(-1px);}
  .etb.active{background:var(--blue-600); color:#fff;}
  .etb-select{border:1px solid var(--border); background:#fff; border-radius:6px; font-size:12px; padding:4px 6px; color:var(--ink-700); font-weight:600;}
  .etb-font{width:118px;}
  .etb-size{width:52px;}
  /* El editor siempre va a pantalla completa: una sola declaración de layout */
  .editor-body{flex:1; min-height:150px; overflow-y:auto; padding:20px 32px 32px; font-size:16px; line-height:1.7; color:var(--ink-900); outline:none; max-width:820px; margin:0 auto; width:100%;}
  .editor-body:empty::before{content:attr(data-placeholder); color:var(--ink-500);}
  .editor-body h2{font-size:19px; font-weight:800; margin:14px 0 6px; color:var(--blue-900);}
  .editor-body h3{font-size:16px; font-weight:700; margin:12px 0 5px; color:var(--blue-900);}
  .editor-body p{margin:0 0 8px;}
  .editor-body ul, .editor-body ol{margin:0 0 8px; padding-left:22px;}
  .editor-body blockquote{margin:8px 0; padding:8px 14px; border-left:3px solid var(--blue-400); background:var(--blue-50); color:var(--ink-700); border-radius:0 8px 8px 0;}
  .editor-body pre{background:var(--ink-900); color:#e6edf7; padding:10px 12px; border-radius:8px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; overflow-x:auto; margin:8px 0;}
  .editor-body a{color:var(--blue-700); text-decoration:underline;}
  .editor-body img, .note-preview img{max-width:100%; border-radius:10px; margin:8px 0; box-shadow:var(--shadow-sm); display:block;}

  /* Vista previa (contenido renderizado en la lista de anotaciones) */
  .note-preview{font-size:13.5px; line-height:1.55; color:var(--ink-500);}
  .note-preview h2{font-size:15.5px; font-weight:800; margin:6px 0 3px; color:var(--ink-900);}
  .note-preview h3{font-size:14px; font-weight:700; margin:5px 0 3px; color:var(--ink-900);}
  .note-preview p{margin:0 0 5px;}
  .note-preview ul, .note-preview ol{margin:0 0 5px; padding-left:18px;}
  .note-preview blockquote{margin:5px 0; padding:5px 10px; border-left:3px solid var(--blue-200); background:var(--blue-50); border-radius:0 6px 6px 0;}
  .note-preview pre{background:var(--ink-900); color:#e6edf7; padding:8px 10px; border-radius:6px; font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; overflow-x:auto; margin:5px 0;}
  .note-preview a{color:var(--blue-700); text-decoration:underline;}

  /* Selectores de color (texto / resaltado) */
  .color-picker-wrap{position:relative;}
  .color-chip{display:inline-block; width:12px; height:3px; border-radius:2px; margin-left:2px; vertical-align:-3px; background:var(--ink-900);}
  .color-popover{position:absolute; top:110%; left:0; margin-top:2px; background:#fff; border:1px solid var(--border); border-radius:10px; padding:8px; box-shadow:var(--shadow-lg); display:none; grid-template-columns:repeat(4,22px); gap:6px; z-index:60; animation:popIn .15s ease both;}
  .color-popover.show{display:grid;}
  .color-swatch{width:22px; height:22px; border-radius:6px; border:1px solid rgba(15,28,49,.1); cursor:pointer; transition:transform .12s, box-shadow .12s;}
  .color-swatch:hover{transform:scale(1.18); box-shadow:0 2px 8px rgba(15,28,49,.2);}

  /* Galería de estilos */
  .ribbon-group-styles .ribbon-row{gap:6px;}
  .style-chip{border:1.5px solid var(--border); background:#fff; border-radius:8px; padding:5px 11px; font-size:11.5px; font-weight:600; color:var(--ink-700); transition:all .15s ease; white-space:nowrap;}
  .style-chip:hover{border-color:var(--blue-400); background:var(--blue-50); transform:translateY(-1px);}
  .style-chip.active{border-color:var(--blue-600); background:var(--blue-600); color:#fff; box-shadow:0 4px 10px rgba(37,99,235,.25);}
  .style-chip.style-h2{font-size:13px; font-weight:800; color:var(--blue-900);}
  .style-chip.style-h3{font-size:12px; font-weight:700; color:var(--blue-900);}
  .style-chip.style-quote{font-style:italic; color:var(--ink-500);}
  .style-chip.style-code{font-family:ui-monospace,Menlo,Consolas,monospace;}

  /* Editor de anotación a pantalla completa */
  .note-fullscreen{padding:0; align-items:stretch; background:rgba(15,28,49,.55);}
  .note-editor-shell{width:100%; height:100%; max-width:none; background:#fff; border-radius:0; padding:0; display:flex; flex-direction:column; animation:fadeIn .2s ease both;}
  .note-editor-top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 22px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
  .net-left{display:flex; align-items:center; gap:14px; flex:1; min-width:260px;}
  .net-select{padding:8px 10px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface); font-size:13px; color:var(--ink-700); font-weight:600; flex-shrink:0;}
  .net-title{border:none; outline:none; font-size:21px; font-weight:800; color:var(--ink-900); flex:1; min-width:180px; background:transparent;}
  .net-title::placeholder{color:var(--ink-500); font-weight:700;}
  .net-right{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .net-file{padding:8px 12px; font-size:12.5px; min-width:0;}
  .ribbon{display:flex; align-items:stretch; gap:0; padding:6px 22px 4px; background:var(--surface); border-bottom:1px solid var(--border); overflow-x:auto; animation:fadeSlide .3s ease both;}
  .ribbon-group{display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:2px 12px; border-right:1px solid var(--border); flex-shrink:0;}
  .ribbon-group:last-child{border-right:none;}
  .ribbon-row{display:flex; align-items:center; gap:4px; margin-bottom:3px;}
  .ribbon-label{font-size:10px; color:var(--ink-500); font-weight:700; text-transform:uppercase; letter-spacing:.03em; margin-top:2px; white-space:nowrap;}
  .note-editor-body{flex:1; display:flex; overflow:hidden;}
  @media (max-width:880px){
    .editor-body{padding:16px 18px 24px;}
    .ribbon{padding:6px 12px 4px;}
    .ribbon-group{padding:2px 8px;}
  }

  .kanban{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
  .kcol{background:var(--surface); border-radius:var(--radius); padding:14px; min-height:120px;}
  .kcol h4{font-size:13px; margin:0 0 12px; font-weight:700; color:var(--ink-700); display:flex; align-items:center; gap:8px;}
  .kcol h4 .dot{width:8px;height:8px;border-radius:50%;}
  .kcard{background:#fff; border:1px solid var(--border); border-radius:11px; padding:13px; margin-bottom:10px; box-shadow:var(--shadow-sm); transition:box-shadow .2s,transform .2s;}
  .kcard:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
  .kcard h5{margin:0 0 4px; font-size:13.5px; font-weight:700;}
  .kcard p{margin:0; font-size:12.5px; color:var(--ink-500); line-height:1.4;}
  .kcard .krow{display:flex; justify-content:space-between; align-items:center; margin-top:10px;}
  .kcard select{font-size:11.5px; padding:4px 6px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--ink-700);}
  .class-pill{font-size:10.5px; font-weight:700; padding:2px 8px; border-radius:100px; color:#fff; display:inline-block;}

  .profile-card{display:flex; gap:22px; align-items:center; padding:26px;}
  .avatar-big{width:76px;height:76px;border-radius:50%;background:linear-gradient(135deg,var(--blue-600),var(--blue-900)); display:flex;align-items:center;justify-content:center; color:#fff;font-weight:800;font-size:26px; box-shadow:0 8px 22px rgba(37,99,235,.3); flex-shrink:0; overflow:hidden;}
  .avatar-big img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
  .avatar-upload-wrap{position:relative; cursor:pointer; display:inline-block; border-radius:50%; transition:transform .15s;}
  .avatar-upload-wrap:hover{transform:scale(1.03);}
  .avatar-overlay{position:absolute; inset:0; border-radius:50%; background:rgba(15,28,49,.6); color:#fff; font-size:10.5px; font-weight:700; display:flex; align-items:center; justify-content:center; text-align:center; opacity:0; transition:opacity .18s; pointer-events:none;}
  .avatar-upload-wrap:hover .avatar-overlay{opacity:1;}
  .avatar-upload-wrap.uploading .avatar-overlay{opacity:1; content:'';}
  .side-avatar img{width:100%; height:100%; object-fit:cover; border-radius:50%;}
  .profile-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:22px;}
  .sync-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--green); background:#f0fdf4; padding:5px 10px; border-radius:100px;}
  .sync-pill .dot{width:6px;height:6px;border-radius:50%;background:var(--green);}
  .net-mode-badge{font-size:11px; font-weight:700; color:var(--blue-700); background:var(--blue-100); padding:4px 10px; border-radius:100px; animation:popIn .2s ease both;}
  .icon-btn.edit-btn:hover{background:var(--blue-100); color:var(--blue-700);}

  /* Botón compacto del ribbon (controles de tabla) + sub/sup */
  .etb.etb-sm{width:auto; padding:0 7px; font-size:10.5px; font-weight:700;}
  .etb sub, .etb sup{font-size:8px; font-weight:700;}

  /* Tablas dentro del editor y de la vista previa */
  .editor-body table, .note-preview table{border-collapse:collapse; width:100%; margin:10px 0; font-size:.95em;}
  .editor-body td, .editor-body th, .note-preview td, .note-preview th{
    border:1px solid var(--border); padding:7px 10px; min-width:40px; vertical-align:top; text-align:left;
  }
  .editor-body th, .note-preview th{background:var(--surface); font-weight:700;}
  .editor-body td:focus{outline:2px solid var(--blue-400); outline-offset:-2px;}
  .editor-body sub, .editor-body sup, .note-preview sub, .note-preview sup{line-height:0;}

  /* Barra de buscar y reemplazar */
  .find-bar{
    display:flex; align-items:center; gap:8px; padding:8px 22px; background:#fff;
    border-bottom:1px solid var(--border); flex-wrap:wrap;
    animation:fadeSlide .22s cubic-bezier(.22,.9,.32,1) both;
  }
  .find-bar[hidden]{display:none;}
  .find-field{
    padding:7px 11px; border-radius:8px; border:1.5px solid var(--border); background:var(--surface);
    font-size:13px; color:var(--ink-900); width:170px; transition:border-color .15s, box-shadow .15s, background .15s;
  }
  .find-field:focus{outline:none; border-color:var(--blue-600); background:#fff; box-shadow:0 0 0 3px var(--blue-100);}
  .find-count{font-size:12px; color:var(--ink-500); font-weight:600; margin-left:2px;}
  .find-close{margin-left:auto; width:28px; height:28px; border:none; border-radius:8px; background:var(--surface); color:var(--ink-500); font-size:12px; transition:background .15s, color .15s;}
  .find-close:hover{background:#fee2e2; color:#dc2626;}

  /* Barra de estado inferior del editor (guardado + contador) */
  .editor-statusbar{
    display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:8px 22px; border-top:1px solid var(--border); background:var(--surface);
    font-size:12px; color:var(--ink-500);
  }
  .save-state{display:inline-flex; align-items:center; gap:7px; font-weight:600; transition:color .2s;}
  .save-state .save-dot{width:8px; height:8px; border-radius:50%; background:var(--green); transition:background .2s, box-shadow .2s;}
  .save-state[data-state="saved"]{color:var(--green);}
  .save-state[data-state="saved"] .save-dot{background:var(--green); box-shadow:0 0 0 3px rgba(22,163,74,.14);}
  .save-state[data-state="dirty"]{color:var(--amber);}
  .save-state[data-state="dirty"] .save-dot{background:var(--amber); box-shadow:0 0 0 3px rgba(217,119,6,.14);}
  .save-state[data-state="saving"]{color:var(--blue-700);}
  .save-state[data-state="saving"] .save-dot{background:var(--blue-600); animation:savingPulse 1s ease-in-out infinite;}
  @keyframes savingPulse{0%,100%{box-shadow:0 0 0 0 rgba(37,99,235,.35);} 50%{box-shadow:0 0 0 5px rgba(37,99,235,0);}}
  .word-count{font-variant-numeric:tabular-nums;}

  /* Panel de atajos de teclado */
  .shortcuts-popover{
    position:absolute; top:112%; right:0; width:230px; background:#fff; border:1px solid var(--border);
    border-radius:12px; padding:12px 14px; box-shadow:var(--shadow-lg); z-index:70; display:none;
    animation:popIn .16s ease both;
  }
  .shortcuts-popover.show{display:block;}
  .shortcuts-popover h5{margin:0 0 8px; font-size:12px; font-weight:800; color:var(--ink-900); text-transform:uppercase; letter-spacing:.03em;}
  .shortcuts-popover ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px;}
  .shortcuts-popover li{display:flex; align-items:center; gap:4px; font-size:12.5px; color:var(--ink-700);}
  .shortcuts-popover li span{flex:1;}
  .shortcuts-popover kbd{
    font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11px; background:var(--surface);
    border:1px solid var(--border); border-bottom-width:2px; border-radius:5px; padding:1px 6px; color:var(--ink-900);
  }

  /* Avisos (toasts) — sustituyen a alert() */
  .toast-host{position:fixed; right:18px; bottom:18px; z-index:90; display:flex; flex-direction:column; gap:10px; align-items:flex-end; pointer-events:none;}
  .toast{
    pointer-events:auto; max-width:min(380px, calc(100vw - 36px));
    background:var(--ink-900); color:#fff; font-size:13.5px; font-weight:500; line-height:1.45;
    padding:12px 16px; border-radius:12px; box-shadow:var(--shadow-lg);
    border-left:4px solid var(--blue-400);
    animation:toastIn .24s cubic-bezier(.22,.9,.32,1) both;
  }
  .toast-ok{border-left-color:var(--green);}
  .toast-error{border-left-color:#f87171;}
  .toast.leaving{animation:toastOut .2s ease both;}
  @keyframes toastIn{from{opacity:0; transform:translateY(10px) scale(.98)} to{opacity:1; transform:none}}
  @keyframes toastOut{to{opacity:0; transform:translateY(6px) scale(.98)}}

  /* Diálogos propios — sustituyen a confirm() y prompt() */
  .ui-dialog{z-index:80;}
  .ui-dialog-panel{max-width:400px;}
  .ui-dialog-msg{margin:0 0 18px; font-size:14px; line-height:1.55; color:var(--ink-500);}
  .btn-danger{background:#dc2626; color:#fff; box-shadow:0 6px 16px rgba(220,38,38,.28);}
  .btn-danger:hover{box-shadow:0 8px 22px rgba(220,38,38,.36);}

  @media (max-width:880px){
    .toast-host{right:12px; left:12px; bottom:12px; align-items:stretch;}
    .toast{max-width:none;}
    .shell{grid-template-columns:1fr;}
    .sidebar{position:sticky; top:0; z-index:20; height:auto; flex-direction:row; overflow-x:auto; align-items:center; padding:12px 14px;}
    .brand{padding:0 12px 0 0;}
    .side-foot{display:none;}
    .nav-spacer{display:none;}
    .sidebar .logout-btn.mobile-logout{display:flex; margin-left:6px;}
    main{padding:22px 18px 50px;}
    .stats-row{grid-template-columns:repeat(2,1fr);}
    .kanban{grid-template-columns:1fr;}
    .note-editor-top{gap:10px;}
    .net-right{width:100%; justify-content:flex-end;}
    .find-field{width:130px; flex:1;}
    .profile-card{flex-direction:column; text-align:center; align-items:center;}
  }