/* =====================================================================
   Gestión de Tareas - estilos
   Pensado para PC con pantalla ancha: rejillas a lo ancho y columnas.
   ===================================================================== */
:root {
  --fondo: #eef1f5;
  --tarjeta: #ffffff;
  --texto: #1f2933;
  --tenue: #6b7785;
  --borde: #d9dfe7;
  --borde-suave: #e8ecf1;
  --primario: #2f6db5;
  --primario-osc: #245a96;
  --peligro: #c0392b;
  --barra: #1f2d3d;
  --radio: 6px;

  --e-pendiente: #e3a008;
  --e-en_curso: #2f6db5;
  --e-pausada: #8e6bbf;
  --e-cancelada: #9aa5b1;
  --e-terminada: #2e9d5b;
}

* { box-sizing: border-box; }
html { font-size: calc(15px * var(--escala, 1)); }
body {
  margin: 0;
  font-family: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  color: var(--texto);
  background: var(--fondo);
  line-height: 1.4;
}
a { color: var(--primario); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: 700; }
h1 { font-size: 1.45rem; }
h2 { font-size: 1.1rem; }
h3 { font-size: .95rem; margin: 1rem 0 .4rem; color: var(--tenue); text-transform: uppercase; letter-spacing: .04em; }
small, .tenue { color: var(--tenue); }
.vacio { color: #b4bcc6; }
.nowrap { white-space: nowrap; }
[hidden] { display: none !important; }

/* ---------- Barra superior ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 1.2rem;
  padding: 0 1.5rem; height: 3.5rem;
  background: var(--barra); color: #fff;
}
.barra .marca { color: #fff; font-weight: 900; font-size: 1.1rem; white-space: nowrap; }
.barra .menu { display: flex; align-items: center; gap: .2rem; }
.barra .menu a { display: inline-flex; align-items: center; gap: .5rem; color: #c9d4e0; padding: .45rem .85rem; border-radius: var(--radio); font-weight: 700; }
.barra .menu a svg { flex: none; opacity: .9; }
.barra .menu a:hover { background: rgba(255,255,255,.08); text-decoration: none; color: #fff; }
.barra .menu a.activo { background: rgba(255,255,255,.14); color: #fff; font-weight: 700; }
.barra .menu .sep { width: 1px; height: 22px; background: rgba(255,255,255,.2); margin: 0 .5rem; }
.busca-rapida { flex: 1; max-width: 460px; margin-left: auto; }
.busca-rapida input { width: 100%; background: rgba(255,255,255,.1); border-color: transparent; color: #fff; }
.busca-rapida input::placeholder { color: #9fb0c3; }
.barra .usuario { display: flex; gap: .9rem; align-items: center; white-space: nowrap; }
.barra .usuario a { color: #fff; font-weight: 700; }
.barra .usuario a.salir { color: #9fb0c3; font-weight: 400; }

.contenido { padding: 1.2rem 1.5rem 3rem; }

/* ---------- Controles ---------- */
input, select, textarea, button { font: inherit; color: inherit; }
input:not([type=checkbox]):not([type=color]), select, textarea {
  width: 100%;
  padding: .45rem .6rem;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: #fff;
}
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(47,109,181,.35); border-color: var(--primario); }
textarea { resize: vertical; }
input[type=color] { width: 60px; height: 34px; padding: 2px; border: 1px solid var(--borde); border-radius: var(--radio); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .3rem;
  padding: .45rem .9rem; border: 1px solid var(--borde); border-radius: var(--radio);
  background: #fff; color: var(--texto); cursor: pointer; white-space: nowrap; font-weight: 700; font-size: .93rem;
}
.btn:hover { background: #f4f6f9; text-decoration: none; }
.btn-primario { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-primario:hover { background: var(--primario-osc); }
.btn-peligro { color: var(--peligro); border-color: #e6b8b2; }
.btn-peligro:hover { background: #fdf1ef; }
.btn-texto { border-color: transparent; background: none; color: var(--primario); font-weight: 400; }
.btn-mini { padding: .2rem .5rem; font-size: .85rem; }
.btn-archivo { cursor: pointer; }
.enlace-peligro { background: none; border: 0; color: var(--peligro); cursor: pointer; padding: 0 .2rem; font-size: .85rem; }
form.inline { display: inline; }

.aviso { padding: .7rem 1rem; border-radius: var(--radio); margin-bottom: 1rem; }
.aviso-ok { background: #e6f5ec; color: #1d6b3d; }
.aviso-error { background: #fdecea; color: #922b21; }
.ayuda { color: var(--tenue); font-size: .9rem; }

/* ---------- Tarjetas y formularios ---------- */
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde-suave); border-radius: 8px; padding: 1rem 1.2rem; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.tarjeta + .tarjeta { margin-top: 1rem; }
.tarjeta.sin-relleno { padding: 0; overflow: hidden; }
.tarjeta-cab { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; }
.tarjeta-cab h1, .tarjeta-cab h2 { margin-right: auto; }
.formulario label { display: block; margin-bottom: .8rem; font-weight: 700; font-size: .88rem; color: #3e4c5a; }
.formulario label > input, .formulario label > select, .formulario label > textarea, .formulario label > .etiquetas-input { margin-top: .25rem; font-weight: 400; font-size: 1rem; color: var(--texto); }
.formulario label.check, label.check { display: inline-flex; align-items: center; gap: .4rem; font-weight: 400; cursor: pointer; }
.formulario fieldset { border: 1px solid var(--borde-suave); border-radius: var(--radio); margin: 0 0 1rem; padding: .6rem .9rem; }
.formulario legend { font-weight: 700; font-size: .88rem; padding: 0 .3rem; }
.fila-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
.fila-checks { display: flex; gap: 1.5rem; margin-bottom: 1rem; }
.lista-checks { display: grid; gap: .3rem; max-height: 340px; overflow: auto; }
.lista-checks.columnas { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.filtro-checks { margin-bottom: .5rem; }
.acciones { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.zona-peligro { border-top: 1px dashed var(--borde); margin-top: 1rem; padding-top: 1rem; }
.pagina-estrecha { max-width: 640px; }
.pagina-estrecha h1 { margin-bottom: 1rem; }

/* Maestro / detalle (pantallas de administración) */
.maestro-detalle { display: grid; grid-template-columns: minmax(0, 2fr) minmax(380px, 1fr); gap: 1.2rem; align-items: start; }
.maestro-detalle .tarjeta + .tarjeta { margin-top: 0; position: sticky; top: 70px; }

/* ---------- Tablas ---------- */
.tabla { width: 100%; border-collapse: collapse; font-size: .93rem; }
.tabla th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; color: var(--tenue); padding: .55rem .6rem; border-bottom: 2px solid var(--borde-suave); background: #fafbfc; white-space: nowrap; }
.tabla th a { color: inherit; }
.tabla td { padding: .5rem .6rem; border-bottom: 1px solid var(--borde-suave); vertical-align: middle; }
.tabla tr.clicable { cursor: pointer; }
.tabla tr.clicable:hover td { background: #f5f8fc; }
.tabla tr.seleccionada td { background: #e9f1fb; }
.tabla tr.inactiva td { color: #a3adb8; }
.tabla-tareas td.asunto { font-weight: 700; max-width: 520px; }
.tabla-tareas td.num { color: var(--tenue); }
.punto { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: .4rem; vertical-align: middle; }
td.vencida, dd.vencida { color: var(--peligro); font-weight: 700; }

.chip { display: inline-flex; align-items: center; gap: .25rem; background: #eef2f7; color: #344456; border-radius: 999px; padding: .1rem .6rem; font-size: .82rem; margin: .1rem .25rem .1rem 0; }
a.chip:hover { background: #dfe7f1; text-decoration: none; }

/* Estados */
.estado { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .8rem; font-weight: 700; color: #fff; white-space: nowrap; }
.estado-pendiente { background: var(--e-pendiente); }
.estado-en_curso { background: var(--e-en_curso); }
.estado-pausada { background: var(--e-pausada); }
.estado-cancelada { background: var(--e-cancelada); }
.estado-terminada { background: var(--e-terminada); }
.privado { font-size: .8rem; background: #3e4c5a; color: #fff; padding: .12rem .55rem; border-radius: 999px; }

/* ---------- Cabecera de página y filtros ---------- */
.cab-pagina { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.5rem; margin-bottom: 1rem; }
.cab-pagina h1 .tenue { font-weight: 400; font-size: 1rem; margin-left: .3rem; }
.filtros { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-left: auto; }
.filtros input[type=search]:not(#x) { width: 220px; }
.filtros select:not(#x) { width: auto; max-width: 190px; }
.filtros .corto:not(#x) { width: 140px; }

/* ---------- Panel por categorías ---------- */
.leyenda { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; font-size: .85rem; color: var(--tenue); margin-bottom: .8rem; }
.ley::before { content: ''; display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: .35rem; vertical-align: -1px; }
.ley-pendiente::before { background: var(--e-pendiente); }
.ley-en_curso::before { background: var(--e-en_curso); }
.ley-pausada::before { background: var(--e-pausada); }
.ley-cancelada::before { background: var(--e-cancelada); }
.ley-terminada::before { background: var(--e-terminada); }
.ley-sep { flex: 1; }
.vencida-ej { color: var(--peligro); font-weight: 700; }

.panel { display: flex; flex-direction: column; gap: .8rem; }
.panel-fila { display: grid; grid-template-columns: 220px 1fr; background: var(--tarjeta); border: 1px solid var(--borde-suave); border-left: 5px solid var(--c); border-radius: 8px; overflow: hidden; }
.panel-cat { position: relative; display: flex; align-items: flex-start; gap: .5rem; padding: .8rem .9rem; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 10%, #fff), #fff); border-right: 1px solid var(--borde-suave); }
.panel-cat h2 { font-size: 1rem; }
.panel-cat p { margin: .2rem 0 0; font-size: .82rem; color: var(--tenue); }
.panel-cat .contador { margin-left: auto; background: var(--c); color: #fff; border-radius: 999px; padding: 0 .55rem; font-weight: 700; font-size: .85rem; }
.panel-cat .nuevo { position: absolute; bottom: .6rem; right: .8rem; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--borde); color: var(--tenue); font-weight: 700; }
.panel-cat .nuevo:hover { background: var(--c); color: #fff; border-color: var(--c); text-decoration: none; }
.plegar { width: 20px; height: 20px; border: 0; background: none; cursor: pointer; padding: 0; color: var(--tenue); }
.plegar::before { content: '▾'; }
.panel-fila.plegada .plegar::before { content: '▸'; }
.panel-fila.plegada .panel-bloques { display: none; }
.panel-fila.plegada { grid-template-columns: 1fr; }
.panel-fila.plegada .panel-cat { border-right: 0; }

.panel-bloques { display: flex; flex-wrap: wrap; gap: .6rem; padding: .7rem; align-content: flex-start; min-height: 70px; }
.bloque {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 230px; min-height: 74px; padding: .55rem .7rem;
  background: #fff; border: 1px solid var(--borde); border-top: 4px solid var(--eb, #999); border-radius: var(--radio);
  color: var(--texto); transition: box-shadow .12s, transform .12s;
}
.bloque:hover { text-decoration: none; box-shadow: 0 4px 12px rgba(16,24,40,.12); transform: translateY(-1px); }
.bloque-asunto { font-weight: 700; font-size: .93rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bloque-pie { display: flex; gap: .5rem; align-items: center; font-size: .78rem; color: var(--tenue); margin-top: .4rem; flex-wrap: wrap; }
.bloque-pie .resp { font-weight: 700; color: #3e4c5a; }
.bloque-pie .chk { margin-left: auto; }
.bloque.vencida .limite { color: var(--peligro); font-weight: 700; }
.bloque.vencida { border-color: #f0c2bc; }
.estado-b-pendiente { --eb: var(--e-pendiente); }
.estado-b-en_curso { --eb: var(--e-en_curso); }
.estado-b-pausada { --eb: var(--e-pausada); }
.estado-b-cancelada { --eb: var(--e-cancelada); }
.estado-b-terminada { --eb: var(--e-terminada); }
.bloque.estado-b-cancelada .bloque-asunto { text-decoration: line-through; color: var(--tenue); }
.bloque.estado-b-terminada { background: #f6fbf8; }
.vacio-grande { text-align: center; padding: 3rem; }

/* ---------- Calendario ---------- */
.cal-nav { display: flex; align-items: center; gap: .5rem; }
.cal-nav h1 { margin: 0 .6rem; min-width: 210px; }
.conmutador { display: inline-flex; border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; margin-left: .8rem; }
.conmutador a { padding: .4rem .9rem; color: var(--texto); background: #fff; }
.conmutador a.activo { background: var(--primario); color: #fff; }
.conmutador a:hover { text-decoration: none; }

.calendario { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); background: var(--borde-suave); gap: 1px; border: 1px solid var(--borde-suave); border-radius: 8px; overflow: hidden; }
.cal-cab { background: #fafbfc; padding: .5rem .7rem; font-size: .8rem; font-weight: 700; text-transform: uppercase; color: var(--tenue); }
.cal-dia { background: #fff; min-height: 128px; padding: .35rem .45rem .5rem; display: flex; flex-direction: column; gap: 3px; }
.cal-semana .cal-dia { min-height: 70vh; }
.cal-dia.finde, .cal-cab.finde { background: #fbfcfd; }
.cal-dia.fuera { background: #f6f7f9; }
.cal-dia.fuera .cal-num span { color: #b4bcc6; }
.cal-num { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: .9rem; margin-bottom: 2px; }
.cal-dia.hoy .cal-num span { background: var(--primario); color: #fff; border-radius: 999px; padding: 0 .5rem; }
.cal-nueva { visibility: hidden; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; color: var(--tenue); }
.cal-dia:hover .cal-nueva { visibility: visible; }
.cal-nueva:hover { background: var(--primario); color: #fff; text-decoration: none; }
.cal-tarea {
  display: flex; gap: .35rem; align-items: baseline;
  padding: .2rem .4rem; border-radius: 4px; font-size: .82rem; color: var(--texto);
  background: color-mix(in srgb, var(--eb) 12%, #fff); border-left: 3px solid var(--eb);
  white-space: nowrap; overflow: hidden;
}
.cal-tarea:hover { text-decoration: none; background: color-mix(in srgb, var(--eb) 22%, #fff); }
.cal-tarea .hora { color: var(--tenue); font-size: .76rem; font-variant-numeric: tabular-nums; }
.cal-tarea .asunto { overflow: hidden; text-overflow: ellipsis; font-weight: 700; }
.cal-tarea.estado-b-cancelada .asunto, .cal-tarea.estado-b-terminada .asunto { text-decoration: line-through; color: var(--tenue); font-weight: 400; }
.cal-semana .cal-tarea { flex-wrap: wrap; white-space: normal; padding: .4rem .5rem; }
.cal-semana .cal-tarea .asunto { flex: 1 1 100%; order: 2; }
.cal-semana .cal-tarea .meta { order: 3; font-size: .75rem; color: var(--tenue); }

/* ---------- Ficha de tarea ---------- */
.tarea-cab { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tarea-titulo { display: flex; align-items: center; gap: .7rem; flex: 1; min-width: 0; flex-wrap: wrap; }
.tarea-num { color: var(--tenue); font-size: 1.2rem; font-weight: 300; }
.cat { font-size: .8rem; font-weight: 700; padding: .12rem .55rem; border-radius: 4px; color: var(--c); border: 1px solid var(--c); }
.cambio-estado select { width: auto; }

.tarea-rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.15fr); gap: 1rem; align-items: start; }
.tarea-col { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.tarea-col .tarjeta + .tarjeta { margin-top: 0; }

.datos { display: grid; grid-template-columns: 125px 1fr; gap: .45rem .8rem; margin: 0; font-size: .93rem; }
.datos dt { color: var(--tenue); font-size: .85rem; }
.datos dd { margin: 0; min-width: 0; }
.lista-ref { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.texto-largo { white-space: normal; word-wrap: break-word; background: #fafbfc; border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: .7rem .9rem; font-size: .95rem; max-height: 420px; overflow: auto; }
.notas-cierre { background: #f4faf6; border-color: #d5ecdd; }

/* Checklist */
.progreso { font-weight: 700; color: var(--tenue); }
.checklist { list-style: none; margin: 0 0 .7rem; padding: 0; }
.checklist li { display: flex; align-items: center; gap: .5rem; padding: .35rem .3rem; border-bottom: 1px solid var(--borde-suave); }
.checklist li label { display: flex; gap: .5rem; align-items: flex-start; flex: 1; cursor: pointer; }
.checklist li input { margin-top: .2rem; }
.checklist li.hecho .txt { font-weight: 700; }
.checklist .quien { font-size: .75rem; color: var(--tenue); white-space: nowrap; }
.checklist .borrar { display: none; flex: none; }
.editando .checklist .borrar { display: inline-grid; }
.checklist li[draggable=true] { cursor: grab; }
.checklist li.arrastrando { opacity: .4; }
.checklist-nuevo { display: flex; gap: .5rem; }

/* Mensajes (posts) */
.nuevo-post { margin-bottom: 1rem; }
.fila-envio { display: flex; align-items: center; gap: .5rem; margin-top: .4rem; }
.fila-envio .btn-primario { margin-left: auto; }
.nombres-archivos { font-size: .8rem; color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.posts { display: flex; flex-direction: column; gap: .8rem; }
.post { border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: .7rem .9rem; }
.post header { display: flex; gap: .7rem; align-items: baseline; margin-bottom: .35rem; }
.post header time { color: var(--tenue); font-size: .82rem; }
.post header form { margin-left: auto; }
.post-texto { word-wrap: break-word; }
.post-adjuntos { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; align-items: center; }
.adjunto { display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .5rem .2rem .2rem; border: 1px solid var(--borde); border-radius: var(--radio); font-size: .85rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ico-arch { font-size: .65rem; font-weight: 900; background: #3e4c5a; color: #fff; border-radius: 3px; padding: .15rem .3rem; letter-spacing: .03em; }
.adjunto-img img { display: block; max-height: 110px; max-width: 180px; border-radius: var(--radio); border: 1px solid var(--borde); }

/* Chats */
.chat-abrir { display: flex; gap: .35rem; margin-bottom: .7rem; }
.chat-abrir input[name=titulo] { flex: 1; width: auto; min-width: 0; }
/* Lista de chats en acordeón: un encabezado por chat; el abierto muestra mensajes y caja de envío */
.chat-lista { display: flex; flex-direction: column; gap: .4rem; }
.chat-item { border: 1px solid var(--borde-suave); border-radius: var(--radio); overflow: hidden; }
.chat-item.abierto { border-color: var(--borde); }
.chat-cab {
  display: flex; align-items: center; gap: .5rem; width: 100%; padding: .5rem .7rem;
  border: 0; background: #fafbfc; cursor: pointer; text-align: left; font: inherit; color: var(--texto);
}
.chat-cab:hover { background: #f1f4f8; }
.chat-cab:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }
.chat-cab svg { flex: none; color: var(--tenue); transition: transform .15s; transform: rotate(-90deg); }
.chat-item.abierto .chat-cab svg { transform: none; }
.chat-cab .titulo { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-cab .num { color: var(--tenue); font-size: .85rem; }
.chat-cab .quien { margin-left: auto; color: var(--tenue); font-size: .75rem; white-space: nowrap; }
.chat-cab .no-leidos { background: var(--peligro); color: #fff; border-radius: 999px; padding: 0 .45rem; font-size: .72rem; font-weight: 700; }
.chat-item .chat-ventana { border-top: 1px solid var(--borde-suave); }
.chat-ventana { overflow: hidden; }
.chat-mensajes { max-height: 380px; overflow-y: auto; padding: .7rem; background: #f3f5f8; display: flex; flex-direction: column; gap: .4rem; }
.chat-dia { align-self: center; font-size: .75rem; color: var(--tenue); background: #e4e9ef; border-radius: 999px; padding: .1rem .7rem; margin: .3rem 0; }
.burbuja { max-width: 82%; align-self: flex-start; background: #fff; border-radius: 10px 10px 10px 2px; padding: .4rem .65rem .3rem; box-shadow: 0 1px 1px rgba(0,0,0,.06); word-wrap: break-word; }
.burbuja.mia { align-self: flex-end; background: #dcebfb; border-radius: 10px 10px 2px 10px; }
.burbuja .autor { font-size: .78rem; font-weight: 700; color: var(--primario); }
.burbuja .pie { display: flex; justify-content: flex-end; gap: .3rem; align-items: center; font-size: .72rem; color: var(--tenue); margin-top: .1rem; }
.tick { font-weight: 700; letter-spacing: -2px; cursor: help; }
.tick-enviado { color: #95a3b3; }
.tick-leido_parcial { color: #95a3b3; }
.tick-leido { color: #1e88e5; }
.burbuja .post-adjuntos { margin-top: .3rem; }
.chat-envio { padding: .5rem; border-top: 1px solid var(--borde-suave); background: #fff; }

/* Archivos */
.subir-archivos { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; }
.subir-archivos input[name=descripcion]:not(#x) { flex: 1; width: auto; min-width: 180px; }
.subir-archivos .nombres-archivos { order: 5; flex-basis: 100%; }
.tabla-archivos td { font-size: .88rem; }
.tabla-archivos td:first-child { max-width: 220px; }
.desc-archivo input { border-color: transparent !important; background: transparent !important; padding: .2rem .3rem !important; }
.desc-archivo input:hover, .desc-archivo input:focus { border-color: var(--borde) !important; background: #fff !important; }
.origen { font-size: .75rem; border-radius: 4px; padding: .05rem .4rem; background: #eef2f7; }
.origen-M { background: #fff4d6; }
.origen-C { background: #e3f0fd; }

/* ---------- Formulario de tarea ---------- */
.form-tarea { max-width: 1800px; }
.rejilla-form { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1.5rem; }
.etiquetas-input { display: flex; flex-wrap: wrap; gap: .3rem; align-items: center; border: 1px solid var(--borde); border-radius: var(--radio); padding: .3rem .4rem; background: #fff; }
.etiquetas-input input[type=text] { flex: 1; min-width: 160px; border: 0 !important; outline: 0 !important; padding: .2rem !important; width: auto !important; }
.etiquetas-input .chip button { border: 0; background: none; cursor: pointer; padding: 0; color: var(--tenue); font-size: 1rem; line-height: 1; }

/* Etiquetas (admin) */
.rejilla-etiquetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: .5rem; }
.etiqueta-edit { display: flex; gap: .3rem; align-items: center; border: 1px solid var(--borde-suave); border-radius: var(--radio); padding: .3rem; }
.etiqueta-edit .usos { min-width: 2.2rem; text-align: center; font-size: .85rem; background: #eef2f7; border-radius: 999px; }

.paginacion { display: flex; gap: .3rem; margin-top: 1rem; flex-wrap: wrap; }
.paginacion a { padding: .3rem .65rem; border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; }
.paginacion a.activo { background: var(--primario); color: #fff; border-color: var(--primario); }

/* ---------- Login ---------- */
.pagina-login { display: grid; place-items: center; min-height: 100vh; background: var(--barra); }
.pagina-login .contenido { padding: 0; }
.login-caja { width: 380px; background: #fff; border-radius: 10px; padding: 2rem; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.login-caja h1 { margin-bottom: 1.2rem; text-align: center; }
.login-caja label { display: block; margin-bottom: .9rem; font-weight: 700; font-size: .88rem; }
.login-caja label input { margin-top: .25rem; }
.login-caja .btn { width: 100%; padding: .6rem; }

/* ---------- Pantallas más pequeñas ---------- */
@media (max-width: 1400px) {
  .tarea-rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .tarea-rejilla > .tarea-col:nth-child(3) { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
}
@media (max-width: 1000px) {
  .tarea-rejilla, .rejilla-form, .maestro-detalle { grid-template-columns: 1fr; }
  .tarea-rejilla > .tarea-col:nth-child(3) { grid-template-columns: 1fr; }
  .panel-fila { grid-template-columns: 1fr; }
  .panel-cat { border-right: 0; border-bottom: 1px solid var(--borde-suave); }
  .busca-rapida { display: none; }
}
@media (min-width: 2200px) {
  html { font-size: calc(16px * var(--escala, 1)); }
  .bloque { width: 250px; }
}

/* ---------- Menú de usuario (avatar) ---------- */
.menu-usuario { position: relative; }
.menu-usuario .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); background: #7c3aed; color: #fff;
  font-weight: 700; font-size: .9rem; letter-spacing: .02em; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.menu-usuario .avatar:hover, .menu-usuario .avatar[aria-expanded=true] { border-color: #fff; }
.menu-usuario .desplegable {
  position: absolute; right: 0; top: calc(100% + 10px); min-width: 250px;
  background: var(--tarjeta); color: var(--texto); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(15,25,40,.22), 0 2px 6px rgba(15,25,40,.12);
  padding: .45rem 0; z-index: 30;
}
.menu-usuario .desp-cabecera { padding: .7rem 1.1rem .6rem; }
.menu-usuario .desp-cabecera strong { display: block; font-size: 1.05rem; }
.menu-usuario .desp-cabecera small { color: var(--tenue); }
.menu-usuario .desplegable a {
  display: flex; align-items: center; gap: .8rem;
  padding: .6rem 1.1rem; color: var(--texto); font-size: 1rem;
}
.menu-usuario .desplegable a svg { flex: none; color: #4a5562; }
.menu-usuario .desplegable a:hover, .menu-usuario .desplegable a:focus { background: var(--fondo); text-decoration: none; outline: none; }
.menu-usuario .desplegable a.activo { font-weight: 700; }
.menu-usuario .desp-sep { height: 1px; background: var(--borde-suave); margin: .35rem 0; }
.menu-usuario .desp-fila { display: flex; align-items: center; gap: .8rem; padding: .45rem 1.1rem; }
.menu-usuario .desp-fila svg { flex: none; color: #4a5562; }
.menu-usuario .desp-fila label { flex: 1; white-space: nowrap; margin: 0; font-size: 1rem; }
.menu-usuario .desp-fila select { width: auto; flex: none; font-size: .85rem; padding: .2rem .4rem; }

/* ---------- Bloque Archivos: pestañas y vínculos ---------- */
.pestanas-archivo { display: flex; gap: .25rem; margin-bottom: .6rem; border-bottom: 1px solid var(--borde-suave); }
.pestanas-archivo button {
  border: 0; background: none; padding: .45rem .8rem; cursor: pointer; color: var(--tenue);
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 700; font-size: .9rem;
}
.pestanas-archivo button:hover { color: var(--texto); }
.pestanas-archivo button.activa { color: var(--primario); border-bottom-color: var(--primario); }
.form-vinculo input[name=url] { flex: 2; width: auto; min-width: 220px; }
.form-vinculo input[name=descripcion]:not(#x) { flex: 1; width: auto; min-width: 160px; }
.adjunto-vinculo { padding-left: .4rem; }
.adjunto-vinculo .ico-vinculo { flex: none; }
.adjunto-enlace .ico-vinculo { color: var(--primario); }
.adjunto-carpeta .ico-vinculo { color: #c58a00; }
.origen-vinculo { background: #e6f4ea; }
.origen-carpeta { background: #fdf0d2; }

/* ---------- Entrar con Microsoft ---------- */
.login-caja .btn-microsoft {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  background: #fff; color: #1f2933; border: 1px solid #8c8c8c; font-weight: 700; text-decoration: none;
}
.login-caja .btn-microsoft:hover { background: #f3f3f3; text-decoration: none; }
.login-separador { display: flex; align-items: center; gap: .6rem; margin: 1.1rem 0 1rem; color: var(--tenue); font-size: .82rem; }
.login-separador::before, .login-separador::after { content: ""; flex: 1; height: 1px; background: var(--borde); }

/* ---------- Mensajes: botón Nuevo y formulario plegado ---------- */
.btn-nuevo {
  display: inline-flex; align-items: center; gap: .3rem; cursor: pointer;
  border: 1px solid var(--primario); background: var(--tarjeta); color: var(--primario);
  border-radius: 999px; padding: .25rem .7rem .25rem .5rem; font: inherit; font-weight: 700; font-size: .85rem;
}
.btn-nuevo:hover { background: var(--primario); color: #fff; }
.btn-nuevo[aria-expanded=true] { visibility: hidden; }
.nuevo-post:not([hidden]) { margin-bottom: .9rem; padding-bottom: .9rem; border-bottom: 1px solid var(--borde-suave); }

/* ---------- Botón papelera (borrar mensaje) ---------- */
.btn-papelera {
  display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 6px; background: none; color: var(--tenue); cursor: pointer;
}
.btn-papelera:hover, .btn-papelera:focus-visible { background: #fdecea; color: var(--peligro); }

.checklist-nuevo:not([hidden]) { margin-top: .2rem; }
.checklist-nuevo input[name=texto] { flex: 1; width: auto; min-width: 0; }

/* ---------- Botones de icono (añadir / cerrar) ---------- */
.btn-icono {
  flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tarjeta); color: var(--tenue); cursor: pointer;
}
.btn-icono:hover, .btn-icono:focus-visible { color: var(--texto); border-color: var(--tenue); }
.btn-icono-ok { background: var(--primario); border-color: var(--primario); color: #fff; }
.btn-icono-ok:hover, .btn-icono-ok:focus-visible { background: var(--primario-osc); border-color: var(--primario-osc); color: #fff; }
.checklist-nuevo { gap: .35rem; }

/* ---------- Lista de comprobación: botón Editar y aviso ---------- */
.btn-editar { border: 0; background: none; padding: .1rem .2rem; cursor: pointer; font: inherit; font-size: .82rem; color: var(--tenue); }
.btn-editar:hover, .btn-editar:focus-visible { color: var(--primario); text-decoration: underline; }
.btn-editar[aria-pressed=true] { color: var(--primario); font-weight: 700; }
.editando .checklist li { background: #fffaf9; }
.dialogo { border: 0; border-radius: 10px; padding: 1.3rem 1.4rem 1.1rem; max-width: 380px; width: calc(100% - 32px); box-shadow: 0 12px 40px rgba(0,0,0,.25); color: var(--texto); }
.dialogo::backdrop { background: rgba(15,25,40,.45); }
.dialogo p { margin: 0 0 .6rem; }
.dialogo-titulo { font-weight: 700; font-size: 1.05rem; }
.dialogo-botones { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; }

/* Mensajes: la papelera solo se ve en modo edición */
.post .btn-papelera { display: none; }
.editando .post .btn-papelera { display: inline-grid; }
.editando .post.mio { background: #fffaf9; }
.post header { align-items: center; min-height: 28px; }

/* ---------- Plegar Mensajes / Chats ---------- */
.btn-plegar {
  flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; margin-right: -.6rem;
  border: 0; border-radius: 6px; background: none; color: var(--tenue); cursor: pointer;
}
.btn-plegar:hover, .btn-plegar:focus-visible { background: var(--fondo); color: var(--texto); }
.btn-plegar svg { transition: transform .15s; }
.tarjeta.plegada .btn-plegar svg { transform: rotate(-90deg); }
.tarjeta.plegada > :not(.tarjeta-cab) { display: none !important; }
.tarjeta.plegada .tarjeta-cab { margin-bottom: 0; }
.tarjeta.plegada .tarjeta-cab > :not(.btn-plegar):not(h2):not(.tenue) { display: none !important; }
.tarjeta.plegada .tarjeta-cab { cursor: pointer; }

/* Pantalla ancha (3 columnas): Mensajes plegado queda como franja y Chats/Archivos ocupan su sitio;
   Chats plegado deja solo su cabecera y Mensajes se ensancha */
@media (min-width: 1401px) {
  .tarea-rejilla.plegado-mensajes { grid-template-columns: minmax(0, 1fr) 48px minmax(0, 2.3fr); }
  /* Chats plegado: Mensajes ocupa las columnas 2 y 3, y debajo van la cabecera de Chats y Archivos al mismo ancho */
  .tarea-rejilla.plegado-chats:not(.plegado-mensajes) { grid-template-rows: auto 1fr; }
  .plegado-chats:not(.plegado-mensajes) > .tarea-col:nth-child(1) { grid-row: 1 / span 2; }
  .plegado-chats:not(.plegado-mensajes) > .tarea-col:nth-child(2),
  .plegado-chats:not(.plegado-mensajes) > .tarea-col:nth-child(3) { grid-column: 2 / 4; }
  .plegado-mensajes [data-bloque=mensajes] { padding: .7rem 0; }
  .plegado-mensajes [data-bloque=mensajes] .tarjeta-cab { flex-direction: column; align-items: center; gap: .7rem; }
  .plegado-mensajes [data-bloque=mensajes] .btn-plegar { margin: 0; }
  .plegado-mensajes [data-bloque=mensajes] h2 { margin: 0; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; }
  .plegado-mensajes [data-bloque=chats] .chat-mensajes { max-height: max(380px, calc(100vh - 340px)); }
}
/* Pantalla estrecha (bloques uno debajo de otro): el chat gana altura si Mensajes está plegado */
@media (max-width: 1000px) {
  .plegado-mensajes [data-bloque=chats] .chat-mensajes { max-height: 60vh; }
}

/* ---------- Archivos: panel de subida plegado tras "+ Nuevo" ---------- */
.archivos-nuevo:not([hidden]) { margin-bottom: .9rem; padding-bottom: .2rem; border-bottom: 1px solid var(--borde-suave); }
.pestanas-archivo { align-items: center; }
.pestanas-archivo .cerrar-panel { margin-left: auto; width: 30px; height: 30px; border-color: transparent; margin-bottom: 2px; }
.pestanas-archivo .cerrar-panel:hover { border-color: var(--borde); }

/* ---------- Archivos: papelera solo en modo edición ---------- */
.tabla-archivos .btn-papelera { display: none; }
.editando .tabla-archivos .btn-papelera { display: inline-grid; }

/* ---------- Archivos en la columna estrecha (pantalla ancha, Mensajes y Chats desplegados):
   cada fila muestra el icono del tipo (sin el nombre del archivo) y la descripción; al tener doble ancho se ve todo ---------- */
@media (min-width: 1401px) {
  .tarea-rejilla:not(.plegado-mensajes):not(.plegado-chats) .tabla-archivos th:nth-child(3),
  .tarea-rejilla:not(.plegado-mensajes):not(.plegado-chats) .tabla-archivos td:nth-child(3),
  .tarea-rejilla:not(.plegado-mensajes):not(.plegado-chats) .tabla-archivos th:nth-child(4),
  .tarea-rejilla:not(.plegado-mensajes):not(.plegado-chats) .tabla-archivos td:nth-child(4) { display: none; }
  .tarea-rejilla:not(.plegado-mensajes):not(.plegado-chats) .tabla-archivos .nombre,
  .tarea-rejilla:not(.plegado-mensajes):not(.plegado-chats) .tabla-archivos .tamano { display: none; }
  .tarea-rejilla:not(.plegado-mensajes):not(.plegado-chats) .tabla-archivos td.celda-archivo { width: 1%; white-space: nowrap; }
  .tarea-rejilla:not(.plegado-mensajes):not(.plegado-chats) .tabla-archivos .adjunto { padding: .2rem; }
}

/* ---------- Situación (texto clave de la tarea) ---------- */
:root { --situacion: #1a3a6b; }
.situacion { display: inline-flex; align-items: center; gap: .3em; color: var(--situacion); font-weight: 700; }
.situacion svg { width: 1.05em; height: 1.05em; flex: none; }
.bloque-situacion { display: flex; font-size: .85rem; margin-top: .2rem; }
.lista-situacion { display: flex; font-size: .85rem; margin-top: .15rem; }
.cab-situacion { font-size: 1.45rem; }
.campo-situacion { max-width: 260px; }
/* Situación con borde negro de esquinas rectas, ajustado al texto */
.situacion { border: 1px solid #000; border-radius: 0; padding: .1em .45em; }
.bloque-situacion, .lista-situacion { width: fit-content; max-width: 100%; }

/* ---------- Chats: participantes (desplegable con casillas) ---------- */
.sel-usuarios { position: relative; flex: none; }
.sel-boton {
  display: inline-flex; align-items: center; gap: .35rem; height: 34px; padding: 0 .55rem;
  border: 1px solid var(--borde); border-radius: var(--radio); background: var(--tarjeta); color: var(--texto);
  cursor: pointer; font: inherit; font-size: .88rem; max-width: 200px;
}
.sel-boton:hover, .sel-boton[aria-expanded=true] { border-color: var(--tenue); }
.sel-boton svg { flex: none; color: var(--tenue); }
.sel-texto { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sel-panel {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; width: 260px; max-height: 300px; overflow: auto;
  background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 8px; padding: .5rem .6rem;
  box-shadow: 0 8px 24px rgba(15,25,40,.18);
}
.sel-filtro { margin-bottom: .4rem; }
.sel-opciones { display: grid; gap: .15rem; }
.sel-opciones label.check { padding: .2rem .1rem; font-size: .9rem; }
.sel-panel .ayuda { margin: .45rem 0 0; font-size: .8rem; }
.chat-participantes { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .4rem .7rem; background: #fff; border-bottom: 1px solid var(--borde-suave); font-size: .85rem; }
.chat-participantes .sel-panel { right: 0; }
.chat-cab .restringido { display: inline-flex; align-items: center; gap: .2rem; color: var(--tenue); font-size: .8rem; }

/* Chats privados */
.sel-privado { display: flex !important; align-items: center; gap: .35rem; padding: .25rem .1rem .45rem; margin-bottom: .35rem; border-bottom: 1px solid var(--borde-suave); font-size: .88rem; }
.sel-privado svg { flex: none; color: var(--tenue); }
.sel-privado:has(input:disabled) { opacity: .55; }
.chat-cab .candado { display: inline-flex; color: var(--tenue); }

/* Archivos: icono de descarga a la derecha de cada fila */
.tabla-archivos td.celda-descargar { width: 1%; text-align: right; padding-right: .2rem; }
.btn-descargar { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 6px; color: var(--tenue); }
.btn-descargar:hover, .btn-descargar:focus-visible { background: var(--fondo); color: var(--primario); text-decoration: none; }
.tabla-archivos td.celda-borrar { width: 1%; }
/* Archivos: títulos de columna en minúsculas (con la primera en mayúscula, como están escritos) */
.tabla-archivos th { text-transform: none; letter-spacing: 0; font-size: .85rem; }

/* Tarea simple: solo el bloque de datos, a un ancho cómodo */
.tarea-rejilla.tarea-rejilla-simple { grid-template-columns: minmax(0, 900px) !important; }
.ocultos-simple { margin: 1rem 0 0; padding-top: .7rem; border-top: 1px dashed var(--borde); }
.campo-situacion { display: block; }
.formulario label.check.check-linea { display: flex; width: fit-content; margin-top: .5rem; }

/* Calendario: situación en una segunda línea dentro de cada tarea */
.cal-tarea:has(.cal-sit-fila) { flex-wrap: wrap; row-gap: .2rem; }
.cal-tarea .asunto { min-width: 0; flex: 1; }
.cal-sit-fila { flex-basis: 100%; display: flex; min-width: 0; }
.cal-situacion { font-size: .75rem; max-width: 100%; overflow: hidden; }
.cal-situacion span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-semana .cal-sit-fila { order: 3; }
.cal-semana .cal-tarea .meta { order: 4; }
.cal-semana .cal-situacion { font-size: .8rem; }
/* Búsqueda rápida de la barra: el texto escrito se veía blanco sobre fondo blanco */
.busca-rapida input:not(#x) { background: #fff; color: var(--texto); border-color: transparent; }
.busca-rapida input:not(#x)::placeholder { color: #8a96a3; }

/* Lista de comprobación: elementos asignados y edición en línea */
.checklist .asignado { font-size: .75rem; color: var(--primario); font-weight: 700; white-space: nowrap; }
.checklist li.bloqueado { color: #9aa5b1; }
.checklist li.bloqueado label { cursor: not-allowed; }
.checklist li.bloqueado .asignado { color: #9aa5b1; }
.checklist .edicion { display: none; flex: 1; gap: .35rem; align-items: center; min-width: 0; }
.editando .checklist .edicion { display: flex; }
.editando .checklist li label { display: none; }
.editando .checklist li .quien { display: none; }
.checklist .edit-txt { flex: 1; min-width: 0; padding: .3rem .45rem !important; }
.checklist .edit-asig { width: auto !important; flex: none; max-width: 130px; padding: .3rem .4rem !important; font-size: .85rem; }
.editando .checklist li.bloqueado { color: var(--texto); }