/* ==========================================================================
   notas.css — Módulo de notas personales (estilo Google Keep)
   Paleta y disposición en mosaico; se apoya en global-layout.css y panel.css.
   ========================================================================== */

:root {
  --nota-default:  #ffffff;
  --nota-rojo:     #f6b3ac;
  --nota-naranja:  #fcd97e;
  --nota-amarillo: #fff4a3;
  --nota-verde:    #d9ffb6;
  --nota-teal:     #c3f7ee;
  --nota-azul:     #d6f3f9;
  --nota-morado:   #e3c9fc;
  --nota-rosa:     #fdd9ec;
  --nota-gris:     #edf0f3;
  --nota-borde:    rgba(0,0,0,.12);
  --nota-sombra:   0 1px 2px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --nota-sombra-h: 0 4px 12px rgba(0,0,0,.16);
}

body { background:#f5f6fa; }

.notas-toolbar {
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px;
}
.notas-buscador {
  flex:1 1 260px; max-width:520px; position:relative;
}
.notas-buscador i {
  position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#9aa0a6; pointer-events:none;
}
.notas-buscador input {
  width:100%; border:1px solid #dfe1e5; border-radius:10px; padding:10px 12px 10px 38px;
  background:#fff; font-size:.92rem;
}
.notas-buscador input:focus { outline:none; border-color:#1a1a2e; box-shadow:0 0 0 2px rgba(26,26,46,.08); }
.notas-contador { color:#5f6368; font-size:.85rem; }

/* ── Compositor "Tomar una nota…" ─────────────────────────────────────── */
.notas-compositor {
  background:#fff; border:1px solid var(--nota-borde); border-radius:12px;
  box-shadow:var(--nota-sombra); padding:14px 16px; margin-bottom:22px; cursor:text;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  max-width:620px;
}
.notas-compositor:hover { box-shadow:var(--nota-sombra-h); }
/* Ojo: aquí NO se puede usar la clase `.placeholder`: Bootstrap la define como
   bloque de carga gris y taparía el texto del compositor. */
.notas-compositor .compositor-texto { color:#5f6368; font-weight:500; }
.notas-compositor .acciones { display:flex; gap:4px; color:#5f6368; }
.notas-compositor .acciones i { font-size:1.15rem; }

/* ── Secciones y mosaico ──────────────────────────────────────────────── */
.notas-seccion-titulo {
  font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#5f6368; margin:18px 0 8px;
}
.notas-grid { column-count:4; column-gap:14px; }
@media (max-width:1250px) { .notas-grid { column-count:3; } }
@media (max-width:900px)  { .notas-grid { column-count:2; } }
@media (max-width:560px)  { .notas-grid { column-count:1; } }

.nota-card {
  break-inside:avoid; -webkit-column-break-inside:avoid;
  display:inline-block; width:100%; margin:0 0 14px;
  background:var(--nota-default); border:1px solid var(--nota-borde); border-radius:10px;
  box-shadow:var(--nota-sombra); overflow:hidden; position:relative;
  transition:box-shadow .15s ease;
}
.nota-card:hover, .nota-card:focus-within { box-shadow:var(--nota-sombra-h); }
.nota-card.c-rojo     { background:var(--nota-rojo); }
.nota-card.c-naranja  { background:var(--nota-naranja); }
.nota-card.c-amarillo { background:var(--nota-amarillo); }
.nota-card.c-verde    { background:var(--nota-verde); }
.nota-card.c-teal     { background:var(--nota-teal); }
.nota-card.c-azul     { background:var(--nota-azul); }
.nota-card.c-morado   { background:var(--nota-morado); }
.nota-card.c-rosa     { background:var(--nota-rosa); }
.nota-card.c-gris     { background:var(--nota-gris); }

.nota-card .cuerpo { padding:14px 16px 8px; cursor:pointer; }
.nota-card .titulo {
  font-weight:600; font-size:.98rem; color:#202124; margin:0 0 6px;
  overflow-wrap:anywhere; white-space:pre-wrap;
}
.nota-card .texto {
  font-size:.86rem; color:#3c4043; white-space:pre-wrap; overflow-wrap:anywhere;
  max-height:260px; overflow:hidden;
}
/* La fecha de última edición se ve SIEMPRE (es un requisito del módulo); los
   botones de acción solo aparecen al pasar el cursor o al enfocar la tarjeta. */
.nota-card .pie {
  display:flex; align-items:center; gap:6px; padding:8px 12px 10px;
}
.nota-card .btn-icono { opacity:0; transition:opacity .12s ease; }
.nota-card:hover .btn-icono, .nota-card:focus-within .btn-icono { opacity:1; }
.nota-card .fecha {
  font-size:.7rem; color:#3c4043; opacity:.8; margin-right:auto; padding-left:4px;
}
.nota-card .btn-icono {
  border:0; background:transparent; color:#3c4043; width:30px; height:30px;
  border-radius:50%; display:grid; place-items:center; cursor:pointer; line-height:1;
}
.nota-card .btn-icono:hover, .nota-card .btn-icono:focus-visible { background:rgba(0,0,0,.09); }
.nota-card .btn-fijada { color:#b06a00; }

/* Adjuntos dentro de la tarjeta */
.nota-adjuntos { display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 6px; }
.nota-adjuntos .miniatura {
  border:1px solid var(--nota-borde); border-radius:6px; overflow:hidden; background:rgba(255,255,255,.6);
  cursor:pointer; padding:0; line-height:0;
}
.nota-adjuntos .miniatura img { width:100%; max-height:150px; object-fit:cover; display:block; }
.nota-adjuntos .miniatura.ancha { width:100%; }
.nota-adjuntos .chip {
  display:inline-flex; align-items:center; gap:6px; max-width:100%;
  background:rgba(255,255,255,.65); border:1px solid var(--nota-borde); border-radius:16px;
  padding:4px 10px; font-size:.75rem; color:#202124; cursor:pointer; text-align:left;
}
.nota-adjuntos .chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nota-adjuntos .mas { font-size:.72rem; color:#3c4043; align-self:center; }

/* ── Editor (modal) ───────────────────────────────────────────────────── */
#modalNota .modal-content {
  border:0; border-radius:12px; background:var(--nota-default); transition:background .15s ease;
}
#modalNota .modal-content.c-rojo     { background:var(--nota-rojo); }
#modalNota .modal-content.c-naranja  { background:var(--nota-naranja); }
#modalNota .modal-content.c-amarillo { background:var(--nota-amarillo); }
#modalNota .modal-content.c-verde    { background:var(--nota-verde); }
#modalNota .modal-content.c-teal     { background:var(--nota-teal); }
#modalNota .modal-content.c-azul     { background:var(--nota-azul); }
#modalNota .modal-content.c-morado   { background:var(--nota-morado); }
#modalNota .modal-content.c-rosa     { background:var(--nota-rosa); }
#modalNota .modal-content.c-gris     { background:var(--nota-gris); }
/* La nota de Cobranza se abre con el mismo ámbar claro de su tarjeta
   (si se queda el c-naranja de la paleta, el modal no coincide con la vista). */
#modalNota.viendo-cobranza .modal-content { background: #fdf3cb; }

#modalNota .modal-header, #modalNota .modal-footer { border:0; }
#modalNota .titulo-input, #modalNota .texto-input {
  border:0; background:transparent; box-shadow:none !important; color:#202124; padding-left:0; padding-right:0;
}
#modalNota .titulo-input { font-size:1.15rem; font-weight:600; }
#modalNota .texto-input { font-size:.95rem; resize:vertical; min-height:170px; }
#modalNota .titulo-input::placeholder, #modalNota .texto-input::placeholder { color:#5f6368; opacity:.75; }

.nota-paleta { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.nota-color {
  width:30px; height:30px; border-radius:50%; border:1px solid var(--nota-borde);
  cursor:pointer; padding:0; position:relative;
}
.nota-color[aria-pressed="true"] { box-shadow:0 0 0 2px #1a1a2e inset; }
.nota-color:focus-visible { outline:2px solid #1a1a2e; outline-offset:2px; }
.nota-acciones { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.nota-acciones .btn { min-height:36px; }

.nota-editor-adjuntos { display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.nota-editor-adjuntos .adjunto {
  position:relative; border:1px solid var(--nota-borde); border-radius:8px; overflow:hidden;
  background:rgba(255,255,255,.65); max-width:150px;
}
.nota-editor-adjuntos .adjunto img { width:150px; height:110px; object-fit:cover; display:block; }
.nota-editor-adjuntos .adjunto .nombre {
  font-size:.7rem; padding:4px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:150px;
}
.nota-editor-adjuntos .quitar {
  position:absolute; top:3px; right:3px; width:24px; height:24px; border-radius:50%;
  border:0; background:rgba(32,33,36,.75); color:#fff; cursor:pointer; line-height:1; font-size:.75rem;
}
.nota-editor-adjuntos .quitar:hover { background:#202124; }

.nota-fechas { font-size:.72rem; color:#3c4043; opacity:.85; }
.nota-arrastrando { outline:2px dashed #1a1a2e; outline-offset:-8px; }

.notas-vacio { text-align:center; color:#5f6368; padding:48px 12px; }
.notas-vacio i { font-size:2.6rem; display:block; margin-bottom:10px; opacity:.5; }

/* ── Notas compartidas ─────────────────────────────────────────────────── */
.nota-card.compartida { border-style:dashed; }
.nota-card .de {
  display:flex; align-items:center; gap:5px; font-size:.72rem; color:#3c4043;
  padding:10px 16px 2px; opacity:.9;
}
.nota-chip-nueva {
  background:#1a1a2e; color:#fff; border-radius:10px; font-size:.62rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:2px 7px; margin-left:6px;
}
.nota-card .comentarios-contador {
  display:inline-flex; align-items:center; gap:3px; font-size:.7rem; color:#3c4043; opacity:.85;
}
/* Botón "Comentar": siempre visible (no espera al cursor) porque es la acción
   que más se usa en las notas compartidas. */
.nota-card .btn-comentar {
  display:inline-flex; align-items:center; gap:5px; flex:none;
  border:1px solid #1a1a2e; background:#1a1a2e; color:#fff;
  border-radius:14px; padding:3px 10px; font-size:.72rem; font-weight:600;
  cursor:pointer; line-height:1.4;
}
.nota-card .btn-comentar:hover { background:#2b2b4a; }
.nota-card .btn-comentar:focus-visible { outline:2px solid #1a1a2e; outline-offset:2px; }
.nota-card .btn-comentar.con-comentarios {
  background:rgba(255,255,255,.85); color:#1a1a2e; border-color:var(--nota-borde);
}
.nota-card .btn-comentar.con-comentarios:hover { background:#fff; }

.nota-aviso-compartida {
  display:flex; align-items:center; gap:8px; background:rgba(26,26,46,.08);
  border-radius:8px; padding:8px 10px; margin-bottom:10px; font-size:.82rem; color:#1a1a2e;
}
#modalNota.viendo-compartida .titulo-input,
#modalNota.viendo-compartida .texto-input { color:#202124; }
#modalNota.viendo-compartida .texto-input { background:transparent; }

/* ── Comentarios ───────────────────────────────────────────────────────── */
.nota-comentarios { margin-top:16px; border-top:1px solid var(--nota-borde); padding-top:12px; }
.nota-comentarios-titulo { font-size:.8rem; font-weight:700; color:#202124; margin-bottom:8px; }
.nota-comentarios-lista { display:grid; gap:8px; max-height:240px; overflow:auto; }
.nota-comentario {
  background:rgba(255,255,255,.75); border:1px solid var(--nota-borde); border-radius:8px;
  padding:8px 10px; position:relative;
}
.nota-comentario .autor { font-size:.75rem; font-weight:700; color:#202124; }
.nota-comentario .cuando { font-size:.68rem; color:#5f6368; margin-left:6px; }
.nota-comentario .texto-comentario { font-size:.85rem; color:#202124; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:3px; }
.nota-comentario .quitar-comentario {
  position:absolute; top:6px; right:6px; border:0; background:transparent; color:#5f6368;
  cursor:pointer; width:26px; height:26px; border-radius:50%;
}
.nota-comentario .quitar-comentario:hover { background:rgba(0,0,0,.08); color:#c0392b; }
.nota-comentario-vacio { font-size:.8rem; color:#5f6368; font-style:italic; }
.nota-comentario-nuevo { display:flex; gap:8px; align-items:flex-end; margin-top:10px; }
.nota-comentario-nuevo textarea { font-size:.85rem; }
.nota-comentario-nuevo .btn { min-height:38px; }

/* ── Recordatorios ─────────────────────────────────────────────────────── */
.recordatorio-chip {
  display:inline-flex; align-items:center; gap:4px; font-size:.7rem; font-weight:600;
  background:rgba(255,255,255,.7); border:1px solid var(--nota-borde); border-radius:12px;
  padding:2px 8px; color:#3c4043; margin-right:auto;
}
.recordatorio-chip.vencido { background:#fee2e2; border-color:#fca5a5; color:#b91c1c; }
.recordatorio-chip.hecho { background:#dcfce7; border-color:#86efac; color:#15803d; }
.recordatorio-acciones {
  display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px;
}
.recordatorio-acciones .btn { min-height:32px; font-size:.78rem; }
.nota-recordatorio {
  margin-top:12px; border:1px solid var(--nota-borde); border-radius:8px;
  padding:10px; background:rgba(255,255,255,.65);
}
.nota-recordatorio-fila { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.nota-recordatorio-fila input[type="datetime-local"] { max-width:230px; }
.nota-recordatorio-fila .btn { min-height:34px; }
/* Atajos del recordatorio: un clic pone fecha y hora y guarda. */
.recordatorio-rapidos { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.recordatorio-rapidos[hidden] { display:none; }
.recordatorio-rapido {
  border:1px solid var(--nota-borde); background:rgba(255,255,255,.75); color:#1a1a2e;
  border-radius:14px; padding:4px 11px; font-size:.75rem; font-weight:600; min-height:30px; cursor:pointer;
}
.recordatorio-rapido:hover { background:#fff; border-color:#1a1a2e; }
.recordatorio-rapido:focus-visible { outline:2px solid #1a1a2e; outline-offset:2px; }

/* ── Ventana de compartir ──────────────────────────────────────────────── */
.compartir-lista {
  display:grid; gap:4px; max-height:280px; overflow:auto;
  border:1px solid var(--nota-borde); border-radius:8px; padding:6px;
}
.compartir-persona {
  display:flex; align-items:center; gap:10px; padding:6px 8px; border-radius:6px; cursor:pointer;
  font-size:.88rem; color:#202124; margin:0;
}
.compartir-persona:hover { background:#f1f3f4; }
.compartir-persona input { margin:0; flex:none; }
.compartir-persona .rol { color:#5f6368; font-size:.75rem; }
.compartir-persona.ya-compartida { background:rgba(26,26,46,.06); }
.compartir-vacio { font-size:.85rem; color:#5f6368; padding:10px; text-align:center; }
#compartirBuscador.deshabilitado { opacity:.5; pointer-events:none; }

/* Visor de imagen / vista previa de adjunto */
#visorNota .modal-body { text-align:center; }
#visorNota img { max-width:100%; max-height:75vh; border-radius:8px; }

/* Botón flotante para nueva nota en móvil */
.notas-fab {
  display:none; position:fixed; right:18px; bottom:18px; z-index:1030;
  width:56px; height:56px; border-radius:50%; border:0; background:#1a1a2e; color:#fff;
  font-size:1.4rem; box-shadow:0 4px 14px rgba(0,0,0,.3);
}

@media (max-width:768px) {
  .notas-grid { column-count:1; }
  .nota-card .btn-icono { width:40px; height:40px; opacity:1; }
  /* En el teléfono el botón Comentar se toca con el dedo: más grande. */
  .nota-card .btn-comentar { min-height:40px; font-size:.8rem; padding:6px 14px; }
  .recordatorio-rapido { min-height:40px; padding:6px 14px; font-size:.8rem; }
  .notas-fab { display:grid; place-items:center; }
  .notas-compositor { max-width:none; }
  .nota-acciones .btn { min-height:44px; }
  #modalNota .texto-input { min-height:130px; }
}

/* ── Notas de Cobranza (asignación a asesores + fecha límite) ───────────── */
/* Ámbar claro (más suave que el naranja de la paleta) y margen interior: el
   texto ya no queda pegado al borde de la tarjeta. */
.nota-card.cobranza-card { background: #fdf3cb; padding: 14px 16px 12px; }
.cobranza-card { cursor: pointer; }
.cobranza-card .de { padding: 0 0 6px; }
.cobranza-titulo { font-weight: 700; font-size: .95rem; margin-bottom: 6px; }
.cobranza-ficha { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; }
.cobranza-dato { display: flex; gap: 6px; font-size: .78rem; line-height: 1.35; }
.cobranza-dato-llave { color: #6c757d; min-width: 74px; flex: 0 0 auto; }
.cobranza-dato-valor { color: #212529; overflow-wrap: anywhere; }
.cobranza-fecha { border-top: 1px dashed #e5e7eb; padding-top: 8px; font-size: .8rem; }
.cobranza-fecha-linea { color: #475569; }
.cobranza-fecha-linea.proxima { color: #92400e; font-weight: 600; }
.cobranza-fecha-linea.vencida { color: #b91c1c; font-weight: 600; }
.cobranza-aviso-vencida {
  margin-top: 4px; background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5;
  border-radius: 6px; padding: 4px 8px; font-size: .78rem; font-weight: 600;
}
.cobranza-badge-archivada {
  margin-top: 8px; display: inline-block; background: #e5e7eb; color: #374151;
  border-radius: 999px; padding: 2px 10px; font-size: .72rem;
}
/* La misma leyenda de fecha límite de la tarjeta, dentro del editor. */
.cobranza-leyenda { margin: 2px 0 12px; }
/* Secciones plegables de cobranza (pendiente y archivada): barra visible con
   pista clara de abrir/cerrar (flecha grande + píldora «Mostrar/Ocultar»). */
.notas-plegable {
  margin-top: 18px;
  border: 1px solid #f0e0a8;
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.notas-plegable > summary {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; list-style: none; user-select: none;
  padding: 12px 14px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #1a1a2e; background: #fdf3cb;
}
.notas-plegable > summary:hover { background: #fbe9ad; }
.notas-plegable > summary:focus-visible { outline: 2px solid #1a1a2e; outline-offset: -2px; }
.notas-plegable > summary::-webkit-details-marker { display: none; }
.notas-plegable > summary::before {
  content: '▸'; font-size: 1.05rem; font-weight: 900; color: #92400e; line-height: 1;
}
.notas-plegable[open] > summary::before { content: '▾'; }
.notas-plegable > summary::after {
  content: 'Mostrar'; margin-left: auto;
  background: #1a1a2e; color: #fff; border-radius: 999px;
  padding: 3px 12px; font-size: .72rem; font-weight: 600;
  letter-spacing: .02em; text-transform: none;
}
.notas-plegable[open] > summary::after { content: 'Ocultar'; }
.notas-plegable > .notas-grid { padding: 12px 14px 0; }