/* Capa de revisión compartida (notas + edición). La incluye cada documento. */
#doc { max-width:880px; margin:0 auto; transition:margin .2s ease; }

/* Barra de modo */
.tb { position:sticky; top:0; z-index:30; background:#EFE9DF; border-bottom:1px solid #DDD5C7; display:flex; gap:8px; align-items:center; padding:8px 16px; flex-wrap:wrap; }
.tb a.back { text-decoration:none; color:#5C1A1F; font:600 12px/1 'Avenir Next','Helvetica Neue',Arial,sans-serif; margin-right:4px; }
.pill { border:1px solid #B8B2A8; background:#F5F1EA; border-radius:20px; padding:6px 13px; font:600 12px/1 'Avenir Next','Helvetica Neue',Arial,sans-serif; cursor:pointer; color:#3A3733; }
.pill.notes.active { background:#5C1A1F; color:#F5F1EA; border-color:#5C1A1F; }
.pill.edit.active { background:#1A2B4A; color:#F5F1EA; border-color:#1A2B4A; }
.tb .hint { font:12px/1.3 Georgia,serif; color:#6E6A63; }
.tb .grow { margin-left:auto; }
.editctrls { display:none; gap:8px; align-items:center; }
body.mode-edit .editctrls { display:flex; }
body.mode-edit .tb { background:#E7ECF3; border-bottom-color:#C2CCDA; }
.editctrls .st { font:12px Georgia,serif; color:#1A2B4A; }
.btn { border:none; border-radius:7px; padding:7px 13px; font:600 12px 'Avenir Next','Helvetica Neue',Arial,sans-serif; cursor:pointer; }
.btn.blue { background:#1A2B4A; color:#F5F1EA; } .btn.ghost { background:#D9DEE7; color:#1A2B4A; } .btn.ghostred { background:#EAD9D9; color:#5C1A1F; }

/* Selección por modo (colores diferenciados) */
body.mode-notes #doc ::selection { background:rgba(92,26,31,.28); }
body.mode-edit #doc ::selection { background:rgba(26,43,74,.30); }
body.mode-edit #doc { outline:2px dashed #1A2B4A; outline-offset:8px; border-radius:4px; caret-color:#1A2B4A; }

/* Resaltado de notas (visible al leer) */
mark.anno { background:rgba(92,26,31,.15); border-bottom:2px solid #5C1A1F; cursor:pointer; border-radius:2px; padding:0 1px; }
mark.anno:hover, mark.anno.active { background:rgba(92,26,31,.32); }
body.mode-edit mark.anno { background:transparent; border-bottom:0; cursor:text; }

#selBtn { position:fixed; z-index:50; transform:translate(-50%,-118%); background:#5C1A1F; color:#F5F1EA; border:none; border-radius:7px; padding:7px 11px; font:600 12px/1 'Avenir Next','Helvetica Neue',Arial,sans-serif; cursor:pointer; box-shadow:0 3px 10px rgba(0,0,0,.3); display:none; }
#tip { position:fixed; z-index:48; max-width:280px; background:#1C1A17; color:#F5F1EA; border-radius:7px; padding:8px 10px; font:13px/1.4 Georgia,serif; box-shadow:0 5px 18px rgba(0,0,0,.3); display:none; pointer-events:none; }
#tip .au { color:#C66; font:600 11px 'Avenir Next','Helvetica Neue',Arial,sans-serif; display:block; margin-bottom:3px; }

#editor { position:fixed; z-index:60; width:330px; max-width:92vw; background:#F5F1EA; border:1px solid #5C1A1F; border-radius:10px; box-shadow:0 10px 32px rgba(0,0,0,.28); padding:13px; display:none; }
#editor .lbl { font:600 11px/1 'Avenir Next','Helvetica Neue',Arial,sans-serif; letter-spacing:2px; text-transform:uppercase; color:#5C1A1F; margin-bottom:6px; }
#editor .q { font-style:italic; color:#3A3733; font-size:12.5px; line-height:1.4; background:#fff; border-radius:6px; padding:7px 9px; max-height:70px; overflow:auto; margin-bottom:9px; }
#editor textarea { width:100%; height:84px; border:1px solid #B8B2A8; border-radius:6px; padding:8px; font:14px Georgia,serif; resize:vertical; background:#fff; color:#1C1A17; }
#editor .row { display:flex; gap:7px; justify-content:flex-end; margin-top:9px; align-items:center; }
#editor .del { margin-right:auto; background:none; border:none; color:#9a8f86; font:12px 'Avenir Next',sans-serif; cursor:pointer; }
#editor .save { background:#5C1A1F; color:#F5F1EA; } #editor .cancel { background:#E0D9CC; color:#3A3733; }

#fab { position:fixed; right:18px; bottom:18px; z-index:40; background:#5C1A1F; color:#F5F1EA; border:none; border-radius:24px; padding:11px 16px; font:600 13px/1 'Avenir Next','Helvetica Neue',Arial,sans-serif; letter-spacing:.5px; cursor:pointer; box-shadow:0 4px 14px rgba(0,0,0,.25); }
#fab span { color:#F0C9C9; }
#panel { position:fixed; top:0; right:0; height:100%; width:340px; max-width:88vw; background:#F5F1EA; border-left:1px solid #B8B2A8; box-shadow:-6px 0 22px rgba(0,0,0,.12); z-index:45; transform:translateX(100%); transition:transform .22s ease; display:flex; flex-direction:column; }
#panel.open { transform:translateX(0); }
#panel header { background:#000; color:#F5F1EA; padding:14px 16px; display:flex; align-items:center; justify-content:space-between; }
#panel header .t { font:700 13px/1 'Avenir Next','Helvetica Neue',Arial,sans-serif; letter-spacing:2px; text-transform:uppercase; }
#panel header button { background:none; border:none; color:#C66; font-size:20px; cursor:pointer; line-height:1; }
#whoRow { padding:9px 16px; border-bottom:1px solid #E0D9CC; font:13px Georgia,serif; color:#3A3733; display:flex; align-items:center; gap:6px; }
#whoRow b { color:#5C1A1F; } #whoRow a { color:#5C1A1F; cursor:pointer; font-size:11px; text-decoration:underline; margin-left:auto; }
#list { flex:1; overflow:auto; padding:6px 14px 80px; }
.nitem { border-left:3px solid #5C1A1F; background:#fff; border-radius:6px; padding:9px 11px; margin:10px 0; }
.nitem .q { font-style:italic; color:#5C1A1F; font-size:12.5px; line-height:1.45; border-bottom:1px dashed #E0D9CC; padding-bottom:6px; margin-bottom:6px; cursor:pointer; }
.nitem .n { font-size:13.5px; line-height:1.5; color:#1C1A17; white-space:pre-wrap; }
.nitem .m { font:11px 'Avenir Next','Helvetica Neue',Arial,sans-serif; color:#6E6A63; margin-top:6px; display:flex; justify-content:space-between; }
.nitem .m .au { color:#5C1A1F; font-weight:600; }
#empty { color:#6E6A63; font:13px/1.5 Georgia,serif; text-align:center; padding:30px 14px; }
/* Player de audio */
.player{ display:flex; align-items:center; gap:6px; }
.player button{ border:1px solid #B8B2A8; background:#F5F1EA; border-radius:7px; padding:6px 10px; font:600 12px/1 'Avenir Next','Helvetica Neue',Arial,sans-serif; cursor:pointer; color:#3A3733; }
.player button.play{ background:#5C1A1F; color:#F5F1EA; border-color:#5C1A1F; }
/* palabra que se está leyendo (color distinto al de notas) */
::highlight(speaking){ background:#FBE7A1; color:#1C1A17; }
/* aviso de voz (iOS sin voz española) */
#voiceWarn{ display:none; background:#5C1A1F; color:#F5F1EA; padding:10px 40px 10px 16px; font:13px/1.5 Georgia,serif; position:relative; }
#voiceWarn b{ color:#F0C9C9; font-weight:700; }
#voiceWarn button{ position:absolute; right:10px; top:6px; background:none; border:none; color:#F0C9C9; font-size:20px; line-height:1; cursor:pointer; }

/* Móvil */
@media (max-width:700px){
  .tb{ padding:7px 10px; gap:6px; }
  .tb .hint{ display:none; }
  #selBtn{ left:50%!important; top:auto!important; bottom:74px; transform:translateX(-50%); padding:11px 18px; font-size:14px; }
  #editor{ width:94vw; }
  #panel{ width:100%; max-width:100%; }
}

@media (min-width:1180px){ body.panel-open #doc{ margin-right:360px; } }
@media print { .tb,#fab,#selBtn,#panel,#editor,#tip{display:none!important;} mark.anno{background:transparent;border:0;} body.mode-edit #doc{outline:0;} }