/* ── Contenido ── */
.contenido {
  padding: 36px 40px;
}

.contenido-ancho {
  padding: 36px 40px;
  max-width: none !important;
}

/* ── Contenido ancho sin límite ── */
.contenido-ancho { max-width: none !important; }

/* ── Page header ── */
.pagina-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}

.pagina-titulo-wrap { display: flex; flex-direction: column; gap: 4px; }

.pagina-header h1 {
  font-size: 28px;
  font-weight: 800;
  color: var(--texto);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.pagina-header-sub {
  font-size: 13px;
  color: var(--texto-3);
}

.volver {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
  transition: var(--trans);
}

.volver:hover { color: var(--acento); }

/* ═══════════════════════════════════════
   BOTONES
═══════════════════════════════════════ */
.boton, .boton2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 22px;
  border-radius: var(--radio-pill);
  border: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--fuente);
  letter-spacing: 0.02em;
  transition: var(--trans-bounce);
  white-space: nowrap;
  outline: none;
}

.boton {
  background: var(--acento);
  color: #050e1a;
}

.boton:hover {
  background: var(--acento-hover);
  box-shadow: var(--sombra-neon);
  transform: translateY(-2px) scale(1.02);
}

.boton:active { transform: scale(0.97); }

.boton2 {
  background: transparent;
  color: var(--texto-2);
  border: 1px solid var(--borde-card);
}

.boton2:hover {
  border-color: var(--borde);
  color: var(--texto);
  background: var(--borde-sutil);
}

.boton-full { width: 100%; }

.boton-peligro {
  background: var(--peligro) !important;
  color: #fff !important;
}

.boton-peligro:hover {
  background: #ff2244 !important;
  box-shadow: 0 0 24px rgba(255,77,106,0.4) !important;
}

/* ═══════════════════════════════════════
   ALERTAS
═══════════════════════════════════════ */
.alerta {
  padding: 12px 18px;
  border-radius: var(--radio-sm);
  margin-bottom: 20px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alerta.error {
  background: var(--peligro-bg);
  color: #ffb3bf;
  border: 1px solid var(--peligro-borde);
}

.alerta.exito {
  background: var(--exito-bg);
  color: #a0f0d8;
  border: 1px solid var(--exito-borde);
}

/* ═══════════════════════════════════════
   BADGES
═══════════════════════════════════════ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radio-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.badge.neutro          { background: var(--borde-sutil); color: var(--texto-2); }
.badge.estado-pendiente  { background: var(--adv-bg); color: var(--advertencia); border: 1px solid var(--adv-borde); }
.badge.estado-en_progreso{ background: var(--acento-glow-2); color: var(--acento); border: 1px solid var(--borde); }
.badge.estado-bloqueado  { background: var(--peligro-bg); color: var(--peligro); border: 1px solid var(--peligro-borde); }
.badge.estado-terminado  { background: var(--exito-bg); color: var(--exito); border: 1px solid var(--exito-borde); }
.badge.prioridad-alta    { background: var(--peligro-bg); color: var(--peligro); border: 1px solid var(--peligro-borde); }
.badge.prioridad-media   { background: var(--adv-bg); color: var(--advertencia); border: 1px solid var(--adv-borde); }
.badge.prioridad-baja    { background: var(--exito-bg); color: var(--exito); border: 1px solid var(--exito-borde); }

/* ═══════════════════════════════════════
   VACÍO
═══════════════════════════════════════ */
.vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px;
  color: var(--texto-3);
  font-size: 14px;
  gap: 12px;
  text-align: center;
}

.vacio-chico { color: var(--texto-3); font-size: 13px; padding: 16px 0; }

/* ═══════════════════════════════════════
   PROYECTOS
═══════════════════════════════════════ */
.proyectos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

.proyecto-card {
  background: var(--fondo-card);
  border: 1px solid var(--borde-card);
  border-radius: var(--radio);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: var(--trans);
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.proyecto-card-accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--acento), var(--acento-dim));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.proyecto-card:hover { border-color: var(--borde); transform: translateY(-3px); box-shadow: var(--sombra-neon); }
.proyecto-card:hover .proyecto-card-accent { transform: scaleX(1); }

.proyecto-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.proyecto-icono {
  width: 40px; height: 40px;
  border-radius: var(--radio-sm);
  background: var(--acento-glow);
  border: 1px solid var(--borde);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
}

.proyecto-nombre {
  font-weight: 700;
  font-size: 16px;
  color: var(--texto);
  letter-spacing: -0.2px;
  flex: 1;
}

.proyecto-desc {
  font-size: 13px;
  color: var(--texto-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.proyecto-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--borde-sutil);
}

.proyecto-historial-link {
  font-size: 12px;
  font-weight: 700;
  color: var(--acento);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: var(--trans);
}

.proyecto-card:hover .proyecto-historial-link { gap: 8px; }

/* ═══════════════════════════════════════
   TABLA
═══════════════════════════════════════ */
.tabla-wrap {
  background: var(--fondo-card);
  border: 1px solid var(--borde-card);
  border-radius: var(--radio);
  overflow: hidden;
}

.tabla-nucleo {
  width: 100% !important;
  border-collapse: collapse;
  font-size: 13px;
}

.tabla-nucleo thead tr:first-child th {
  background: var(--fondo-sidebar);
  font-weight: 700;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-3);
  padding: 14px 22px;
  border-bottom: 1px solid var(--borde-sutil);
  white-space: nowrap;
}

.tabla-nucleo thead tr.filtros th {
  background: var(--fondo-sidebar);
  padding: 8px 10px;
  border-bottom: 1px solid var(--borde);
}

.tabla-nucleo tbody tr {
  border-bottom: 1px solid var(--borde-sutil);
  transition: background 0.15s;
}

.tabla-nucleo tbody tr:last-child { border-bottom: none; }
.tabla-nucleo tbody tr:hover { background: var(--fondo-card-2); }

.tabla-nucleo tbody td {
  padding: 15px 22px;
  vertical-align: middle;
  color: var(--texto-2);
}

.tabla-nucleo tbody td:first-child { color: var(--texto); font-weight: 500; }

.tarea-link { font-weight: 600; color: var(--texto); transition: color 0.15s; }
.tarea-link:hover { color: var(--acento); }

/* ═══════════════════════════════════════
   TAREA DETALLE
═══════════════════════════════════════ */
.tarea-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.tarea-detalle {
  background: var(--fondo-card);
  border: 1px solid var(--borde-card);
  border-radius: var(--radio);
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 0;
  overflow: hidden;
}

.tarea-detalle-main {
  padding: 32px;
  border-right: 1px solid var(--borde-sutil);
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.tarea-detalle-aside {
  padding: 28px 24px;
  background: var(--fondo-sidebar);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.tarea-badges { display: flex; flex-wrap: wrap; gap: 8px; }

.tarea-desc-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--acento);
  margin-bottom: 10px;
}

.tarea-desc {
  font-size: 14px;
  line-height: 1.8;
  color: var(--texto-2);
  white-space: pre-wrap;
}

.tarea-aside-seccion {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tarea-aside-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--texto-3);
}

.tarea-aside-valor {
  font-size: 13px;
  color: var(--texto);
  font-weight: 500;
}

/* Registros de tiempo */
.tarea-seccion-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--acento);
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borde-sutil);
  margin-bottom: 4px;
}

.registros-lista { display: flex; flex-direction: column; gap: 8px; }

.registro-item {
  background: var(--fondo-input);
  border: 1px solid var(--borde-sutil);
  border-radius: var(--radio-sm);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.registro-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.registro-responsable { font-weight: 700; font-size: 13px; color: var(--texto); }
.registro-fecha       { font-size: 12px; color: var(--texto-3); }
.registro-horas       { font-size: 13px; font-weight: 700; color: var(--acento); margin-left: auto; font-family: var(--fuente-mono); }
.registro-comentario  { font-size: 13px; color: var(--texto-2); line-height: 1.6; }

/* ═══════════════════════════════════════
   MÉTRICAS / HISTORIAL
═══════════════════════════════════════ */
.periodo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 28px;
}

.periodo-tab {
  padding: 6px 16px;
  border-radius: var(--radio-pill);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid var(--borde-sutil);
  background: transparent;
  color: var(--texto-3);
  transition: var(--trans);
  cursor: pointer;
  letter-spacing: 0.02em;
}

.periodo-tab:hover { border-color: var(--borde); color: var(--texto-2); }

.periodo-tab.activo {
  background: var(--acento-glow);
  border-color: var(--acento);
  color: var(--acento);
  box-shadow: 0 0 12px var(--acento-glow);
}

.metricas-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}

.metrica-card {
  background: var(--fondo-card);
  border: 1px solid var(--borde-card);
  border-radius: var(--radio);
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  transition: var(--trans);
}

.metrica-card::before {
  content: '';
  position: absolute;
  bottom: 0; left: 24px; right: 24px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--acento), transparent);
  opacity: 0.5;
}

.metrica-card:hover { border-color: var(--borde); box-shadow: var(--sombra-neon); }

.metrica-numero {
  font-size: 48px;
  font-weight: 900;
  color: var(--acento);
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -2px;
  font-family: var(--fuente-mono);
}

.metrica-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-3);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* ── Inline form helper ── */
.inline { display: inline; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
  .contenido, .contenido-ancho { padding: 20px 16px; }
  .pagina-header { flex-direction: column; }
  .tarea-detalle { grid-template-columns: 1fr; }
  .tarea-detalle-main { border-right: none; border-bottom: 1px solid var(--borde-sutil); }
  .tarea-detalle-aside { background: transparent; }
}

@media (max-width: 480px) {
  .pagina-header h1 { font-size: 22px; }
  .proyectos-grid { grid-template-columns: 1fr; }
}