/* ============================================================
   SARP Admin · Productividad CM: proyectos, tareas y metas
   Estilos propios del módulo nuevo. Reusa las variables y los
   botones de styles.css; aquí solo va lo que no existía.
   ============================================================ */

/* --- Sub-pestañas dentro de Productividad CM --- */
.cm-secciones {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
  border-bottom: 1px solid var(--border, #e2e6ea);
  padding-bottom: 8px;
}
.cm-seccion {
  border: 1px solid transparent;
  background: transparent;
  color: var(--gray, #667);
  padding: 8px 16px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.cm-seccion:hover { background: var(--bg-soft, #f1f4f7); }
.cm-seccion.active {
  background: var(--primary, #139DCB);
  color: #fff;
}

/* --- Barra de herramientas --- */
.cmp-toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.cmp-toolbar .grow { flex: 1 1 auto; }
.cmp-select {
  padding: 8px 12px;
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  max-width: 100%;
}

.cmp-titulo { margin: 22px 0 10px; font-size: 15px; color: var(--gray, #667); font-weight: 600; }
.cmp-vacio { color: var(--gray, #889); text-align: center; padding: 28px 12px; }
.cmp-sub { font-size: 12.5px; color: var(--gray, #778); margin-top: 4px; }
.cmp-desc { font-size: 13px; color: var(--gray, #667); margin-top: 5px; }
.cmp-nota {
  font-size: 12.5px; color: var(--gray, #778);
  background: var(--bg-soft, #f6f8fa);
  border-radius: 8px; padding: 9px 12px; margin: 10px 0;
}
.cmp-resp {
  font-size: 13px; margin-top: 6px; padding: 7px 10px;
  background: var(--bg-soft, #f6f8fa); border-radius: 8px;
}
.cmp-alerta { font-size: 12.5px; color: #c0392b; margin-top: 6px; font-weight: 500; }

/* --- Tarjetas de proyecto --- */
.cmp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}
.cmp-card {
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}
.cmp-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cmp-card-acciones { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* --- Insignias de estado --- */
.cmp-badge {
  display: inline-block;
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}
.cmp-activo, .cmp-pendiente { background: #e7f3fb; color: #1a6a8c; }
.cmp-hecha, .cmp-terminado  { background: #e6f6ec; color: #1d7a44; }
.cmp-nohecha, .cmp-cancelado { background: #fdeaea; color: #b3261e; }
.cmp-vencida { background: #fdf1e0; color: #a35d00; }

/* --- Barra de avance --- */
.cmp-barra {
  height: 7px;
  background: var(--bg-soft, #eef1f4);
  border-radius: 999px;
  overflow: hidden;
  margin-top: 10px;
}
.cmp-barra-fill { height: 100%; background: var(--primary, #139DCB); border-radius: 999px; transition: width .3s; }
.cmp-barra-fill.ok    { background: #2e9e5b; }
.cmp-barra-fill.medio { background: #e2a03f; }
.cmp-barra-fill.bajo  { background: #d05a4e; }

/* --- Lista de tareas --- */
.cmp-lista { display: flex; flex-direction: column; gap: 10px; }
.cmp-tarea {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: flex-start;
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
}
.cmp-tarea-info { flex: 1 1 auto; min-width: 0; }
.cmp-tarea-tit { font-weight: 600; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cmp-tarea-acciones { display: flex; gap: 6px; flex-wrap: wrap; flex-shrink: 0; }
.cmp-tarea-ref {
  background: var(--bg-soft, #f6f8fa);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 14px;
}

/* --- Tablero del mes --- */
.cmp-metas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}
.cmp-meta-card {
  border: 1px solid var(--border, #e2e6ea);
  border-radius: 12px;
  padding: 16px;
  background: #fff;
}
.cmp-meta-tit { font-size: 13px; color: var(--gray, #667); font-weight: 600; }
.cmp-meta-num { font-size: 29px; font-weight: 700; margin-top: 5px; line-height: 1.1; }
.cmp-meta-de { font-size: 15px; font-weight: 400; color: var(--gray, #889); }
.cmp-cifras {
  display: flex; flex-wrap: wrap; gap: 8px 18px;
  margin: 14px 0 4px; font-size: 13px; color: var(--gray, #667);
}

/* --- Tabla por marca --- */
.cmp-tabla-wrap { overflow-x: auto; }
.cmp-tabla { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 380px; }
.cmp-tabla th, .cmp-tabla td {
  padding: 9px 12px; text-align: left;
  border-bottom: 1px solid var(--border, #eef1f4);
}
.cmp-tabla thead th { font-size: 12.5px; color: var(--gray, #778); font-weight: 600; }
.cmp-tabla tfoot th { border-top: 2px solid var(--border, #e2e6ea); border-bottom: none; }
.cmp-tabla td:not(:first-child), .cmp-tabla th:not(:first-child) { text-align: right; }

/* --- Zona de subida de archivos --- */
.cmp-drop {
  border: 2px dashed var(--border, #d7dde3);
  border-radius: 12px;
  padding: 22px 14px;
  text-align: center;
  cursor: pointer;
  color: var(--gray, #778);
  transition: border-color .15s, background .15s;
}
.cmp-drop:hover, .cmp-drop.over {
  border-color: var(--primary, #139DCB);
  background: var(--bg-soft, #f4f9fc);
}
.cmp-drop .ico { font-size: 26px; margin-bottom: 6px; }
.cmp-files { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.cmp-file { position: relative; width: 78px; height: 78px; border-radius: 9px; overflow: hidden; }
.cmp-file img, .cmp-file video { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmp-file-x {
  position: absolute; top: 3px; right: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.62); color: #fff;
  cursor: pointer; font-size: 15px; line-height: 1;
}

/* --- En el teléfono --- */
@media (max-width: 640px) {
  .cmp-tarea { flex-direction: column; }
  .cmp-tarea-acciones { width: 100%; }
  .cmp-tarea-acciones .btn { flex: 1 1 auto; }
  .cmp-toolbar { flex-direction: column; align-items: stretch; }
  .cmp-toolbar .grow { display: none; }
  .cmp-select, .cmp-toolbar .btn { width: 100%; }
  .cm-secciones { overflow-x: auto; flex-wrap: nowrap; }
  .cmp-meta-num { font-size: 25px; }
}

/* ============================================================
   Sección rehecha el 2026-09-09
   ============================================================ */

/* --- Títulos con contador --- */
.cmp-titulo{display:flex;align-items:center;gap:8px}
.cmp-cuenta{
  background:var(--light,#eef2f6);
  color:var(--gray,#5b6a7d);
  border-radius:999px;
  padding:1px 9px;
  font-size:12px;
  font-weight:700;
}
.cmp-titulo.plegable{cursor:pointer;user-select:none}
.cmp-titulo.plegable:hover{color:var(--dark,#0f172a)}
.cmp-flecha{display:inline-block;width:12px;color:var(--gray,#5b6a7d)}

/* --- Grupos de tareas --- */
.cmp-grupo{margin-bottom:6px}
.cmp-grupo.g-vencidas .cmp-tarea{border-left:4px solid #d32f2f}
.cmp-grupo.g-nohechas .cmp-tarea{border-left:4px solid #b45309}
.cmp-grupo.g-hechas .cmp-tarea{opacity:.82}

/* --- Urgencia de la fecha --- */
.vencida{color:#d32f2f;font-weight:700}
.urgente{color:#b45309;font-weight:700}

/* --- Tarjeta de proyecto --- */
.cmp-proy.apagada{opacity:.68}
.cmp-proy-cifras{
  display:flex;
  gap:14px;
  align-items:baseline;
  font-size:12.5px;
  color:var(--gray,#5b6a7d);
  margin-top:8px;
}
.cmp-proy-cifras b{color:var(--dark,#0f172a);font-size:15px}
.cmp-proy-cifras .cmp-pct{margin-left:auto;font-weight:700;color:var(--azul-texto,#0b6d8f)}
.cmp-ver-tareas{margin-top:12px;width:100%}

/* --- Adjunto de una tarea completada --- */
.cmp-adjunto{
  font-size:12.5px;
  color:var(--gray,#5b6a7d);
  margin-top:6px;
  padding:6px 10px;
  background:var(--bg-soft,#f6f8fa);
  border-radius:8px;
}
.cmp-adjunto a{color:var(--azul-texto,#0b6d8f)}

/* --- Invitación cuando no hay nada --- */
.cmp-invita{
  border:2px dashed #dbe4ea;
  border-radius:14px;
  padding:28px 22px;
  text-align:center;
  color:var(--gray,#5b6a7d);
  margin:14px 0;
}
.cmp-invita b{display:block;color:var(--dark,#0f172a);margin-bottom:6px;font-size:15px}
.cmp-invita p{font-size:13.5px;line-height:1.55;max-width:460px;margin:0 auto}

/* --- Botón de borrar: rojo solo al pasar por encima --- */
.cmp-borrar:hover{
  background:#fdeaea!important;
  border-color:#d32f2f!important;
  color:#b91c1c!important;
}

@media (max-width:640px){
  .cmp-proy-cifras{flex-wrap:wrap;gap:8px 12px}
  .cmp-proy-cifras .cmp-pct{margin-left:0}
}